Alipay+ DocsAlipay+ Docs

B-scan-C Payment UX design guideline

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

Conventions

  • For pages marked as A+ STD (Alipay+ standard), you must design and develop these pages according to the specifications. For pages marked as A+ OPT (Alipay+ Optimization), you can design these pages based on your own business logic.
  • For page details marked in blue (Mandatory), you must design according to the specifications. For page details marked in orange (Optional), you can design based on your own business logic.

image.png

Overview

image.png

Page details

Alipay+ payment code page

In B-scan-C 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 use a unified design.

image.png

Barcode

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

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

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

image.png


image.png

Payment Info

Exchange Rate: The exchange rate in the 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 with 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.

image.png

Code Scaling:

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

image.png

Screenshot Prohibitions:

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

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


image.png

Brand Info

Alipay+ Brand: Display the Alipay+ brand.

QR Code Logo: Display Alipay+ logo in the center of the QR code.