JavaScript SDK | Transak

The Transak JavaScript SDK integration allows you to integrate Transak into your application, making it easy to launch and manage the Transak interface within your web project.

Install Transak Javascript SDK

The NPM page for the SDK can be found here: @transak/ui-js-sdk

npm

yarn

$ npm install @transak/ui-js-sdk

Integrate Using the SDK

Initialize the SDK with widgetUrl and add event listeners in your app.

Example:

1 import { TransakConfig, Transak } from '@transak/ui-js-sdk';
2 
3 const transakConfig: TransakConfig = {
4   widgetUrl: "https://global-stg.transak.com?apiKey=YOUR_API_KEY&sessionId=<YOUR_SESSION_ID>",
5   // .....
6 };
7 
8 const transak = new Transak(transakConfig);
9 
10 transak.init();
11 
12 // To get all the events
13 Transak.on('*', (data) => {
14   console.log(data);
15 });
16 
17 // This will trigger when the user closed the widget
18 Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
19   console.log('Transak SDK closed!');
20 });
21 
22 /*
23  * This will trigger when the user has confirmed the order
24  * This doesn't guarantee that payment has completed in all scenarios
25  * If you want to close/navigate away, use the TRANSAK_ORDER_SUCCESSFUL event
26  */
27 Transak.on(Transak.EVENTS.TRANSAK_ORDER_CREATED, (orderData) => {
28   console.log(orderData);
29 });
30 
31 /*
32  * This will trigger when the user marks payment is made
33  * You can close/navigate away at this event
34  */
35 Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
36   console.log(orderData);
37   transak.close();
38 });

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

1 useEffect(() => {
2   transak.init();
3 
4   // Cleanup code
5   return () => {
6     transak.close();
7   };
8 }, []);

Create Widget URL (using Backend Only)

Call the Create Widget URL to generate a Widget URL by securely passing the widget parameters.

The response returns a widgetUrl that should be passed as widgetUrl in Step 2.

A widgetUrl is valid for 5 minutes and can only be used once. A new widgetUrl must be generated for every user flow.

Example Request:

$ curl --request POST \
>   --url https://api-gateway-stg.transak.com/api/v2/auth/session \
>   --header 'access-token: YOUR_ACCESS_TOKEN' \
>   --header 'content-type: application/json' \
>   --data '{
>   "widgetParams": {
>     "apiKey": "YOUR_API_KEY",
>     "referrerDomain": "yourdomain.com"
>   }
> }'

Events

The Transak SDK emits the following events, which you can use to track state and user actions.

Event Name	Description
`TRANSAK_WIDGET_INITIALISED`	Widget initialised with query params
`TRANSAK_WIDGET_OPEN`	Widget fully loaded
`TRANSAK_ORDER_CREATED`	Order created by user
`TRANSAK_ORDER_SUCCESSFUL`	Order is successful
`TRANSAK_ORDER_CANCELLED`	Order is cancelled
`TRANSAK_ORDER_FAILED`	Order is failed
`TRANSAK_WIDGET_CLOSE`	Widget is about to close