There are many websites which use payment gateways, Maybe you too want to integrate a payment gateway in your website. In one of my projects, I too wanted to integrate a payment gateway. Here I will show you how to integrate Paytm payment gateway in your website. For the demo app visit https://paytm-nodejs-demo.herokuapp.com
Note: This is an HTML form post integration method and it has been deprecated by Paytm. The flow is available for only existing integrations. Please follow this post for the updated payment gateway integration method.
Introduction
For using Paytm payment gateway, you’ll need a developer account. If you don’t have you can create one here. After getting into our account, click on developer settings at bottom of the left navigation pane. click on generate API keys, you’ll get your test keys. For production keys, you’ll need to activate the account.
Let’s build the app
Since this tutorial is backend oriented, I won’t be telling much about fronted. We are not using any frameworks or libraries here, so you don’t want to worry about frontend. The frontend is written using just HTML and CSS. Below is the project structure.
First, create a file called index.html for our frontend. Since we are not focusing on the frontend, I won’t be detailing about frontend. Copy the following code into index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Paytm-Nodejs</title>
</head>
<body style="background-color:#f5f3ef">
<div class="row my-5">
<div class="col-md-4 offset-md-4">
<div class="card">
<div class="card-body">
<form class="" action="/paynow" method="post">
<div class="form-group">
<label for="">Name: </label>
<input class="form-control" type="text" name="name" value="">
</div>
<div class="form-group">
<label for="">Email: </label>
<input class="form-control" type="text" name="email" value="">
</div>
<div class="form-group">
<label for="">Phone: </label>
<input class="form-control" type="text" name="phone" value="">
</div>
<div class="form-group">
<label for="">Amount: </label>
<input class="form-control" type="text" name="amount" value="">
</div>
<div class="form-group">
<button class="btn form-control btn-primary">Pay Now</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>This will create a form which submits the details to /paynow route.
Let’s build the backend
Initialize our backend using npm init . Install the dependencies needed for our application. For this application we only need express . we need to create two APIs for our app:
- One for making transaction
- Other for receiving the transaction response/callback response from Paytm.
Create a new file called index.js . Initialize an express app and create a route for serving our payment form.
index.jsconst express = require('express')
const path = require('path')
const app = express()app.get('/', (req, res) => {
res.sendFile(path.join(__dirname + '/index.html'))
})const port = 3000
app.listen(port, () => {
console.log(`Server listening on port ${port}` );
})
If we go to localhost:3000 you can see the payment form rendered. You will get the following response.
As we said above we want to create two POST routes. In index.js create, two routes called /paynow and /callback . When the Pay Now button is clicked it sends the form data to /paynow route which redirects to Paytm's payment page. /callback route is for receiving the response after payment.
app.post('/paynow', (req, res) => {
// Route for making payment
})app.post('/callback', (req, res) => {
// Route for verifiying payment
})
After the routes have been created, create a folder called Paytm(you can give any name). Inside Paytm create three files called checksum.js , crypt.js and config.js . Paytm provides a sample kit for Node.js. From the sample kit provided by Paytm copy checksum.js and crypt.js from the sample kit to the files created. In config.js we will add the test API details.
config.jsvar PaytmConfig = {
mid: "XXXXXXXXXXXXXXXXXXXX",
key: "XXXXXXXXXXXXXXXX",
website: "XXXXXXXXXX"
}module.exports.PaytmConfig = PaytmConfig
Update the key values using your test API values.
We have created the files for checksum generation and verification. checksum hash is used to find if the request has tampered or not.
Now we want to complete the APIs for payment and callback. we want to import the required files to index.js. Import the following modules and files to index.js
const https = require('https')
const qs = require('querystring')// Middleware for body parsing
const parseUrl = express.urlencoded({ extended: false })
const parseJson = express.urlencoded({ extended: false })const checksum_lib = require('../paytm/checksum')
const config = require('../paytm/config')
We are now going to complete /paynow route. Add parseUrl and parseJson the route to parse the incoming request.
app.post('/paynow', [parseUrl, parseJson], (req, res) => {
// Route for making payment
})Now we want to update the route to make a payment. copy the code of the /paynow route.
What the above code does is, it adds the payment details to an array called params. then it dynamically fills and submits the form to https://securegw-stage.paytm.in/theia/processTransaction. This redirects the customer to Paytm’s payment page. You’ll get a payment page provided by Paytm. For the test details for payment visit this link. Choose the payment method you want and after the authentication, the response is posted in HTML form POST to the callback URL.
Now we want to complete the /callback route for verifying the payment. Here will verify the checksum and will send a Server-to-Server request for transaction status. This protects us from scenarios where our account credentials are compromised or request/response has tampered. copy the code of the /callback route.
In /callback we receive the response of the transaction as the request body. Then we verify the checksum using verifychecksum method and will save in result variable. verifychecksum method will return the response as true or false . It is used to find if the request has tampered.
Then we will send a Server-to-Server call to /merchant-status/getTxnStatus to verify the transaction status. We pass our mid , orderid and merchant key . It is always better to use the response of the Server-to-Server call as the final verification. we will send a payment success message if the status is TXN_SUCCESS else we will send a payment failed message. You can change the failure message and send the reason for failure using the response code (for the time being I,m not doing that). You can get the list of response code here.
Wrapping Up
Congrats! you have integrated Paytm payment gateway in your application. If you need the full code, you can get it from this GitHub Repo.
If you have any doubts or need any further clarifications, let me know in the comment section. I’m happy to help you.
If you find this article helpful or interesting, consider giving a clap.
HAPPY CODING!!!
