Integrating with the sticky.io Payments iFrame

**NOTE** Please Note that the iFrame will not work with the Bill 1st and Reach gateways.

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 Notes on 3DS

3DS Support in Our iFrame:

✅ Works if the gateway handles 3DS entirely server-side (e.g., Genesis, PayXpert).
❌ Does NOT work if the gateway requires frontend JavaScript to access the Credit Card information - (e.g., Bill1st, Sticky 3D Verify).

Key Takeaways:

3D Verify (client-side 3DS) is incompatible with our iFrame since it restricts access to raw card fields.
Bill1st requires JavaScript to read the BIN, making it incompatible.
PayXpert does not require JavaScript for 3DS, so it works fine. the Sticky Payment iFrame on your checkout page, you need the following:

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: Customize with CSS

You can customize the appearance of the card input elements by adding custom CSS rules. Here's an example of how to add custom CSS:

const customCss = `
  /* Add your custom CSS rules here */
  #stickyio_cc_number {
    color: blue;
  }
  #stickyio_cc_expiry {
    color: green;
  }
  #stickyio_cc_cvv {
    color: red;
  }
`;

// Pass custom CSS to the SDK during initialization
stickyio.init('YOUR_APP_ID', {
  'customCSS': customCss,
  'cleanExistingCSS': false,
});

Step 4: 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);
});

Add the following snippet to your checkout page:

Replace 'YOUR_APP_KEY' with the actual appkey from your sticky.io URL (e.g. 'appkey'.sticky.io)
Create a hidden input field in your checkout form called with an ID of 'stickyio_payment_token'.

Step 5: Capture the Payment

When the order is submitted, the payment_token field should contain the token sent back from the merchant’s CRM (the value of the hidden 'stickyio_payment_token' field), 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 default iFrame as it might appear on your website's checkout page. This is without applied CSS customization.

Here is an example of example HTML for a customized iframe to test the tokenization process.

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.
The iFrame will tokenize the credit card and that is its function. If you are working with 3DS the checkout page will need to be coded to handle the 3DS redirect.
Currently, the following alternative payment methods are not compatible with the sticky.io iFrame. These Payment methods offer unique proprietary buttons that will allow tokenization and use of their services. 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.