Skip to main content
Payment iFrame V2 - Customizable
Support avatar
Written by Support
Updated over a month ago

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.

Table of Contents

  1. Getting Started

  2. Integration Steps

    1. Include SDK Script

    2. HTML Structure

    3. Custom CSS

    4. JavaScript Initialization

    5. Event Handling

  3. Clean design integration

Getting Started

Before you begin, please make sure you have the necessary credentials and access to the Sticky.io Web Payments SDK.

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 to pass custom css for the card elements, other css will also work 'cleanExistingCSS': false, // this will clean the existin design from the iframe }); // on click of button fetch token function paymentSubmit() { stickyio.tokenizeCard(); } // Set the onTokenSucess handler stickyio.onTokenSucess = function (token) { // on token success, default is adding 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 consoling 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.

Did this answer your question?