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.
Widget Integration Flow
Here is a basic overview of how the widget integration works:
Add the SDK to your website
Add Zlick Widget SDK to your website after your own scripts.
<head>
<script type='text/javascript' src='path/to/your/javascript/files/index.js'></script>
<script type='text/javascript' src='https://cdn.zlick.it/zlick-widget-sdk-verion'></script>
</head>
Create a div
in your page with the id zlick
. Zlick Widget SDK will host the iframe widget inside this div.
<div id="zlick"></div>
Once you've included the SDK, the SDK exposes a global variable called zlickWidget
. You will be abke to use this object to call zlick methods.
Important Note About JWT tokens
Many of the methods below use JWT tokens as function inputs. Instructions to generate these JWT tokens can be found here.
API
initZlick(params)
This method mounts the iframe widget and starts the purchase or subscription process. Returns a promise that resolves when the process completes.
For more information about subscriptions, see subscriptions flow.
Parameters
- params: An object containing following properties:
- token (string): JWT Token containing the purchase payload or subscription payload
Response
Returns a Promise that resolves to the following object with some properties conditional on the token payload provided.
{
apiClientToken: 'YOUR API CLIENT TOKEN',
status: 'purchse status (success, fail)',
userId: 'userId for user who purchased content',
amount: 'transaction price in change (cents, pennies etc)',
validFrom: 'only in case of subscription',
validTo: 'only in case of subscription',
_Id : 'transaction / subscription ID',
product: 'product Id'
}
Example Solution
Demo implementation on how to do an integration with Zlick Widget:
const jwt = require('jsonwebtoken')
window.onload = async function () {
try {
// JWT token must have either purchase payload or subscription payload
const response = await zlickWidget.initZlick({token: 'SIGNED JWT TOKEN WITH PAYLOAD'})
let payload = verifyAndDecodeResponse(response)
if (payload.status == 'success') appendHiddenContent()
else if (payload.status = 'purchasesNotAllowed') appendFallback()
} catch(error) {
appendErrorContent(error.message)
}
}
function verifyAndDecodeResponse(responseToken) {
// This is for demo purposes only. In a real application, this function would send the response to backend which will
// verify the signed response using its client secret
return jwt.decode(response)
}
function appendHiddenContent () {
let secretDiv = document.getElementById('secret')
// Of course, one should replace this with secure API call to fetch hidden content, its just for demo purposes.
// We recommend to send JWT token that Zlick sent as response to your back-end for verification.
let hiddenContent = document.createTextNode('This is the super secret hidden stuff that You just brought.')
secretDiv.appendChild(hiddenContent)
}
function appendErrorContent (message) {
// fall back to other payment options, show your error messages etc. This is just demo implementation
let secretDiv = document.getElementById('secret')
let hiddenContent = document.createTextNode(message)
secretDiv.appendChild(hiddenContent)
}
function appendFallback () {
// what ever the fallback might be, maybe offering other payment providers etc.
document.getElementById('zlick').style.display = 'none'
}
Widget Demo
Full demo solution is over here. You will not be charged for actions you perform there.