Integrating Razorpay Payments in React Native CLI
A step-by-step guide to integrating Razorpay payment gateway in a React Native CLI project — from setup to handling payment success, failure, and order verification.
If you're building a fintech app, an e-commerce platform, or any app that handles real money in India, Razorpay is the go-to payment gateway. But integrating it with React Native CLI (not Expo) has its own set of challenges — native linking, order creation flow, and webhook verification. This guide walks through the entire process.
(01) ChapterArchitecture: How Razorpay works
Razorpay follows a three-step flow: your backend creates an order, the mobile app opens the Razorpay checkout with that order ID, and after payment, your backend verifies the signature. Never create orders or verify payments on the client side.
- 01Step 1: Backend creates a Razorpay order using the Orders API.
- 02Step 2: Mobile app receives the order_id and opens the checkout UI.
- 03Step 3: On success, the app sends payment_id + signature to your backend for verification.
- 04Step 4: Backend verifies the HMAC signature and confirms the transaction.
(02) ChapterInstalling the SDK
npm install react-native-razorpay
cd ios && pod install && cd ..For Android, add the Razorpay repository to your android/build.gradle and ensure minSdkVersion is at least 19. For iOS, no additional native configuration is needed after pod install.
(03) ChapterCreating orders on the backend
Your Node.js backend should create the order using the Razorpay Node SDK. Never expose your key_secret to the client.
import Razorpay from "razorpay";
const razorpay = new Razorpay({
key_id: process.env.RAZORPAY_KEY_ID!,
key_secret: process.env.RAZORPAY_KEY_SECRET!,
});
app.post("/api/create-order", async (req, res) => {
const { amount } = req.body;
const order = await razorpay.orders.create({
amount: amount * 100, // Razorpay expects paise
currency: "INR",
receipt: `receipt_${Date.now()}`,
});
res.json({ orderId: order.id, amount: order.amount });
});(04) ChapterOpening checkout in React Native
import RazorpayCheckout from "react-native-razorpay";
const handlePayment = async () => {
const { orderId, amount } = await createOrder(depositAmount);
const options = {
description: "Monthly Deposit",
currency: "INR",
key: RAZORPAY_KEY_ID,
amount: amount,
order_id: orderId,
name: "Your App Name",
prefill: { email: user.email, contact: user.phone },
theme: { color: "#ff4d1a" },
};
try {
const data = await RazorpayCheckout.open(options);
// data.razorpay_payment_id, data.razorpay_signature
await verifyPayment(data);
Alert.alert("Success", "Payment completed!");
} catch (error) {
Alert.alert("Payment Failed", error.description);
}
};(05) ChapterVerifying the signature
After a successful payment, Razorpay returns a payment_id and a signature. Your backend must verify this signature using HMAC SHA256 before marking the payment as complete.
import crypto from "crypto";
app.post("/api/verify-payment", (req, res) => {
const { razorpay_order_id, razorpay_payment_id, razorpay_signature } = req.body;
const generated = crypto
.createHmac("sha256", process.env.RAZORPAY_KEY_SECRET!)
.update(`${razorpay_order_id}|${razorpay_payment_id}`)
.digest("hex");
if (generated === razorpay_signature) {
// Payment is verified — update your database
res.json({ status: "verified" });
} else {
res.status(400).json({ status: "failed" });
}
});End of entry — DoabStudios Studio
