***

title: JavaScript SDK
slug: integration/web/js-sdk
subtitle: Integrate Transak into your application using the Transak 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.

<Steps>
  <Step title="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)

    <Tabs>
      <Tab title="npm">
        ```bash
        npm install @transak/ui-js-sdk
        ```
      </Tab>

      <Tab title="yarn">
        ```bash
        yarn add @transak/ui-js-sdk
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Integrate Using the SDK">
    Initialize the SDK with `widgetUrl` and add event listeners in your app.

    **Example:**

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

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

    **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();
      };
    }, []);
    ```
  </Step>

  <Step title="Create Widget URL (using Backend Only)">
    Call the [Create Widget URL](/api/public/create-widget-url) to generate a Widget URL by securely passing the [widget parameters](/customization/query-parameters).

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

    <Frame>
      <div>
        A `widgetUrl` is valid for 5 minutes and can only be used once. A new `widgetUrl` must be generated for every user flow.
      </div>
    </Frame>

    **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"
      }
    }'
    ```
  </Step>
</Steps>

## 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>
        <code>
          TRANSAK_WIDGET_INITIALISED
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_WIDGET_OPEN
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_ORDER_CREATED
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_ORDER_SUCCESSFUL
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_ORDER_CANCELLED
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_ORDER_FAILED
        </code>
      </td>

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

    <tr>
      <td>
        <code>
          TRANSAK_WIDGET_CLOSE
        </code>
      </td>

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