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