Alipay+Alipay+

Auto Debit

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.

image.png

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.

image.png

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:

image

For Web side authorization:

image

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.

image

Page details

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

Add payment method page

image

image

Brand

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

image

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

image

image

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.

image

Brand

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

image

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

Alipay+ Partner & Full Name (Englsih)

Abbreviation

Full Name

(Local Language)

Wrong Usage

Alipay+ Partner

N/A

N/A

Alipay+ partner

Wallets

Wallet

Brand Name

Abbreviation

Full Name (Local Language)

Wrong Usage

Alipay

支付宝

N/A

支付宝

AlipayHK

AlipayHK

N/A

N/A

Touch 'n Go eWallet

Touch 'n Go eWallet

TNG eWallet

N/A

Touch'n Go eWallet

Touch 'n GO eWallet

Touch 'n Go Wallet

TrueMoney Wallet

TrueMoney Wallet

N/A

ทรูมันนี่ วอลเล็ท

DANA

DANA

N/A

N/A

Dana

GCash

GCash

GCash

N/A

G Cash

Gcash

Kakao Pay

Kakao Pay

N/A

카카오페이

(Kakao Pay's preference)

KakaoPay

Kakao pay

bKash

bKash

N/A

N/A

easypaisa

easypaisa

N/A

N/A

Paytm

Paytm

N/A

N/A

PayTM

Alipay (Macao)

Alipay (Macao)

N/A

支付寶(澳門)

Boost

Boost

N/A

N/A

Rabbit LINE Pay

Rabbit LINE Pay

N/A

N/A

Rabbit Line Pay

Verify your design

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