Alipay, China's leading third-party online payment solutionAlipay, China's leading third-party online payment solution

User experience

This topic provides complete information on the user experience of initiating the authorization, completing the authorization, and receiving the authorization result. Experiences for each possible redirection process between the merchant and wallet are also provided.

Users can initiate the authorization on three merchant terminal types: WEB, WAP, or APP. After the user initiates the authorization, the user will be redirected to the wallet terminal to complete the authorization. As the wallet support the WEB, WAP, or APP terminal type, multiple redirection experiences (from the merchant to wallet) exist. In addition, for each merchant terminal type, the subsequent redirection mode and the supported redirection page type are different depending on each wallet's capability.

The user experiences from different types of merchant and wallet terminals are presented in these sections:

The authorization results for different cases are presented in these sections:

User experience

This section provides a complete user experience of initiating the authorization, completing the authorization, and receiving the authorization result.

Merchant terminal type: WEB

If the user initiates the authorization on a WEB merchant terminal, the user will be redirected to a WEB wallet terminal. The wallet's website page provides one of the following possible methods for users to complete the authorization:

In this case, the user will be redirected to a wallet's website page where a QR code is presented for the user to scan and authorize. For example:

1-1.jpg

Figure 1. Website page of the scan-to-authorize type

Merchant terminal type: WAP

If the user initiates the authorization on a WAP merchant terminal, the user will be redirected to a WAP wallet terminal: a log-in-to-authorize WAP page.

Login-to-authorize WAP page

The user is redirected from a WAP merchant page to a WAP wallet page where an account and password are required to complete the authorization.

1-3.jpg

Figure 3. Redirection from a merchant WAP page to a login-to-authorize WAP page

Notes:

  • After completing the authorization on the wallet side, the user is redirected back to the merchant page with a value of authCode by the default browser.
  • The wallet authorization page must be a WAP page. If the wallet does not provide a WAP authorization page, redirection from the WAP merchant terminal to the wallet is not supported.

Merchant terminal type: APP

If the user initiates the authorization on a terminal page with an APP terminal type, the user will be redirected to one of the following possible terminals:

The user is redirected from a merchant app to a WAP wallet page where an account and password are required to complete the authorization.

1-4.jpg

Figure 4. Redirection from a merchant app to a WAP wallet page

Notes:

  • If the user has the wallet app installed, the wallet app is opened in one of the following ways:
    • Via a universal link or an app link
      • Universal Link: Allow users to intelligently follow links to content in your app or to your website in the iOS system. For more information, see iOS Universal Links.
      • App Link: A deep link that when tapped, takes the user directly to a page within a specific app. For more information, see Android App Links.
    • Via an intermediate page
    • Via a dynamic link (Only for GCash)
  • Which type of wallet terminal the user is redirected to is determined by the target wallet's capability and the merchant's integration method. There are three types of URLs returned by the value of authUrl in the consult response. Each type of URL leads to a different wallet redirection experience:
    • If the authUrl value is an ordinary WAP address, the user is redirected to a log-in-to-authorize WAP page.
    • If the authUrl value is a URL scheme (WAP-scheme), the user is redirected to open the browser first and then open the wallet app.
    • If the authUrl value is a universal link or app link, the user is redirected to open the wallet app directly.

The following table shows which kind of experiences are provided by each wallet when the merchant terminal type is APP:

Wallet

Log-in-to-authorize WAP page

Wallet app

Installed

Not installed

Open intermediate page first and then open wallet

Open wallet via a universal link or app link

Open WAP page

GCash

Log-in-to-authorize WAP page

DANA

AlipayHK

Log-in-to-authorize WAP page

KakaoPay

Wallet app download WAP page

Touch 'n Go

Log-in-to-authorize WAP page

TrueMoney

Wallet app download WAP page

AlipayCN

Wallet app download WAP page

Naver Pay

BOOST

Log-in-to-authorize WAP page

Rabbit LINE Pay

Wallet app download WAP page

Maya

Table 3. Supported redirection experiences for each wallet when the merchant terminal type is APP

Authorization result

The authorization results for different cases are presented in these sections:

Authorization success

If the user completes the authorization successfully, the presented authorization result pages for different terminal types are shown below:

Page

Merchant to wallet terminal types

WEB to WEB

WAP to WAP

APP to WAP

APP to APP

Authorization result (merchant page)

image

image

image

image

Table 4. Successful authorization result pages for different terminal types

Authorization failed

Usually, the user fails to complete the authorization because of authorization timeout or an active exit. The authorization result pages for different wallets are shown below based on the following failure reasons:

The authorization times out and failed.

Wallet

GCash

AlipayCN

KakaoPay

DANA / AlipayHK / Touch 'n Go / TrueMoney

Page

User experience

User experience

Authorization timeout feature not supported

Redirection to merchant

Not supported

Not supported

Supported

Table 5. An authorization result page when a timeout occurs

Note: There are various transaction-related amounts and currencies you might use during different integration tasks for each wallet. For details, see Usage rules of the Amount object.