Your Webflow site is live and beautiful. Then a paying customer in Mumbai tries to check out with UPI and finds no option. A client in New York enters their card and gets declined. Suddenly your revenue layer is broken, and you are asking the obvious question: my Webflow site is live, but Indian buyers and foreign clients cannot pay me – how do I fix this with Razorpay?

Here is the correction you need first: being listed in Webflow’s integration directory is not the same as native checkout support. Webflow’s native ecommerce checkout does not offer Razorpay as a provider. Every working setup below deliberately bypasses that native cart.

By the end of this tutorial, you will have a working payment layer for both domestic and international clients, plus the compliance trail an Indian business legally needs. The opportunity is real: India’s digital payment gateway market reached USD 4.6 billion in 2025 and is projected to hit USD 22.4 billion by 2034, and UPI now accounts for 49% of global real-time payment transaction volume.

Key Takeaways

  • Webflow’s native ecommerce checkout does not support Razorpay. All four integration methods bypass it entirely.
  • Payment Links and Payment Pages work on any Webflow plan, including free accounts. Payment Button embeds and custom code require a paid site plan.
  • Razorpay international payments are disabled by default. You request activation separately and submit compliance documents. Approval typically takes 2 to 3 business days.
  • Two international tracks exist: the Export flow (Indian business billing foreign clients, 3% MDR) and the Import flow (foreign business accepting payments from Indian consumers, 3.5% including forex).
  • Every international payment settled into an Indian bank account generates an eFIRC, needed for FEMA compliance and GST export filing.
  • Indian businesses must file a Letter of Undertaking (LUT) before the financial year to export services at 0% IGST, or 18% IGST applies.
  • Razorpay received the RBI Payment Aggregator – Cross Border (PA-CB) licence in December 2025.

Does Webflow Support Razorpay Natively as a Payment Gateway?

No. Webflow’s native ecommerce checkout is restricted to specific providers and does not include Razorpay. Razorpay works on Webflow through four custom integration methods – Payment Links, Payment Button embeds, Zapier automation, and full API checkout – none of which use Webflow’s native cart flow.

What Webflow’s Integration Directory Listing Actually Means

  • The listing confirms Razorpay and Webflow can work together, but via custom methods rather than native checkout support.
  • There is no toggle or plugin in Webflow’s ecommerce payment settings that adds Razorpay as a provider.
  • Indian merchants expecting a one-click gateway toggle will waste hours in the wrong settings panel.

Which Webflow Plan Do You Need for Each Razorpay Integration Method?

Integration Method Webflow Plan Required Code Required Best For
Payment Links (redirect to hosted checkout) Any plan, including free None Freelancers, single-product sellers
Payment Pages (embed or redirect) Redirect: any plan. Embed: paid plan None for redirect; HTML for embed Branded hosted checkout, NGOs, events
Payment Button embed (inline modal) Paid site plan Paste embed code in Code Embed element Small catalogs, 1-5 products
Checkout.js API + serverless backend Paid site plan JavaScript + serverless function High-volume stores, SaaS
Zapier automation (form-to-payment link) Any plan None Agencies, consultants, dynamic pricing

How to Integrate Razorpay with Webflow: 4 Methods Ranked by Complexity

Razorpay integrates through four distinct paths. Choose based on your technical comfort, your number of products, and whether you need UPI, international cards, or both.

PRO-TIP: Enable UPI as your primary checkout method before embedding any button or link. UPI achieves approximately a 99.2% payment success rate compared to 70-80% for international cards.

Method 1 – Razorpay Payment Links and Payment Pages (Zero Code, Any Webflow Plan)

These redirect your Webflow visitor to a Razorpay-hosted checkout. Zero code, works on every plan including free, and activates domestic UPI, netbanking, cards, and wallets by default. For international buyers, set the link currency to USD, GBP, or EUR after activating international payments. Learn more about what Payment Links are before you start.

