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:

Zlick Widget Integration Flow

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

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.