XPay Labs React Example — Crypto Payment Gateway Integration Demo

English | 中文

A React example application demonstrating how to integrate the XPay Labs self-hosted, non-custodial crypto payment gateway SDK into a React web application. Accept USDT/USDC payments on TRON, EVM chains, and SUI.

Features

• Initialize the XPay Labs SDK with API credentials
• Create cryptocurrency collection and payout orders
• Display payment QR codes for customers
• Real-time payment status checking
• Webhook verification demo
• Material UI components
• Environment-based configuration

Prerequisites

• Node.js 14.x or higher
• npm or yarn

Installation

npm install
npm install @xpaylabs/node-sdk

Configuration

cp .env.example .env
# Edit .env with your XPay Labs API credentials

Running

npm start

Open http://localhost:3001

Project Structure

src/
├── views/
│   ├── Home.js           # Landing page with SDK information
│   └── PaymentDemo.js    # Main demo with SDK integration examples
├── components/
│   ├── PaymentQRCode.js  # QR code display component
│   └── WebhookHandler.js # Webhook verification demo
└── services/
    └── XPayService.js    # XPay Labs SDK wrapper

Related Resources

• XPay Labs Website
• Node.js SDK
• Java SDK
• Vue 3 Example
• Vue Demo (E-Commerce)
• Checkout Page

License

MIT