Cashier Payment UX design guideline

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

Conventions

• For pages marked as A+ STD (Alipay+ standard), you must design and develop these pages according to the specifications. For pages marked as A+ OPT (Alipay+ Optimization), you can design these pages based on your own business logic.
• For page details marked in blue (Mandatory), you must design according to the specifications. For page details marked in orange (Optional), you can design based on your own business logic.

Overview

Cashier Payment - redirect to cashier to pay

Cashier Payment - scan QR code to pay

Page details

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.

Payment Info

Merchant Name: The merchant name in the original language.

Order Info: The order information from the merchant.

Payment Method: The current payment method.

Change Payment Method: Click to open the payment method list. Display this option when more payment methods are available.

Amount Info

Order Amount: The original amount to be paid by the user, in both the local and foreign currencies.

Exchange Rate: The exchange rate in the exchange rate display format.

Alipay+ Promotion (if applicable): See Promotion info.

Alipay+ Promotion Amount (if applicable): See Promotion info.

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

Digital Wallet Account Info

Digital Wallet Logo: Recommended. Display the digital wallet logo to highlight the account the user is using and add a sense of security.

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

User Actions

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

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

Brand Info

Security Info: Recommended. Display the information of the secure payment environment. Or, if available, display the Full Compensation plan.

Alipay+ Brand: Display the Alipay+ brand.