Designing a Modern Payment Checkout: Evolution, Architecture, and Real‑World Scenarios

1. Evolution of Checkout

Checkout has progressed through three stages:

Traditional checkout : Physical counter where customers present cash or credit, with basic elements such as product info, price, payment method, verification staff, and settlement.

Offline electronic checkout : Introduced in supermarkets; staff handle cash, cards, and standardized product management.

Online electronic checkout : Account‑based currency enables web/H5/app checkout using electronic payment methods.

2. Checkout Architecture

Checkout sits at the front of the payment architecture, directly facing end users (consumers, B‑side merchants, internal users). Architecture considerations include:

Business architecture: types of checkout (consumer, merchant, internal) and future extensions.

Supported payment methods: WeChat Pay, Alipay, bank cards, balance, digital RMB, etc.

Server‑side capabilities: configuration management, payment mode management, sorting strategy, marketing, and processing.

3. Preparation Before Design

Understand the business model : Identify products and revenue model (e‑commerce, game, subscription, etc.).

Select payment methods : Determine which methods to support (WeChat, Alipay, cards, balance, digital RMB, etc.).

Sign payment channel contracts with chosen providers.

Define supporting systems : order‑billing, accounting, checkout management, routing, risk control, payment processing, channel management.

4. Checkout Process Flow

Front‑end pages: cart → order entry → checkout page → result page. The front‑end calls the back‑end to create an order and receives a checkout URL. The back‑end coordinates with transaction, coupon, card, and settlement systems.

5. Common Payment Scenarios & Relationships

5.1 Medical

Patients need fast, queue‑free payment for registration, consultation, and pharmacy. Checkout must support appointment booking, on‑site QR‑code payment, and integration with hospital information systems.

5.2 Points‑E‑Commerce

Supports full‑point, partial‑point, or mixed payment with real‑time eligibility checks.

5.3 Offline Entertainment

Handles on‑site ticket printing, member management, team orders, reservation orders, and integration with external platforms (Meituan, Douyin).

5.4 ETC Toll Recharge

Two payment paths: instant recharge via WeChat/Alipay and manual bank‑transfer where the user copies account details to a mobile banking app.

5.5 Thai Game Top‑Up

Implements a “one‑touch” payment using a pre‑signed agreement for automatic deduction after the first binding, improving conversion rates.

6. Checkout Configuration

Configuration controls payment method availability, ordering, and recommendation. Administrators can enable/disable methods, set sorting rules, and define promotional combinations based on terminal type, product category, and transaction amount.

7. Key Metrics for Evaluating Checkout Quality

NPS (Net Promoter Score): measures usability and satisfaction.

Payment latency: aim for response within 5 seconds.

Success rate: higher rates indicate better experience.

Conversion rate: proportion of completed payments to initiated transactions.

8. Payment Method Selection & Analysis

When selecting methods, consider coverage, user experience, limits, and user type. In China the dominant methods are WeChat Pay, Alipay, and bank cards, with optional balance payment, digital RMB, or credit‑based products.

9. Five Checkout Implementations

9.1 Medical Checkout

Supports appointment registration, in‑clinic QR‑code payment, and post‑visit settlement. Integrates with Hospital Information System (HIS) to push payment orders directly to WeChat or display a QR code for scanning.

9.2 Points‑E‑Commerce Checkout

Allows full, partial, or mixed points payment. Real‑time eligibility checks determine whether points can cover the order; if insufficient, the system falls back to a mixed payment with a third‑party channel.

9.3 Offline Entertainment Checkout

Features ticket printing, member cards, team orders, reservation management, and cross‑platform order linking (e.g., Meituan, Douyin). Supports on‑site printing and digital ticket issuance.

9.4 ETC Checkout

Provides instant wallet recharge via WeChat/Alipay and a manual bank‑transfer path where the user copies account details to a mobile banking app. After recharge, the ETC wallet can be used for toll deductions.

9.5 Thai Game Recharge Checkout

Introduces a one‑touch payment that leverages a pre‑signed agreement for automatic deduction, reducing the number of user interactions and improving conversion.

10. Front‑End and Back‑End Design

The front‑end displays product information, payee, payment deadline, payment method list, amount, and a confirm button. The back‑end provides configuration management, payment mode management, sorting strategy, marketing rules, and processing logic. New payment methods (e.g., balance payment) require defining a logo, name, and initiation flow. For balance payment, the back‑end must expose pay and query services.

11. Configuration Templates

Payment method combinations are abstracted into templates. Each template defines which methods are available, their order, and any recommendation flags. Templates can be selected based on terminal type, product category, transaction amount, or special partnership rules.

12. Detailed Scenario Walkthroughs

12.1 Medical Scenario

Appointment registration : Users select a department and time slot, the system creates a reservation order and returns a QR‑code checkout page. In‑clinic payment : After consultation, the HIS pushes a payment order to the user’s WeChat; the user scans the QR code or clicks “Pay Now” in the mini‑program. Post‑visit settlement : Payment success is reported back to the order system, which triggers downstream services (e.g., pharmacy).

12.2 Points‑E‑Commerce

When a user checks out, the system first checks points eligibility. If points cover the total, the order is paid fully with points. If points are insufficient, the system calculates the remaining amount and selects a secondary payment channel (e.g., WeChat Pay) to complete the transaction.

12.3 Offline Entertainment

Ticket purchase triggers a print job for a physical ticket and simultaneously generates a digital ticket QR code. Member management allows applying member discounts, and team orders aggregate multiple tickets under a single transaction.

12.4 ETC Recharge

Users click “Recharge”, select an amount, and are presented with WeChat Pay or a bank‑transfer option. For bank‑transfer, the UI shows account details with a copy‑button to facilitate manual transfer via the user’s mobile banking app.

12.5 Thai Game One‑Touch

First‑time users sign a binding agreement. Subsequent top‑ups invoke the “one‑touch” API, which directly deducts the amount without additional user interaction. If the user has not bound, they are redirected to the agreement page.