DEV Community

Dainy Jose
Dainy Jose

Posted on • Edited on

Razorpay Integration in React Native with Node.js Webhooks and MongoDB

#reactnative #node #mongodb #razorpay

🚀 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

npm install react-native-razorpay
Enter fullscreen mode Exit fullscreen mode

For iOS:

cd ios && pod install
Enter fullscreen mode Exit fullscreen mode

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

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

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

Add the following to AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
Enter fullscreen mode Exit fullscreen mode

💳 Open Razorpay Checkout in React Native 

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}`);
    });
};
Enter fullscreen mode Exit fullscreen mode

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

🧰 Install Dependencies

npm install express mongoose body-parser crypto
Enter fullscreen mode Exit fullscreen mode

🧑‍💻 Setup Webhook Listener

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'));
Enter fullscreen mode Exit fullscreen mode

🧪 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.

✍️ Written by Dainy Jose — React Native Mobile Application Developer with 3+ years of experience building cross-platform mobile apps using React Native (Expo, TypeScript, Redux).
Currently expanding backend knowledge through the MERN Stack (MongoDB, Express.js, React.js, Node.js) to create more efficient, full-stack mobile experiences.

💼 Tech Stack: React Native · TypeScript · Redux · Expo · Firebase · Node.js · Express.js · MongoDB · REST API · JWT · Jest · Google Maps · Razorpay · PayU · Agile · SDLC · Git · Bitbucket · Jira

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Top comments (0)