Setting Up Razorpay Payment Links on Webflow (Step by Step)

  1. Log into your Razorpay Dashboard and go to Payment Links.
  2. Click Create Payment Link. Set the amount, currency, description, and expiry date.
  3. For international clients, assign your RBI purpose code here (P0802, P0807, P1006). This is embedded in the auto-generated eFIRC.
  4. Copy the generated URL.
  5. In Webflow Designer, select the button or text element for your “Pay Now” trigger.
  6. In Link Settings, set the link type to URL, paste the Razorpay URL, and set it to open in a new tab.
  7. Publish your Webflow site.

For cross-border billing, our guide on accepting international payments with Payment Links covers currency selection.

Setting Up Razorpay Payment Pages on Webflow (Step by Step)

  1. Create a Payment Page in the dashboard and add business information and custom fields.
  2. Set the theme, expiry, and URL slug (URL customization works in live mode only).
  3. Publish and copy the URL.
  4. To link it, attach the URL to any button. To embed it, paste the embed code into a Code Embed element (requires a paid Webflow plan).

Supported business locations include India, Malaysia, the United States, and Singapore.

Method 2 – Razorpay Payment Button Embed (Inline Modal, Paid Webflow Plan Required)

Payment Buttons open a Razorpay checkout modal directly on your Webflow page without redirecting. The buyer stays on your domain. This requires a paid site plan and needs no backend. Read what a Payment Button is for context.

Embedding a Razorpay Payment Button on a Webflow Page

  1. In the Dashboard, navigate to Payment Button.
  2. Create a Payment Button. Select a template. Enter the amount, currency, and description.
  3. Click Get Code and copy the embed snippet.
  4. In Webflow Designer, drag a Code Embed element to the button location.
  5. Double-click, paste the embed code (do not include html, body, or head tags). Save and close.
  6. Publish. The button renders only on the published site, not in the Designer canvas.
  7. To test before going live, paste the code into the Payment Button Test Widget.

Adding Payment Buttons to Individual Webflow CMS Items

  • Useful for course catalogs or product listings.
  • Inside a CMS Rich Text field, add an HTML Embed with the button code for that item’s price.
  • Each item needs its own manual entry, so this works best for catalogs with a manageable number of items.

Embedding Razorpay Subscription Buttons for Recurring Billing

  • Create a Plan in the dashboard (enter amounts in paise – Rs 999/month means 99900).
  • Generate a Subscription Button embed and paste it into a Code Embed element.
  • This covers the initial checkout and first payment, but managing the full lifecycle requires a backend calling the Subscriptions API.
  • UPI Autopay mandates up to Rs 15,000 per cycle are supported.

Method 3 – Zapier Automation (No Backend, Form-to-Payment Link Workflow)

This connects Webflow form submissions to Razorpay payment link creation without any server-side code. Best for agencies, consultants, and service businesses with dynamic pricing.

Key trigger-action pairs:

  • Webflow Form Submitted to Razorpay Create Payment Link to Send Email
  • Razorpay Invoice Paid to Webflow: Create CMS Item
  • Razorpay Payment Failed to Webflow: Update CMS Item
  • Razorpay Subscription Charged to Webflow: Update CMS Item status to active

Automation introduces delays of seconds to minutes. Use it for post-payment workflows and notifications, not as your real-time checkout layer.

Method 4 – Razorpay Checkout.js API Plus Serverless Backend (Full Control)

This gives complete control over order creation, payment verification, and CMS sync. It requires a serverless backend to hold your Razorpay Key Secret securely – never in client-side Webflow code. Standard Checkout needs an order_id generated server-side before the overlay opens.

