Skip to main content

Integrate on site

There are two ways to start accepting payments on the site.

  1. Static items, that you can create on your account dashboard. You can follow the instructions provided in (Product Setup).
  2. Dynamic items, products that are hosted at your website, and need only payment options on Zoksh.

Embed script​

Include the script hosted at https://pay.sandbox.zoksh.com/public/embed.js to your site to enable payments on the site.

Trigger Payment flow​

Following example show how to trigger a payment flow on your website.

<body>
  <button id="pay_now">Pay now</button>
</body>
<script src="https://pay.sandbox.zoksh.com/public/embed.js" ></script>
<script>
  document.querySelector('#pay_now').addEventListener('click', async () => {
    const generateOrder = await fetch(YOUR_ORDER_CREATION_URL);
    const { orderId } = generateOrder.json();

    const mp = new Zoksh({
      order: orderId,
      mode: 'headless',
      environment: 'test', // test , prod
    });
    mp.subscribe('payment-init', (ev) => {
      console.log('Got payment init')
      console.log(ev);
    });
    mp.subscribe('payment-validated', (ev) => {
      console.log('Got ')
      console.log(ev);
    });
    mp.subscribe('payment-failed', (ev) => {
      console.log('Got failed')
      console.log(ev);
    });
    mp.subscribe('payment-processed', (ev) => {
      console.log('Got processed')
      console.log(ev);
    });
    mp.init();
  })
</script>

Events​

  1. payment-init : User has submitted the credentials form.
  2. payment-processed : User has made the transaction using their wallet.
  3. payment-validated : Payment has been successfully validated on Zoksh servers.
  4. payment-failed : Payment validation has failed on Zoksh servers.

Config options​

Following configurations are available for *Zoksh global object injected via embed script.

  1. order : String Dynamic order id created using Create order api call.

  2. product : String If you want to initiate a payment against static product from Zoksh dashboard.

  3. environment : enum Possible values are 'production' | 'test'

  4. mode : enum Possible values are

    a. headless : You are responsible for initiating the payment flow by calling init() method on Zoksh object b. button : Embed script renders a dynamic button which ll trigger the payment flow once activated.

  5. showNotificatons: Boolean , If you want to show payment notifications to user according to your site theme, instead of embed script showing default styled notifications. You'll need to subscribe to various events to show that. Defaults to true

  6. amount : String If you want to change the price of static product from dashboard. Works in conjuction with product and signature values. Please note, you can only update amount value and not the associated chains/tokens using this.

  7. signature : String Calcuate signature as described in signing docs to allow amount change.