Setting Up Razorpay on Your Client's Online Store — A Complete Guide

For any Indian business selling online, Razorpay is the natural first choice. It supports UPI, all major debit and credit cards, net banking, and popular wallets — covering essentially every way a customer in India might want to pay. And unlike Stripe (which requires a non-Indian bank account for Indian businesses), Razorpay is designed specifically for the Indian market.

Here's the complete guide to connecting Razorpay to your AiBuildPro store.

Before you start: What you'll need

A Razorpay business account (free to create at razorpay.com)
KYC verification completed (required to process live payments)
An AiBuildPro account with an e-commerce website generated

You can test the integration with Razorpay's test keys before completing KYC. Test mode allows full payment flows with dummy card numbers — no real money moves.

Step 1: Get your Razorpay API keys

You'll see two environments: Test Mode and Live Mode. For production use, make sure you're in Live Mode, then click Generate Key. Razorpay gives you:

Key ID — starts with rzp_live_ (safe to expose, used on the client side)
Key Secret — shown only once, starts with a random string (must be kept secret — never put this in frontend code)

Copy both values immediately. The Key Secret is only shown once — if you lose it, you'll need to regenerate a new key pair.

Step 2: Add your keys in Shop Settings

In AiBuildPro, go to Shop Settings in the sidebar. Find the Razorpay card and toggle it on. You'll see two fields:

Key ID — paste your rzp_live_XXXXXXX key here
Key Secret — paste the secret key here

Click Save. The keys are stored server-side and are never sent to the browser — even when a customer is on your checkout page, only the Key ID (the public one) is passed to Razorpay's JavaScript SDK.

Step 3: Configure your store currency

In Shop Settings, set the Currency to INR. Razorpay's integration in AiBuildPro currently processes in Indian Rupees. The currency setting controls how prices are displayed and how amounts are sent to Razorpay's API.

Step 4: Set up products and shipping

Before testing, make sure you have at least one product added under Products in the sidebar. Set a price, mark it as active and in-stock, and optionally set a shipping charge in Shop Settings.

Step 5: Test the checkout flow

Open your e-commerce website (via the Preview link or your published URL). Add a product to the cart and click Checkout. You'll be taken to the hosted checkout page at aibuildpro.in/checkout/[slug].

On the checkout page, fill in your customer details and select Pay Online. Razorpay's checkout popup will appear. For test mode, use these test card details:

Card number: 4111 1111 1111 1111
Expiry: any future date
CVV: any 3 digits
OTP: 1234

How the payment flow works (technical overview)

Understanding the flow helps you explain it to clients and debug issues:

Customer clicks "Checkout" on the generated website — cart data is base64-encoded and passed to the checkout URL
Checkout page calls POST /api/checkout/[slug]/session with gateway=razorpay and the cart items
Our server calls Razorpay's API to create an Order — this is a server-side operation using your Key Secret
The Order ID is returned to the browser, which opens the Razorpay checkout popup
After the customer pays, Razorpay sends back a razorpay_payment_id and razorpay_signature
Our server verifies the HMAC-SHA256 signature using your Key Secret to confirm the payment is genuine
Only after signature verification passes does the order get saved — preventing spoofed payments

This signature verification step is critical. It means a malicious actor cannot fake a successful payment by sending crafted data to your order endpoint — the HMAC can only be generated by someone who knows your Key Secret.

Going live checklist

KYC verification completed on Razorpay dashboard
Switched from test keys (rzp_test_) to live keys (rzp_live_) in Shop Settings
Store email configured in Shop Settings to receive order notifications
Tested with a real ₹1 payment on live keys before launching
Return policy text added in Shop Settings (displayed on checkout page)

Once you're live, every successful payment will trigger an order confirmation email to the customer and a notification to your store email — all automated, no additional setup required.