Webflow handles the frontend. The serverless function handles Razorpay API calls and webhook processing. The Webflow Data API writes payment records back to your CMS.

  1. The buy button click sends cart data to your serverless backend via a fetch() call.
  2. The backend calls POST https://api.razorpay.com/v1/orders with the amount in paise, currency, and a notes object.
  3. The backend returns the order_id to your Webflow page.
  4. Client-side JavaScript initializes checkout.js with the order_id and your public key_id only.
  5. The buyer completes payment in the overlay.
  6. Razorpay fires a payment.captured webhook to your backend.
  7. The backend validates the webhook signature using HMAC SHA256, then calls the Webflow Data API to create the order record.
Field Name Field Type Purpose
payment_id Plain Text Razorpay payment identifier
order_id Plain Text Razorpay order identifier
amount Number (divide by 100 from paise) Transaction value
payment_status Option Captured, Failed, Refunded
razorpay_event_id Plain Text Deduplication key for webhooks

DID YOU KNOW: UPI processed 228.3 billion transactions in 2025, a 29.3% jump from 2024, making it the largest real-time payment system in the world by volume.

How to Enable International Payments on Razorpay for Your Webflow Site

International payments are disabled by default on every new account. Activating them requires a separate request plus compliance document submission, and approval takes 2 to 3 business days. First, understand which of the two tracks applies, because setup, fees, and documents differ.

The Export Flow vs Import Flow – Which One Do You Need?

Attribute Export Flow Import Flow
Who uses it Indian business billing foreign clients Foreign business accepting payments from Indian consumers
Customer location Outside India Inside India
Applicable Razorpay rate 3% per international card transaction 3.5% including forex
Settlement INR to Indian bank account Foreign currency to overseas account
eFIRC generated Yes, per settled transaction Not applicable

Decision rule: If you are an Indian D2C brand, agency, freelancer, or SaaS founder billing clients in USD, GBP, EUR, or AED, you need the Export flow. This guide covers it.

Step-by-Step: Activating International Payments (Export Flow) on Razorpay

  1. Log into your Razorpay Dashboard. Our guide on how to use the Razorpay Dashboard helps if you are new.
  2. Go to Account and Settings, and under Payment Methods find International Payments.
  3. Click Request Activation.
  4. Complete the activation form: business model description, your live Webflow site URL, links to your Shipping Policy, Returns Policy, Terms of Service, and Contact pages, and IEC upload if you export physical goods.
  5. Submit and check status. If rejected, resolve the stated reason and resubmit.

What Pages Must Your Webflow Site Have Before Razorpay Approves International Payments?

Build these in Webflow and link them in your footer before submitting:

  • Refund and Cancellation Policy with specific timelines
  • Terms of Service
  • Privacy Policy specifying data collection purposes
  • Contact Us with a physical address, phone, and working email
  • Shipping and Delivery Policy if selling physical goods

Does the IEC Requirement Apply to Service Exporters and Digital Product Sellers?

For physical goods exporters, an IEC issued by the DGFT is mandatory before activation. Apply on the DGFT online portal. For digital product sellers and service exporters, an IEC is not required to receive foreign payment – submit a business model description instead.

PRO-TIP: Apply for your IEC before requesting activation if you sell physical goods. Requesting activation without an IEC results in an immediate rejection.

What Does Accepting International Payments via Razorpay on Webflow Actually Cost?

Three cost layers apply.

Fee Layer Rate Applied To
Razorpay International MDR (Export flow) 3% per transaction Transaction value
GST on Razorpay’s gateway fee 18% of the 3% fee Razorpay’s fee only
Webflow native ecommerce transaction fee Not applicable N/A

Worked example on a USD 100 order (Rs 85/USD = Rs 8,500): Razorpay MDR (3%) is Rs 255, GST on the gateway fee is Rs 45.90, and you receive approximately Rs 8,199.

Because you bypass Webflow’s native checkout, Webflow does not charge a native ecommerce transaction fee. The domestic Razorpay rate is 2% per transaction. See our full payment gateway pricing breakdown.

How to Test Razorpay Payments on Your Webflow Site Before Going Live

