Razorpay

Selling to Indian buyers means accepting UPI, netbanking, RuPay, and mobile wallets — none of which the native ecommerce checkout (Stripe and PayPal) can process. Razorpay closes that gap with hosted payment pages, embeddable checkout buttons, Zapier automations, or a custom flow built on Razorpay and the Data API.

This works for Indian D2C brands, course creators, NGOs collecting donations, freelancers invoicing in INR, and SaaS companies targeting Indian subscribers — or any team collecting payments from Indian customers.

How to integrate Razorpay with Webflow

What is Razorpay? Razorpay is an India-headquartered payments platform that lets businesses accept, process, and disburse payments across 100+ methods, including UPI, netbanking, cards, wallets, and EMI. It is an RBI-authorized Payment Aggregator with PCI DSS Level 1 certification, so merchants using the hosted checkout do not need their own PCI certification.

The native ecommerce checkout supports Stripe and PayPal, so if you need UPI, netbanking, RuPay, or Indian mobile wallets, you need another payment flow. If you're building for Indian markets, you need a gateway that accepts local payment methods. Razorpay accepts UPI (Google Pay, PhonePe, PayTM) and netbanking across major Indian banks. It also accepts RuPay cards, mobile wallets, and EMI options. Sites can't run server-side code natively, so choose the integration method based on the level of checkout control you need and whether you have access to a backend server.

The Razorpay integration supports 4 approaches:

• Razorpay Payment Links and Payment Pages redirect customers to a hosted Razorpay checkout. They require zero code and work on any plan.
• Razorpay Payment Button embeds place an inline checkout modal on your page. They use a Code Embed element.
• Zapier and automation tools connect form submissions to Razorpay payment link creation. They can also sync payment events back to CMS collections.
• The Data API and Razorpay API give you direct control over order creation, payment verification, and CMS data sync. They require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Link to Razorpay payment links or payment pages

Razorpay Payment Links and Payment Pages are the simplest way to collect payments from your site. Both work on any plan, including free accounts, because they require no custom code. Customers click a button on your page and land on a Razorpay-hosted checkout. After completing payment, they return to your site. Payment Pages add branding options (logo, colors, custom fields). They also include pre-built templates for event registration and course enrollment.

Set up a payment link

Payment Links generate a shareable URL for a fixed-amount payment. You create the link in the Razorpay Dashboard and attach it to any button or text element on the canvas.

To create and add a Payment Link:

