WebSocket Integrations

// For react-native
npm install pusher-js @react-native-community/netinfo

// For react
npm install pusher-js

import { useEffect } from 'react';
import Pusher, { Channel } from 'pusher-js';

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

  useEffect(() => {
    // 🔐 Initialize Pusher using public key and cluster
    const pusher: Pusher = new Pusher('1d9ffac87de599c61283', {
      cluster: 'ap2',
    });

    // 📡 Subscribe to the specific order's channel
    const orderChannel: Channel = pusher.subscribe(transakOrderId);

    // 📥 Listen for the 'ORDER_COMPLETED' event
    // Add handlers for other events from the list here: 
    // https://docs.transak.com/docs/websocket-events
    
    orderChannel.bind('ORDER_COMPLETED', (data: any) => {
      console.log(`${transakOrderId} ORDER_COMPLETED:`, data);
    });

    // 🧹 Clean up WebSocket connections on component unmount
    return () => {
      // Optional: Enable for full cleanup
      // orderChannel.unbind_all();
      // pusher.unsubscribe(transakOrderId);
      // pusher.disconnect();
      // console.log('🧹 Cleaned up all WebSocket connections');
    };
  }, []);

  return (
    <div>
      {/* Your UI components go here */}
    </div>
  );
}

export default App;

import { useEffect } from 'react';
import Pusher, { Channel } from 'pusher-js';

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

  useEffect(() => {
    // 🔐 Initialize Pusher using public key and cluster
    const pusher: Pusher = new Pusher('1d9ffac87de599c61283', {
      cluster: 'ap2',
    });

    // 🧩 Construct the channel name using apiKey and partnerOrderId
    const partnerOrderChannelName = `${apiKey}_${partnerOrderId}`;

    // 📡 Subscribe to the channel for the specific partner order
    const partnerOrderChannel: Channel = pusher.subscribe(partnerOrderChannelName);

    console.log(`📡 Listening to all events on channel: ${partnerOrderChannelName}...`);

    // 📥 Handle all incoming events (except internal Pusher system events)
    partnerOrderChannel.bind_global((eventId: string, orderData: any) => {
      if (eventId !== 'pusher:subscription_succeeded') {
        console.log(`${partnerOrderId} ${eventId}:`, orderData);
      }
    });

    // 🧹 Clean up WebSocket connections on component unmount
    return () => {
      // Optional: Enable for full cleanup to avoid memory leaks
      // partnerOrderChannel.unbind_all();
      // pusher.unsubscribe(partnerOrderChannelName);
      // pusher.disconnect();
      // console.log('🧹 Cleaned up all WebSocket connections');
    };
  }, []);

  return (
    <div>
      {/* Your UI components go here */}
    </div>
  );
}

export default App;

import { useEffect } from 'react';
import Pusher, { Channel } from 'pusher-js';
import { jwtDecode } from 'jwt-decode';

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

  useEffect(() => {
    // 🔐 Initialize Pusher using your public key and cluster
    const pusher: Pusher = new Pusher('1d9ffac87de599c61283', {
      cluster: 'ap2',
    });

    // 📡 Subscribe to the "all orders" channel associated with your partner API key
    const allOrdersChannelName: string = partnerApiKey;
    const allOrdersChannel: Channel = pusher.subscribe(allOrdersChannelName);

    console.log(`📡 Listening to all order events on channel: ${allOrdersChannelName}...`);

    // 📥 Handle all global events (excluding internal Pusher events)
    allOrdersChannel.bind_global((event: string, data: any) => {
      if (event !== 'pusher:subscription_succeeded') {
        console.log(`[allOrders] ${event} Encrypted:`, data);

        try {
          const decoded = jwtDecode(data);
          console.log(`[allOrders] ${event} Decoded:`, decoded);
        } catch (err) {
          console.warn('⚠️ Failed to decode JWT. Using raw data.', err);
        }
      }
    });

    // 🧹 Clean up WebSocket connections on component unmount
    return () => {
      // Optional: Enable for full cleanup
      // allOrdersChannel.unbind_all();
      // pusher.unsubscribe(allOrdersChannelName);
      // pusher.disconnect();
      // console.log('🧹 Cleaned up all WebSocket connections');
    };
  }, []);

  return (
    <div>
      {/* Your UI components go here */}
    </div>
  );
}

export default App;

const Pusher = require('pusher-js');

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

// 🔐 Initialize Pusher using public key and cluster
const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });

// 📡 Subscribe to the specific Transak Order channel
const orderChannel = pusher.subscribe(orderId);

console.log(`📡 Listening to events for ${orderId}...`);

// 📥 Listen for 'ORDER_COMPLETED' or any other event
orderChannel.bind('ORDER_COMPLETED', (data) => {
  console.log(`${orderId} ORDER_COMPLETED:`, data);
});

// Add handlers for other events from the list here: 
// https://docs.transak.com/docs/websocket-events

const Pusher = require('pusher-js');

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

