How does it work?

  • End user visits your website and arrives on the step involving Zlick Widget

  • End user is guided through the payment flow

  • When the payment process is completed, Zlick widget will return the JWT token containing user, product and purchase statuses


Getting started

Request your development account and development widget SDK by emailing to support@zlick.it


Add SDK to webpage

Add zlick-widget.js script to your webpage:

<head>
  <script type='text/javascript' src='path/to/your/javascript/files/index.js'></script>
  <script type='text/javascript' src='https://cdn.zlick.it/ask-for-latest-sdk-version.min.js'></script>
</head>

Function input

Zlick supports 2 main use cases - single and recurring payments

Single Payments

In this use case customer should define payload and sign it with secret. Example:

const jwt = require('jsonwebtoken')

async function zlick() {
  const token = signJwtToken()
  const response = await zlickWidget.initZlick({token: token})
}

function signJwtToken () {
  const payload = {
    apiClientToken: 'ZLICK WILL PROVIDE THAT',
    product: { 
      amount: 'AMOUNT IN CHANGE (cents, pennies, etc)',
      productId: 'YOUR PRODUCT ID',
    }
  }
  return jwt.sign(payload, process.env.ZLICK_SECRET)
}

Recurring payments (subscriptions)

In this use case product configuration is defined beforehand and managed by Zlick, so there is no need to define full product block:

const jwt = require('jsonwebtoken')

async function zlick() {
  const token = signJwtToken()
  const response = await zlickWidget.initZlick({token: token})
}

function signJwtToken () {
  const payload = {
    apiClientToken: 'ZLICK WILL PROVIDE THAT',
    productName: 'ZLICK WILL PROVIDE THAT'
  }
  return jwt.sign(payload, process.env.ZLICK_SECRET)
}


Response

Zlick will return JWT token signed with client secret. Example payload

{
  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

const jwt = require('jsonwebtoken')

window.onload = async function () {
  try {
    // input then either token or apiClientToken and contentId
    const response = await zlickWidget.initZlick({token: 'SIGNED JWT TOKEN WITH PAYLOAD'})
    // of course one should verify this token, decode is just for demo
    let payload = jwt.decode(response)
    if (payload.status == 'success') appendHiddenContent()
    else if (payload.status = 'purchasesNotAllowed') appendFallback()
    else appendErrorContent(error.message)
  } catch(error) {
    appendErrorContent(error.message)
  }
}

function appendHiddenContent () {
  let secretDiv = document.getElementById('secret')
  // Of cource, 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'
}
      

Full demo solution is over here