To use the Transak widget with your React application, you will need to use [@transak/transak-sdk](<>) (Transak’s JavaScript SDK).

Add the Transak SDK as a dependency using yarn or npm:

# Using yarn
$ yarn add @transak/transak-sdk

# Using npm
$ npm install @transak/transak-sdk

Connecting the SDK to Transak

import transakSDK from '@transak/transak-sdk'

let transak = new transakSDK({
    apiKey: '4fcd6904-706b-4aff-bd9d-77422813bbb7',  // Your API Key
    environment: 'STAGING', // STAGING/PRODUCTION
    defaultCryptoCurrency: 'ETH',
    walletAddress: '', // Your customer's wallet address
    themeColor: '000000', // App theme color
    fiatCurrency: '', // INR/GBP
    email: '', // Your customer's email address
    redirectURL: '',
    hostURL: window.location.origin,
    widgetHeight: '550px',
    widgetWidth: '450px'


// To get all the events
transak.on(transak.ALL_EVENTS, (data) => {

// This will trigger when the user marks payment is made.
transak.on(transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {

Query Parameters

You can pass several arguments as query parameters to customize the widget further.

Follow the below link to get the API Key


Using the WebSocket you can track the order easily