Payment iFrame V2 - Customizable | sticky.io Help Center

Created: November 15, 2024

Updated: November 15, 2024

Welcome to the Sticky.io Web Payments SDK Integration Guide. This guide will help you seamlessly integrate our iFrame-based payment form into your website, allowing you to securely accept payments.

Getting Started
Integration Steps
1. Include SDK Script
2. HTML Structure
3. Custom CSS
4. JavaScript Initialization
5. Event Handling
Clean design integration

Getting Started

Before you begin, please make sure you have your sticky.io appkey available.

Integration Steps

Follow these steps to integrate the Sticky.io Web Payments SDK into your website.

1. Include SDK Script

In the <head> section of your HTML file, include the SDK script by adding the following code:

<script src="https://sticky.io/payments/jssdk-v2/stickyio-sdk.js"></script>

2. HTML Structure

Create an HTML form structure where you want to embed the payment form. Use the following structure as a template:

<form id="stickyio_order_form" onsubmit="return false;" action="submit.php">
  <div id="stickyio_card"></div>
  <button type="button" class="stickyio-btn" id="stickyio_submit" onclick="paymentSubmit()" disabled>
    Submit
  </button>
  <br />
  <input type="hidden" name="payment_token" id="stickyio_payment_token" value="" />
  <br />
</form>

3. Custom 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,
});

4. JavaScript Initialization

In your JavaScript code, initialize the SDK with your app key:

stickyio.init('YOUR_APP_KEY', { // Configuration options (if any) });

5. Event Handling

Set up event handlers for tokenization, error handling, and card validation:

// On click of button, fetch token
function paymentSubmit() {
  stickyio.tokenizeCard();
}

// Set the onTokenSuccess handler
stickyio.onTokenSuccess = function (token) {
  // Handle token success here (e.g., submit the form)
  document.getElementById('stickyio_payment_token').value = token;
  document.getElementById('stickyio_order_form').submit();
};

// Set the onTokenError handler
stickyio.onTokenError = function (errors) {
  // Handle token error here (e.g., display an error message)
  console.log('Received an error: ', errors);
};

// Set the card validation handler
stickyio.onCardValidation = function (valid) {
  // Handle card validation (e.g., enable/disable the submit button)
  document.getElementById('stickyio_submit').disabled = !valid;
};

Customization Options

You can customize the payment form by adding custom CSS, adjusting iframe dimensions, or making other stylistic changes as needed.

Example HTML form file

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sticky.IO Web Payments SDK</title>
</head>
<body>
    <form id="stickyio_order_form" onsubmit="return false;" action="submit.php">
        Name: <input type="text" name="full_name">
        Address: <input type="text" name="address">
        Select product: 
        <select name="product_to_buy">
            <option value="prod1">Product 1</option>
            <option value="prod2">Product 2</option>
            <option value="prod3">Product 3</option>
        </select>
        <div id="stickyio_card"></div>
        <button type="button" class="stickyio-btn" id="stickyio_submit" onclick="paymentSubmit()" disabled>Submit</button>
        <br />
        <input type="hidden" name="payment_token" id="stickyio_payment_token" value="" />
        <br />
    </form>

    <script src="http://myserver.com/jssdk-v2/stickyio-sdk.js"></script>
    <script>
        // Custom CSS for the CC inputs
        const customCss = `
            /* Add your custom CSS rules here */
            #stickyio_cc_number {
                color: blue;
            }
            #stickyio_cc_expiry {
                color: green;
            }
            #stickyio_cc_cvv {
                color: red;
            }
        `;

        // Initialize stickyio
        stickyio.init('6c28a002-f9fa-11eb-9a03-0242ac130003', {
            customCSS: customCss, // Allow custom CSS for the card elements, other CSS will also work
            cleanExistingCSS: false // This will clean the existing design from the iframe
        });

        // On click of button, fetch token
        function paymentSubmit() {
            stickyio.tokenizeCard();
        }

        // Set the onTokenSuccess handler
        stickyio.onTokenSuccess = function (token) {
            // On token success, add value to hidden element or handle as you want
            document.getElementById('stickyio_payment_token').value = token;
            document.getElementById('stickyio_order_form').submit();
        };

        // Set the onTokenError handler
        stickyio.onTokenError = function (errors) {
            // On token fetch error, console the errors or handle as you want
            console.log('Received an error: ', errors);
        };

        // Set the card validation handler
        stickyio.onCardValidation = function (valid) {
            // On card details validation, disable the submit button or handle as you want
            document.getElementById('stickyio_submit').disabled = !valid;
        };
    </script>
</body>
</html>

Output of Example HTML to Test the Token

Clean design integration

To use the iFrame totally clean you just have to pass the 'cleanExistingCSS': true, while initialization, that will clear sticky default template and give you simple generic elements, using the ids mentioned you can add any custom CSS to those inputs.

Additionally, you can also set the CSS to its parent container so that all those 3 elements can be aligned together, and you can create box, shadow, color size as per your existing page design. An example is depicted below:

When you add custom CSS for stickyio_card...

...which outputs like below...

These are just simple examples. A designer who has expertise in CSS HTML can update those in any manner using those elements IDs.

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

Table of Contents