In this document, pages of a native app are used for illustration. For non-native WAP (H5) or web pages, you can make some adaptations to complete the design.

Scenario overview

To help understand the scenarios, the pages are marked as 4 categories: Alipay+ Side, Merchant Side, Acquirer Side, and Wallet Side.

At your side, for pages marked as A+ STD (Alipay+ Standard) in blue, you must design and develop these pages according to the specifications. For pages marked as A+ OPT (Alipay+ Optimization) in orange, you can design these pages based on your own business logic.

Cashier Payment - redirect to cashier to pay

Cashier Payment - scan QR code to pay

Page details

In this section, for elements marked as Mandatory (blue), you must display and design the element according to the specifications. For elements marked as Optional (orange), you can design them based on your own business logic.

The guide does not specify the design for the page header unless otherwise specified. You can arrange necessary user actions like Return, Close, Done on it.

Payment confirmation page

The payment confirmation page provides users with information about the order and the payment, and is where users make payment decisions. To add a sense of security for users during the payment, it is recommended that the digital wallet account information and the brand information are displayed.

Note: the guide specifies a mandatory Return user action on this page.

Info: Wallet account

Wallet brand: Recommended. Display the digital wallet logo to highlight the account that the user is using so as to add a sense of security.

Wallet account ID: Recommended. Display a masked ID to add a sense of security.

Info: Order

Merchant name: The merchant name in the original language.

Order information: The order information from the merchant.

Payment method: The current payment method.

Info: Amount

Order amount in foreign currency: The original amount to be paid by the user in the foreign currency.

Order amount in local currency: The original amount to be paid by the user in the local currency, If the wallet cannot retrieve an accurate local currency amount, do not display it.

Exchange rate: The exchange rate in the Currency and exchange rate display format.

Alipay+ discount & amount (if applicable): See Alipay+ discount & amount in the Common design guidelines.

Payment amount: The actual payment amount, in the payment currency.

Action

Return - cancel payment: Click to abandon the payment. However, on click, use a new modal window to ask the user for confirmation before proceeding. Or, inquire about the cancellation reason to collect information for future improvements. If applicable, redirect the user return to the merchant page after the user confirms to return.

Change payment method: Click to open the Select payment method page. Display this element when the user can change the payment method from multiple payment methods, or add a new payment method in the Select payment method page.

View Alipay+ discount details (if applicable): See Alipay+ discount & amount in the Common design guidelines.

Confirm payment: Click to confirm and continue the payment process. Button clickable by default.

Brand

Security reminder: Recommended. Display the information of the secure payment environment. Or, if available, display the full compensation plan.

Powered by Alipay+ brand:

• Display the Alipay+ logo with the "Powered by" copywriting in the style that is specified in the Alipay+ foundational brand guidelines.
• Display "Powered by" in English. Please do not translate it.
• You can customize the font style of the copywriting as needed.
• Alipay+ logo asset: 📎AlipayPlus_brandasset.zip.

Payment result page

For details about the design of the payment result page, see Common designs.

Transaction detail page

For details about the design of the transaction detail page, see Common designs.

Download

To download the design resources, click here.