How To Integrate Razorpay In Spring Boot & Angular?

Nowadays, Every business makes their presence on the internet to grow their business. Online payment is now a common thing. It helps businesses to run their business more smoothly.

Depending on the business, they want to integrate a payment gateway for their platform or website. Selecting a payment gateway makes lives easier for the customer and the business owner. On the market, there are several payment gateways to choose from. But this is where we’ll look at the Razorpay payment gateway.

In this post, we’ll look at how to use Spring Boot (Java) and Angular(Client-Side) to integrate the Razorpay payment gateway and accept payments quickly and easily.

What is a Razorpay Payment Gateway?

The Razorpay payment gateway is a software solution that makes it possible for individuals and businesses to accept payments and route the same to owners’ accounts.

By using Razorpay you can collect payment from customers using all payment modes, including debit and credit cards, UPI, and other popular mobile wallets.

With the help of Razorpay, you can automate bank transfers, collect recurring payments, share invoices with customers, and manage your marketplace.

Integration Of Razorpay

Integration of the Razorpay payment gateway is different for different technologies. Here we are going to use Angular (Client-Side) and Spring Boot Java (Server-Side).

To integrate Razorpay, all you need to do is create a Razorpay account. Visit the link to create an account.

There are basically two environments provided by Razorpay payment.

1. Test Mode (Testing purpose)
2. Live Mode (To accept real-time payments)

Here we will use the test mode for integration.

Step 1: Get Id And Secret Key

Before accessing any API of Razorpay you will need Razorpay Id and Secret which you can get from the Razorpay dashboard.

– Go To Razorpay Dashboard

– On The Left Side, The Sidebar Menu Clicks On Settings. After That Click On The API Keys Tab

– Click On Generate A Key To View On Downloading The Id And Secret Key

Make sure the secret key will not be shared with anyone. We need a Razorpay Id at the client side.

Sample keys will look like below :
Key Id : rzp_test_********
Key Secret : i*********

Step 2: Setup Razorpay In Your Project

For starting using Razorpay first you need to add the official Razorpay library into your project. This will allow you to access all Razorpay APIs.

– Server Side:

For the spring boot project, you will need to add dependency into the pom.xml file.

<dependency>

<groupId>com.Razorpay</groupId>

<artifactId>Razorpay-java</artifactId>

<version>x.y.z</version> //x.y.z = the version you want to install

</dependency>

– Client Side:

For the Angular side, you will need to run the following command to install the npm package of Razorpay.

npm i Razorpay

Step 3: Understanding Payment Flow Of Razorpay

The Razorpay payment flow is depicted in the diagram below.

From the above steps, we have completed the setup of Razorpay into our project and understood the flow of payment checkout.

Let’s consider one scenario, you are building a web application for an e-commerce store. You want to create a checkout flow for purchasing any item. Then we need to follow the below process to accept customers’ payments through Razorpay checkout.

1. Customer Place An Order On Your Website Or App

A customer visits your website or application, then selects the item they want to purchase. After clicking on the buy button the front end will call the Backend API with the price of the item to create an Order in Razorpay.

2. Create Order From Your Backend Server

Use the Razorpay orders API to generate an order from your server for each customer order.

To build order in your (backend) server, use the endpoint below.

POST: /orders

try {

  JSONObject orderRequest = new JSONObject();

  orderRequest.put("amount", 50000); // amount in the smallest currency unit

  orderRequest.put("currency", "INR");

  orderRequest.put("receipt", "order_rcptid_11");

  Order order = Razorpay.Orders.create(orderRequest);

} catch (RazorpayException e) {

  // Handle Exception

  System.out.println(e.getMessage());

}

You can store customer details and order details in your payments table for future reference. When actual payment is completed by the customer at Razorpay that time using the order id you can verify the same purchase.

3. Pass Order Id To Front-end And Collect Payment Details

Pass the order_id returned by order create API of Razorpay to your front end for checkout.

There are two sample codes provided for checkout: