How Do You Set Up Razorpay With Webflow Ecommerce for Indian Clients in 2026?

Why Did Three of My Bengaluru Clients Ask Me About Razorpay and Webflow This Quarter?

Webflow Ecommerce defaults to Stripe and PayPal for checkout. For my clients selling to Indian buyers, that is a problem. Stripe India launched in March 2023 but has tight onboarding rules, and Indian buyers still prefer UPI, RuPay, and netbanking over international card payments. Three of my Bengaluru clients asked me the same question in April and May 2026: how do you set up Razorpay as the actual checkout layer on a Webflow store, without rebuilding the site in Shopify?

I have built this twice in the last six weeks. According to Razorpay's January 2026 State of Payments report, UPI accounted for 49 percent of all digital transactions in India in 2025 and is forecast to hit 56 percent in 2026. If your Indian buyers cannot pay with UPI on your Webflow store, you are walking away from real revenue.

The setup is not difficult, but the docs are scattered across Razorpay, Webflow, and a few community threads. I want to put the full workflow in one place.

What Does the Webflow Ecommerce Plus Razorpay Setup Actually Look Like?

Webflow holds the product catalog, the cart logic, the order confirmation page, and the post-purchase email. Razorpay holds the actual payment step, including UPI, cards, netbanking, wallets like PhonePe and Paytm, and EMI options. The handoff happens at checkout, where Webflow passes the order total to Razorpay's Checkout.js script, and Razorpay returns a payment confirmation back to Webflow via webhook.

Conceptually the architecture matches the Stripe Webflow Ecommerce integration, but Razorpay's checkout opens as an overlay rather than a redirect, which keeps the user on your domain throughout. Indian buyers respond better to that pattern, in my testing, because the URL bar stays familiar.

The data flow is straightforward. Webflow creates the order with a "pending" status, Razorpay handles the actual charge, the webhook updates the Webflow order to "paid," and a confirmation email goes out. The whole thing takes about ninety seconds from cart to thank-you page on a normal 4G connection.

What Razorpay Account and Webflow Plan Do You Need?

You need a Razorpay Standard or Pro account, which requires KYC documents from the business. For an Indian private limited company that takes about two business days to clear in 2026, based on the two onboardings I did this quarter. Razorpay's fees start at 2 percent per transaction for UPI and netbanking, dropping to about 1.5 percent for high-volume merchants.

On the Webflow side, you need an Ecommerce Plus or Advanced plan to access webhook payloads and custom checkout code injection. The Standard Ecommerce plan does not let you intercept the cart in the way this setup needs. If you are already on the Workspace plan, you may need to upgrade just one site.

For the broader Webflow plan context, my walk-through of the Webflow May 2026 pricing reset covers what each tier now includes, including how Ecommerce features map across the new plan structure.

How Do You Wire Razorpay Into the Webflow Checkout Flow?

The first step is to disable Webflow's native Stripe checkout for Indian-currency products, by removing Stripe from the payment methods in Webflow Ecommerce Settings. You replace the default checkout button with a custom button on the cart page that opens a Razorpay Checkout overlay when clicked.

The button click handler does three things. It fetches a Razorpay order ID from a small serverless function (I run mine on Cloudflare Workers because it is cheap and fast from India). It opens the Razorpay Checkout overlay using their official Checkout.js script. It listens for the payment success event, then submits a Webflow form that creates the order in the Webflow CMS via a webhook.

The trick to making this feel native is keeping the Razorpay overlay theme aligned with your brand. Razorpay's checkout supports custom colors, a custom logo, and prefilled buyer details, all set on the script init call. I always pass the buyer's name, email, and phone from the Webflow form so they do not retype it inside the overlay.

How Does the Cloudflare Worker That Sits in the Middle Actually Work?

The Worker has two routes. The first creates a Razorpay order using Razorpay's REST API with a server-side key, returning the order ID to the browser. The second handles the Razorpay webhook that fires after payment, verifying the signature using the shared secret, and updating the Webflow order via Webflow's Data API.

Signature verification is the part nobody should skip. Razorpay signs every webhook with an HMAC-SHA256 of the payload using your webhook secret. If you do not verify, anyone who knows your endpoint URL can mark fake orders as paid. The verification is about ten lines of code in the Worker, and it has to run before any database write.

