Product Documentation

Transak SDK (React/Vue/Angular/TS)

You can integrate Transak into your project using our SDK.

Check out this page for more information about SDK configuration.

Using NPM Package (v2/v1)

πŸ“˜

Migrating from v1 to v2

If you want to migrate to v2 please follow the guide here.

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

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

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

import { TransakConfig, Transak } from '@transak/transak-sdk';

const transakConfig: TransakConfig = {
  apiKey: '<your-api-key>', // (Required)
  environment: Transak.ENVIRONMENTS.STAGING/Transak.ENVIRONMENTS.PRODUCTION, // (Required)
  // .....
  // For the full list of parameters check the link below
};

const transak = new Transak(transakConfig);

transak.init();

// To get all the events
Transak.on('*', (data) => {
  console.log(data);
});

// This will trigger when the user closed the widget
Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
  console.log('Transak SDK closed!');
});

/*
* This will trigger when the user has confirmed the order
* This doesn't guarantee that payment has completed in all scenarios
* If you want to close/navigate away, use the TRANSAK_ORDER_SUCCESSFUL event
*/
Transak.on(Transak.EVENTS.TRANSAK_ORDER_CREATED, (orderData) => {
  console.log(orderData);
});

/*
* This will trigger when the user marks payment is made
* You can close/navigate away at this event
*/
Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
  console.log(orderData);
  transak.close();
});

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

let transak = new transakSDK({
  apiKey: '<YOUR_API_KEY>', // (Required)
  environment: '<STAGING/PRODUCTION>', // (Required)
  // .....
  // For the full list of parameters 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();
});

Refer here for the full list of parameters

🚧

React: Cleanup

If you are using React 18+, do not forget to run the cleanup code.

useEffect(() => {
  transak.init();

  // Cleanup code
  return () => {
    transak.close();
  };
}, []);

Using CDN (v1 only)

Please use the latest version from here and replace the same in the CDN URL

https://cdn.transak.com/js/sdk/<package_version_goes_here>/transak.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <script async src="https://cdn.transak.com/js/sdk/1.4.1/transak.js"></script>
    </head>

    <body>
        <script>
          function launchTransak() {
            let transak = new TransakSDK.default({
              apiKey: '<YOUR_API_KEY>', // (Required)
              environment: '<STAGING/PRODUCTION>', // (Required)
              // .....
              // For the full list of parameters 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>

Updated 8 days ago