This document provides guides on the design of the pages involving the authorization process of 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 adaptations to complete the design.

Scenario overview

To help understand the scenarios, the pages are marked as 4 categories: Alipay+ Side, Merchant Side, Acquirer Side, and Wallet Side.

At your side, for pages marked as A+ STD (Alipay+ Standard) in blue, you must design and develop these pages according to the specifications. For pages marked as A+ OPT (Alipay+ Optimization) in orange, you can design these pages based on your own business logic.

The user can complete the authorization process in 2 scenarios:

• Using redirections. The user can complete the whole process within the mobile end.
• Scanning the QR code on the web page and complete the authorization on the mobile end.

See the following figures for details:

Redirect to authorization page to authorize

At the merchant side, the user first selects an Alipay+ wallet as the payment method, and is then redirected to the wallet authorization page to complete the authorization. After that, the user is redirected back to the merchant side to view the authorization result.

For mobile side authorization:

For Web side authorization:

Scan QR code to authorize

In this scenario, the user first selects an Alipay+ wallet as the payment method, and scans the QR code on the wallet side to authorize on the mobile end. The authorization result page is then displayed both on the web end and the mobile end.

Page details

You must display all the Alipay+ Partner and Wallet brand elements according to the specifications.

Add payment method page

Brand

Display the Alipay+ Partner brand and wallet brand according to the image area availability at your front-end:

For each brand, display the brand info according to the following specifications:

Alipay+ Partner brand

Text: Display Alipay+ Partner. No format or style requirement.

Image: Display the Alipay+ Partner logo you acquired from the Acceptance Mark Generator.

Wallet brand

Text: Display the wallet brand name you acquired from the Brand Name List in text. No format or style requirement.

Image: Display the wallet logo you acquired from the Acceptance Mark Generator.

Payment method list page

Info

Wallet account ID: Display the masked wallet account ID according to your data masking rule.

Action

Remove payment method: Allow the user to remove an added Alipay+ wallet. When the user removes the wallet, use a modal window to confirm the action.

Note: This specification applies to both mobile end and web end.

Brand

Display the Alipay+ Partner brand and wallet brand according to the image area availability at your front end:

For each brand, display the brand info according to the following specifications:

Alipay+ Partner brand

Text: Display Alipay+ Partner. No format or style requirement.

Image: Display the Alipay+ Partner logo you acquired from the Acceptance Mark Generator.

Wallet brand

Text: Display the wallet brand name you acquired from the Brand Name List in text. No format or style requirement.

Image: Display the wallet logo you acquired from the Acceptance Mark Generator.

Acceptance Mark Generator

Use the Acceptance Mark Generator to generate logo assets for your user interface. Use the Single Asset tool for displaying the Alipay+ Partner logo and wallet logo separately; use the Joint Asset tool for displaying the Alipay+ Partner logo & wallet logo as one image.

Brand name list

Use the brand names in the following table for the payment method names. Do not use the examples in the Wrong Usage.

Alipay+ Partner

Wallets

Verify your design

Please contact your business partner/project manager at Alipay+ to verify your UX design.