Cashier Payment Tile Mode-Web
This document provides guides on the design of the merchant's cashier page on the web 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.
Alipay+ QR code page mode
In this mode, the user selects one wallet at the merchant side to pay, and is then redirected to an Alipay+ page to scan the QR code and complete the payment. After payment, the user is redirected back to the merchant page.
For wallets that lack a native app or do not support code scanning, the wallet's web cashier page is directly invoked during the payment.
Merchant QR code page mode
In this mode, the user selects one wallet at the merchant side to pay. The merchant then renders the Alipay+-provided payment code into a QR code for the user to scan and pay. The user can complete the payment without being redirected to Alipay+ page.
Page details
In this section, for elements marked as Mandatory (blue), you must display and design the element according to the specifications. For elements marked as Optional (orange), you can design them based on your own business logic.
All the QR Code and Barcode samples are used for demonstration only, please generate and display the codes according to the provided rules.
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.
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 at the merchant side where payment methods are not listed under an Alipay+ sub-section. Instead, payment methods are listed separately.
Brand
You can display the Alipay+ Partner brand and wallet brand based on your front-end available image or text areas:
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.
Merchant's cashier page - merchant QR code
In merchant QR code page mode, the merchant can display the QR code to users in the following methods:
- Display the QR code in a pop-up window over the merchant's cashier page.
- Embed the QR code on the merchant's cashier page.
- Display the QR code in a new browser tab, and redirect the user to the tab (NOT recommended).
For specifications on QR code display, see the following sections. Pop-up windows are used in the following figures for demonstration.
QR codes can be either active or expired.
QR code is active:
When QR codes expire, the user must be reminded with explicit notifications.
QR code is expired:
Info: QR code
Payment amount: The amount and format are the same as those on the merchant page.
QR code with Alipay+ logo:
- Size: The height and width are no less than 160 px. The user needs to be able to scan the code 20 cm (8 inches) away from the screen.
- Logo: Place the Alipay+ icon at the center of the code. The icon height and width are 15%-20% of the QR code.
Expired QR code: Blur the QR code to prevent the user from scanning. Display "QR code expired" over the blurred code.
Code validity countdown: Display a dynamic countdown. The QR code and its validity countdown are mutually bounded and you must place the countdown under the QR code.
Info: User instruction
Wallet list: Display the wallet brand here to remind the user of the payment method that they are to use:
Text: Display the text you acquired by using the related interface as introduced by Cashier Payment. No format or style requirement.
Image: Display the wallet logo you acquired by using the related interface as introduced by Cashier Payment. See Brand logo image for details.
You can scale the image logo proportionally as needed.
- Minimum height: 32 px
- Recommended heights: 32 px, 48 px, 64 px, 80px, and 120 px
Wallet installation reminder: Remind the user to download and install the wallet app.
Payment instruction: Instruct the user on how to scan the QR code and pay.
Action
Close: Click to close the pop-up window and returns to the merchant's cashier page. This action is only available in pop-up windows.
Return to merchant: Click to close the pop-up window or the new tab, and returns to the merchant's cashier page. This action is only available in pop-up windows or new browser tabs.
Brand
Powered by Alipay+ brand:
- Display the Alipay+ logo with the "Powered by" copywriting in the style that is specified in the Alipay+ foundational brand guidelines.
- Display "Powered by" in English. Do not use translation.
- You can customize the font style of the copywriting as needed.
Payment result page
For details about the design of the payment result page, see Common designs guidelines.