> For a complete page index, fetch https://docs.transak.com/llms.txt

# JavaScript SDK

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](https://www.npmjs.com/package/@transak/ui-js-sdk)

#### npm

```bash
npm install @transak/ui-js-sdk
```

#### yarn

```bash
yarn add @transak/ui-js-sdk
```

#### Integrate Using the SDK

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

**Example:**

**`SDK v2 - TypeScript`**

```typescript title="SDK v2 - TypeScript"
import { TransakConfig, Transak } from '@transak/ui-js-sdk';

const transakConfig: TransakConfig = {
  widgetUrl: "https://global-stg.transak.com?apiKey=YOUR_API_KEY&sessionId=<YOUR_SESSION_ID>",
  // .....
};

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();
});
```

**`SDK v1 - JavaScript`**

```javascript title="SDK v1 - JavaScript"
import transakSDK from '@transak/transak-sdk';

let transak = new transakSDK({
  widgetUrl: "https://global-stg.transak.com?apiKey=YOUR_API_KEY&sessionId=<YOUR_SESSION_ID>",
  // .....
});

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();
});
```

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

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

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

#### Create Widget URL (using Backend Only)

Call the [Create Widget URL](/api/public/create-widget-url) API from your backend to generate a secure widget url using

Query 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:**

```bash
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.

<table>
  <thead>
    <tr>
      <th>
        Event Name
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `TRANSAK_WIDGET_INITIALISED`
      </td>

      <td>
        Widget initialised with query params
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_WIDGET_OPEN`
      </td>

      <td>
        Widget fully loaded
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_ORDER_CREATED`
      </td>

      <td>
        Order created by user
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_ORDER_SUCCESSFUL`
      </td>

      <td>
        Order is successful
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_ORDER_CANCELLED`
      </td>

      <td>
        Order is cancelled
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_ORDER_FAILED`
      </td>

      <td>
        Order is failed
      </td>
    </tr>

    <tr>
      <td>
        `TRANSAK_WIDGET_CLOSE`
      </td>

      <td>
        Widget is about to close
      </td>
    </tr>
  </tbody>
</table>

> Integrate Transak into your application using the Transak JavaScript SDK