1. In the Razorpay Dashboard, go to Payment Links and click Create Payment Link.
2. Set the amount, description, and customer notification preferences. Optionally configure expiry dates and partial payment settings.
3. Copy the generated URL (formatted as https://rzp.io/i/{link_id}).
4. Select a button or text element on the canvas.
5. In the Link Settings panel, set the link type to URL and paste the Razorpay Payment Link URL.
6. Set the link to open in a new tab, then publish the site.

Payment Links work well for donations, single-product sales, and service bookings where the amount is fixed. They do not support carts or dynamic pricing without API integration. They are best for simple one-time payments.

Set up a payment page

Payment Pages give you a branded, hosted checkout page with custom fields, logo uploads, and color schemes. They accept fixed amounts, customer-entered values, and suggested donation amounts.

To create and link a Payment Page:

1. In the Razorpay Dashboard, go to Payment Pages and click + Create Payment Page.
2. Add page details: business information, payment fields, and custom input fields. Field types include text, dropdowns, and checkboxes. Customize the Pay Button label (16-character maximum).
3. Configure payment receipt settings and page options like URL customization, theme, and expiry date.
4. Publish the page and copy the URL.
5. Link any button or text element to the Payment Page URL. Alternatively, copy the embed code from the Razorpay Dashboard and paste it into a Code Embed element on your page.

Payment Pages are available in India, Malaysia, the United States, and Singapore. URL customization only works in live mode, not test mode. To embed the page using a Code Embed element instead of linking to it, you need a paid site plan with custom code in head and body tags. Use this option when you want a hosted checkout with more branding and form fields.

Embed Razorpay payment buttons with Code Embed elements

Razorpay Payment Buttons open a checkout modal directly on your page without redirecting the customer. The button types include Quick Pay, Buy Now, Donations, and Custom. You need a paid site plan because this method uses custom code in head and body tags. You don't need a backend server or programming knowledge.

To create and embed a Payment Button:

1. In the Razorpay Dashboard, go to Payment Button and click + Create Payment Button.
2. Select a template, fill in the button details (amount, description, customer details), and click Create Button.
3. Click Get Code and copy the generated embed code.
4. Open the Add panel. Drag a Code Embed element onto the canvas and double-click to open the code editor.
5. Paste the Razorpay Payment Button embed code and click Save and close.
6. Publish the site.

You can test the button before going live. Paste the code into the Payment Button Test Widget in the Razorpay Dashboard.

Payment Buttons accept Razorpay payment methods listed for checkout. Card data never touches your site (PCI SAQ-A scope). Don't include <html>, <body>, or <head> tags in the embed code. Each Code Embed element supports up to 50,000 characters. Use this method when you want an inline modal without building a backend.

Add payment buttons to individual CMS items

CMS collections with course catalogs, product listings, or event directories can include unique Payment Buttons. You embed a button inside each CMS item's Rich Text field. This lets each item carry its own checkout button with a specific amount.

To embed a button in a CMS item:

1. Go to the CMS panel and select the collection containing a Rich Text field.
2. Open the collection item you want to add a button to.
3. In the Rich Text field, create a new line and click the Plus icon.
4. Select HTML embed and paste the Razorpay Payment Button code for that item's specific amount.
5. Click Save & Close.

Each CMS item needs its own manual entry. This works best for catalogs with a manageable number of items rather than dynamically generated prices. It is most practical when each item has a stable fixed amount.

Embed subscription buttons for recurring billing

Razorpay Subscriptions support recurring billing at monthly, quarterly, or annual intervals. You can embed a subscription checkout button on your page the same way you embed a Payment Button.

To set up a subscription embed:

1. In the Razorpay Dashboard, create a Plan with the billing amount and interval. Enter amounts in paise (₹999/month = enter 99900).
2. Generate a Subscription Button embed code from the Dashboard.
3. Paste the code into a Code Embed element and publish.

The subscription button opens an inline modal for the initial authorization payment. To pause, resume, or cancel subscriptions, you need a backend server calling the Subscriptions API. This method covers the checkout step, but not full subscription lifecycle management.

Connect with Zapier or automation tools

Automation platforms connect your site and Razorpay without custom code. They work well when a small delay between payment and action is acceptable. Example workflows include logging payment records, sending follow-up emails, or updating member status in a CMS collection.

Zapier offers a Razorpay connection with confirmed triggers and pre-built templates.

Available triggers and actions include:

• Razorpay Invoice Paid → Create a CMS item (log a customer or order record)
• Razorpay Payment Failed → Update an existing CMS item (flag a failed transaction)
• Form submission → Create a Razorpay Payment Link (send the link to the customer by email)
• Razorpay subscription charged → Update a CMS item status to "active"

Keep in mind that automation platforms introduce processing delays of seconds to minutes (see the integrations page for details). They are not a good choice for real-time checkout experiences. Use this approach for post-payment workflows like record-keeping, notifications, or membership status updates. In practice, automation works best around the checkout rather than as the checkout itself.

Build with the Data API and Razorpay API

API integration gives you direct control over order creation, payment verification, subscription management, and CMS data sync. It requires server-side development. Razorpay's Standard Checkout needs an order_id generated on a backend. Payment verification requires HMAC SHA256 signature validation using the key_secret. That secret must never appear in client-side code.

You need an external backend hosted on a platform like Vercel, Netlify Functions, Render, or Railway. Your site handles the frontend (buttons, forms, layout). The backend handles Razorpay API calls and webhook processing.

Use these APIs:

• Razorpay Orders API creates orders server-side before checkout
• Razorpay Payments API captures authorized payments and retrieves payment details
• Razorpay Payment Links API generates shareable payment URLs programmatically
• Razorpay Subscriptions API manages recurring billing plans and subscription lifecycles
• Data API reads and writes collection items for storing payment records
• Webhooks trigger real-time events between systems

The two APIs use different authentication. Razorpay uses HTTP Basic Authentication (key_id as username, key_secret as password). The Data API uses Bearer tokens. For a single-site integration, a Site Token works well. These endpoints cover checkout creation, payment confirmation, and CMS updates.

Create orders and process payments with checkout.js

The standard API checkout flow has two stages. Your backend creates a Razorpay order first. Your page then loads checkout.js to display the payment modal.

To implement API-based checkout:

1. Your page sends cart data to your backend via a fetch() call.
2. The backend calls POST https://api.razorpay.com/v1/orders with the amount in paise (₹500 = 50000), currency, and a notes object. Include any identifiers you want echoed back in webhooks.
3. The backend returns the order_id to your page.
4. Client-side JavaScript on the page initializes Razorpay's checkout.js. Pass the order_id and your key_id (public key only).
5. The customer completes payment in the checkout overlay.
6. Razorpay fires a payment.captured webhook to your backend endpoint.
7. Your backend validates the webhook signature using HMAC SHA256. It then calls the Data API (POST /v2/collections/{collection_id}/items/live) to create an order record.

Only the key_id appears in custom code. The key_secret stays in your backend as an environment variable. Client-side callbacks alone are not reliable for order fulfillment. Customers may close the browser before the callback fires. Always use server-side webhook handling for payment confirmation. This route gives you the most control, but it also has the highest implementation overhead.

Sync payment events to the CMS with webhooks

Razorpay webhooks push payment events to your backend in real time. Your backend then writes or updates records in CMS collections.

To set up webhook-driven CMS sync:

1. In the Razorpay Dashboard, go to Accounts & Settings then Webhooks. Click + Add New Webhook.
2. Enter your backend's HTTPS endpoint URL and set a webhook secret. Select the events you want to receive (payment.captured, order.paid, subscription.charged, refund.created).
3. In your backend, validate every incoming webhook. Compute HMAC SHA256(raw_request_body, webhook_secret) and compare it to the X-Razorpay-Signature header. Reject any request where signatures do not match.
4. Use the x-razorpay-event-id header to deduplicate events. Razorpay may retry delivery.
5. After validation, call the Data API to create or update items. Use the /items/live endpoint for real-time updates that bypass the staging step.

Razorpay may fire both payment.captured and order.paid for the same successful payment flow. Subscribe to one of these events, not both, to avoid duplicate processing. Webhook responses must return a 2XX status code within 5 seconds. Failed deliveries are retried with exponential backoff for 24 hours before the webhook is disabled.

A recommended CMS collection schema for payment records includes these fields:

• payment_id (Plain Text)
• order_id (Plain Text)
• amount (Number, divided by 100 from paise)
• currency (Plain Text)
• payment_status (Option)
• customer_email (Email)
• razorpay_event_id (Plain Text, for deduplication)

This gives you a minimal structure for creating or updating payment records in the CMS.

Convert Unix timestamps to ISO 8601 format before writing to a Date/Time field. Use new Date(created_at * 1000).toISOString() for the conversion. That keeps webhook timestamps usable inside CMS records.

What can you build with the Razorpay Webflow integration?

Integrating Razorpay lets you accept Indian payment methods without giving up the design and CMS tools you already use.

• Build a course catalog using the CMS and embed Razorpay Payment Buttons on each course page. Students can pay the full amount via UPI or split it into EMI installments. This removes the barrier of requiring an international credit card.
• Create a fundraising landing page. Link to a Razorpay Payment Page with a Goal Tracker widget showing progress. Razorpay sends 80G tax receipts to donors automatically. This removes manual compliance work for NGO teams.
• Embed Razorpay subscription buttons on a membership page. When a subscriber's payment succeeds or lapses, webhooks update their status in a CMS collection. Use Memberships to gate content based on subscription status.
• Set up a portfolio site with a project inquiry form. Connect the form to Zapier so each submission generates a Razorpay Payment Link. Share the link via WhatsApp, email, or SMS. Clients pay instantly via UPI or netbanking.

Use the API integration path when you need more control over order tracking, inventory management, or multi-vendor payment splitting.