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();
  };
}, []);