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 Alipay+ as a payment method.

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.

Scan to pay

The user selects Alipay+ as the payment method on the merchant's desktop website. Then the user is redirected to the Alipay+ checkout page, where a QR code and the supported wallets are displayed. The user scans the QR code with a supported wallet App to complete the payment. The wallet then displays the payment result. On the desktop side, the user is redirected back to the merchant side.

Log in to pay

The user selects Alipay+ as the payment method on the merchant's desktop website. Then the user is redirected to the Alipay+ checkout page, where the wallets for log-in-to-pay are displayed under the scan-to-pay area. The user selects a preferred wallet and clicks Log in to Pay, and is redirected to the wallet page to log in and complete the payment. After payment, the user is redirected back to the merchant side.

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 barcode and QR code samples are used for demonstration only. In production, generate and display the codes according to the provided rules.

Merchant's cashier page

Brand

Alipay+ brand

Image: Display the Alipay+ logo: 📎AlipayPlus_brandasset.zip.

You can also display the Alipay+ aggregated logo, which contains the Alipay+ logo with other wallet logos, to indicate that the user can pay with these wallets after selecting Alipay+ to check out. To configure Alipay+ aggregated logo, contact your business partner/solution architect.

Info

Promotion info

Display the promotion information you obtained from the related API or SDK. You can customize the text style to match your UI design. Hide the information if there is no discount available for the user.

Make sure the text is clear & readable on the screen:

• Recommended minimum text-size: 8px.
• Recommended text-color: any color that is attractive but not warning.

You can also display the promotion information within the Alipay+ aggregated logo. To configure an aggregated logo with the promotion tag, contact your business partner/solution architect.

Payment result page

Brand

Alipay+ brand

Image: Display the Alipay+ logo: 📎AlipayPlus_brandasset.zip.

Text: Display Alipay+. No format or style requirement.

Note

The user might not be redirected back to the merchant automatically after paying at the wallet side, which means the merchant might not be able to detect whether the user has completed the payment. Thus, when the user returns to the merchant page manually, the merchant can use a confirm dialogue/page for the user to mark the payment completion. After that, the merchant can load and display the payment result page for the user.

It is also recommended that you open a new tab for the user when the user is redirected to the Mobile Payment Partner (MPP) page from the merchant page. Thus the user can easily switch between tabs if the MPP page fails to be opened. Otherwise, the user has to try to use the back button of the page to return to the merchant page, which usually fails.

The confirm dialogue/page need not be displayed if the user is automatically directed back to the merchant.

Verify your design plan

It is strongly recommended to contact Alipay+ (through the project manager) to verify your design plan before you start the formal development.