Cashier Payment Bundle Mode-Mobile
This document provides guides on the design of the merchant's cashier page on the mobile side for Cashier Payment, where the available Alipay+ payment methods are displayed in a bundle for the user to select.
In this document, pages of a native app are used for illustration. For non-native H5 or web pages, you can make some adaptations to complete the design.
To help understand the scenarios, the pages are marked as 4 categories:
Acquirer Side, and
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.
Multiple Alipay+ wallets available
If multiple Alipay+ wallets are available, Alipay+ will first redirect the user to a wallet list page after the user clicks Continue to Pay on the merchant's cashier page. On the wallet list page, the user selects which wallet they are to use and is then redirected to that wallet. The user will then complete the payment in the flow designed by the wallet.
One Alipay+ wallet available
If only one Alipay+ wallet is available, Alipay+ will redirect the user to the wallet directly after the user clicks Continue to Pay on the merchant's cashier page. The user will then complete the payment in the flow designed by the wallet.
For this scenario, Cashier Payment Tile Mode - Mobile is recommended, which brings a better payment experience with less redirections.
Merchant's cashier page
Note: You must display all the Alipay+ Partner and wallet brand elements according to the specifications.
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
Alipay+ Partner. No format or style requirement.
Image: Display the Alipay+ Partner logo you acquired from the Acceptance Mark Generator.
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.
You can also generate joint assets to contain all brand logos in one single asset.
Payment result page
For details about the design of the payment result page, see Common designs guidelines.