***

title: WebSockets
slug: features/websockets
subtitle: Receive real-time order updates on your server without polling.
-------------------------------------------------------------------------

Transak uses WebSockets to push real-time order updates to your server and sends event data continuously over a live connection to ensure faster updates.

<div>
  <div>
    Transak WebSockets are powered by **Pusher Channels**. Use the **Pusher client library** for your platform, as a plain WebSocket client is not compatible.

    **Pusher App Key:** `1d9ffac87de599c61283` | **Cluster:** `ap2`
  </div>
</div>

## When to Use?

<Table align={["left", "left", "left"]}>
  <thead>
    <tr>
      <th>
        Use Case
      </th>

      <th>
        Channel
      </th>

      <th>
        How to track
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        Track a single order in your frontend
      </td>

      <td>
        Public
      </td>

      <td>
        By Order ID
      </td>
    </tr>

    <tr>
      <td>
        Track a specific order using your own reference
      </td>

      <td>
        Public
      </td>

      <td>
        By API Key + 

        <code>partnerOrderId</code>
      </td>
    </tr>

    <tr>
      <td>
        Track all orders server-side
      </td>

      <td>
        Private
      </td>

      <td>
        Encrypted, backend only
      </td>
    </tr>
  </tbody>
</Table>

***

## Channels

<Table align={["left", "left", "left"]}>
  <thead>
    <tr>
      <th>
        Channel
      </th>

      <th>
        Channel Name
      </th>

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

  <tbody>
    <tr>
      <td>
        Receive order updates using the order ID
      </td>

      <td>
        <code>
          {"${END_CUSTOMER_ORDER_ID}"}
        </code>
      </td>

      <td>
        <strong>Public channel</strong>

        : Track an order by entering the order ID in the channel name.
      </td>
    </tr>

    <tr>
      <td>
        Receive order updates using your API Key and 

        <code>partnerOrderId</code>
      </td>

      <td>
        <code>
          {"${API_KEY}_${partnerOrderId}"}
        </code>
      </td>

      <td>
        <strong>Public channel</strong>

        : Track an order using your API key and your own order reference (

        <code>partnerOrderId</code>

        ). Generate a unique order ID and pass it as the 

        <code>partnerOrderId</code>

         query parameter before opening the widget.
      </td>
    </tr>

    <tr>
      <td>
        Receive all order updates using your API Key & Access Token
      </td>

      <td>
        <code>
          {"${API_KEY}"}
        </code>
      </td>

      <td>
        <strong>Private channel</strong>

        : Track all orders using your 

        <code>API_KEY</code>

         & 

        <code>ACCESS_TOKEN</code>

        . The payload is encrypted - decrypt it with your 

        <code>ACCESS_TOKEN</code>

         using the 

        <code>jsonwebtoken</code>

         npm library.
      </td>
    </tr>
  </tbody>
</Table>

<Frame>
  <div>
    For the private channel stream, ensure the WebSocket connection is handled by your backend application, as exposing it on the client side may compromise your Access Token.
  </div>
</Frame>

## Events

