Integrating Transak into Your React App for Selling Crypto

Introduction to Transak

Transak is a fiat-to-crypto on-ramp solution that allows users to buy and sell cryptocurrencies directly within their application. It offers support for multiple payment options, including bank transfers, credit/debit cards, and Apple Pay. For more about crypto, visit crypto development services. 

Key Features:

• Supports 50+ cryptocurrencies
• Available in 100+ countries
• KYC/AML compliance
• Easy API integration

Prerequisites

Before we begin, ensure you have:

• Node.js (v16 or later) installed
• A basic understanding of React.js
• A Transak account (register through the Transak Dashboard)

Also, Read | Creating a Custom Hyperliquid Dashboard: Track Live Holdings in React

Setting Up a VITE + React App

Vite is a modern and lightning-fast build tool designed for React applications. Let's create a new project:

Step 1: Create a VITE React App

npm create vite@latest transak-vite-app --template react
cd transak-vite-app
npm install
npm run dev

This will start your app at http://localhost:5173.

Step 2: Install Required Dependencies

npm install @transak/transak-sdk

Integrating Transak

Transak provides a JavaScript SDK that can be embedded in your React app.

import Transak from '@transak/transak-sdk';

Step 1: Button Component

Create a styled button that triggers the Transak widget:

  Open Transak

Step 2: Transak Initialization

The handleTransak function initializes the widget:

const handleTransak = () => {
      try {
      const transak = new Transak({
        apiKey: TRANSAK_API_KEY,  // Your Transak API key
        environment: STAGING, // or 'PRODUCTION'
        productsAvailed: 'SELL', // 🟢 This enables OFF-RAMP
        hideExchangeScreen: true,
        themeColor: '000000',
        hostURL: window.location.origin,
        widgetHeight: '600px',
        widgetWidth: '450px',
      });

      transak.init();

      Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, async (orderData) => {
       console.log(orderData, "Order data");
      });

      Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
        transak.close();
        transak.logoutUser();
        transak.cleanup();
      });

      Transak.on('*', (data) => {
        console.log('📦 Transak Event', data);
      });
    } catch (err) {
      console.log(err, 'transak error.');
    }
  };

You may also like | Build a Crypto Payment Gateway Using Solana Pay and React

5. Complete Code Example

import { Transak } from '@transak/transak-sdk';

const TransakButton = () => {
  const handleTransak = () => {
    try {
      const transak = new Transak({
        apiKey: TRANSAK_API_KEY, // Your Transak API key
        environment: STAGING, // or 'PRODUCTION'
        productsAvailed: 'SELL', // 🟢 This enables OFF-RAMP
        hideExchangeScreen: true,
        themeColor: '000000',
        hostURL: window.location.origin,
        widgetHeight: '600px',
        widgetWidth: '450px',
      });

      transak.init();

      Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, async (orderData) => {
        console.log(orderData, 'Order data');
      });

      Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
        transak.close();
        transak.logoutUser();
        transak.cleanup();
      });

      Transak.on('*', (data) => {
        console.log('📦 Transak Event', data);
      });
    } catch (err) {
      console.log(err, 'transak error.');
    }
  };

  return (
    
      Open Transak
    
  );
};

export default TransakButton;

Also, Discover | Developing a Cross-Platform Crypto Wallet with Web3.js & React

6. Conclusion

This implementation provides:

• Proper off-ramp configuration (productsAvailed: 'SELL')
• Comprehensive event handling
• Memory cleanup on widget close
• Error handling

Next Steps:

1. Add your production API key
2. Implement backend verification webhooks
3. Customize the widget appearance further

For advanced features, refer to Transak's Official Documentation.
 

OUTPUT

If you are planning to get into the blockchain or web3 space, connect with our skilled blockchain developers to bring your vision into reality.