Zypay React Native SDK

A comprehensive React Native 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
• 🎨 Native UI components - Beautiful, responsive payment interface optimized for mobile
• 🔒 Security first - Built with security best practices
• 📱 Mobile optimized - Native performance on iOS and Android
• 🚀 TypeScript support - Full type safety
• ⚡ Real-time updates - Live payment status updates
• 🎯 Easy integration - Simple React hooks API

Installation

npm install @zypay/react-native-sdk

or

yarn add @zypay/react-native-sdk

Additional Dependencies

This SDK requires the following peer dependencies:

npm install react-native-svg react-native-qrcode-svg @react-native-clipboard/clipboard

or

yarn add react-native-svg react-native-qrcode-svg @react-native-clipboard/clipboard

iOS Setup

For iOS, you need to install the pods:

cd ios && pod install

Android Setup

No additional setup required for Android.

Quick Start

import React from 'react';
import { View, Button } from 'react-native';
import { useZypay } from '@zypay/react-native-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 (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Make Payment" onPress={handlePayment} />
      <PaymentModal />
    </View>
  );
}

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 Native 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 Native component for payment interface
• disconnect(): Disconnect from the payment service
• reconnect(): Reconnect to the payment service
• state: Current payment state
• healthCheck(): Check health of payment service

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

Platform-Specific Considerations

iOS

• Requires iOS 12.0 or later
• Safe area insets are automatically handled
• QR code scanning works natively

Android

• Requires Android 6.0 (API level 23) or later
• Supports both ARM and x86 architectures
• QR code scanning works natively

Security

The Zypay React Native 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
• Native secure storage integration available

Development

Prerequisites

• Node.js 16+
• npm 8+
• React Native 0.64+

Setup

git clone https://github.com/zypay/react-native-sdk.git
cd react-native-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

Example App

Check out the examples/ directory for a complete React Native example app demonstrating all SDK features.

cd examples/basic-usage
npm install
npm run ios    # or npm run android

Troubleshooting

Common Issues

1. QR Code not displaying: Ensure react-native-svg is properly installed
2. Clipboard not working: Verify @react-native-clipboard/clipboard permissions
3. Connection issues: Check your API token and network connectivity

For more troubleshooting tips, see our Troubleshooting Guide.

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.

Comparison with Web SDK

| Feature | React Native SDK | React SDK | |---------|-----------------|-----------| | Platform | iOS, Android | Web browsers | | UI Components | Native components | HTML/CSS | | Animation | React Native Animated | Framer Motion | | QR Codes | react-native-qrcode-svg | qrcode.react | | Clipboard | @react-native-clipboard/clipboard | Web Clipboard API | | Performance | Native performance | Browser performance |

Made with ❤️ by the Zypay Team