This document provides guides on the design of the merchant's cashier page on the web side for Cashier Payment, where the available Alipay+ payment methods are displayed in a bundle for the user to select.

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.

Multiple Alipay+ wallets available

Users are redirected to Alipay+ page after clicking the pay button at the merchant side, and complete the payment in the flow designed by the wallet after scanning the Alipay+ QR code.

Payment flow might differ in actual scenarios. For wallets that lack a native app or do not support code scanning, and wallets that have a web cashier, Alipay+ cashier offers a Login and pay option to redirect the user to the wallet web cashier page to complete the payment.

One Alipay+ wallet available

Users are redirected to Alipay+ page after clicking the pay button at the merchant side, and complete the payment in the flow designed by the wallet after scanning the Alipay+ QR code.

Payment flow may differ in actual scenarios. If the wallet can only offer payment via a web cashier, the user will be redirected to the wallet web page directly. An Alipay+ loading page is used before the user enters the wallet page.

For merchants using such scenarios, Cashier Payment Tile Mode - Web is recommended, which brings a better payment experience with fewer redirections.

Page details

Merchant's cashier page

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.

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.