turbo-vps-razorpay

A React Native library for integrating Razorpay payment gateway into your mobile applications.

Installation

npm install turbo-vps-razorpay

iOS Setup

For iOS, you need to add the following to your ios/Podfile:

pod 'turbo-vps-razorpay', :path => '../node_modules/turbo-vps-razorpay'

Then run:

cd ios && pod install

Android Setup

The Android setup should work automatically with autolinking. If you face any issues, make sure your android/settings.gradle includes:

include ':turbo-vps-razorpay'
project(':turbo-vps-razorpay').projectDir = new File(rootProject.projectDir, '../node_modules/turbo-vps-razorpay/android')

Usage

Basic Implementation

import RazorpayCheckout from 'turbo-vps-razorpay';

// Define your payment options
const options = {
  description: 'Payment for your order',
  image: 'https://www.commodityonline.com/assets/images/coil-logo.png',
  currency: 'INR',
  key: 'YOUR_RAZORPAY_KEY', // Your Razorpay API key
  amount: 50000, // Amount in paise (₹500.00)
  name: 'Your Company Name',
  order_id: 'order_12345678', // Order ID from Razorpay
  prefill: {
    email: '[email protected]',
    contact: '+919876543210',
    name: 'John Doe'
  },
  notes: {
    address: 'Customer Address',
    merchant_order_id: 'ORDER_001'
  },
  theme: { 
    color: '#14a800' 
  },
  webhook: 'https://yourserver.com/webhook' // Your webhook URL
};

// Open Razorpay checkout
RazorpayCheckout.open(options)
  .then((data: RazorpayData) => {
    // Payment successful
    if (data.razorpay_payment_id) {
      console.log('Payment ID:', data.razorpay_payment_id);
      console.log('Order ID:', data.razorpay_order_id);
      console.log('Signature:', data.razorpay_signature);
      
      // Handle successful payment
      handleSuccessfulPayment(data);
    }
  })
  .catch((error: any) => {
    // Payment failed or cancelled
    if (error.error && 
        error.error.reason === 'payment_error' && 
        error.error.source === 'customer') {
      console.log('Payment cancelled by user');
      handlePaymentCancellation();
    } else {
      console.log('Payment error:', error);
      handlePaymentError(error);
    }
  });

Complete Example with React Hook

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import RazorpayCheckout from 'turbo-vps-razorpay';

interface RazorpayData {
  razorpay_payment_id: string;
  razorpay_order_id: string;
  razorpay_signature: string;
}

const PaymentScreen: React.FC = () => {
  const [loading, setLoading] = useState(false);

  const initiatePayment = async () => {
    setLoading(true);
    
    try {
      // Create order on your backend first
      const orderResponse = await fetch('https://yourapi.com/create-order', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          amount: 50000, // Amount in paise
          currency: 'INR'
        })
      });
      
      const orderData = await orderResponse.json();
      
      const options = {
        description: 'Payment for premium subscription',
        image: 'https://yourcompany.com/logo.png',
        currency: 'INR',
        key: 'rzp_live_your_key_here', // Replace with your key
        amount: 50000,
        name: 'Your App Name',
        order_id: orderData.order_id,
        prefill: {
          email: '[email protected]',
          contact: '+919876543210',
          name: 'Customer Name'
        },
        notes: {
          address: 'Customer Address',
          merchant_order_id: 'ORD_001'
        },
        theme: { 
          color: '#3399cc' 
        },
        webhook: 'https://yourapi.com/razorpay-webhook'
      };

      const paymentData = await RazorpayCheckout.open(options);
      
      if (paymentData.razorpay_payment_id) {
        // Verify payment on your backend
        await verifyPayment(paymentData);
        Alert.alert('Success', 'Payment completed successfully!');
      }
      
    } catch (error: any) {
      if (error.error?.reason === 'payment_error' && 
          error.error?.source === 'customer') {
        Alert.alert('Cancelled', 'Payment was cancelled');
      } else {
        Alert.alert('Error', 'Payment failed. Please try again.');
        console.error('Payment error:', error);
      }
    } finally {
      setLoading(false);
    }
  };

  const verifyPayment = async (paymentData: RazorpayData) => {
    // Verify the payment signature on your backend
    const response = await fetch('https://yourapi.com/verify-payment', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        razorpay_payment_id: paymentData.razorpay_payment_id,
        razorpay_order_id: paymentData.razorpay_order_id,
        razorpay_signature: paymentData.razorpay_signature,
      })
    });
    
    return response.json();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Button
        title={loading ? "Processing..." : "Pay ₹500"}
        onPress={initiatePayment}
        disabled={loading}
      />
    </View>
  );
};

export default PaymentScreen;

API Reference

RazorpayCheckout.open(options)

Opens the Razorpay checkout interface.

Parameters

• options (object): Payment configuration object

Options Object

| Property | Type | Required | Description | |----------|------|----------|-------------| | key | string | ✅ | Your Razorpay API key | | amount | number | ✅ | Payment amount in paise (₹1 = 100 paise) | | name | string | ✅ | Your business/app name | | description | string | ❌ | Payment description | | image | string | ❌ | Your business logo URL | | order_id | string | ✅ | Order ID generated from Razorpay | | currency | string | ❌ | Currency code (default: 'INR') | | prefill | object | ❌ | Customer details for prefilling | | notes | object | ❌ | Additional information | | theme | object | ❌ | UI customization | | webhook | string | ❌ | Webhook URL for notifications |

Prefill Object

{
  name?: string;
  email?: string;
  contact?: string;
}

Theme Object

{
  color?: string; // Hex color code
}

Returns

Promise<RazorpayData> - Resolves with payment details on success

interface RazorpayData {
  razorpay_payment_id: string;
  razorpay_order_id: string;
  razorpay_signature: string;
}

Error Handling

The promise rejects with an error object:

{
  error: {
    code: string;
    description: string;
    source: string;
    step: string;
    reason: string;
    metadata: object;
  }
}

Common error scenarios:

• User cancellation: reason: 'payment_error' and source: 'customer'
• Network issues: Connection-related errors
• Invalid parameters: Configuration errors

Environment Setup

Development

const RAZORPAY_DEV_KEY = 'rzp_test_your_test_key';
const WEBHOOK_DEV_URL = 'https://yourdev.com/webhook';

Production

const RAZORPAY_LIVE_KEY = 'rzp_live_your_live_key';
const WEBHOOK_LIVE_URL = 'https://yourapi.com/webhook';

Security Best Practices

1. Never expose your API secret: Only use the key ID in your mobile app
2. Always verify payments server-side: Use webhooks and signature verification
3. Use HTTPS: Ensure all API calls use secure connections
4. Validate order amounts: Always verify the amount on your backend

Troubleshooting

Common Issues

1. Payment not opening: Check if your Razorpay key is correct and the order_id is valid
2. iOS build issues: Make sure you've run pod install after adding the library
3. Android build issues: Clean and rebuild your project
4. Network errors: Ensure your device has internet connectivity

Debug Mode

You can enable debug logging by checking the Razorpay dashboard logs and your server webhook logs.

Requirements

• React Native >= 0.60.0
• iOS >= 10.0
• Android API level >= 19

License

MIT

Support

For issues and feature requests, please visit our GitHub repository.

For Razorpay-specific issues, refer to the official Razorpay documentation.

Made with ❤️ for React Native developers#