🚀 Introduction

Integrating a secure and efficient payment system is crucial for modern mobile apps. In this guide, we’ll walk through integrating Razorpay in a React Native app using Razorpay's official SDK, and setting up webhook listeners with Node.js and MongoDB to manage transaction events server-side.

⚙️ Prerequisites

• Node.js & npm installed
• MongoDB running locally or Atlas DB
• A Razorpay account with API key & secret
• A React Native project (Bare or Expo Bare workflow)

🧩 Tech Stack

• React Native
• Razorpay React Native SDK
• Node.js (Express)
• MongoDB (Mongoose)
• Razorpay Dashboard

🛠️ 1. React Native Frontend – Razorpay SDK Integration

🔧 Installation

bashCopy
npm install react-native-razorpay

For iOS:

bashCopy
cd ios && pod install

Android Setup Add the following to android/settings.gradle:

gradleCopy
include ':react-native-razorpay'
project(':react-native-razorpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-razorpay/android')

Link the package or use autolinking with React Native 0.60+.

Add the following to AndroidManifest.xml:

xmlCopy
<uses-permission android:name="android.permission.INTERNET" />

💳 Open Razorpay Checkout in React Native

tsCopy
import RazorpayCheckout from 'react-native-razorpay';

const openRazorpayCheckout = () => {
  const options = {
    description: 'Order Payment',
    image: 'https://yourcompany.com/logo.png',
    currency: 'INR',
    key: 'rzp_test_YourKeyHere',
    amount: 50000, // amount in paise (50000 = ₹500)
    name: 'Your_App_Name',
    prefill: {
      email: 'user@example.com',
      contact: '9876543210',
      name: 'John Doe',
    },
    theme: { color: '#003F7D' },
  };

  RazorpayCheckout.open(options)
    .then((data) => {
      // Handle successful payment
      console.log('Payment ID:', data.razorpay_payment_id);
    })
    .catch((error) => {
      // Handle failed payment
      console.error(`Error: ${error.description}`);
    });
};

🧾 2. Backend – Webhook with Node.js & MongoDB

🧰 Install Dependencies

bashCopy
npm install express mongoose body-parser crypto

🧑‍💻 Setup Webhook Listener

jsCopy
const express = require('express');
const crypto = require('crypto');
const mongoose = require('mongoose');

const app = express();
app.use(express.json());

// Connect MongoDB
mongoose.connect('mongodb://localhost:27017/razorpayDB', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// Payment Schema
const Payment = mongoose.model('Payment', new mongoose.Schema({
  order_id: String,
  payment_id: String,
  event: String,
  amount: Number,
  email: String,
}));

// Webhook endpoint
app.post('/webhook', (req, res) => {
  const secret = 'your_webhook_secret';

  const signature = req.headers['x-razorpay-signature'];
  const body = JSON.stringify(req.body);

  const expectedSignature = crypto
    .createHmac('sha256', secret)
    .update(body)
    .digest('hex');

  if (signature === expectedSignature) {
    const payload = req.body.payload.payment.entity;

    const payment = new Payment({
      order_id: payload.order_id,
      payment_id: payload.id,
      event: req.body.event,
      amount: payload.amount,
      email: payload.email,
    });

    payment.save().then(() => {
      console.log('Payment saved successfully');
      res.status(200).json({ status: 'ok' });
    });
  } else {
    console.warn('Invalid signature!');
    res.status(400).send('Invalid signature');
  }
});

app.listen(5000, () => console.log('Server started on port 5000'));

🧪 3. Testing Webhooks

• Login to Razorpay dashboard → Webhooks

• Add endpoint: https://yourdomain.com/webhook

• Secret: your_webhook_secret

• Event: payment.captured, payment.failed, etc.

• Use Razorpay Webhook Simulator to test locally with tools like ngrok

🧼 4. Security Tips

• Use HMAC verification with x-razorpay-signature

• Do not trust client-side payment status

• Store successful payment entries only after server-side verification

📚 Useful Links

Razorpay React Native Docs Razorpay Webhook Guide Mongoose Docs

✅ Conclusion

That’s it! You now have a working Razorpay integration in your React Native app with server-side webhook handling using Node.js and MongoDB. This setup ensures smooth and secure transaction flow for your users.