How to integrate Razorpay payment gateway with Django REST framework and React.Js

3 min readNov 21, 2020

INTRODUCTION:

In this article, we are going to see how to integrate Razorpay with Django RF as backend and React.Js as frontend. We will also be seeing how to set up environment variables for our Razorpay API keys.

SETTING UP RAZORPAY ACCOUNT:

If you haven’t created your Razorpay account, go to razorpay.com and Sign Up there.

After creating an account, login to your Razorpay dashboard and go to

Settings -> API keys -> Generate Keys as shown below.

Save Your Keys somewhere locally for future reference.

LETS BUILD APIs USING DJANGO RF:

Create a Django project:

> mkdir razorpay_integration
> cd razorpay_integration
> django-admin startproject razorpay_backend
> cd razorpay_backend
> python manage.py startapp api

Install all the required packages:

> pip install djangorestframework
> pip install razorpay
> pip install django-environ 
> pip install django-cors-headers

create .env, urls.py and serializers.py files in api folder as shown below:

Include api.urls.py in razorpay_backend/urls.py:

Now let’s setup cors in settings.py to enable the Cross-origin resource sharing mechanism that will allow our frontend to make HTTP requests to our backend, also we have to register our apps in INSTALLED_APPS:

#  ...rest will be sameCORS_ALLOW_ALL_ORIGINS = True

# Allow the origin from where you are sending the request
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
]

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'api',
    'rest_framework',
    'corsheaders',
]

MIDDLEWARE = [
# always keep the cors middleware at the top of MIDDLEWARE    'corsheaders.middleware.CorsMiddleware',  
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]# ...rest will be same

Run migrations:

> python manage.py migrate

Create an Order model in api/models.py:

Make migrations after creating a model:

> python manage.py makemigrations
> python manage.py migrate
> python manage.py runserver

Create serializer class for Order model in api/serializers.py:

Setup urls for payment in api/urls.py:

Setup environment variables in api/.env:

Now let’s write our payment logic in api/views.py:

NOW LETS SETUP OUR REACT.JS FRONTEND:

Create react app:

> npx create-react-app razorpayfrontend
> cd razorpayfrontend
> npm start

Install the required dependencies for our project:

> npm install axios

Add Bootstrap CDN in public/index.html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Create server.js file in src and add your backend server url as shown below:

We are doing this to keep the backend URL centralized throughout the app

Now create a component in src/App.js that will handle the payment logic when the user clicks the “Pay with razorpay” button:

Now you can accept payments through Razorpay!

DEMO:

Working demo

NOTE: Replace your Test Key Id and Test Key Secret with Live Key Id and Live Key Secret to accept live payments.
you will get your Live Key Id and Live Key Secret in live mode

If you face any problem during this project, you can go ahead and check out the code on my Github.

click here for Django RF code and click here for React.Js code

I hope this post will help you in your journey. Keep learning!

My LinkedIn and GitHub.