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
Getting Started
Integration Steps
Include SDK Script
HTML Structure
Custom CSS
JavaScript Initialization
Event Handling
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.