Common pages 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.
For page details marked as Mandatory (in blue), you must design according to the specifications. For page details marked as Optional (in orange), you can design based on your own business logic.
Payment result page
Payment result page is used in both online and offline payment scenarios, and delivers the payment result to users and merchants in a timely manner. The payment success page also serves as an intermediate page that leads to other payment scenarios. The payment failure page also provides failure reasons and solutions, so future failure might be avoided.
Payment Status
Payment Result: A specific payment result.
Payment Amount: The actual amount paid by the user, in the payment currency.
Failure Reasons: Specific reasons of the payment failure. If actions are available, display the action entry.
Payment Info
Merchant Name: The merchant name in the original language
Payment Method: The current payment method
Amount Info
Order Amount: The original amount to be paid by the user, in both the local and foreign currencies.
Exchange Rate: The exchange rate in the exchange rate display format.
Alipay+ Promotion (if applicable): See Promotion info.
Alipay+ Promotion Amount (if applicable): See Promotion info.
User Actions
Confirm Button: Display the button if the redirect URL is valid. Click to redirect the user back to the merchant page. If no URL exists, redirect the user to the digital wallet homepage.
Auto Redirect: If the redirect URL is valid, display a six-second countdown of auto redirect on the confirm button.
Brand Info
Alipay+ Brand: Display the Alipay+ brand.
Transaction detail page
Users can view the details of each paid transactions in the transaction history.
Transaction Status
Payment Amount: The actual amount paid by the user, in the payment currency
Transaction Status: The current status of a transaction
Payment Info
Merchant Name: The merchant name in the original language
Payment Method: The current payment method
Merchant Transaction ID: The transaction ID assigned by the merchant
Amount Info
Order Amount: The original amount to be paid by the user, in both the local and foreign currencies.
Exchange Rate: The exchange rate in the exchange rate display format.
Alipay+ Promotion (if applicable): See Promotion info.
Alipay+ Promotion Amount (if applicable): See Promotion info.
Brand Info
Alipay+ Brand: Display the Alipay+ brand.
Exchange Rate
It is recommended to display the exchange rate for cross-currency transactions. The following specifications are applied to the exchange rate:
- Explain in text that the displayed rate is only a reference exchange rate.
- Currency format: It is recommended to use the ISO 4217 currency code.
- Sequence of currency code and number: For amounts, place currency code before the number, for example, HKD 778.0. For exchange rates, place currency code after the number. For example, 1 USD=6.8079 CNY. Leave a space between numbers and currency codes.
- Sequence in currency pairs: Display the currency pair in the sequence that is passed in from the backend. Sometimes, the payment currency is in the second place. For example, if an AlipayHK wallet user shops in a Japanese merchant's store, the exchange rate can be something like 100 JPY=7.379747 HKD. Sometimes, the payment currency is in the first place, for example, if an American wallet user shops in a Japanese merchant's store, the exchange rate can be something like 1 USD=104.7023 JPY.
- Base currency amount: For high-value currencies, use 1. For example, 1 USD=6.8097 CNY. For low-value currencies, use 100 or 1000. For example 100 JPY=7.379747 HKD, 1000 VND=0.2903 CNY.
- Decimal place accuracy: Display the digits after the decimal that is passed in from the backend (4~8 digits after the decimal). To avoid devaluation, no rounding is allowed.
Promotion Info
Alipay+ Promotion (if applicable): Display this field when promotions from Alipay+ are available. Possible scenarios are:
- One Alipay+ promotion exists.
- Multiple Alipay+ promotions exist.
- Both Alipay+ promotions and digital wallet promotions exist.
Alipay+ Promotion Amount (if applicable): The promotion amount in the local currency. The amount in the foreign currency is optional.
