Zypay React SDK

A comprehensive React SDK for blockchain payment processing with support for multiple blockchains including TON and BSC.

Features

• 🔗 Multi-blockchain support - TON, BSC, and more
• 💳 Payment processing - Secure transaction handling
• 🎨 Modern UI components - Beautiful, responsive payment interface
• 🔒 Security first - Built with security best practices
• 📱 Mobile responsive - Works seamlessly on all devices
• 🚀 TypeScript support - Full type safety
• ⚡ Real-time updates - Live payment status updates
• 🎯 Easy integration - Simple React hooks API

Installation

npm install @zypay/react-sdk

or

yarn add @zypay/react-sdk

Quick Start

import React from 'react';
import { useZypay } from '@zypay/react-sdk';

function App() {
  const { initializePayment, PaymentModal } = useZypay({
    token: 'your-api-token',
    config: {
      hostUrl: 'https://api.zypay.app',
      debug: true
    }
  });

  const handlePayment = async () => {
    await initializePayment('user-id');
  };

  return (
    <div>
      <button onClick={handlePayment}>
        Make Payment
      </button>
      <PaymentModal />
    </div>
  );
}

export default App;

Configuration

Basic Configuration

const { initializePayment, PaymentModal } = useZypay({
  token: 'your-api-token',
  config: {
    hostUrl: 'https://api.zypay.app',
    timeout: 30000,
    retryAttempts: 3,
    debug: {
      enabled: true,
      level: 'info',
      logNetwork: true,
      logState: true,
      logPerformance: false
    }
  }
});

Environment Variables

You can also configure the SDK using environment variables:

ZYPAY_HOST_URL=https://api.zypay.app
NODE_ENV=production

API Reference

useZypay Hook

The main hook for integrating Zypay payments into your React application.

Parameters

• token (string): Your Zypay API token
• config (object, optional): Configuration options
  • hostUrl (string): API host URL
  • timeout (number): Request timeout in milliseconds
  • retryAttempts (number): Number of retry attempts
  • debug (boolean | DebugConfig): Debug configuration

Returns

• initializePayment(userId: string): Initialize payment for a user
• PaymentModal: React component for payment interface
• disconnect(): Disconnect from the payment service
• reconnect(): Reconnect to the payment service
• state: Current payment state

Payment States

The SDK manages various payment states:

• idle: Initial state
• loading: Loading payment options
• selecting: User selecting payment options
• processing: Payment being processed
• pending: Payment pending confirmation
• confirmed: Payment confirmed
• expired: Payment expired
• failed: Payment failed
• cancelled: Payment cancelled

Error Handling

const { state } = useZypay({ token: 'your-token' });

if (state.error) {
  console.error('Payment error:', state.error);
  // Handle error
}

Supported Blockchains

• TON - The Open Network
• BSC - Binance Smart Chain
• More blockchains coming soon!

Debug Configuration

The SDK includes comprehensive debug logging capabilities:

Debug Options

const { initializePayment, PaymentModal } = useZypay({
  token: 'your-api-token',
  config: {
    debug: {
      enabled: true,           // Enable debug logging
      level: 'info',          // Log level: 'error', 'warn', 'info', 'debug'
      timestamps: true,       // Include timestamps in logs
      includeComponent: true, // Include component names in logs
      logNetwork: true,       // Log network requests and responses
      logState: true,         // Log state changes
      logPerformance: false,  // Log performance metrics
      logger: (level, message, data) => {
        // Custom logger function
        console.log(`[${level}] ${message}`, data);
      }
    }
  }
});

Simple Debug Configuration

// Simple boolean configuration
const { initializePayment, PaymentModal } = useZypay({
  token: 'your-api-token',
  config: {
    debug: true  // Enables debug with default settings
  }
});

Debug Features

• Network Logging: Logs all socket events, requests, and responses
• State Tracking: Logs all state changes with before/after values
• Performance Metrics: Measures and logs operation timings
• Error Tracking: Detailed error logging with context
• Data Sanitization: Automatically redacts sensitive information
• Custom Loggers: Support for custom logging implementations

Security

The Zypay React SDK is built with security in mind:

• All API communications are encrypted
• Tokens are securely handled
• No sensitive data is stored locally
• Regular security audits and updates

Development

Prerequisites

• Node.js 16+
• npm 8+

Setup

git clone https://github.com/zypay/react-sdk.git
cd react-sdk
npm install

Build

npm run build

Development

npm run dev

Linting

npm run lint
npm run lint:fix

Type Checking

npm run type-check

Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 📖 Documentation: docs.zypay.app
• 🐛 Issues: GitHub Issues

Changelog

See CHANGELOG.md for a list of changes and version history.

Made with ❤️ by the Zypay Team