Source: Razorpay
Hello reader, in this article I would provide you step by step guide to integrate the Razorpay payment gateway into your node.js application. Trust me, it’s easy than you think.
So, let’s begin…
Step 0: Initialize Project
First things first, so let's create a simple project folder and start our journey.
Here I have created a folder named “razorpay-tutorial”. Now open your terminal in the folder and run the following command to init the node server.
npm init -y
This command would create a package.json file in your project.
Step 1: Install dependencies
In order to integrate razor pay, we need to install the following dependencies.
express
razorpay
Run the following command to install the above dependencies.
npm install express razorpay
Step 2: Create and set up a simple express server
const express = require('express');
const app = express();
const PORT = 8000;
app.listen(PORT, () => console.log(`Express server started at PORT:${PORT}`));
also, create a public folder in your project and serve it via express.
const express = require('express');
const app = express();
const PORT = 8000;
app.use(express.static('./public'));
app.use(express.json());
app.listen(PORT, () => console.log(`Express server started at PORT:${PORT}`));
Step 3: Let's begin with razorpay
To begin with, firstly we have to create an order on our server.
Step 3.1: Creating an order on our server
Note: You need to create an test account on the razorpay. Then in the settings pannel of razorpay, go to API keys and generate keys. Copy the key_id and key_secret.
const { request, response } = require('express');
const express = require('express');
const Razorpay = require('razorpay');
const app = express();
const PORT = 8000;
app.use(express.static('./public'));
app.use(express.json());
app.post('/order', async (request, response) => {
const amount = request.body.amount;
if (!amount) return response.json({ message: 'Please provide amount' })
const razorpayInstance = new Razorpay({
key_id: '<YOUR_KEY_ID_HERE>',
key_secret: '<YOUR_SECRET_HERE>',
});
const paymentOptions = {
amount: amount * 100,
currency: 'INR',
receipt: '#1',
};
const razorpayOrder = await razorpayInstance.orders.create(paymentOptions);
return response.json({
message: 'success',
order: razorpayOrder
});
});
app.listen(PORT, () => console.log(`Express server started at PORT:${PORT}`));
As you can see, we have defined a post route “/order” which is responsible for creating an order and return a JSON response with the created order.
Step 3.2 Design our front-end
Navigate to your public folder and add the following code to public/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Razorpay</title>
</head>
<body>
<div>
<button id="buy-now-btn">Buy Now</button>
</div>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
const buyButton = document.getElementById('buy-now-btn');
buyButton.addEventListener('click', (event) => {
});
</script>
</body>
</html>
Now start your server and head to http://localhost:8000
Run the following command to start the server
node index.js
buyButton.addEventListener('click', async (event) => {
const response = await fetch('/order', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ amount: 500 })
});
const responseJson = await response.json();
const { order } = responseJson;
const razorPayOptions = {
key: '<YOUR_KEY_ID_HERE>',
amount: 500,
currency: 'INR',
name: `Buy Shirt`,
description: `Paying for testing`,
order_id: order.id,
handler: function (response) {
const razorpayPaymentId = response['razorpay_payment_id'];
const razorpayOrderId = response['razorpay_order_id'];
const razorpaySignature = response['razorpay_signature'];
console.log('Payment successfull');
},
};
const razorpayInstance = new Razorpay(razorPayOptions);
razorpayInstance.open();
});
In your button click event listener add the above code and done. You have successfully integrated the Razorpay gateway.