<Tabs>
  <Tab title="On Ramp / NFT Checkout">
    <Table align={["left", "left", "left"]}>
      <thead>
        <tr>
          <th>
            WebSocket Event Code
          </th>

          <th>
            Status
          </th>

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

      <tbody>
        <tr>
          <td>
            <Badge intent="warning" minimal>ORDER_CREATED</Badge>
          </td>

          <td>
            `AWAITING_PAYMENT_FROM_USER`
          </td>

          <td>
            When the order has been created but the payment has not yet been received.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="info" minimal>ORDER_PAYMENT_VERIFYING</Badge>
          </td>

          <td>
            `PAYMENT_DONE_MARKED_BY_USER`
          </td>

          <td>
            When the user marks the payment as done but Transak has not yet received it.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="info" minimal>ORDER_PROCESSING</Badge>
          </td>

          <td>
            `PROCESSING`
          </td>

          <td>
            Orders in the PROCESSING state have passed checks and the user's payment information has been validated.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="info" minimal>ORDER_PROCESSING</Badge>
          </td>

          <td>
            `PENDING_DELIVERY_FROM_TRANSAK`
          </td>

          <td>
            When the payment is received and being exchanged & transferred via Transak or a liquidity partner.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="success" minimal>ORDER_COMPLETED</Badge>
          </td>

          <td>
            `COMPLETED`
          </td>

          <td>
            When Transak has received the payment and the crypto has been sent successfully to the user.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="error" minimal>ORDER_FAILED</Badge>
          </td>

          <td>
            `EXPIRED`
          </td>

          <td>
            When the user failed to make the payment within the timeframe.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="error" minimal>ORDER_FAILED</Badge>
          </td>

          <td>
            `FAILED`
          </td>

          <td>
            When the order failed because the card was declined.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="error" minimal>ORDER_FAILED</Badge>
          </td>

          <td>
            `CANCELLED`
          </td>

          <td>
            When the user cancels the order.
          </td>
        </tr>
      </tbody>
    </Table>
  </Tab>

  <Tab title="Off Ramp">
    <Table align={["left", "left", "left"]}>
      <thead>
        <tr>
          <th>
            WebSocket Event Code
          </th>

          <th>
            Status
          </th>

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

      <tbody>
        <tr>
          <td>
            <Badge intent="warning" minimal>ORDER_CREATED</Badge>
          </td>

          <td>
            `AWAITING_PAYMENT_FROM_USER`
          </td>

          <td>
            When the order is created but the payment has not yet been received.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="info" minimal>ORDER_PAYMENT_VERIFYING</Badge>
          </td>

          <td>
            `PAYMENT_DONE_MARKED_BY_USER`
          </td>

          <td>
            When the user marks the payment as done but it has not been received by Transak yet.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="info" minimal>ORDER_PROCESSING</Badge>
          </td>

          <td>
            `PENDING_DELIVERY_FROM_TRANSAK`
          </td>

          <td>
            When the payment is received and reconciled and Transak has initiated a fiat transfer to the user.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="info" minimal>ORDER_PROCESSING</Badge>
          </td>

          <td>
            `ON_HOLD_PENDING_DELIVERY_FROM_TRANSAK`
          </td>

          <td>
            When the crypto payment is received & fiat is being transferred via the banking partner but the system is unable to send fiat to the user.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="success" minimal>ORDER_COMPLETED</Badge>
          </td>

          <td>
            `COMPLETED`
          </td>

          <td>
            When Transak has received the crypto payment and fiat has been sent successfully to the user's bank account.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="error" minimal>ORDER_FAILED</Badge>
          </td>

          <td>
            `EXPIRED`
          </td>

          <td>
            When the user failed to make the payment within the timeframe.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="error" minimal>ORDER_FAILED</Badge>
          </td>

          <td>
            `FAILED`
          </td>

          <td>
            Due to third-party failure.
          </td>
        </tr>

        <tr>
          <td>
            <Badge intent="error" minimal>ORDER_FAILED</Badge>
          </td>

          <td>
            `CANCELLED`
          </td>

          <td>
            When the user manually cancels the order.
          </td>
        </tr>
      </tbody>
    </Table>
  </Tab>
</Tabs>

***

## Integration

Select your framework, then choose a channel type to get started.

