The Complete Guide to Razorpay Integration with Django and React
Comments
Sign in to join the conversation
For businesses operating in India, international gateways like Stripe can sometimes face friction with domestic cards (due to 3D Secure mandates) or lack support for local favorites like UPI (Unified Payments Interface).
Razorpay is the de-facto standard for Indian SaaS and e-commerce. It natively supports:
This guide shows you how to integrate Razorpay into a Django Rest Framework (DRF) backend and a React frontend.
Razorpay's flow is unique compared to Stripe:
payment_id and signature.First, install the Razorpay Python client.
pip install razorpay
Add your keys to settings.py. You can get these from the Razorpay Dashboard.
# settings.py
import os
RAZORPAY_KEY_ID = os.environ.get('RAZORPAY_KEY_ID')
RAZORPAY_KEY_SECRET = os.environ.get('RAZORPAY_KEY_SECRET')
We need an endpoint to initialize the transaction.
# views.py
import razorpay
from django.conf import settings
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
client = razorpay.Client(auth=(settings.RAZORPAY_KEY_ID, settings.RAZORPAY_KEY_SECRET))
class CreateOrderView(APIView):
def post(self, request):
try:
amount = int(request.data.get('amount')) * 100 # Amount in paise (100 paise = 1 INR)
currency = "INR"
This is crucial. Without this, anyone could spoof a success response to your frontend.
# views.py (continued)
import hashlib
import hmac
class VerifyPaymentView(APIView):
def post(self, request):
data = request.data
try:
# We need these 3 parameters specifically
ord_id = data.get('razorpay_order_id')
pay_id = data.get('razorpay_payment_id')
sig = data.get('razorpay_signature')
# Razorpay's signature verification method
params_dict = {
'razorpay_order_id': ord_id,
'razorpay_payment_id': pay_id,
'razorpay_signature' sig
Razorpay uses a script that injects the checkout modal. A popular wrapper hook is react-razorpay, or you can simply load the script.
npm install react-razorpay
import React from 'react';
import useRazorpay from 'react-razorpay';
export default function RazorpayPayment() {
const [Razorpay] = useRazorpay();
const handlePayment = async () => {
// 1. Create Order on your Backend
const response = await fetch('/api/create-order/', {
method: 'POST',
headers: { 'Content-Type':
For Indian users, UPI is king. Razorpay automatically detects if the user is on a mobile device and can open their UPI apps (Google Pay, PhonePe) directly (Deep Linking), providing a seamless experience compared to typing out card details.
50050.Razorpay provides the most robust solution for Indian businesses. By combining it with Django's secure backend and React's dynamic frontend, you can accept payments from millions of Indian customers instantly.