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();

Last updated