Using the Zotlo Checkout SDK

Learn about Zotlo Checkout SDK

Zotlo Checkout SDK allows you to embed a secure payment form directly into your website, providing your customers with a seamless checkout experience without leaving your site.

Quick Start

Installation

Add the zotlo-checkout package to your project:

npm install zotlo-checkout

Import the SDK

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

Initialize Checkout

const checkout = await ZotloCheckout({
  token: 'YOUR_CHECKOUT_TOKEN',
  packageId: 'YOUR_PACKAGE_ID',
  returnUrl: 'YOUR_RETURN_URL',
  language: 'en',
  events: {
    onSuccess() {
      // Actions to perform on successful payment
    },
    onFail() {
      // Actions to perform on failed payment
    }
  }
});

// Render the checkout form into the page element
checkout.mount('zotlo-checkout');

Note: The string 'zotlo-checkout' passed to mount is the id of the DOM element where the form will be embedded, for example:

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

Using via CDN

You can also include Zotlo Checkout SDK directly in the browser using CDN links:

unpkg:

<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:

<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:

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

<script>
  ZotloCheckout({
    token: 'YOUR_CHECKOUT_TOKEN',
    packageId: 'YOUR_PACKAGE_ID',
    language: 'en',
    events: {
      onSuccess() {
        // Başarılı işlem
      },
      onFail() {
        // Hatalı işlem
      }
    }
  }).then(function (checkout) {
    checkout.mount('zotlo-checkout');
  });
</script>

Parameters

These parameters specify the parameters and descriptions used in the Zotlo Checkout SDK.

Parameter	Required	Description
token	✅	The checkout token obtained from the Zotlo Console. You can find this in your project's Developer Tools > Checkout SDK page.
packageId	✅	The ID of the package you want to use.
returnUrl	✅	The URL to redirect the user after payment completion.
subscriberId	❌	(Optional) Default subscriber ID for registration; can be an email, phone number, or UUID v4.
events	❌	Event listeners that can be used during the checkout process.
events.onLoad	❌	Triggered after the form is loaded.
events.onSubmit	❌	Triggered after the form is submitted.
events.onSuccess	❌	Triggered after a successful payment.
events.onFail	❌	Triggered when a payment fails.

Methods

User methods available after Checkout is started:

mount(containerId: string)

Renders the Checkout form to the specified DOM element.

jsCopyEditcheckout.mount('zotlo-checkout');

refresh()

Refreshes the form.

jsCopyEditcheckout.refresh();

unmount()

Removes the form and deletes it from the DOM.

jsCopyEditcheckout.unmount();