A Step-by-Step Guide to Integrating Razorpay Payment Gateway in Your Application
Prerequisites: What You Need Before You Start
Before you can setup Razorpay payment gateway in app development, a foundational setup is essential to ensure a smooth and secure integration process. Attempting to integrate a payment gateway without these prerequisites is like building a house without a foundation—it’s bound to lead to complications. First and foremost, you need an active Razorpay account. If you don't have one, head over to the Razorpay website and complete the signup process. This involves submitting your business details, PAN card, and bank account information for verification. The verification process is typically swift, but it's wise to get it done before you write a single line of code. You will also need to decide whether you're operating as an individual, a partnership, a private limited company, or another business entity, as this affects the documents required.
On the technical side, you must have a functioning server-side environment. Razorpay’s integration model relies heavily on server-to-server communication for critical actions like creating orders and verifying payment signatures. Your server can be built on any modern technology stack. Here’s a quick comparison of popular choices:
| Technology Stack | Primary Use Case | WovLab's Take |
|---|---|---|
| Node.js (Express/NestJS) | Ideal for real-time applications, e-commerce, and SaaS platforms. | Excellent choice due to its non-blocking I/O and vast NPM ecosystem. Highly recommended for most web apps. |
| Python (Django/Flask) | Strong for data-intensive applications, ERPs, and projects requiring machine learning integration. | A robust and scalable option. Flask is great for microservices, while Django offers a full-featured framework. |
| PHP (Laravel/Symfony) | Powers a significant portion of the web, especially content management systems like WordPress. | A proven, mature ecosystem. Laravel provides an elegant structure for modern PHP applications. |
Finally, ensure you have a basic client-side or mobile application ready. This is where the Razorpay Checkout form will be embedded. Whether it's a simple HTML/JavaScript page, a React or Angular single-page application (SPA), or an Android/iOS native app, have the basic structure in place. You will need the ability to make API calls from your client to your server.
Expert Insight: Don't underestimate the importance of business verification. Many developers jump into coding with a test account, only to face delays when they're ready to go live because their KYC documents weren't in order. Complete your business verification in parallel with development to avoid last-minute hurdles.
Generating Your Live and Test API Keys in the Razorpay Dashboard
Once your account is set up, the next critical step is to generate your API keys. These keys act as the credentials that authenticate your application's requests to the Razorpay API. Razorpay provides two distinct sets of keys: Test Mode and Live Mode. As the names suggest, Test keys are for development and simulation without involving real money, while Live keys are for processing actual transactions with your customers. It is absolutely crucial to use Test keys during your entire development and testing phase to prevent accidental real charges.
Here's how to generate your keys:
- Log in to your Razorpay Dashboard.
- Ensure you are in Test Mode. There's a toggle switch on the bottom-left of the dashboard menu that allows you to switch between Live and Test modes.
- Navigate to Settings in the left-hand menu.
- Click on the API Keys tab.
- Click the Generate Key button. A pop-up will appear displaying your Key ID and Key Secret.
- Important: Copy and securely store both the Key ID and Key Secret immediately. The Key Secret is only displayed once and cannot be retrieved again. If you lose it, you will have to regenerate a new key pair, which means updating your application's configuration.
- Repeat this process when you are ready to go live by switching the dashboard toggle to Live Mode.
Your Key ID is a public key that can be safely used in your frontend code to identify your account with Razorpay. However, the Key Secret is highly sensitive and must be kept confidential. It should only be stored on your server in a secure manner, such as an environment variable or a secrets management service. Never, under any circumstances, expose your Key Secret in your client-side code (e.g., in your JavaScript, Android, or iOS app).
Security Best Practice: Use environment variables (`process.env` in Node.js, `.env` files, or cloud provider secret stores) to manage your API keys. Hardcoding keys directly into your application code is a major security risk that can lead to your account being compromised.
How to setup Razorpay payment gateway in app: Integrating the SDK
With your API keys in hand, you can now begin the technical integration. Razorpay offers Software Development Kits (SDKs) for various platforms, which significantly simplify the process of interacting with their API. For a web application, this involves a client-side component (for the checkout form) and a server-side component (for creating orders and capturing payments). Let's walk through an example using a standard web stack: a Node.js backend and a JavaScript frontend.
First, add the Razorpay SDK to your server-side project. If you're using Node.js, you can do this easily via npm:
npm install razorpay
Next, instantiate the SDK in your server code using the API keys you saved earlier. Remember to use environment variables for security.
// In your server's main file or an initialization module
const Razorpay = require('razorpay');
const razorpayInstance = new Razorpay({
key_id: process.env.RAZORPAY_KEY_ID,
key_secret: process.env.RAZORPAY_KEY_SECRET,
});
On the client side, you need to include Razorpay's checkout script. This script is responsible for rendering the payment modal. You can include it directly in your HTML file via a `