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.
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 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.
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.
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.
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.
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.
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.