Merchant-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 adaptation to complete the design.

Overview

Page details

Alipay+ payment page at Acquiring Partner side

In this scenario, the user scans the QR code presented by the merchant to complete the payment in Alipay+ payment page. The QR code can be a static store code or a dynamic order code. For static store codes, the user must enter the payment amount manually. For dynamic order codes, the payment amount is predetermined.

Store Info

Store Logo: Display the merchant logo if available. Otherwise, display the default logo.

Store Name: The store name in the original language.

Amount Info

Order Amount: The order amount that is input by the user. Use the merchant's currency in ISO 4217 code. The use of decimal-separator symbol and the thousands-separator symbol are subject to the rules in the digital wallet country/region.

User Actions

Translate: Click to open a bilingual window.

Confirm Payment Button: Click to confirm the payment and continue the process. Clickable by default. Use Alipay+ brand color.

Keyboard: Keyboard is for static code payments. Displayed by default after the user scans the code. The keyboard layout is subject to the payment currency. If the smallest currency unit uses decimal, . is displayed on the keyboard. Otherwise, 00 is displayed.

Brand Info

Alipay+ Brand: Display the Alipay+ brand.

Alipay+ logo asset: 📎AlipayPlus_brandasset.zip

Payment confirmation page

For details about the design of the payment confirmation page, see Payment confirmation page in the Cashier Payment UX design guidelines.

Payment result page

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

Translated Alipay+ payment result page at Acquiring Partner side

Language barriers might exist between users and merchants. The translated payment result page helps both the user and the merchant to review the payment information.

Payment Result in Merchant's Language

Payment Result: A specific payment result in the merchant's language.

Merchant Collection Amount: The amount that is collected by the merchant, in the merchant currency defined by ISO 4217.

Payment Info in Merchant's Language

Merchant Name: The merchant name in the original language

Transaction ID: The transaction ID assigned by the Acquiring Partner

Transaction Time: The transaction time in the local timezone

User Actions

Close Button: Click to end the Merchant-presented Mode Payment process.

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.

Transaction detail page

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

Download

To download the design resources, click here.