Payment Gateway Integration(Razorpay): A Step-by-Step Guide
October 17, 2025
Introduction:
With the increasing demand for online transactions, integrating a reliable and secure payment gateway is essential for businesses. Razorpay is one of the leading payment gateways in India, offering seamless payment solutions for web and mobile applications. This guide will walk you through integrating Razorpay into your React.js and Java-based web application.
What is Payment Gateway Integration?
A payment gateway is a technology that processes online payments by acting as a bridge between customers, merchants, and banks. It ensures secure transactions by encrypting sensitive payment data. Popular payment gateways include Razorpay, PayPal, Stripe, and PayU.
Key Features of Razorpay Integration:
- Security – PCI-DSS compliance and encryption ensure safe transactions.
- Multiple Payment Methods – Supports credit/debit cards, UPI, net banking, and wallets.
- Quick Settlements – Fast fund transfers to merchant accounts.
- Subscription Management – Automated recurring payments.
- Fraud Detection – AI-based fraud prevention techniques.
- Easy API Integration – Developer-friendly SDKs and APIs.
- Multi-Currency Support – Accepts international payments.
Step-by-Step Guide to Integrate Razorpay
Let’s integrate Razorpay into a React.js frontend and a Java Spring Boot backend.
Step 1: Create a Razorpay Account
- Visit Razorpay’s website and sign up.
- Complete your KYC verification.
- Navigate to Dashboard > API Keys and generate your API key (Key ID & Secret).
Step 2: Install Razorpay SDK in React.js
npm install razorpay
Step 3: Configure Razorpay in Frontend (React.js)
import Razorpay from ‘razorpay’;
const handlePayment = async () => {
const response = await fetch(‘/api/payments/order’, { method: ‘POST’ });
const order = await response.json();
const options = {
key: ‘your_razorpay_key_id’,
amount: order.amount,
currency: ‘INR’,
name: ‘Your Business Name’,
description: ‘Purchase Description’,
order_id: order.id,
handler: async function (response) {
console.log(‘Payment Successful’, response);
// Send payment success details to backend
},
prefill: {
name: ‘Customer Name’,
email: ‘customer@example.com’,
contact: ‘9999999999’,
};
theme: { color: ‘#3399cc’ },
};
const paymentObject = new window.Razorpay(options);
paymentObject.open();
};
Step 4: Backend Payment Processing (Java – Spring Boot)
Add Dependencies (pom.xml)
<dependency>
<groupId>com.razorpay</groupId>
<artifactId>razorpay-java</artifactId>
<version>1.3.8</version>
</dependency>
Create a Payment Controller in Java
@RestController
@RequestMapping(“/api/payments”)
public class RazorpayController {
@PostMapping(“/order”)
public ResponseEntity<?> createOrder() {
try {
RazorpayClient razorpay = new RazorpayClient( “your_key_id”, “your_key_secret”);
JSONObject orderRequest = new JSONObject();
orderRequest.put(“amount”, 500); // Amount in paise (500.00 INR)
orderRequest.put(“currency”, “INR”);
orderRequest.put(“receipt”, “txn_123456”);
Order order = razorpay.orders.create(orderRequest);
return ResponseEntity.ok(order.toJson());
} catch (RazorpayException e) {
return ResponseEntity.status(HttpStatus.BAD_REQUEST)
.body(e.getMessage());
}
}
}
Step 5: Connect Frontend and Backend
Modify handlePayment in React.js to send payment confirmation details to the backend.
const handlePaymentSuccess = async (response) => {
const res = await fetch(‘/api/payments/verify’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(response),
});
const result = await res.json();
console.log(result);
};
Step 6: Test the Payment Flow
- Use Razorpay’s test mode and test credentials.
- Run the backend and frontend applications.
- Perform a test transaction and check Razorpay’s dashboard for payment details.
Conclusion
Integrating Razorpay into a React.js and Java-based application is simple and provides a secure and efficient payment solution. By following this guide, you can enable online transactions for your business effortlessly.
: A Step-by-Step Guide){kind=link}
No comment