Transak SDK

A JavaScript SDK for decentralized applications to onboard their global user base with fiat currency.

Installation

npm i @transak/ui-js-sdk

Example usage

<div id="transakMount"></div>

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

// Complete example with session URL
const initializeTransak = async () => {
  const transakConfig: TransakConfig = {
    widgetUrl: 'api-generated-widgetUrl', // Required
    containerId: 'transakMount', // Id of the element where you want to initialize the iframe
    widgetWidth: '100%', // Optional widget dimensions
    widgetHeight: '600px',
  };

  let transak = new Transak(transakConfig);
  transak.init();

  return transak;
};

// Initialize the widget
const transak = await initializeTransak();

// 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.cleanup();
});

TransakConfig

| Property | Type | Required | Description | | :----------- | :----- | :------- | :----------------------------------------------------------------------------------------------------------------------- | | widgetUrl | string | Yes | API generated widgetUrl | | containerId | string | No | HTML element ID to mount the widget (omit for modal) | | widgetWidth | string | No | Widget width (e.g., '100%', '400px') | | widgetHeight | string | No | Widget height (e.g., '600px', '100vh') |

Using Modal UI

If you want to use our modal UI, do not pass the containerId and use transak.close() instead of transak.cleanup()

React Gotchas

Remember to clean up by using the transak.cleanup() or transak.close()

useEffect(() => {
  return () => {
    transak.cleanup();
  };
}, []);

License

ISC Licensed. Copyright (c) Transak Inc.