<Tabs>
  <Tab title="React / React Native">
    <Steps>
      <Step title="Install Dependency">
        <Tabs>
          <Tab title="React">
            ```bash
            npm install pusher-js
            ```
          </Tab>

          <Tab title="React Native">
            ```bash
            npm install pusher-js @react-native-community/netinfo
            ```
          </Tab>
        </Tabs>
      </Step>

      <Step title="Subscribe to a Channel">
        <Tabs>
          <Tab title="By Order ID">
            ```javascript
            import { useEffect } from 'react';
            import Pusher, { Channel } from 'pusher-js';

            function App() {
              const transakOrderId: string = 'TRANSAK_ORDER_ID'; // Replace with your Transak Order ID

              useEffect(() => {
                const pusher: Pusher = new Pusher('1d9ffac87de599c61283', {
                  cluster: 'ap2',
                });

                const orderChannel: Channel = pusher.subscribe(transakOrderId);

                orderChannel.bind('ORDER_COMPLETED', (data: any) => {
                  console.log(`${transakOrderId} ORDER_COMPLETED:`, data);
                });

                return () => {
                  orderChannel.unbind_all();
                  pusher.unsubscribe(transakOrderId);
                  pusher.disconnect();
                };
              }, []);

              return <div>{/* Your UI */}</div>;
            }

            export default App;
            ```
          </Tab>

          <Tab title="By Partner Order ID">
            ```javascript
            import { useEffect } from 'react';
            import Pusher, { Channel } from 'pusher-js';

            function App() {
              const apiKey: string = 'YOUR_API_KEY';           // Replace with your API Key
              const partnerOrderId: string = 'PARTNER_ORDER_ID'; // Replace with your Partner Order ID

              useEffect(() => {
                const pusher: Pusher = new Pusher('1d9ffac87de599c61283', {
                  cluster: 'ap2',
                });

                const channelName = `${apiKey}_${partnerOrderId}`;
                const partnerOrderChannel: Channel = pusher.subscribe(channelName);

                partnerOrderChannel.bind_global((eventId: string, orderData: any) => {
                  if (eventId !== 'pusher:subscription_succeeded') {
                    console.log(`${partnerOrderId} ${eventId}:`, orderData);
                  }
                });

                return () => {
                  partnerOrderChannel.unbind_all();
                  pusher.unsubscribe(channelName);
                  pusher.disconnect();
                };
              }, []);

              return <div>{/* Your UI */}</div>;
            }

            export default App;
            ```
          </Tab>

          <Tab title="All Orders">
            ```javascript
            import { useEffect } from 'react';
            import Pusher, { Channel } from 'pusher-js';
            import { jwtDecode } from 'jwt-decode';

            function App() {
              const partnerApiKey: string = 'YOUR_API_KEY'; // Replace with your API Key

              useEffect(() => {
                const pusher: Pusher = new Pusher('1d9ffac87de599c61283', {
                  cluster: 'ap2',
                });

                const allOrdersChannel: Channel = pusher.subscribe(partnerApiKey);

                allOrdersChannel.bind_global((event: string, data: any) => {
                  if (event !== 'pusher:subscription_succeeded') {
                    try {
                      const decoded = jwtDecode(data);
                      console.log(`[allOrders] ${event} Decoded:`, decoded);
                    } catch (err) {
                      console.warn('Failed to decode JWT. Using raw data.', err);
                    }
                  }
                });

                return () => {
                  allOrdersChannel.unbind_all();
                  pusher.unsubscribe(partnerApiKey);
                  pusher.disconnect();
                };
              }, []);

              return <div>{/* Your UI */}</div>;
            }

            export default App;
            ```
          </Tab>
        </Tabs>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Node.js">
    <Steps>
      <Step title="Install Dependency">
        ```bash
        npm install pusher-js
        ```
      </Step>

      <Step title="Subscribe to a Channel">
        <Tabs>
          <Tab title="By Order ID">
            ```javascript
            const Pusher = require('pusher-js');

            const orderId = 'TRANSAK_ORDER_ID'; // Replace with your Transak Order ID

            const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });
            const orderChannel = pusher.subscribe(orderId);

            orderChannel.bind('ORDER_COMPLETED', (data) => {
              console.log(`${orderId} ORDER_COMPLETED:`, data);
            });

            ```
          </Tab>

          <Tab title="By Partner Order ID">
            ```javascript
            const Pusher = require('pusher-js');

            const apiKey = 'YOUR_API_KEY';           // Replace with your API Key
            const partnerOrderId = 'PARTNER_ORDER_ID'; // Replace with your Partner Order ID

            const channelName = `${apiKey}_${partnerOrderId}`;
            const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });
            const partnerOrderChannel = pusher.subscribe(channelName);

            partnerOrderChannel.bind_global((eventId, data) => {
              if (eventId !== 'pusher:subscription_succeeded') {
                console.log(`${partnerOrderId} ${eventId}:`, data);
              }
            });
            ```
          </Tab>

          <Tab title="All Orders">
            ```javascript
            const Pusher = require('pusher-js');
            const jwt = require('jsonwebtoken');

            const apiKey = 'YOUR_API_KEY';       // Replace with your API Key
            const accessToken = 'ACCESS_TOKEN';  // Replace with your Access Token

            const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });
            const allOrdersChannel = pusher.subscribe(apiKey);

            allOrdersChannel.bind_global((eventId, encryptedData) => {
              if (eventId !== 'pusher:subscription_succeeded') {
                try {
                  const decoded = jwt.verify(encryptedData, accessToken);
                  console.log(`${apiKey} ${eventId} Decoded:`, decoded);
                } catch (err) {
                  console.warn('Failed to decode JWT:', err);
                }
              }
            });
            ```
          </Tab>
        </Tabs>
      </Step>
    </Steps>
  </Tab>

  <Tab title="JavaScript (Browser)">
    <Steps>
      <Step title="Add the Pusher script">
        Add Pusher script to your HTML `<head>`:

        ```html
        <script src="https://js.pusher.com/6.0/pusher.min.js"></script>
        ```
      </Step>

      <Step title="Subscribe to a Channel">
        <Tabs>
          <Tab title="By Order ID">
            ```html
            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <title>Transak WebSocket – Order ID</title>
              <script src="https://js.pusher.com/6.0/pusher.min.js"></script>
            </head>
            <body>
              <script>
                const orderId = 'TRANSAK_ORDER_ID'; // Replace with your Transak Order ID

                const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });
                const orderChannel = pusher.subscribe(orderId);

                orderChannel.bind('ORDER_COMPLETED', (data) => {
                  console.log(`${orderId} ORDER_COMPLETED:`, data);
                });

              </script>
            </body>
            </html>
            ```
          </Tab>

          <Tab title="By Partner Order ID">
            ```html
            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <title>Transak WebSocket – Partner Order ID</title>
              <script src="https://js.pusher.com/6.0/pusher.min.js"></script>
            </head>
            <body>
              <script>
                const apiKey = 'YOUR_API_KEY';           // Replace with your API Key
                const partnerOrderId = 'PARTNER_ORDER_ID'; // Replace with your Partner Order ID

                const channelName = `${apiKey}_${partnerOrderId}`;
                const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });
                const partnerOrderChannel = pusher.subscribe(channelName);

                partnerOrderChannel.bind_global((eventId, data) => {
                  if (eventId !== 'pusher:subscription_succeeded') {
                    console.log(`${partnerOrderId} ${eventId}:`, data);
                  }
                });
              </script>
            </body>
            </html>
            ```
          </Tab>

          <Tab title="All Orders">
            ```html
            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <title>Transak WebSocket – All Orders</title>
              <script src="https://js.pusher.com/6.0/pusher.min.js"></script>
              <script src="https://cdn.jsdelivr.net/npm/jwt-decode@4.0.0/build/cjs/index.min.js"></script>
            </head>
            <body>
              <script>
                const apiKey = 'YOUR_API_KEY';      // Replace with your API Key
                const accessToken = 'ACCESS_TOKEN'; // Replace with your Access Token

                const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });
                const allOrdersChannel = pusher.subscribe(apiKey);

                allOrdersChannel.bind_global((eventId, encryptedData) => {
                  if (eventId !== 'pusher:subscription_succeeded') {
                    try {
                      const decoded = jwtDecode(encryptedData);
                      console.log(`${apiKey} ${eventId} Decoded:`, decoded);
                    } catch (err) {
                      console.warn('Failed to decode JWT:', err);
                    }
                  }
                });
              </script>
            </body>
            </html>
            ```
          </Tab>
        </Tabs>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Mobile">
    Follow the official Pusher guides for your mobile platform:

    <CardGroup cols={3}>
      <Card title="Java (Android)" icon="fa-brands fa-android" href="https://pusher.com/docs/channels/getting_started/android">
        Set up Pusher Channels in your Android app using the Java SDK.
      </Card>

      <Card title="iOS (Swift)" icon="fa-brands fa-apple" href="https://pusher.com/docs/channels/getting_started/ios">
        Set up Pusher Channels in your iOS app using the Swift SDK.
      </Card>

      <Card title="Flutter" icon="fa-light fa-mobile" href="https://pusher.com/docs/channels/getting_started/flutter">
        Set up Pusher Channels in your Flutter app for cross-platform support.
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

