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.
- 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.
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 Logo: Display the merchant logo if available. Otherwise, display the default logo.
Store Name: The store name in the original language.
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.
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.
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
Close Button: Click to end the Merchant-presented Mode Payment process.
Alipay+ Brand: Display the Alipay+ brand in the style that is illustrated in Alipay+ foundational brand guidelines.
- 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.
To download the design resources, click here.