Adding online payments to a web application can make it easier for customers to purchase products, subscribe to services, book appointments, or pay invoices.
But payment integration involves more than adding a payment button to a website.
A reliable integration needs a payment gateway, backend APIs, secure authentication, payment status handling, webhooks, and proper error management.
This guide explains the basic process of integrating a payment gateway into a web application, using Razorpay as an example.
1.
Understand How Payment Gateway Integration Works A typical payment flow looks like this: Customer → Web App → Backend → Payment Gateway → Bank/Payment Network The customer starts the payment from your website.
Your backend creates the payment order through the gateway.
The customer then completes the payment using a supported payment method.
After the transaction, your application needs to confirm whether the payment was successful before providing the product or service.
A simplified flow is: Customer selects a product or service.
Your backend creates an order.
The payment gateway generates the required payment details.
Checkout opens for the customer.
Customer completes the payment.
The gateway returns payment information.
Your backend verifies the payment.
A webhook can update your system about payment events.
Your database records the final payment status.
The application confirms the order.
2.
Choose the Right Payment Gateway Before starting development, compare payment gateways based on factors such as: Supported payment methods Transaction fees API documentation Developer tools Settlement process Refund support International payment support Webhook capabilities Security requirements Customer support For an Indian web application, gateways such as Razorpay can support common payment methods including UPI, cards, net banking, and wallets, depending on the account and applicable availability.
The important thing is to choose a gateway that fits your application's payment requirements rather than selecting one based only on pricing.
3.
Create a Merchant Account Once you select a gateway, create a merchant account and complete the required verification process.
For Razorpay, developers can use the available test environment to build and test the integration before processing live transactions.
You will generally receive API credentials that allow your backend to communicate with the payment gateway.
Keep these credentials secure.
Never expose secret API keys in frontend JavaScript, HTML, mobile applications, or public repositories.
4.
Set Up Your Backend The backend should handle sensitive payment operations.
For example, your backend might have an endpoint such as: When the customer clicks "Pay Now", the frontend sends the order information to your backend.
The backend then: Validates the order.
Calculates the amount.
Creates an order with the payment gateway.
Stores the order information in your database.
Returns the required payment details to the frontend.
The amount should ideally be calculated and validated on the server rather than trusting a price sent directly by the browser.
This prevents customers from manipulating the amount through frontend code.
5.
Create a Payment Order The backend communicates with the gateway API to create a payment order.
For example, suppose a customer is purchasing a product worth ₹2,500.
Your application can create an internal order such as: Order ID: ORD-1050 Amount: ₹2,500 Currency: INR Status: Pending The payment gateway can then create its own corresponding payment order.
Keeping both your internal order ID and the gateway's order ID is useful for tracking and reconciliation.
6.
Open the Payment Checkout After creating the payment order, your frontend can use the payment gateway's checkout mechanism.
The customer may see options such as: UPI Credit card Debit card Net banking Wallets The exact options depend on the gateway, merchant configuration, customer location, and other factors.
The frontend should not decide whether the transaction is finally successful.
It should only handle the customer-facing checkout experience.
7.
Verify the Payment on the Server One of the most important steps is payment verification.
After checkout, the frontend may receive payment information.
That information should be sent to your backend for verification.
Your backend can then validate the payment using the gateway's server-side mechanisms.
For Razorpay integrations, signature verification is an important part of confirming that the payment response has not been tampered with.
The general flow is: Checkout → Payment response → Backend → Signature verification → Payment status Only after successful verification should your application update the order as paid.
8.
Use Webhooks Payment processing is asynchronous, so your application should also use webhooks.
A webhook allows the payment gateway to send an event directly to your server.
For example: Razorpay → Webhook → Your Backend The webhook can notify your application about events such as payment status changes, refunds, settlements, and other payment-related activities.
This is useful when the customer completes a transaction but the browser closes before your frontend receives the final response.
Your webhook endpoint might look conceptually like: The endpoint receives the event, verifies its authenticity, and updates your database.
9.
Make Webhooks Idempotent Your webhook handler should be designed to handle duplicate events safely.
For example, suppose your system receives the same payment event twice.
Without proper handling, the application might: Mark an order as paid twice Send two confirmation emails Add inventory twice Credit a customer account twice Store a unique event identifier and check whether the event has already been processed.
A simple approach is: Receive event → Validate event → Check event ID → Process once → Store event ID This is called idempotent processing and is essential for reliable payment systems.
10.
Handle Payment Failures Not every payment attempt will succeed.
A transaction can fail because of: Insufficient funds Incorrect card information Bank rejection UPI issues Network problems Payment gateway errors Customer cancellation Session timeout Your application should clearly distinguish between different states.
Instead of only having: Success / Failed consider using: Created Pending Authorized Captured Failed Refunded Unknown An or state can be useful when a request times out and you cannot immediately determine whether the transaction succeeded.
11.
Do Not Treat a Timeout as an Automatic Failure This is a common payment integration mistake.
Imagine the following: Customer → Gateway → Bank The bank processes the payment successfully, but the response to your application is delayed.
Your server receives a timeout.
If your application immediately marks the transaction as failed, the customer might attempt another payment.
The first transaction could later be successful, resulting in a duplicate payment.
A better approach is to verify the transaction status through the gateway's APIs or wait for the relevant webhook before deciding what happened.
12.
Store Payment Information Properly Your database should maintain a clear relationship between your application order and the payment gateway transaction.
A payment record might contain: Field Example Internal Order ID ORD-1050 Gateway Order ID order_xyz Payment ID pay_xyz Amount ₹2,500 Currency INR Status Captured Created At Timestamp Updated At Timestamp Do not store sensitive card information unless your payment architecture and compliance requirements explicitly support it.
In most cases, the payment gateway handles sensitive payment credentials.
13.
Protect Your API Credentials Security should be considered from the beginning.
Follow basic practices such as: Keep secret keys on the backend.
Store credentials in environment variables or a secrets manager.
Use HTTPS.
Validate incoming