Pay with SuperQi

Overview

Pay with Super Qi lets your customers pay from their Super Qi wallet instead of typing in a card. Inside the Payment SDK this method is named ALIPAY — that name is an internal identifier only. Everywhere a user can see it, it reads "Pay with Super Qi."

for experienced integrators

Add ALIPAY to availablePaymentMethods, decide whether the SDK or your app renders the method picker (paymentMethodChoice = ON_SDK | ON_APP), and optionally tune aliPaySettings (showFirst, qrToDeepLinkFallback, deepLinkToQrFallback). Then re-initialize the SDK. The exact field names per platform are in the Configuration Reference, and the Flutter wiring is in Flutter Integration.

---

What you'll learn

These pages walk through enabling Super Qi from first principles, so they work for any experience level:

Page	Audience	What it covers
1. Overview (this page)	Everyone	Concepts, terminology, the user-facing flow
2. Enable — Quick Start	Beginners → Intermediate	The smallest change that turns Super Qi on
3. Configuration Reference	All levels	Every Super Qi setting, per platform, with defaults
4. Flutter Integration	Flutter devs	The full Dart ↔ native bridge implementation
5. Testing & Troubleshooting	All levels	How to test it, and the gotchas that bite

---

Key terminology

If you are new to the SDK, these four terms are all you need to hold in your head:

• Payment method — a way to pay. The SDK supports CARD, PAYMENT_TOKEN (a previously saved card), ALIPAY (Pay with Super Qi), and AQSATI (installments).
• ALIPAY — the SDK's internal code name for Pay with Super Qi. When you read ALIPAY in code, think "Super Qi."
• Method selection screen — the screen that asks "How do you want to pay?" It can be drawn by the SDK or by your app (see below).
• QR vs LINK (Deep Link) — the two ways a customer completes a Super Qi payment: scan a QR code with the Super Qi app, or tap a link that opens the Super Qi app directly on the same device.

---

The user-facing flow

Here is what a customer experiences once Super Qi is enabled and they pick it on the method screen:

┌──────────────────────────┐
│  Choose payment method   │   ← only shown when paymentMethodChoice = ON_SDK
│  ○ Pay by Card           │
│  ● Pay with Super Qi     │
│  ○ Saved cards           │
└────────────┬─────────────┘
             │ user taps "Pay with Super Qi"
             ▼
┌──────────────────────────┐
│   Super Qi payment       │
│                          │   showFirst = QR  → QR shown first
│   [ QR code ]            │   showFirst = LINK → "Open Super Qi" shown first
│   or                     │
│   [ Open Super Qi app ]  │   (fallback buttons appear when enabled)
└────────────┬─────────────┘
             │ customer approves in the Super Qi app
             ▼
┌──────────────────────────┐
│   Result screen          │   (unless skipResultScreen = true)
│   ✓ Payment successful   │
└──────────────────────────┘

QR flow — the SDK shows a QR code. The customer opens the Super Qi app on another device (or scans from a printed/displayed code) and approves.

LINK (Deep Link) flow — the SDK shows a button that opens the Super Qi app on the same device; the customer approves and is returned to your app.

Fallbacks keep the customer from getting stuck:

• qrToDeepLinkFallback — while showing a QR, also offer a button to open the Super Qi app (useful when the customer is paying on the same phone).
• deepLinkToQrFallback — while showing the "open app" button, also offer a QR (useful when the Super Qi app isn't installed).

---

Where Super Qi fits in the bigger picture

The Super Qi method rides on the same PaymentSDKConfiguration and processPayment flow as card payments. Nothing about your back-end order creation, payment-gateway registration, or result handling changes — you are only adding one more method to the picker. The end-to-end sequence (order → SDK init → process payment → gateway → result) is unchanged; see the main SDK sequence diagram in the gateway docs.

A note on this example app

The QiCard Flutter example app exposes Super Qi through a Debug options panel so you can toggle it live. That UI is a testing aid, not a pattern you must copy — production apps typically fix the configuration at initialization time. The mechanics it demonstrates (the channel arguments and native calls) are exactly what you need, and they're documented in Flutter Integration.

Next: Enable Super Qi in a few steps →