Django Razorpay Payment Gateway Integration Tutorial

Django-Razorpay-img

Here in this tutorial, we will see how to integrate a payment gateway using the Razorpay API in your Django Project. The finished code for this tutorial can be found here(Github). We also made a video on this-

Also if you want to check a tutorial on Paypal’s integration, we have a blog on that also, here. Now, let’s get going with this one!

STEP 1 – SETUP

Copy-paste the following commands in your command prompt to get the initial project setup.

mkdir django-razorpay
cd  django-razorpay
django-admin startproject razorpay
cd razorpay
python manage.py startapp base

Add the base app in the installed apps of the project’s settings.py file. And then scroll down and add the ‘templates’ directory also.

INSTALLED_APPS = [
	‘base’, //Add this line 
	 . . .
]

TEMPLATES = [
    {
         . . .
        'DIRS': ['templates'], //Add this line 

Run the pip command in your command prompt for installing the Razorpay module which is really needed!

pip install razorpay

Create a views.py file in the base app directory and add the following code-

from django.shortcuts import render
import razorpay
from django.views.decorators.csrf import csrf_exempt


def home(request):
    if request.method == "POST":
        name = request.POST.get('name')
        amount = 50000

        client = razorpay.Client(
auth=("TEST_KEY", "SECRET_KEY"))
        payment = client.order.create({'amount': amount, 'currency': 'INR',
'payment_capture': '1'})

    return render(request, 'index.html')

@csrf_exempt
def success(request):
    return render(request, "success.html")

We’ll add the Keys in the above code later.

Now add the views in the urlpatterns for both the project and the base app.

Replace the code with your app’s urls.py file-

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('base.urls'))
]

And similarly replace the following code with the base app’s urls.py file-

from django.urls import path
from .views import home, success

urlpatterns = [
    path('', home, name='home'),
     path('success' , success , name='success')
]

Now the last thing to setup will be the templates! So create the templates folder in your razorpay directory. Create three files named index.html, success.html, and base.html.

Now add the following code in the index.html template-

{% extends 'base.html' %}
{% block content %}

<head>
    <style>
        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<div class="center">
<form class="text-center border border-light p-5" action="success" method="POST">

{% csrf_token %}

    <p class="h3 mb-3">
    <i class="fas fa-coffee"></i> BUY ME A COFFEE!!
    </p>

    <p class="mb-3">
    Help us create more videos by donating 500 INR
    </p>

<input type="name" name="name" id="name" required class="form-control mb-4" placeholder="Name">

<!-- RAZORPAY INTEGRATION HERE -->

<script src="https://checkout.razorpay.com/v1/checkout.js"
    data-key="TEST_KEY"
    data-amount="50000"
    data-currency="INR"
    data-order_id="{{payment.id}}
    data-buttontext="Pay with Razorpay"
    data-name="Professional Cipher"
    data-description="Django and Data Science"
    data-image="https://example.com/your_logo.jpg"
    data-prefill.name="PC"
    data-prefill.email="[email protected]"
    data-theme.color="#F37254">
</script>
</form>
</div>
</div> 
{% endblock %}

Similarly add the following code in your success.html file-

{% extends 'base.html' %}
{% block content %}
<head>
   <style>
      .center {
      position: absolute;
      text-align: center;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      }
   </style>
</head>
<body>
   <div class="center">
      <h3>
         Thanks, You are aweseome!<i class="fas fa-check-circle"></i>
      </h3>
      <h5>
         <a href="http://127.0.0.1:8000/">
         Again?
         </a>
      </h5>
   </div>
</body>
{% endblock content %}

And finally this code in your in base.html file to finish our templates.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://kit.fontawesome.com/47101d2035.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>Buy me a Coffee</title>
</head>
<body>
    {% block content %}

    {% endblock content %} 
</body>
</html>

STEP 2 – ADDING RAZORPAY KEYS

So, we are done with the initial set up. Let’s move on to the main stuff. Open this link. Create an account or log in if you own one already. Open this link now to get your keys. We will need to copy the keys, both the secret key and the public key.

Navigate to the views.py file and paste both the keys in the index view where specified (replace TEST_KEY and SECRET_KEY with your keys).

Similarly copy your test key and now open the index.html file. There, in the data-key variable, replace the TEST_KEY with your copied test key value.

STEP 3 – CHECKING OUR INTEGRATION

So, it’s all in-place now! Now run the server and pen Port 8000. A page like this (if you kept the same index.html styling) will appear.

Fill the Name input and click on Pay with Razorpay. A checkout card will popup with 500 INR payment (you can change this value and all other details of the card from the index.html file!).

Fill in a fake 10 digit mobile number and click on pay. Choose any payment method. Choose the success option by clicking the green button.

And voila! You’ll be redirected to the success.html page-

This is all. We have successfully implemented a payment gateway using Razorpay!

Get the code here. Also, check our Paypal payment gateway tutorial for Django!

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *