Auto Debit
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
Redirect to authorization page to authorize
Scan QR code to authorize
View authorization details
Page details
Authorization page
Authorization Relationship
Merchant Logo: Display the merchant logo if available. Otherwise, display the default logo for merchants.
Digital wallet Logo: Recommended. Display the digital wallet logo to indicate relationship between involved parties and add a sense of security.
Digital wallet Account ID: Recommended. Display a masked ID to add a sense of security.
Authorization Info
Merchant Name: The merchant name in the original language.
Authorization Contents: The specific contents of what are authorized. Detailed descriptions are preferred.
User Actions
Agreement Checkbox: Click to accept the agreement. Unchecked by default. If the user proceeds to the next step without clicking the checkbox, use a tooltip to remind the user.
Agreement Link: Hyperlink. Click to open the agreement contents page.
Authorize Button: Click to authorize. Clickable by default. On click, ask the user to confirm the authorization.
Cancel Button: Click to cancel the authorization. However, on click, use a pop-up to ask the user for confirmation before continuing. Or, inquire the reason for the cancellation to collect information for future improvements.
Brand Info
Alipay+ Brand: Display the Alipay+ brand.
Alipay+ logo asset: 📎AlipayPlus_brandasset.zip
Authorization result page
After user authorization, this page notifies the user of the authorization result in a timely manner. The authorization success page also helps the user understand subsequent payment notifications. The authorization failure page provides reasons and solutions of the failure, so subsequent authorizations might succeed.
Authorization Result
Authorization Result: The specific authorization result.
Authorization Success Description: Clearly inform users that, after authorization, subsequent payments are automatically debited, and the payment results are notified or inquired through specific methods.
Failure Reason: Display specific reasons of the authorization failure. If user actions are available, display the action entry.
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 directly 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.
Alipay+ logo asset: 📎AlipayPlus_brandasset.zip
Authorization history page
In the authorization history page, users can view which merchant is authorized and manage the authorizations.
Merchant Info
Merchant Name: The merchant name in the original language.
Merchant Logo: Display the merchant logo if available. Otherwise, display the default logo.
Authorization detail page
In the authorization detail page, users can view the authorization status of a merchant. Methods to terminate the authorizations can also be found in this page. Users unfamiliar with Auto Debit might find this page most helpful.
Merchant Info
Merchant Name: The merchant name in the original language.
Merchant Logo: Display the merchant logo if available. Otherwise, display the default logo.
Authorization Info
Authorization Contents: The specific contents of what are authorized. Detailed descriptions are preferred.
Authorization Time: Time when the authorization is completed.
User Actions
Transaction History Inquiry: Hyperlink. Click to go to the transaction history page.
Deduction Methods: This feature is for wallet apps that allow users to select the deduction method of a payment. If the deduction method cannot be change in the wallet, display the single option instead.
Authorization Link: Hyperlink. Click to go to the authorization contents page.
Cancel Authorization: If the merchant allows the user to cancel the authorization within the wallet app, design the cancellation process according to the figure below. If the wallet has an FAQ feature, provide a Learn more button to link the user to a page that explains what is Auto Debit. If not, it is required that you explain the security and convenience of Auto Debit on the dialog window to encourage the user to keep the authorization.
If the merchant does not allow the cancellation within the wallet app, do not provide the action entrance. Instead, provide users with a guidance on how to cancel the authorization manually.
Brand Info
Alipay+ Brand: Display the Alipay+ brand in the style that is illustrated in Alipay+ foundational brand guidelines.
Alipay+ logo asset: 📎AlipayPlus_brandasset.zip
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.