🖥 Web SDK integration

Angular, React or Vue

You can integrate Transak into your project using our SDK.

The NPM page for the SDK can be found here: https://www.npmjs.com/package/@transak/transak-sdk

Installation

# Using yarn
$ yarn add @transak/transak-sdk

# Using npm
$ npm install @transak/transak-sdk

Example usage

Refer here for the full list of customisation options

import transakSDK from '@transak/transak-sdk';

let transak = new transakSDK({
  apiKey: '<your-api-key>', // (Required)
  environment: '<environment: STAGING/PRODUCTION>', // (Required)
  // .....
  // For the full list of customisation options check the link above
});

transak.init();

// To get all the events
transak.on(transak.ALL_EVENTS, (data) => {
  console.log(data);
});

// This will trigger when the user closed the widget
transak.on(transak.EVENTS.TRANSAK_WIDGET_CLOSE, (orderData) => {
  transak.close();
});

// This will trigger when the user marks payment is made
transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
  console.log(orderData);
  transak.close();
});

Javascript SDK

Refer here for the full list of customisation options

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script async src="https://cdn.transak.com/js/sdk/transak-v1.js"></script>
</head>

<body>
  <script>
    function launchTransak() {
      let transak = new TransakSDK.default({
        apiKey: '<your-api-key>', // (Required)
        environment: '<environment: STAGING/PRODUCTION>', // (Required)
        // .....
        // For the full list of customisation options check the link above
      });

      transak.init();

      // To get all the events
      transak.on(transak.ALL_EVENTS, (data) => {
        console.log(data);
      });

      // This will trigger when the user closed the widget
      transak.on(transak.EVENTS.TRANSAK_WIDGET_CLOSE, (orderData) => {
        transak.close();
      });

      // This will trigger when the user marks payment is made
      transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
        console.log(orderData);
        transak.close();
      });
    }
    window.onload = function() {
      launchTransak()
    }
  </script>
</body>

</html>