const channelName = `${apiKey}_${partnerOrderId}`;

// 🔐 Initialize Pusher using public key and cluster
const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });

// 📡 Subscribe to the channel for this specific partner order
const partnerOrderChannel = pusher.subscribe(channelName);

console.log(`📡 Listening to events for ${partnerOrderId}...`);

// 📥 Listen to all global events for this order
partnerOrderChannel.bind_global((eventId, data) => {
  if (eventId !== 'pusher:subscription_succeeded') {
    console.log(`${partnerOrderId} ${eventId}:`, data);
  }
});

const Pusher = require('pusher-js');
const jwt = require('jsonwebtoken');

// ✅ Replace with your actual API Key and Access Token
const apiKey = 'YOUR_API_KEY'; // Replace this
const accessToken = 'ACCESS_TOKEN'; // JWT secret for decoding - Replace this

// 🔐 Initialize Pusher using public key and cluster
const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });

// 📡 Subscribe to the "all orders" channel using your API key
const allOrdersChannel = pusher.subscribe(apiKey);

console.log(`📡 Listening to all order events for ${apiKey}...`);

// 📥 Listen to all global events and decode JWT
allOrdersChannel.bind_global((eventId, encryptedData) => {
  if (eventId !== 'pusher:subscription_succeeded') {
    console.log(`${apiKey} ${eventId} Encrypted:`, encryptedData);

    try {
      const decoded = jwt.verify(encryptedData, accessToken);
      console.log(`${apiKey} ${eventId} Decoded:`, decoded);
    } catch (err) {
      console.warn('⚠️ Failed to decode JWT:', err);
    }
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Transak WebSocket – Order ID</title>

  <!-- ✅ Load Pusher client -->
  <script src="https://js.pusher.com/6.0/pusher.min.js"></script>
</head>
<body>
  <div>
    {page contents go here}
  </div>

  <script>
    Pusher.logToConsole = true;

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

    // 🔐 Initialize Pusher using public key and cluster
    const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });

    // 📡 Subscribe to the specific Transak Order channel
    const orderChannel = pusher.subscribe(orderId);

    console.log(`📡 Listening to events for ${orderId}...`);

    // 📥 Listen for 'ORDER_COMPLETED' or any other event
    orderChannel.bind('ORDER_COMPLETED', (data) => {
      console.log(`${orderId} ORDER_COMPLETED:`, data);
    });

    // Add handlers for other events from the list here: https://docs.transak.com/docs/websocket-events
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Transak WebSocket – Partner Order ID</title>

  <!-- ✅ Load Pusher client -->
  <script src="https://js.pusher.com/6.0/pusher.min.js"></script>
</head>
<body>
  <div>
    {page contents go here}
  </div>

  <script>
    Pusher.logToConsole = true;

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

    // 🔐 Initialize Pusher using public key and cluster
    const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });

    // 📡 Subscribe to the channel using partnerOrderId
    const channelName = `${apiKey}_${partnerOrderId}`;
    const partnerOrderChannel = pusher.subscribe(channelName);

    console.log(`📡 Listening to events for ${partnerOrderId}...`);

    // 📥 Listen to all events for this partner order
    partnerOrderChannel.bind_global((eventId, data) => {
      if (eventId !== 'pusher:subscription_succeeded') {
        console.log(`${partnerOrderId} ${eventId}:`, data);
      }
    });

    // Add handlers for specific events from the list here: https://docs.transak.com/docs/websocket-events
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Transak WebSocket – All Orders</title>

  <!-- ✅ Load Pusher client -->
  <script src="https://js.pusher.com/6.0/pusher.min.js"></script>

  <!-- ✅ Use browser-compatible JWT decode library -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/index.min.js"></script>
</head>
<body>
  <div>
    {page contents go here}
  </div>

  <script>
    Pusher.logToConsole = true;

    // ✅ Replace with your actual API Key and Access Token
    const apiKey = 'YOUR_API_KEY'; // Replace this
    const accessToken = 'ACCESS_TOKEN'; // JWT secret for decoding - Replace this

    // 🔐 Initialize Pusher using public key and cluster
    const pusher = new Pusher('1d9ffac87de599c61283', { cluster: 'ap2' });

    // 📡 Subscribe to the "all orders" channel using your API key
    const allOrdersChannel = pusher.subscribe(apiKey);

    console.log(`📡 Listening to all order events for ${apiKey}...`);

    // 📥 Listen to all global events and decode JWT
    allOrdersChannel.bind_global((eventId, encryptedData) => {
      if (eventId !== 'pusher:subscription_succeeded') {
        console.log(`${apiKey} ${eventId} Encrypted:`, encryptedData);

        try {
          const decoded = jwtDecode(encryptedData);
          console.log(`${apiKey} ${eventId} Decoded:`, decoded);
        } catch (err) {
          console.warn('⚠️ Failed to decode JWT:', err);
        }
      }
    });

    // Add handlers or filters as needed
  </script>
</body>
</html>

{
  "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": [ ]
  }
}