Alipay+ DocsAlipay+ Docs
APIs & SDKs

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.

image

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

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.

image

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.

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.

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.

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.

Payment result page

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