Razorpay provides payment-gateway services used by more than 30,000 merchants. The business accepts and validates Internet payments by credit card, debit card, online banking services, UPI, and digital wallets. Razorpay provides payments solutions that support different technologies like nodejs, PHP, etc. for web and android, react native, etc. for apps.

Firstly we need Razorpay API ID and Key for using the Razorpay payment gateway so, first of all, you need to create a Razorpay account and then go to the “Settings” section click on API Keys generate API Key, and download the .csv file.

📦pages
┣ 📂api
┃ ┗ 📂payments
┃ ┃ ┣ 📜postTranscation.js
┃ ┃ ┣ 📜razorpay.js
┃ ┃ ┗ 📜verify.js
┣ 📂success
┃ ┗ 📜index.jsx
┣ 📜index.jsx
┗ 📜_app.jsx

On the front-end section, there is nothing much I only add one button which says “Pay ₹5 Now” and after clicking the button Razorpay payment window initials. I am providing important and necessary code for more details check out 

I am using NextJS so, I will use NextJS’s Script for loading the Razorpay script it helps to improve performance.

In this function, we are not doing anything advance the code given by Razorpay I just modified it for NextJS like we are using order api we will see the order api section in the backend section, and in options, we are providing Razorpay Key ID, amount, company details, customer details, order id (which we get from our backend section using Razorpay API), and callback_url. After when payment initials user will redirect to the given URL which is our website’s API section URL where we verify the payment using SHA256 encryption but this is only one part of the verification of payment and it is a temporary check the main verification will do in webhook process where we will get all information related to our payment like transaction timing, payment mode, etc.

Let’s see the backend section of our web app, so firstly we need to create an order route in api section for creating order_id in this project route for generating order_id is “/api/payments/razorpay”.

After generating order_id then payment will initial in the front-end and after payment Razorpay will redirect to our callback_url you can also Handler Function but I use callback_url because I like this type of implementation. Our callback_url is “/api/payments/postTranscation”.

This will redirect the user to the success page but this is not our main verification method for payments. The main verification for payments happens using Razorpay’s webhook. Firstly create Razorpay’s webhook with the webhook signature, give the webhook URL, and add the active event “payment.captured”.

NOTE: In this example, my verification code file is in /api/payments/verify.js so my webhook URL will be “

https://www.hostname.xyz/api/payments/verify”

 there is no rule for creating a webhook route even though you can decide that you need to create multiple routes for payment success, failed, pending, etc. or verify in a single route.

Now after creating a webhook for capturing payments it’s time to creating verify.js

In this example, I am storing payment data in "paymentInfoData.json" but you can store necessary data in database like MongoDB, MySQL, etc. I will suggest you store only necessary data, not all payment data.

My tip is to not use use “/” in notes or anywhere (means in Razorpay’s data like user’s details, notes, etc.) because in my case I face a problem in verifying "x-razorpay-signature" request header with the request body data both hash were different and when I removed “/” from my code this problem was gone.

If you like this article and find it helpful and informative then please share it with your developer friends. If you find any mistake in this article please share it with me you can connect with me from anywhere.

Best And Secure Way To Use Razorpay With NextJS And ReactJS

An array is an object in javascript, it helps to store multiple data in a single variable. An array consists of an index and value means the index represents an item’s position. Arrays are resizable and can contain a mix of different data types like this 

. In javascript and generally in other programming languages arrays are zero-indexed which means the first element of an array is at index 

, and so on. We can get the value of a particular index of an array like this 

so let’s start our top 5 most underrated methods list:

The flat() helps to convert a multi-dimensional array into a specified dimensional array and then returns a new array. That was in my words what mdn docs say:

**method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.”

flat() takes one parameter which is depth level specifying how deep a nested array structure should be flattened. Defaults to 1 (Line taken from mdn docs).

Another use of flat() is to remove the empty item from an array like this:

flat() is supported in all browsers and also in deno and node.js.

As the name suggests flatMap() is a combination of flat() and map() so this method firstly will map every element with the help of map() and then flattens (by one level) the input array element into a new array.

 method executes a reducer function for the array element. This method returns a single value it can be a string or number (mainly a number). Usually, this method uses to calculate the total amount of a cart we see in the example. This method does not change the original array. As the name suggests reduce() method will reduce the array data into a single value.

function() which is required and also called the reducer function and initialValue

total (required), currentValue (required), currentIndex, arr

The reduceRight() method works the same as reduce() but this method will map the array from the right direction (from right-to-left).

 method copies array elements to another position in the array. This method overwrites the existing values and does not add items to the array without modifying its length. This method returns a changed or modified array.

I hope you like reading this article I know you feel that these lines are similar to mdn docs, and w3schools because I learn these methods from these websites and this is my first article I will try to create more interesting articles about javascript and other technologies.

Pratham.

Brendan Eich

Pratham Sharma

My Articles.

Best And Secure Way To Use Razorpay With NextJS And ReactJS

Top 5 Most Underrated Array Methods in Javascript