***

### Sample Response

A typical event payload received on any channel looks like this:

```json
{
  "event": "ORDER_CREATED",
  "data": {
    "id": "aa39d8e1-…-ce7f",
    "walletAddress": "0xD902…BEFeE",
    "createdAt": "2025-04-04T13:11:47.260Z",
    "status": "AWAITING_PAYMENT_FROM_USER",
    "fiatCurrency": "EUR",
    "userId": "243a8ce2-…-b19a3",
    "cryptoCurrency": "ETH",
    "isBuyOrSell": "BUY",
    "fiatAmount": 30,
    "ipAddress": "14.142.***.***",
    "amountPaid": 0,
    "paymentOptionId": "sepa_bank_transfer",
    "walletLink": "https://sepolia.etherscan.io/address/0xD902…BEFeE",
    "quoteId": "9291a8bc-…-04e85",
    "orderProcessingType": "NORMAL",
    "addressAdditionalData": false,
    "network": "ethereum",
    "conversionPrice": 0.0006130127560164107,
    "cryptoAmount": 0.01759347,
    "totalFeeInFiat": 1.3,
    "fiatAmountInUsd": 33.05,
    "countryCode": "IN",
    "partnerOrderId": "partner-order-id",
    "stateCode": "Karnataka",
    "orderChannelType": "WIDGET",
    "tokenContractAddress": "0x0000…0000",
    "userKycType": "STANDARD",
    "updatedAt": "2025-04-04T13:11:48.374Z",
    "cardPaymentData": {},
    "conversionPriceData": {},
    "partnerFeeInLocalCurrency": 0.3,
    "statusHistories": []
  }
}
```