Common designs
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.
Page details
In this section, for elements marked as Mandatory (blue), you must display and design the element according to the specifications. For elements marked as Optional (orange), you can design them based on your own business logic.
The guide does not specify the design for the page header unless otherwise specified. You can arrange necessary user actions such as Return, Close, and Done on it.
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.
Info: Payment status
Payment amount: The actual amount paid by the user, in the payment currency.
Payment result: A specific payment result.
Failure reasons: Specific reasons of the payment failure. If actions are available, display the action entry.
Info: Order
Merchant name: The merchant name in the original language.
Payment method: The current payment method.
Info: Amount
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+ discount info (if applicable): See Alipay+ discount & amount.
Action
View Alipay+ discount detail: See Alipay+ discount & amount.
Confirm: 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.
If the redirect URL is valid, display a six-second countdown of auto-redirect on the confirm button. You also need to adjust the wording on the button to a directional verb. Do not provide the auto-redirect function on a failed Payment result page.
Brand
Powered by Alipay+ brand:
- Display the Alipay+ logo with the "Powered by" copywriting in the style that is specified in the Alipay+ foundational brand guidelines.
- Display "Powered by" in English.
- You can customize the font style of the copywriting as needed.
- Alipay+ logo asset: 📎AlipayPlus_brandasset.zip
Transaction detail page
Users can view the details of each paid transaction in the transaction history.
Info: Transaction status
Transaction amount: The actual amount paid by the user, in the payment currency.
Transaction status: The current status of a transaction.
Info: Order
Merchant name: The merchant name in the original language.
Merchant transaction No.: The transaction number assigned by the merchant.
Transaction time: The exact time when the payment is processed.
Order information: The order information provided by the merchant. It is recommended to provide the information to help the user learn about the payment details.
Payment method: The current payment method.
Info: Amount
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+ discount info (if applicable): See Alipay+ discount & amount.
Action
View Alipay+ discount detail: See See Alipay+ discount & amount..
Brand
Powered by Alipay+ brand:
- Display the Alipay+ logo with the "Powered by" copywriting in the style that is specified in the Alipay+ foundational brand guidelines.
- Display "Powered by" in English.
- You can customize the font style of the copywriting as needed.
- Alipay+ logo asset: 📎AlipayPlus_brandasset.zip
Elements
Currency & 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.
- Exchang rate formate: 1
{base_currency}
={quotePrice}
{quote_currency}
. Thebase_currency
and thequote_currency
is passed in by Alipay+ in the quoteCurrencyPair parameter, and thequotePrice
is the value of the quotePrice parameter. For example, when the value of the quoteCurrencyPair parameter isJPY/KRW
, and quotePrice is10.0000
, the exchange rate is displayed as 1 JPY=10.0000 KRW. - Sequence of currency code and number: For amounts, place the currency code before the number, for example, HKD 778.0. For exchange rates, place the 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 1 JPY=0.07379747 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.
- 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.
Alipay+ discount & amount
Alipay+ or the digital wallet occasionally offers discounts to the user. You must display the related information from Alipay+ to the user.
There are multiple discount cases:
- No Alipay+ discount exists: No specification in this case.
- One Alipay+ discount exists: Display the Alipay+ discount title and discount amount at the bottom of the information section directly.
- Multiple Alipay+ discounts exist: Display the Alipay+ discount title and total discount amount at the bottom of the information section. Specify the details for all the discount items according to the information you received from the Alipay+ backend. If you hide the discount details using an "Alipay+ discount" dropdown list, provide an expand/collapse button on it.
- Both Alipay+ discount and wallet side discount exist: Display the discount info and the total amount at the bottom of the information section. Specify the details for all the Alipay+ discount items according to the information you received from the Alipay+ backend. If you hide the discount details using a dropdown list under a surtitle, you must explain that Alipay+'s discounts are included on the surtitle, and provide an expand/collapse button on it.
For the discount amount, display the amount in the local currency according to the Currency & exchange rate guideline. The amount in the foreign currency is optional.