How to Add UPI Checkout to a Webflow Website with Webhooks (No-Code Guide)

Webflow is the design tool of choice for modern creative agencies, design studios, and high-ticket service businesses. Its visual designer lets you create interactive websites without writing CSS from scratch.

However, when Indian designers try to sell products, collect consultation deposits, or take advance retainer payments on Webflow, they hit a major wall: Webflow E-Commerce natively supports only Stripe and PayPal.

Because neither platform provides native UPI intent links or dynamic Indian QR codes, Indian customers abandon checkouts. Furthermore, Webflow’s e-commerce tiers cost an extra $29 to $212 monthly on top of payment processor fees.

Here is the step-by-step low-code tutorial on adding direct UPI payments to any Webflow website using embeddable scripts and webhooks.

---

The Webflow E-Commerce Challenge in India

Attempting to run a standard Webflow E-commerce store in India introduces three severe friction points:

The Legacy Webflow Dilemma in India:
┌─────────────────────────────────────────────────────────────┐
│ 1. Mandatory Stripe Dependency: Stripe India is invite-only │
│    and difficult for new sole proprietorships.              │
│ 2. Missing UPI Integration: Customers must enter credit     │
│    card details (card drop-off rate exceeds 65% in India).  │
│ 3. 2% Extra Platform Commission: Webflow charges a 2% cut   │
│    on top of credit card payment gateway fees.              │
└─────────────────────────────────────────────────────────────┘

By decoupling your payment layer from Webflow’s native checkout and using VyaparGateway, you can accept UPI payments on any standard Webflow site plan with 0% gateway commission.

---

The Architecture: Custom Form to Dynamic UPI Modal

Instead of redirecting users to an external portal, keep them on your branded Webflow site:

[Visitor fills Webflow Form: Name, Email, Service Package]
                         │
                         ▼
        [Clicks "Pay with UPI" Button]
                         │
                         ▼
[VyaparGateway Embeddable Modal Pops Up In-Page]
  ├── Mobile: Opens Google Pay / PhonePe via Intent Deep Link
  └── Desktop: Displays Crisp Dynamic QR Code with Exact Amount
                         │
                         ▼ (Customer Completes Payment)
    [Bank Webhook verifies UTR in < 500ms]
                         │
                         ▼
[Webflow Modal automatically redirects to /success page]

---

Step-by-Step Webflow Implementation Guide

Step 1: Design Your Form in Webflow

1. In the Webflow Designer, add a standard Form Block.
2. Add input fields:
   • Name (#customer-name)
   • Email (#customer-email)
   • Phone (#customer-phone)
   • Hidden or select field for Amount (#order-amount)
3. Set the Form Submit button ID to #upi-checkout-btn.

Step 2: Add the Custom Code Embed

In your Webflow Page Settings, scroll down to the Before </body> tag custom code section and paste the lightweight client integration script below.

---

Embeddable JavaScript for Webflow (Code)

<!-- VyaparGateway Webflow Direct UPI SDK -->
<script src="https://cdn.vyapargateway.com/v1/checkout.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const checkoutBtn = document.getElementById("upi-checkout-btn");

  if (!checkoutBtn) return;

  checkoutBtn.addEventListener("click", async function (e) {
    e.preventDefault();

    const name = document.getElementById("customer-name")?.value || "Customer";
    const email = document.getElementById("customer-email")?.value || "";
    const phone = document.getElementById("customer-phone")?.value || "";
    const amount = document.getElementById("order-amount")?.value || "999";

    // Initialize instant UPI modal
    VyaparGateway.openCheckout({
      merchantKey: "YOUR_MERCHANT_KEY",
      amount: parseFloat(amount),
      customerName: name,
      customerEmail: email,
      customerPhone: phone,
      orderNote: "Webflow Consultation Deposit",
      themeColor: "#2D5BFF",
      onSuccess: function (response) {
        // Direct redirect to Webflow Success Page
        window.location.href = `/thank-you?utr=${response.utr}&orderId=${response.orderId}`;
      },
      onFailure: function (error) {
        alert("Payment was not completed. Please try again.");
      }
    });
  });
});
</script>

---

Automating Fulfillment via Webhooks (Make / Zapier)

To automate emails, CRM updates, or Notion database logging when an order is paid, connect VyaparGateway’s webhook to Make.com or Zapier:

[VyaparGateway Webhook]
          │ (POST JSON with UTR, Amount, Customer Info)
          ▼
   [Make.com Webhook URL]
          │
          ├── 1. Add row to Google Sheets / Airtable
          ├── 2. Send instant WhatsApp confirmation via Wati
          └── 3. Dispatch Calendar invite via Google Calendar API

Financial Advantages for Webflow Agencies

• Zero Platform Fees: Save up to $2,500/year by skipping Webflow E-Commerce plans.
• Zero Payment Gateway Commissions: Keep 100% of your consulting or product fees.
• Instant Working Capital: Money lands immediately in your ICICI or HDFC bank account in real-time.