Introduction

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:

• UPI (Google Pay, PhonePe, Paytm, etc.)
• Domestic Debit/Credit Cards
• Netbanking (50+ banks)
• Wallets

This guide shows you how to integrate Razorpay into a Django Rest Framework (DRF) backend and a React frontend.

The Flow

Razorpay's flow is unique compared to Stripe:

1. Backend: Create an "Order" using the Razorpay API.
2. Frontend: Use the Order ID to open the Razorpay Checkout Modal.
3. Frontend: User pays; Razorpay returns a payment_id and signature.
4. Backend: You verify the signature to ensure the payment is authentic.

1. Backend Setup (Django)

First, install the Razorpay Python client.

pip install razorpay

Configure Keys

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')

Create Order API

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"
            

Verify Signature API

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

2. Frontend Integration (React)

Razorpay uses a script that injects the checkout modal. A popular wrapper hook is react-razorpay, or you can simply load the script.

Installation

npm install react-razorpay

Payment Component

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':  

Enhancing the User Experience

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.

Common Pitfalls

1. Amount format: Razorpay expects the amount in paise (integer), not Rupees. ₹500.50 must be sent as 50050.
2. CSRF: Ensure your Django views are CSRF exempt or you are passing the CSRF token correctly in the headers only if you are using session authentication. For DRF with Token/JWT, this is usually handled automatically.
3. Signature Verification: Never skip the backend verification step.

Conclusion

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.