Django Paypal Payment Gateway Integration Tutorial

This blog tutorial will teach you how to integrate a client-side payment gateway using the PayPal API, in Django. The finished code for this tutorial can be found on GitHub.

If are into video tutorials, check out this quick and easy YouTube video!

STEP 1 – SETUP

Okay so first we’ll quickly set up our project. Run the following commands in your command prompt to get the initial project files-

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

Add the base app in the installed apps of the project’s settings.py file.

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

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

from django.shortcuts import render
def index(request):
	return render(request,'base/index.html')

Create the ‘templates’ folder inside the ‘base’ app folder. Inside the templates folder again create a folder named ‘base’ (weird django conventions right?).

Inside the ‘base’ folder, create the index.html template and copy the following code-

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
<style>
.w3-container {
  font-size: 14px;
}

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

<div class="center">
  <h3 class="donate">
    <div class="w3-card-4">

    <header class="w3-container w3-blue">
    <h1>DONATE</h1>
    </header>

    <div class="w3-container">
    <p>Donate for a great cause. Be a hero.</p>

    <!-- PAYPAL BUTTONS HERE -->


    </div>

    <footer class="w3-container w3-blue">
    <h5>&copy Professional Cipher</h5>
    </footer>

    </div>
  </h3>
</div>

</body>

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

Replace the urls.py code of your base app with this code-

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

Also change the project’s urls.py code with the following-

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

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

STEP 2 – Creating Sandbox Accounts

Now open PayPal developer API . Login from the top left (create an account first if you don’t own one).

After login, open the Sandbox Accounts link. We will need two Sandbox accounts for testing our integration. Your accounts section will look like the picture below. Now click on the blue create account button.

A pop-up will show. Click on create custom account link at the bottom

Click on the create custom account link.

Now we’ll need two accounts. A personal account to make payments and a business account to accept the payments. So make both accounts one by using the same create a custom account link. Fill the email and password fields and make sure to add some balance!

STEP 3 – Creating the REST API App

We’ll create our app now using the PayPal API. Open this link and click on the blue create app button.

Give your app a unique name and connect the business sandbox account you created before. As you can see in the picture, I created an app named payments2 and connected it with my business account [email protected]. Do the same with yours.

After successful creation of the REST API app, you’ll get the client ID and the secret key. We only need the client ID to connect the gateway. So keep the tab open.

I got the following Client ID for my app.

STEP 3 – Adding the integration

Now open this link to add the PayPal buttons in your app. Just Copy the code inside the script tags (as highlighted in the picture) and paste it into the index.html template below the <!– PAYPAL BUTTONS HERE –> comment…

The main part comes now. Copy the client ID of the app you created. Now in the following script tag-

<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

remove the sb after the id= and paste the client ID of your app!

<script src="https://www.paypal.com/sdk/js?client-id=ARQtv6ATCMgVdQfeC_X0VJJhptYPqRGHVCYR8_WIKZ3bqtxSmchkHOy77tFoPimHtJUG9mGCiBF4yluN&currency=USD">
</script>

STEP 4 – Checking our integration

Run the server and open port 8000. It will appear like this. Click on the PayPal button (or Card button if you want)

A checkout pop-up will appear. Log in with your personal sandbox account and pay the amount.

This is it. You can log into your business sandbox account here to check the transaction analysis. You have successfully integrated a client-side payment gateway in your Django app!