Introduction
The sticky.io Payments iFrame offers a secure, PCI DSS-compliant method to accept payments on your website. By incorporating our solution, sensitive card data will be handled securely on our servers, reducing your compliance obligations.
The sticky.io Payments iFrame will allow consumers to securely enter their payment details and complete transactions on the merchant’s site without being redirected to another page.
Integration Requirements
To integrate the Sticky Payment iFrame on your checkout page, you need the following:
An active account with us
Basic knowledge of HTML, CSS, and JavaScript (or a team member who is proficient with each)
Integration Steps
Follow these steps to integrate the sticky.io Payments iFrame into your checkout experience.
Step 1: Include the iFrame Script
Include the following script tag in your HTML file's header:
HTML
<div id="stickyio_card"></div>
<button class="stickyio-btn" id="stickyio_submit"></button>
<input name="payment_token" id="stickyio_payment_token" type="hidden" value=""/>
</script>
Step 2: Including the SDK
HTML
<script src="https://cdn.sticky.io/jssdk/stickyio-sdk.js"></script>div>
Step 3: Initialize the iFrame
Use the following JavaScript code to initialize the iFrame:
Javascript
document.addEventListener('DOMContentLoaded', function() {
const appId = 'YOUR_APP_KEY';
const cardCallback = function (card) {
document.getElementById('stickyio_payment_token').value = card.payment_token;
}
stickyio.creditCardForm(appId, cardCallback);
});
Replace 'YOUR_APP_KEY' with the actual appkey from your sticky.io URL ('appkey'.sticky.io)
(cardCallback and creditCardForm functions)
Step 4: Capture the Payment
When the order is submitted, the payment_token
field should contain the token sent back from the merchant’s CRM, so when sent to the new_order
API, the CRM will see the payment_token
field and grab the card information using it.
Please note that the card information SHOULD NOT be sent in the new_order
API request.
Previewing the iFrame
Below is a depiction of the iFrame as it might appear on your website's checkout page.
Test cards
Once you have integrated the iFrame, you will need to test it to ensure it works properly. You can create a test order and submit it through the iFrame.
4242424242424242 Visa
5555555555554444 Mastercard
378282246310005 American Express
6011111111111117 Discover
Important Notes
Payment tokens generated using this method are valid for 24 hours after creation. If a token is not used to place an order within 24 hours, the token will expire. Tokens are one-time use and are removed after the first successful order is placed using the token. Using a token after its expiration or passing a previously used token in a second new order request will result in an error response.
Currently, the following payment gateways are not compatible with the sticky.io iFrame. Other gateways that impose a redirect for 3D Secure verification at checkout are also not compatible.
Stripe
Currently, the following alternative payment methods are not compatible with the sticky.io iFrame. Other alternative payment methods that are not listed may also not be compatible. Please consult your sticky.io Representative with questions.
Apple Pay
PayPal
Google Pay
That's it! Congratulations as you've now successfully implemented the sticky.io Payments iFrame into your checkout page.