Alipay+Alipay+

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.

Scenario overview

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

image.png

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.

image.png

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.

image

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.

image

For this scenario, Cashier Payment Tile Mode - Mobile is recommended, which brings a better payment experience with less redirections.

Page details

Merchant's cashier page

image

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:

image

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.

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.