Testing on a live site with real money is the most common mistake. Razorpay provides a full Test Mode with separate keys, test cards, and simulated UPI IDs.

Card Network Test Card Number CVV and Expiry
Visa (International) 4239 5360 0631 5640 Any CVV, any future expiry
Mastercard (International) 5421 1393 0609 0628 Any CVV, any future expiry
American Express (International) 3779 849088 69514 Any CVV, any future expiry

For UPI testing, use success@razorpay to simulate a successful payment and failure@razorpay to simulate a decline. Switch to Live Mode keys (rzp_live_…) before going live.

Pre-launch checklist:

  • One successful test payment
  • One failed payment (confirm a clear retry state)
  • One interrupted payment (confirm the cart does not freeze)
  • Verify the webhook fires and the CMS record appears
  • Verify the eFIRC generates, and the buyer receives confirmation

PRO-TIP: Run the test cycle end-to-end on a real mobile device. Fix any overlay rendering issues on a 375px screen before launch.

How to Run Both Domestic UPI and International Card Payments on the Same Webflow Site

Option A – Dual-button approach (no code, any plan): Place a “Pay with UPI / Indian Card” button linked to an INR Payment Link, and a separate “Pay in USD / GBP / EUR” button linked to a foreign-currency Payment Link. Buyers self-select.

Option B – Location-based detection (Checkout.js API and serverless backend): The backend detects the buyer’s IP-based country on page load. If IN, it initializes with UPI and Indian methods; if not, international cards and foreign currency.

DID YOU KNOW: In urban India, UPI is the preferred payment method at 34%, ahead of card payments at 20% and digital wallets at 8%.

India Compliance for Webflow Businesses Collecting International Payments: eFIRC, RBI Purpose Codes, and GST LUT

Every Indian business collecting foreign currency through Razorpay on Webflow must handle three compliance requirements in parallel with the technical setup. Skipping any can trigger a bank query, a FEMA violation, or an unexpected 18% GST liability.

DID YOU KNOW: Razorpay received the RBI Payment Aggregator-Cross Border (PA-CB) licence in December 2025, making us one of the few RBI-licensed entities authorised to facilitate cross-border payment collections.

What Is an eFIRC and How Do You Download It From Razorpay?

An eFIRC (Electronic Foreign Inward Remittance Certificate) is the RBI-mandated document proving foreign currency was legally received into an Indian bank account. We auto-generate one eFIRC per settled international transaction. Your accountant needs it for GST export returns, LUT compliance, and FEMA realisation.

How to access it:

  1. Log into your Dashboard and go to Reports then Settlements.
  2. Filter by international transactions.
  3. Click the settlement entry and download the eFIRC PDF.

Store eFIRCs in a financial year-wise folder alongside the invoice and bank credit statement. Our guide on foreign inward remittance and RBI guidelines explains the trail.

Which RBI Purpose Code Do You Select for Your Service or Product Export?

Every international payment must be tagged with an RBI purpose code. It appears in your eFIRC and is filed with your bank.

Service Type RBI Purpose Code
Software consultancy and implementation for foreign clients P0802
Off-site software exports delivered remotely from India P0807
Business and management consultancy P1006
Advertising, market research, public opinion P1007
Physical goods export P0101

For Payment Links, assign the purpose code in the international payment fields. For Checkout.js, pass it in the notes object of the order creation call. Our P0802 purpose code guide helps software exporters pick correctly.

GST LUT Filing: How to Export Services at 0% IGST Instead of 18%

Under GST, export of services is a zero-rated supply. You do not charge IGST on international invoices, but only if you have filed a Letter of Undertaking (LUT) on the GST portal at the start of each financial year.

  • With a valid LUT: export services without collecting IGST and claim input tax credit refunds.
  • Without an LUT: charge 18% IGST, then apply for a refund. This creates cash flow strain.

To file: log in to the GST portal, go to Services – Returns – LUT, and file Form GST RFD-11 for the relevant financial year. It is valid for one full year.

