How to Integrate Razor Pay in Your Angular NodeJs Application

Razor Pay is a payment gateway where we users can make the payment in your E-commerce application or website. Razor pay has detailed documentation on how to integrate into the Server side of the application. There is no clear explainations on how to implement on Client-side of the Applications. In this article i will be explaining on how to integrate the razor payment into our application using Angular as client side and NodeJs as Server side.

Razor Pay Payment Flow

This is flow diagram of how the payment will happen in this gateway.

Firstly, The customer in Angular page click on the ‘‘buy’’ button. Then Angular send the order details to the backend server through an API.

The backend API will send the order details to the razor pay and create an order and sends backs the order_id.

As soon as the client side receives the order_id, our angular application will open the razor-pay payment page. User then makes the payment in the payment and then redirects to the page specified in the client side handler.

So, Let’s start with implementation. First let’s look into Client side part of the implementation. This is basic implemention of razor pay payment gateway. You can customise this according your use case.

First create Reactive Form in your page where you want to do the payment. I have created a simple payment page as shown below. It has two option one with RazorPay and another with Stripe. We are checking the razor pay option for this payment.

payment view

In this form we capture the user full name, amount to be paid, and email of the user.

Configuring Payment Form

After user enters the details and click on buy. We will send the name, amount and email to the server side through an API. Will receive an order details along with order_id created by razor pay. And the below javascript link to your index.html file to open the razor pay checkout page.

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

Create variable Razorpay at the top of the type script file above the component declarations.

I have created a json object razorPayOptions with all the necessary fields to open the checkout page. Razor pay provides some testing card details with which you can test your payments.

After Making the payment. It gives us two options in the testing mode to make the payment success or failure. After clicking on Success you will redirected to your payment page. If you click on the Failure you will redirect to the razor pay checkout page with ‘payment failed’ error displayed.

Now let’s look into backend part of the implementation. Razor pay has created a npm module. You can install the module using following command

npm i razorpay --save

Intialize the razor page in your payment API file.

var Razorpay = require('razorpay');

Create an instance of the Razorpay with Key_id and Key Secret generated in the Razorpay Dashboard.

When user hits this API, we store the details in the options json object and create the order using following command.

instance.orders.create(options, (err,order)=>{
if(err){
next(err);
}
if(order){
res.json({success:true, status:"Order created Successfully", value:order, key:config.razorKeyId})
}})

And the send the order details to the frontend with order id to open the checkout page in to frontend.

You can view all the transaction details in your Razor Pay Dashboard. You can customise the whole solution according your use case of the application. You have any queries or difficulty in implementation feel free to contact me at saikiran1298@gmail.com

Thank You!!