Razorpay

How to integrate Razorpay with Webflow

Webflow's native ecommerce checkout supports Stripe and PayPal but not Razorpay, requiring custom implementation for Indian payment methods like UPI and netbanking. These payment methods are widely used in India and unavailable through Webflow's built-in options. Razorpay integration provides access to 180+ payment methods including cards, UPI, netbanking, and mobile wallets.

You can integrate Razorpay with Webflow through Payment Links or Payment Pages that require no backend infrastructure, or build custom checkout flows using the Razorpay API. Payment Links work on any Webflow plan without custom code access.

Payment Pages offer more customization while remaining serverless and hosted by Razorpay. API integration provides complete control but requires backend infrastructure and secure server-side implementation.

Use Payment Links

Payment Links let you accept payments without building checkout pages. You create unique payment URLs through the Razorpay Dashboard and link them from Webflow buttons or forms. This method works on any Webflow plan including free accounts since it requires no custom code or backend server. You can configure 180+ payment methods automatically with support for partial payments and automated reminders.

Log into your Razorpay Dashboard and navigate to Payment Links. Click Create Payment Link and configure the amount, description, and customer notification settings. Copy the generated URL (formatted as https://rzp.io/i/{link_id}) and paste it into your Webflow button's link settings.

Customers click the button and are redirected to Razorpay's hosted payment page where they can complete payment using 180+ payment methods including cards, UPI, netbanking, wallets, and more.

Key capabilities:

• Create payment URLs through the Dashboard interface with fixed or customer-entered amounts
• Set expiry dates for time-limited offers or single-use links
• Enable partial payments for installment scenarios
• Automate reminders via email and SMS for pending payments
• Share across channels including email, WhatsApp, and social media
• Accept international payments in nearly 100 currencies

Payment Links work for scenarios without shopping cart requirements like donation buttons, service bookings, and single product sales. The redirect experience takes users off your site briefly but requires zero technical setup. You can generate links programmatically using the Payment Links API for dynamic scenarios.

Use Payment Pages

Payment Pages are hosted checkout pages maintained by Razorpay that provide customizable payment collection without requiring a website or backend infrastructure.

You build pages through Razorpay's dashboard visual interface and link to them from Webflow. This method offers more design control than Payment Links while maintaining the no-backend-required simplicity.

The Payment Pages product includes pre-made templates for common scenarios like event registration and course enrollment, along with features such as logo upload, color customization, mobile optimization, and support for custom fields.

Create a Payment Page in your Dashboard under Payment Pages and select a template. Upload your logo, customize colors, and configure pricing options (fixed, customer-entered, or suggested amounts).

Add custom fields if you need to collect additional information beyond payment details. Generate the hosted page URL and link it from your Webflow button. The Payment Pages feature supports 180+ payment methods automatically, includes mobile-optimized responsive design, and generates automatic receipts.

Key capabilities:

• Customize branding with logo uploads and color schemes through the customization interface
• Add custom fields including text inputs, dropdowns, and checkboxes
• Pre-fill data using URL parameters passed from Webflow
• Support multiple pricing with fixed amounts, customer-entered values, or suggested amounts
• Mobile optimization with responsive templates that work across devices

Payment Pages handle professional services, event registrations, and membership sign-ups without backend infrastructure. You maintain consistent branding while Razorpay handles the payment infrastructure.

The hosted approach keeps you in PCI SAQ-A (Self-Assessment Questionnaire A, the simplest PCI compliance path) scope with just 22 controls instead of 329 required for server-side card handling.

Build with Webflow forms and automation tools

Critical limitation: This approach introduces processing delays (seconds to minutes, not instant) and requires third-party platform subscriptions, making it unsuitable for real-time checkout experiences. For immediate payment collection, use Payment Links or Payment Pages instead.

Automation platforms connect Webflow form submissions to Razorpay payment creation without writing code. When someone submits a form on your Webflow site, the automation tool creates a Razorpay Payment Link and emails it to the customer.

Use this method when collecting information before generating payment requests. Zapier's Razorpay-Webflow integration and Albato's connector both support this pattern.

Set up accounts with Razorpay, Webflow, and your chosen automation platform (such as Zapier or Albato). Create a workflow that triggers on New Form Submission from Webflow. Add an action to Create Payment Link in Razorpay, mapping form fields to payment parameters. Include an email step to send the generated link to the customer.

Key capabilities:

• Automate payment link generation when customers submit inquiry or order forms using Razorpay Payment Links API
• Calculate dynamic amounts using form field values like quantity or service tier via Zapier or Albato automation
• Send automated emails with payment links and confirmation details through Zapier workflows
• Add conditional logic to route different form types to different payment flows using automation platforms
• Track activity with logging and Razorpay webhook notifications for payment status updates

This approach introduces a few seconds of delay between form submission and payment link creation. You need a paid automation platform subscription (such as Zapier or Albato) in addition to Razorpay fees.

This approach applies to service inquiries, custom quotes, and event registrations that don't require immediate checkout. Test thoroughly for email and publish timing conflicts before using for production orders.

Build with Webflow and Razorpay APIs

The Razorpay API provides custom payment flows embedded directly in your Webflow site. You keep complete control over the checkout experience and keep users on your domain throughout the payment process.

However, this method requires backend infrastructure since API authentication cannot happen client-side. The API provides endpoints for orders, payments, subscriptions, and refunds. Critical note: This integration approach requires significant backend implementation and is not recommended for non-technical users due to PCI DSS compliance requirements (SAQ-D scope with 329 controls).

You need a server or serverless functions (code that runs on-demand without managing servers) to create orders securely. Webflow's shared hosting doesn't provide server-side execution, so you must deploy separate backend infrastructure using serverless functions on platforms like AWS Lambda, Vercel, or Cloudflare Workers. Your backend calls Razorpay APIs using your Key Secret, which must never be exposed to the browser or included in client-side code.

Key capabilities:

• Create orders with POST /v1/orders to generate payment sessions
• Process payments through Standard Checkout integration with modal popup
• Verify payments using signature validation on the Payments API
• Handle webhooks for real-time payment status updates to your backend with events like payment.captured, payment.failed, and order.paid
• Manage refunds through POST /v1/payments/{id}/refund

API integration requires careful attention to PCI compliance. According to Razorpay's Security Shared Responsibility Model, using hosted checkout keeps you in SAQ-A scope with 22 controls. Server-side card handling triggers SAQ-D (Self-Assessment Questionnaire D, the most complex PCI path with 329 controls) requirements including quarterly QSA-validated reports, monthly vulnerability scans, network segmentation, and secure cryptographic storage. You must implement hosted checkout patterns where card data never touches your infrastructure.

Accept payments for ecommerce

Ecommerce implementations using Razorpay with Webflow require a backend server to create orders securely before displaying checkout. Your Webflow site captures product selections through custom JavaScript.

When users click checkout, your code calls your backend API which creates a Razorpay order via the POST https://api.razorpay.com/v1/orders endpoint and returns an order ID. Your frontend then launches Razorpay Checkout with that order ID. According to Razorpay's security documentation, this server-side order creation is essential to prevent duplicate orders and maintain PCI DSS compliance.

The Orders API requires server-side calls authenticated with your Key Secret. Pass the order amount in the smallest currency unit (paise for INR, or the equivalent smallest unit for other currencies). Include custom metadata in the notes field to link Razorpay orders back to your Webflow CMS records.

Subscribe to the payment.captured webhook from the Webhooks documentation to receive real-time payment confirmations. Your backend verifies the webhook signature using HMAC SHA256 (a cryptographic signature algorithm used to verify webhook authenticity) before updating order status in your Webflow CMS through the Webflow CMS API.

Manage subscriptions and recurring billing

Subscription management supports automated recurring billing with flexible models including fixed schedules, quantity-based, and usage-based billing. The platform supports payment methods such as cards, e-Mandate, and UPI AutoPay, with features including trial periods, upfront charges, add-ons, and discounts. Subscriptions also support automatic plan upgrades and downgrades with proration, and support international subscribers in nearly 100 currencies.

Subscription billing requires creating plans and linking them to customers. The Subscriptions API supports flexible billing models including fixed schedules, quantity-based pricing, and usage-based metering. Razorpay's subscription management includes trial periods, upfront charges, add-ons, discounts, and automatic plan upgrades/downgrades with proration.

Create subscription plans with POST /v1/plans defining billing intervals and amounts. When customers sign up, call POST /v1/subscriptions to start their recurring billing. Razorpay automatically charges customers according to the plan schedule, with automatic retries up to 4 times for failed payments using configurable schedules.

Monitor subscription lifecycle through webhooks including subscription.charged when recurring payments succeed and subscription.cancelled when customers end their plans. The Subscriptions Webhooks documentation details all available events including subscription.paused and subscription.failed. Update customer access in your Webflow CMS based on subscription status, using the webhook payload data to sync subscription details like paid_count, remaining_count, and charge_at dates.

Process refunds and cancellations

Refund processing happens through the Refunds API with support for full and partial refunds. Call POST /v1/payments/{id}/refund with the original payment ID and refund amount. Razorpay processes the refund to the original payment method automatically, typically within 5-7 business days.

Refunds typically take 5-7 business days to appear in customer accounts. Subscribe to refund.processed webhooks to receive confirmation when refunds complete. Update your order records in Webflow CMS to reflect refund status.

All refunds are processed as source refunds (returned to original payment method), and you can also automate refund notifications and tracking through webhook events like refund.created and refund.failed for payment status synchronization.

Speed mode provides instant refunds to UPI and cards for faster customer satisfaction. Configure refund settings in your Razorpay Dashboard under Settings > Refund Settings.

Normal refunds typically take 5-7 working days to reach customer accounts, while speed mode provides instant processing for supported payment methods (note that instant refunds apply only to UPI, cards, and netbanking, not all 180+ payment methods).

What you can build

Integrating Razorpay with Webflow lets you accept payments across ecommerce, subscriptions, bookings, and donations with support for Indian payment methods including UPI, netbanking, and mobile wallets unavailable through Webflow's native Stripe and PayPal options.

• Ecommerce storefronts: Build product catalogs in Webflow CMS with Razorpay handling checkout through Payment Links or Payment Pages where customers select products, click checkout, and complete payment through Razorpay's hosted interface supporting 180+ payment methods including UPI, netbanking, cards, and wallets while your backend syncs order status back to Webflow CMS for fulfillment through webhook events like payment.captured and order.paid
• Membership and subscription sites: Create tiered membership plans where users sign up through Webflow forms and pay via Razorpay Subscriptions with automated recurring billing that charges members on configured schedules, using webhooks such as subscription.charged, subscription.cancelled, and subscription.paused to update member access in Webflow CMS when subscription events occur for real-time access control based on payment status
• Event registration and ticketing: Design event pages in Webflow with registration forms that trigger Payment Link creation through automation platforms like Zapier or Albato where attendees receive payment links via email and complete ticket purchases through Razorpay's hosted Payment Links, tracking registrations in Webflow CMS with payment status synchronized through webhooks
• Donation and fundraising campaigns: Build donation pages with custom amounts using Payment Pages or Payment Links where supporters contribute through 180+ payment methods including cards, UPI, netbanking, and digital wallets, using Payment Pages to provide branded experiences with customizable logos and colors