Integrating with the sticky.io Payments iFrame

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.