Alipay+Alipay+

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.

Conventions

  • 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.

Annotation.png

Overview

Redirect to authorization page to authorize

Redirect to authorization page to authorize.png

Scan QR code to authorize

Scan QR code to authorize.png

View authorization details

View authorization details.png

Page details

Authorization page

Authorization Page.png

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 Checkbox.png

Agreement Link: Hyperlink. Click to open the agreement contents page.

Agreement Link.png

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.

Cancel Button.png

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 Page.png

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.

Authorization History Page.png

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.

Authorization Detail Page.png

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.

image

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.

image

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.

Cancel Authorization.png

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.