The Worker also handles refunds via the Razorpay Refunds API, which I trigger from a private admin page inside the Webflow site. That keeps the entire payment flow contained to the same architecture, instead of pushing the team into the Razorpay dashboard for every refund.

What About Compliance, GST, and Indian Tax Rules?

You need to collect GST on every Indian transaction. Razorpay returns tax-inclusive amounts in the payment payload, but you must structure the cart so that the GST line is visible to the buyer before they pay. I add a GST line item in the cart total breakdown, calculated as 18 percent of the pre-tax amount for software products. The percentage varies by category, so check with your CA.

For invoicing, I use a combination of Razorpay's invoice generation and a Webflow CMS template that holds the invoice number, GSTIN, and HSN code. Once an order is marked paid, the Worker triggers an invoice creation in Razorpay using their Invoices API and pushes the PDF link into the order confirmation email.

If your client sells to international buyers as well as Indian ones, you can run both Stripe and Razorpay on the same Webflow store. The trick is to detect the buyer's location with a Cloudflare Worker, then show the relevant checkout button. I default to Razorpay for IN traffic and Stripe for everything else, which keeps the buyer experience aligned with their default expectations.

How Do You Test the Whole Flow Before You Go Live?

Razorpay provides a test mode with separate API keys, test card numbers, and a test UPI handle (success@razorpay). Run the entire end-to-end flow in test mode first. Place a cart, open the checkout, complete the payment with the test card, verify the webhook fires, confirm the order appears in Webflow as paid, and confirm the buyer receives the confirmation email.

Run the flow at least three times before flipping to live mode. Once, with a successful payment. Once, with a failed payment, to confirm the cart returns the buyer to a clear retry state. Once, with an interrupted payment, where the buyer closes the overlay mid-flow, to confirm the cart does not get stuck in a pending limbo.

For the broader question of recovering interrupted carts, the setup I describe in my piece on setting up abandoned cart emails in Webflow Ecommerce applies once you have the Razorpay integration solid. The two features stack neatly.

How Does the Razorpay Webflow Setup Compare to Just Using Shopify in India?

Shopify supports Razorpay as a native payment provider, and the setup is faster. You toggle Razorpay in the Shopify payments section, paste in keys, and you are done. For pure ecommerce stores selling Indian DTC products, Shopify is usually the cleaner choice.

Where Webflow wins is when the site is primarily a marketing site with a small commerce layer. A B2B SaaS site selling annual contracts plus occasional one-time add-ons, a Webflow Conf-style content site selling tickets and merchandise, or a portfolio site selling courses, all benefit from Webflow's design control and CMS depth. The Razorpay setup gives them Indian payment options without losing that depth.

For the longer comparison, the angle I cover in my piece on Webflow Ecommerce versus Shopify in 2026 walks through the decision tree. Razorpay is one of the levers that swings the answer toward Webflow for India-first stores.

What Does This Cost to Build and Run?

Build time was about twelve hours on the first client and seven hours on the second once I had the Cloudflare Worker template ready. Ongoing costs are predictable. Razorpay charges 2 percent per UPI transaction, dropping with volume. Cloudflare Workers is free for the first 100,000 requests per day, which covers any small to mid-volume Indian ecommerce site comfortably.

The Webflow Ecommerce Plus plan adds 39 dollars a month over the standard Webflow plan as of the May 2026 pricing reset. For a store doing more than about fifteen orders a month at average ticket size, that pays for itself in saved transaction fees over Stripe's international rates alone.

The hidden cost is your time on setup. If you have not built a Cloudflare Worker before, allow an extra half-day to get comfortable with deployment, environment variables, and signature verification. Razorpay's docs are good. Webflow's Data API docs are good. The middle piece is on you.

How Should You Start on This in the Next Two Weeks?

Open a Razorpay test account today. Read their Checkout.js documentation end to end. Build a single-page sandbox that opens the Razorpay overlay with a hard-coded amount and confirm you can complete a test payment. That step alone teaches you 70 percent of what the full Webflow integration needs.

Then spin up a free Cloudflare Workers account, deploy a single-route Worker that returns a Razorpay order ID, and confirm your sandbox page can call it. That is the architecture proof. Only once you have those two pieces working should you start wiring Webflow into the loop.

If you want help building this for your store, or you want me to review the architecture before you commit time to it, I am happy to walk through it. Let's chat.