WeChat Pay QR Scanner UI: Scan and Present, Safely

WeChat Pay, the payment backbone of Asia’s biggest super-app, runs almost entirely on QR codes: you scan a merchant’s code to pay, or present your own code to be scanned. The short answer: build the scanner and pay-code screens from a free VP0 design, use VisionKit for fast, reliable scanning, and integrate the official WeChat Pay SDK for the actual payment, so you never touch the money or store credentials. The scale is staggering, WeChat has more than 1,300,000,000 users, and QR payments are the default.

Two screens carry the whole flow

QR payments come down to two interfaces. The scanner: a camera view with a clear aiming frame that reads a merchant QR fast, then shows the amount and a clear confirm. And the pay code: your own QR (and often a barcode) presented full-brightness for a merchant to scan, with a clear refresh and security note. Both must be fast and unambiguous, the amount, the recipient, and the confirmation should never be in doubt. The payment itself, authorization, security, and settlement, is handled by the WeChat Pay SDK, not your code. That division of labor, you design the screens and the SDK owns the money, is the whole secret to building payment UIs safely. Apple’s Human Interface Guidelines on feedback and cameras apply.

Build the UI, integrate the SDK

VP0 is a free iOS design library for AI builders. Pick scanner, payment, and confirmation designs, copy their links, and have Cursor or Claude Code rebuild them in SwiftUI. Power the scanner with Apple’s VisionKit (DataScannerViewController) for fast QR reading, and present your pay code at full screen brightness so merchants can scan it reliably. Integrate the official WeChat Pay SDK for the transaction, and verify payments server-side, never build your own payment flow or store sensitive credentials. Design the states: scanning, amount entry or display, processing, success, and failure. For the general scanner overlay, see barcode scanner viewfinder UI mobile, and for the identity step that precedes a wallet, see fintech KYC verification screen UI.

QR payment screen building blocks

Two clear screens, several clear states.

Element	Job	Get it right
Scanner	Read a merchant code	VisionKit, clear aiming frame
Amount	Confirm what you pay	Unambiguous, with recipient
Pay code	Be scanned by a merchant	Full brightness, refreshable
Processing	Reassure during the wait	Clear, no double-charge
Result	Confirm or explain	Receipt or plain failure reason

Common mistakes

The first and most serious mistake is building your own payment flow or storing credentials instead of using the official SDK. The second is a slow or flaky scanner; use VisionKit. The third is a dim pay code that merchants cannot scan; boost brightness. The fourth is an unclear amount or recipient before confirming. The fifth is trusting the client that a payment succeeded instead of verifying server-side. Design the screens; let the SDK own the money.

A worked example

Say you add QR payments to an app. Your VP0-built scanner uses VisionKit to read a merchant code instantly, then shows the amount and recipient with a clear confirm. To receive, the user opens their pay code, which displays full-brightness and refreshes for security. The WeChat Pay SDK handles authorization and settlement; your server verifies the result; the user sees a clear receipt or a plain failure reason. You never touched a credential. For the digital-key access pattern next, see Apple CarKey UI template Figma, and for secure wallet design, see MetaMask mobile connect wallet modal UI.

Key takeaways

• WeChat Pay runs on QR: scan a merchant code, or present your own to be scanned.
• Build the scanner and pay-code screens from a free VP0 design.
• Use VisionKit for fast scanning and present pay codes at full brightness.
• Integrate the official WeChat Pay SDK; never build your own payment flow or store credentials.
• Show clear amounts and confirmations, and verify payments server-side.

Frequently asked questions

How do I build a WeChat Pay QR scanner UI? Build the scanner and pay-code screens from a free VP0 design, use Apple VisionKit for fast QR reading, present pay codes at full brightness, and integrate the official WeChat Pay SDK for the transaction.

Do I handle the payment myself? No. Integrate the official WeChat Pay SDK, which handles authorization, security, and settlement. You design the scanner, amount, and confirmation screens, and verify results server-side.

How do I make the pay code easy to scan? Display it full-screen at maximum brightness, refresh it periodically for security, and keep it uncluttered, so a merchant’s scanner reads it quickly and reliably.

Why use VisionKit for scanning? VisionKit’s data scanner reads QR codes quickly and reliably across conditions, far better than a hand-rolled scanner, so the pay-by-scan flow feels fast and dependable.