User-presented Mode Payment

In this document, pages of a native app are used for illustration. For non-native WAP (H5) or web pages, you can make some adaptations to complete the design.

Overview

Page details

Alipay+ payment code page

In User-presented Mode Payment scenarios, the user presents the payment code to the merchant and the merchant scans the payment code to initiate a payment. To help merchants recognize the brand, the Alipay+ payment code page uses a unified design.

Alipay+ Payment Code Page.png

Barcode

Barcode Size: The following specifications are applied to Alipay+ barcode:

Width: 45mm to 65mm.
Height: No less than 14mm.
Screen brightness: No less than 85%.
The barcode must be displayed in full and not be obscured in any way.

Barcode Size.png

Barcode Number: By default, the barcode number is masked in some digits. Click the barcode to display the barcode and unmasked number in fullscreen. For how to mask the numbers, follow the specific rules of the digital wallet.

QR Code

QR Code Size: The following specifications are applied to the Alipay+ QR code:

Height and width: 25.4mm to 30.5mm.
Screen brightness: At least 85%.
Icon size: No more than 15% of the QR code.
Leave some empty space around the QR code.

QR Code Size.png

Design Size Of Barcode And QR Code.png

Payment Info

Exchange Rate: See exchange rate display format.

Payment Method: In accordance with the digital wallet compliance requirements, display the payment methods that support Alipay+ payment. Display the digital wallet balance by default. Click to select other available methods such as bank cards or credit payments. The user experience is the same as that of the Cashier Payment.

User Actions

Change Location: By default, the current location is displayed. If location-based service is not available, the user must click to select a location from the available locations that are supported. The payment code changes along with the location.

Change Location.png

Code Scaling:

Click the barcode or QR code to expand to fullscreen. The codes in fullscreen must comply with the barcode standards and the QR code standards above.
Once in fullscreen, the barcode number must be displayed in full.
Click again to return to the default page.

Code Scaling.png

Screenshot Prohibitions:

On Android, use technical methods to prohibit users from taking screenshots of payment codes.
On iOS, invalidate the code if a screenshot is taken, and notify the user of the prohibition. After the user closes the notification, generate a new code.

Screen Prohibitions Page.png

Code Refresh: The payment code can be updated automatically, or manually when network or system issues occur. The action entry to manual update can be set in the "more" option list in the upper right corner of the screen.

Page Translation: An option to translate the payment code page is recommended to help customers and merchants communicate.

Page Translation.png

Brand Info

Alipay+ Brand: Display the Alipay+ brand in the style that is illustrated in Alipay+ foundational brand guidelines.

Note:

You can customize the font style as required.
It is recommended to display the text "Powered by" in English. Multiple languages are not supported.

QR Code Logo: Display Alipay+ logo in the center of the QR code.
Alipay+ logo asset: 📎AlipayPlus_brandasset.zip

Payment result page

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

Transaction detail page

For details about the design of the transaction detail page, see Common designs.

Download

To download the design resources, click here.