Alipay+ DocsAlipay+ Docs
APIs & SDKs

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.

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

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.

image

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.

image

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.

image

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.

image.png

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.

image

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 at the merchant side where payment methods are not listed under an Alipay+ sub-section. Instead, payment methods are listed separately.

image

Brand

You can display the Alipay+ Partner brand and wallet brand based on your front-end available image or text areas:

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.

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:

image

When QR codes expire, the user must be reminded with explicit notifications.

QR code is expired:

image

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.