How to integrate Razorpay into your app

How the Razorpay payment flow actually works

The most common mistake is treating Razorpay like a simple button. The correct flow always involves your own server, because the amount and the verification must never be trusted from the browser. At a high level there are three moving parts: your frontend (the checkout), your backend (order creation and verification), and Razorpay's servers.

• Your backend calls Razorpay's Orders API with the amount in paise and gets back an order_id.
• Your frontend opens Razorpay Checkout with that order_id; the customer pays via UPI, card, or netbanking.
• Checkout returns a payment_id and a signature to your frontend, which forwards them to your backend.
• Your backend verifies the signature using your secret key before marking the order paid.
• A webhook from Razorpay confirms the final status, independent of whether the browser stayed open.

Step 1: Get your API keys

Sign up at razorpay.com and complete KYC (PAN, bank account, and business details). In the dashboard, go to Settings and generate API keys. You get a Key ID and a Key Secret. The Key ID is safe to expose in your frontend; the Key Secret must live only on your server and never in client code or a public repo. Start in Test Mode, which gives you separate test keys and fake payment methods so you can build without moving real money.

Step 2: Create an order on your server

Never let the browser decide the price. Your server creates the order so the amount is authoritative. A minimal Node example using the razorpay package looks like this: instantiate the client with your key_id and key_secret, then call razorpay.orders.create with amount (in paise, so 500 rupees is 50000), currency 'INR', and a receipt id. Return only the order_id to the frontend.

Step 3: Open Checkout and verify the signature

The frontend loads Razorpay's checkout script, opens it with your Key ID and the order_id, and defines a handler. When payment succeeds, the handler receives razorpay_order_id, razorpay_payment_id, and razorpay_signature. Send all three to your backend. There you recompute the signature: an HMAC SHA256 of order_id + '|' + payment_id using your Key Secret, then compare it to the signature Razorpay sent. Only if they match do you mark the order paid.

Step 4: Add webhooks for reliability

Users close tabs, lose signal, or pay via UPI apps that redirect. If you rely only on the browser handler, you will miss payments. Webhooks fix this. In the dashboard, add a webhook URL pointing to a server endpoint and subscribe to events like payment.captured and payment.failed. Razorpay signs each webhook with a secret you set; verify that signature too, then update your order status. Treat the webhook as the source of truth.

Test vs live: what changes

Where Kashvi fits

If you are building the app itself and not just the payment layer, Kashvi generates a working web or React Native app with a real Postgres database and real user login, and it treats Razorpay and UPI as first-class for Indian founders. You describe the flow in plain English, and it scaffolds the order-creation endpoint, the checkout, signature verification, and an orders table so your payment records persist. You still add your own Razorpay keys and complete KYC, and because you get the full code with no lock-in, you can audit and extend the verification logic yourself before going live.

Whether you hand-code the integration or scaffold it, the non-negotiables stay the same: amount on the server, verify every signature, and let webhooks be the final word on payment status.