Cashier Payment Tile Mode-Mobile
This document provides guides on the design of the merchant's cashier page on the mobile side for Cashier Payment, where the user can select one payment method directly (tile mode).
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.
User experience
The user can choose which wallet to use directly at the merchant side, and complete the payment in the flow designed by the wallet.
Page details
Merchant's cashier page
Merchant's cashier pages are categorized into two types according to whether all the payment methods supported by Alipay+ can be listed.
Use Alipay+ sub-section
This refers to merchant's cashier pages where all payment methods supported by Alipay+ are listed under an Alipay+ sub-section, with wallet logos and names.
Note: You must display all the Alipay+ Partner and Wallet brand elements according to the specifications.
Brand
Display the Alipay+ Partner brand and wallet brand according to the image area availability at your front-end:
Display the brand info according to the following specifications:
Alipay+ Partner brand
Text: Display Alipay+ Partner
. No format or style requirement.
Image: Display the Alipay+ Partner logo you acquired from the Acceptance Mark Generator.
Wallet brand
Text: Display the wallet brand name you acquired from the Brand Name List. No format or style requirement.
Image: Display the wallet logo you acquired from the Acceptance Mark Generator.
Not use Alipay+ sub-section
This refers to merchant's cashier pages where payment methods are not listed under an Alipay+ sub-section. Instead, payment methods are listed separately.
Note: You must display all the Alipay+ Partner and Wallet brand elements according to the specifications.
Brand
Display the Alipay+ Partner brand and wallet brand according to the image area availability at your front-end:
Display the brand info according to the following specifications:
Alipay+ Partner brand
Text: Display Alipay+ Partner
. No format or style requirement.
Image: Display the Alipay+ Partner logo you acquired from the Acceptance Mark Generator.
Wallet brand
Text: Display the wallet brand name you acquired from the Brand Name List. No format or style requirement.
Image: Display the wallet logo you acquired from the Acceptance Mark Generator.
Payment result page
For details about the design of the payment result page, see Common designs guidelines.