Checkout SDK

The Zotlo Web Checkout SDK allows you to display a seamless checkout form inside your web application. Your users can complete their purchase without leaving your site, while Zotlo securely handles payment processing, subscription creation, and 3D Secure (3DS) authentication.

Quick Start

1. Install the SDK

NPM

npm install zotlo-checkout

Yarn

yarn add zotlo-checkout

2. Import the SDK

import 'zotlo-checkout/dist/zotlo-checkout.css';
import ZotloCheckout from 'zotlo-checkout';

3. Initialize Checkout

const checkout = await ZotloCheckout({
  token: 'YOUR_CHECKOUT_TOKEN',
  packageId: 'YOUR_PACKAGE_ID',
  returnUrl: 'YOUR_RETURN_URL',
  language: 'en',
  customParameters: {
    myCustomParam: 'OK!'
  },
  events: {
    onSuccess(result) {
      // Payment succeeded
    },
    onFail(error) {
      // Payment failed
    }
  }
});

4. Mount Checkout Form

HTML

<div id="zotlo-checkout"></div>

JavaScript

checkout.mount('zotlo-checkout');

Using via CDN

UNPKG

HTML

<link rel="stylesheet" href="https://unpkg.com/zotlo-checkout/dist/zotlo-checkout.css" />
<script src="https://unpkg.com/zotlo-checkout/dist/zotlo-checkout.min.js"></script>

jsDelivr

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zotlo-checkout/dist/zotlo-checkout.css" />
<script src="https://cdn.jsdelivr.net/npm/zotlo-checkout/dist/zotlo-checkout.min.js"></script>

Usage Example

HTML

<div id="zotlo-checkout"></div>

<script>
  ZotloCheckout({
    token: 'YOUR_CHECKOUT_TOKEN',
    packageId: 'YOUR_PACKAGE_ID',
    returnUrl: 'YOUR_RETURN_URL',
    language: 'en',
    events: {
      onSuccess(result) {
        alert('Payment Success!');
      },
      onFail(error) {
        alert(error.message);
      }
    }
  }).then(function (checkout) {
    checkout.mount('zotlo-checkout');
  });
</script>

Configuration Parameters

Parameter	Required	Description
token	Yes	Checkout token from Zotlo Dashboard → Developer Tools → Checkout SDK
packageId	Yes	ID of the package to be purchased
returnUrl	Yes	URL to redirect after payment or 3DS
subscriberId	No	Prefilled subscriber identifier (email, phone, UUID v4)
style	No	Custom styling configuration
customParameters	No	Custom key-values sent to webhooks
events	No	Event listeners during checkout lifecycle

Event Listeners

onLoad

JavaScript

onLoad?: (params: IFormLoad) => void;

onSubmit

JavaScript

onSubmit?: () => void;

onSuccess

JavaScript

onSuccess?: (result: PaymentDetail) => void;

onFail

JavaScript

onFail?: (error: FailEventData) => void;

onInvalidForm

JavaScript

onInvalidForm?: (error: IFormInvalid) => void;

SDK Methods

mount(containerId: string)

Embeds the checkout form into a DOM element.

refresh()

Reloads the form (e.g., after a style or language update).

unmount()

Removes checkout form from the DOM.

Branding & Styling

You can override default styles configured in Zotlo Dashboard.

JavaScript

style: {
  design: {
    theme: 'mobileapp',
    borderWidth: 2,
    backgroundColor: '#CCCCCC'
  },
  success: {
    show: true,
    waitTime: 20
  }
}

More details are available in IZotloCheckoutStyle.