Zlick Widget
Zlick Widget offers an easy to use method of accepting telecom payments from your customers. The widget takes care of most of the steps, and can be customized to suit your site's look and feel.
Getting Started
To get started, request your development account and development SDK by emailing to support@zlick.it. You will receive your client token and client secret which will be needed to integrate Zlick Widget on your website.
Add the SDK to your website
CDN
Add Zlick Widget SDK to your website after your own scripts.
<head>
<script src='path/to/your/javascript/files/index.js'></script>
<script src='https://unpkg.com/zlick-widget@1/dist/zlick-widget.js'></script>
</head>
The CDN package exposes a global variable in the window namespace called zlickWidget. You will use this to access the widget sdk.
Usage
Sample usage example and the methods available are documented below:
zlickWidget({
// Possible values 'sandbox', 'live'
// Payments are not charged in 'sandbox' env.
env: 'sandbox',
clientToken: '32-char client token',
purpose: 'purchase', // Possible values are 'purchase', 'subscribe'
// In case of 'purchase'
product: {
id: 'article-1', // Unique ID of the product
amount: 125 // amount in change (i.e. For 1.25 Euros, use 125 as value)
},
// In case of subscription
subscription: {
id: 'SU123_MONTHLY' // Subscription ID
},
clientUserId: 'user-123', // OPTIONAL. Any value passed here is stored and provided in webhook callback
// Called when user is successfully identified and authenticated by the widget.
// Note, this is only called for repeat visitors.
// Use this callback to give access to content automatically to users.
onAuthenticated: function ({ phone, userId }) {
},
// Called when purchase or subscription process completes successfully
onPaymentComplete: function ({ data, signed }) {
/**
Sample data object for purchase:
{
"userId": "10d1f693-a395-4376-ba50-4774f583c1X9",
"currency": "EUR",
"phone": "11123123123",
"transactionId": "5e187c11f5476f001363132c",
"type": "purchase",
"amount": 125,
"state": "confirmed",
"createdAt": "2020-01-10T13:28:49.072Z"
}
*/
/**
Sample data object for subscription:
{
"userId": "10d1f693-a395-4376-ba50-4774f583c1X9",
"currency": "EUR",
"phone": "11123123123",
"subscriptionId": "5e187c11f5476f001363132c",
"type": "subscribe",
"validFrom": "2020-01-10T13:28:49.072Z",
"validTo": "2020-01-10T13:28:49.072Z"
}
*/
/*
signed will always contain a JWT token containing the same payload as `data` and signed using your client secret.
In live applications, it is highly recommended to verify this signed token in your backend using your client token.
In your backend code, verify that the JWT is signed using your client token and the amount is correct.
*/
},
// Called when there is failure and widget cannot continue further
onFailure: function ({ message, zlickErrorCode }) {
}
}).render('#zlick-widget') // CSS selector of element that will contain zlick widget.