The sticky.io Platform now has an easy way to accept payments online while reducing your PCI scope and keeping in compliance, since the card is stored with sticky.io. The Web Payments SDK provides a kit that provides a drop in piece of HTML and js to start tokenizing and vaulting credit cards through an iFrame. The iFrame will then return a token that can then be used to perform a sale or an authorization.

Please Note: There is front-end development work that must be done on the checkout page(s) to implement the Web Payments SDK correctly. Also, the service is only implemented for the sticky.io Payments Service. For api documentation, please visit this link.

Adding the Web Payments SDK to your Website(s)

  • Have a sticky.io representative provide the APP_ID needed as part of the js

  • Insert the Web Payments SDK HTML form to your appropriate checkout page(s):

    • <div id="stickyio_card"></div>

      <button class="stickyio-btn" id="stickyio_submit"></button>

      <input name="payment_token" id="stickyio_payment_token" type="hidden" value=""/>
  • Include the Web Payments SDK script in the header of your page:

    • <script src="https://services.dev.sticky.io/jssdk/stickyio-sdk.js"></script>
  • Insert the JavaScript portion on the page, making sure to replace YOUR_APP_ID with the appropriate app id given in step 1:

    • document.addEventListener('DOMContentLoaded', function() {
      const appId = 'YOUR_APP_ID';
      const cardCallback = function(card) {
      document.getElementById('stickyio_payment_token').value = card.payment_token;

      stickyio.creditCardForm(appId, cardCallback);

Testing the Web Payments SDK HTML Form

Once the steps above are completed, you should have an iFrame that would allow you to accept credit card information in a PCI compliant manner. In order to test the form, we've provided test payment cards below that can be used to simulate a successful transaction and return a payment_token that can then be stored and used

Test Payment Cards:

4242424242424242 Visa
5555555555554444 Mastercard
378282246310005 American Express
6011111111111117 Discover

Successful Response Example:

"status": "SUCCESS",
"code": 200,
"msg": "",
"data": {
"payment_token": "jRaxFaUHJqLcEEVmaeWjLB",
"cc_brand": "mastercard",
"cc_bin": "555555",
"cc_last_four": "4444",
"cc_exp_month": "09",
"cc_exp_year": "2022"

Did this answer your question?