Under FEMA, service exports made before October 1, 2026 must have foreign currency realised within 9 months of the invoice date. From October 1, 2026, the updated FEMA framework sets this to 15 months. Document the invoice and settlement dates for every transaction.

How Razorpay Powers Webflow International Payments for Indian Businesses

This architecture works because Razorpay is an RBI Payment Aggregator with a PA-CB (cross-border) licence and PCI DSS Level 1 certification, not just a button generator. When you build any of the four integrations, we handle the regulated infrastructure underneath.

Capability What It Means for Your Webflow Site
RBI-compliant settlement reporting Inward remittances reported per regulatory requirements
Real-time currency conversion Foreign payments settled as INR into your Indian bank account
eFIRC auto-generation One certificate per settled international transaction
3D Secure 2.0 authentication Applied on international card transactions with smart retry logic
100+ payment methods UPI, netbanking, RuPay, wallets, and EMI through one overlay
Smart Routing Higher transaction success rates via intelligent routing

The same infrastructure serves a solo freelancer and an enterprise D2C brand. Explore our full international payments product.

5 Common Razorpay-Webflow Integration Errors and How to Fix Them

  • Error 1: Order shows “Pending Payment.” Cause: webhook delivery failure. Fix: verify the webhook endpoint URL and secret in Dashboard – Webhooks.
  • Error 2: International card option not visible. Cause: activation is Pending or Rejected. Fix: check status, resolve the stated reason, and resubmit.
  • Error 3: “key_id not found” error. Cause: Test Mode keys used on a live site. Fix: confirm Live Mode and regenerate Live keys.
  • Error 4: Payment Button does not render. Cause: previewing in the Designer canvas. Fix: publish and test on the live URL, and strip any html, body, or head tags.
  • Error 5: Duplicate CMS items. Cause: both payment.captured and order.paid webhooks fire. Fix: subscribe to only one event and add deduplication using the razorpay_event_id.

Frequently Asked Questions

How do I integrate Razorpay with Webflow?

Four methods: Payment Links or Payment Pages (no code, any plan), Payment Button embeds (Code Embed element, paid plan), Zapier automation (no code, post-payment workflows), and the Checkout.js API with a serverless backend. None uses Webflow’s native ecommerce checkout.

Does Webflow support Razorpay natively as a payment provider?

No. Webflow’s native ecommerce checkout does not include Razorpay. The integration listing covers custom methods rather than a toggle in Webflow’s payment settings. You bypass the native checkout entirely when using Razorpay.

What Webflow plan do I need to add Razorpay to my site?

Payment Links and Payment Pages (redirect) work on any plan including free. Payment Button embeds, Checkout.js custom code, and any integration using Code Embed elements require a paid Webflow site plan.

How do I accept international payments on Webflow in India?

Complete Razorpay KYC, request International Payments activation, submit compliance documents and live Webflow policy pages, wait 2 to 3 business days, then create Payment Links in foreign currencies or configure Checkout.js with international card methods enabled.

What is an eFIRC and does Razorpay generate it automatically?

An eFIRC is RBI-mandated proof that foreign currency was legally received into an Indian bank account. We auto-generate one per settled international transaction. Download it from Dashboard – Reports – Settlements. Your accountant needs it for GST export filing and FEMA documentation.

What is the difference between the Razorpay Export flow and Import flow?

The Export flow is for Indian businesses billing foreign clients – the buyer pays in USD, GBP, or EUR and you receive INR (3% per card transaction). The Import flow is for foreign businesses accepting payments from Indian consumers in INR (3.5% including forex).

Author

Marvil Fernandes is a content marketing professional at Razorpay, specialising in research-driven content across payments, banking infrastructure, and financial technology. As an Associate in the content marketing team, he focuses on simplifying complex fintech topics for businesses, from payment flows and cross-border transactions to emerging trends in digital commerce and AI in payments.