Accepting UPI Payments in Bubble.io: API Connector & Webhooks Guide

Bubble.io is the premier no-code platform for building complete software products, SaaS applications, and interactive marketplaces. Indian founders frequently use Bubble to launch minimum viable products (MVPs) in weeks instead of months.

However, monetizing an Indian Bubble app often presents challenges. Most Bubble tutorials teach Stripe integration, which requires credit cards that most Indian consumers do not use for local software. Furthermore, standard Indian payment aggregator plugins charge 2% + 18% GST and introduce complex JavaScript iframe conflicts.

Here is the complete visual programming guide to accepting direct UPI payments in Bubble.io using the native API Connector and Backend Workflows.

---

Why Indian Bubble.io Founders Need Native UPI

In India, credit card ownership is under 5% of the adult population, whereas UPI active users exceed 350 million. If your Bubble app only accepts cards:

• Conversion drops by 70%: Users abandon checkout when prompted for 16-digit card numbers and OTPs.
• Aggregators charge 2%: Third-party aggregators deduct a percentage on every transaction and hold payouts in escrow for 48 hours.

By integrating VyaparGateway via Bubble’s official API Connector, you collect payments directly into your own bank account with 0% transaction deductions and instant T+0 settlement.

---

The Bubble Payment Workflow Architecture

[User clicks "Upgrade to Pro" in Bubble App]
                     │
                     ▼
  [Trigger Bubble Workflow: Call API Connector]
  └── POST https://api.vyapargateway.com/v1/orders/create
                     │
                     ▼
  [API returns: qr_image_url, upi_intent_url, order_id]
                     │
    ┌────────────────┴──────────────────────────────────┐
    │ Mobile Device: Opens UPI App directly             │
    │ Desktop: Displays Dynamic QR in a Bubble Popup    │
    └────────────────┬──────────────────────────────────┘
                     │ (User approves in PhonePe / GPay)
                     ▼
[Bank fires Webhook to Bubble Backend Workflow API]
  └── POST https://your-app.bubbleapps.io/api/1.1/wf/upi_webhook
                     │
                     ▼
[Bubble Action: Make changes to Current User -> Set 'is_pro = yes']

---

Configuring the Bubble API Connector

1. Install the API Connector

Navigate to the Plugins tab in your Bubble editor, search for API Connector by Bubble, and click Install.

2. Configure the Create Order Call

Add a new API called VyaparGateway UPI:

• Authentication: Private key in header
• Key name: Authorization
• Key value: Bearer YOUR_API_KEY

API Call: Create UPI Order
- Use as: Action
- Data type: JSON
- Method: POST
- URL: https://api.vyapargateway.com/v1/orders/create
- Body (JSON):
{
  "amount": <amount>,
  "orderId": "<order_id>",
  "customerName": "<customer_name>",
  "customerPhone": "<customer_phone>",
  "redirectUrl": "https://yourapp.bubbleapps.io/dashboard"
}

(Make <amount> and <order_id> dynamic parameters by unchecking the “Private” checkbox in Bubble).

---

Setting Up Backend Webhook Workflows in Bubble

To listen for real-time payment confirmations from the bank:

1. Enable Backend Workflows

In Bubble Settings > API, check the box: Enable Workflow API and backend workflows.

2. Create the Webhook Endpoint

1. Go to the Backend Workflows page from your page selector.
2. Click New API Workflow and name it upi_webhook.
3. Check the box: Expose as a public API workflow.
4. Parameter definition: Select Detect request data.
5. Copy the initialized URL and paste it into your VyaparGateway portal.

3. Define the Fulfillment Logic

Once the initial payload is detected, configure your workflow actions:

• Action 1: Search for Order where order_id = Request Data's orderId.
• Action 2: Make changes to Order: Set status = "PAID", utr = Request Data's utr.
• Action 3: Make changes to User: Set plan_active = yes, credits = credits + 100.

---

UX Best Practices: Responsive QR & Mobile Intent

To optimize conversion across mobile and desktop devices in Bubble:

┌──────────────────────────────────────────────────────────────────┐
│              Conditionals for Responsive Checkout                │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  WHEN Current Page Width < 768px (Mobile):                       │
│    • Display "Pay with GPay / PhonePe" Button                    │
│    • Workflow Action: Open external website: [upi_intent_url]    │
│                                                                  │
│  WHEN Current Page Width >= 768px (Desktop):                      │
│    • Show Bubble Popup containing [qr_image_url]                 │
│    • Animate subtle pulsating ring around the QR code            │
│    • Start a 3-second 'Do every 3 seconds' check on order status │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

By leveraging Bubble’s visual workflow engine alongside VyaparGateway’s direct UPI API, you create an enterprise-grade payment flow without writing custom server code, avoiding third-party commissions and receiving 100% of your software revenue directly into your bank account.