Alipay+Alipay+

Overview

Cashier Payment occurs when a consumer purchases the merchandise on a merchant platform and the consumer is redirected to the page of the Mobile Payment Partner (normally, a digital wallet) to complete the payment.

When an Acquiring Partner (ACQP) initiates a payment request to Alipay+, Alipay+ returns a payment URL of the Mobile Payment Partner to the ACQP. The Mobile Payment Partner renders the cashier page when the consumer is redirected to the payment URL and then the consumer confirms to pay.

User experience

By using Alipay+ Cashier Payment, a consumer can place an order in a merchant platform and chooses a payment method on the merchant's cashier page to initiate a payment request.

Merchant platform

The merchant platform can be a PC website (referred to as "Web" below) or a mobile app/WAP page (referred to as "Mobile" below). For different platforms, the succeeding user experience is different.

  • If the consumer places the order on a merchant PC website, the consumer is redirected to a page that displays a QR code. Depending on whether the wallet supports code scanning, the payment experience at the wallet side can be different.
  • If the wallet supports code scanning, the consumer scans the code and completes the payment by using the wallet app.
  • Otherwise, the consumer is redirected to a series of WAP pages to go through the payment process, including login and pay.
  • If the consumer places the order in a merchant app/WAP page, the consumer is redirected to the wallet app or WAP page to continue the payment process.

Presentation mode

Alipay+ Cashier Payment provides two kinds of presentation modes for a merchant to display the payment methods: tile mode and bundle mode. The following table lists the differences between the two modes in terms of the merchant side, consumer behavior, and the ACQP side.

Presentation mode

Merchant side

Consumer behavior

ACQP

Tile mode

All the Alipay+ supported wallets that are available to the merchant are displayed as an individual payment method in a list.

The consumer can directly choose an individual wallet when placing the order and uses the wallet for further payment.

Specify the presentmentMode parameter as TILE when sending the consultPayment request to Alipay+.

Bundle mode

The Alipay+ payment method is displayed as a whole, appended with the logos of all the Alipay+ supported wallets that are available to the merchant.

The consumer needs to select the Alipay+ payment method option when placing the order and uses/selects one of the supported wallets for further payment.

Specify the presentmentMode parameter as BUNDLE when sending the consultPayment request to Alipay+.

Scenarios

The following section lists the main kinds of user experience that a consumer might have when using an Alipay+ supported wallet for payment.

Tile mode - Web

Scenario 1

Conditions:

  • The wallet supports code-scanning payment.

Experience:

  1. When placing an order on a merchant PC website, the consumer chooses a wallet from the payment method list on the merchant's cashier page directly.
  2. The consumer is redirected to a page that displays a QR code and uses the wallet app to scan the QR code.
  3. The consumer is then redirected to the payment confirmation page in the wallet app and completes the payment.
  1. The consumer is finally redirected to the merchant result page.

Note: Depending on whether the QR code is rendered by Alipay+ or the merchant, the following two user experience modes are provided:

Scenario 1(a): Alipay+ QR code mode

In this scenario, the user is redirected to the Alipay+ cashier page, where the order code is rendered by Alipay+.

image.png

Figure 1. User experience of Alipay+ QR code page mode

Scenario 1(b): Merchant QR code page mode

In this scenario, the QR code is rendered by the merchant with the code value returned from Alipay+.

Note: The merchant must follow the Alipay+ UX design guideline to display the QR code.

image.png

Figure 2. User experience of merchant QR code page mode

Scenario 2

Conditions:

The wallet does not support code-scanning payment.

Experience:

image.png

  1. When placing an order on a merchant PC website, the consumer chooses a wallet from the payment method list on the merchant's cashier page directly.
  2. The consumer is redirected to the wallet login Web page and further completes the payment at the wallet side.
  3. The wallet displays the payment result.
  4. The consumer is then redirected to the merchant payment result page.

Tile mode - Mobile

Scenario 3

Conditions:

N/A

Experience:

The following diagram illustrates the user experience for this scenario.

image.png

Figure 3. User experience of placing an order in a merchant app/WAP page

When placing an order in a merchant app/WAP page, the consumer can complete the payment in the wallet app/WAP page by the following steps:

  1. The consumer places an order in a merchant app/WAP page and chooses a wallet for payment.
  2. The merchant redirects the consumer to the wallet app/WAP payment confirmation page, where the consumer completes the payment.
  3. The consumer is redirected to the merchant payment result page.

Note: The user cannot be redirected from the wallet to the merchant when the merchant evokes the wallet app from its WAP page. For more information about the implementation of the redirection between the merchant and wallet, contact connect_support@service.alipay.com.

Bundle mode - Web

Scenario 4

Conditions:

The wallet that the consumer selects supports code-scanning payment.

Experience:

The following diagram illustrates the user experience for this scenario.

image.png

  1. When placing an order on a merchant PC website, the consumer selects Alipay+ as a payment method.
  2. The consumer is redirected to the Alipay+ cashier page and opens one of the wallet apps that are included in the bundle to scan the QR code.
  3. The consumer is then redirected to the payment confirmation page in the wallet app and completes the payment.
  4. The consumer is then redirected to the Alipay+ payment result page and further to the merchant payment result page.

Scenario 5

Conditions:

The wallet that the consumer selects does not support code-scanning payment.

Experience:

The following diagram illustrates the user experience for this scenario.

image.png

  1. When placing an order on a merchant PC website, the consumer selects Alipay+ as a payment method.
  2. The consumer is redirected to the Alipay+ cashier page and selects the log and pay option.
  3. The consumer then further selects a wallet in the Login and pay area on the Alipay+ cashier page.
  4. The consumer is redirected to the wallet login Web page and further completes the payment at the wallet side.
  5. The wallet displays the payment result.
  6. The consumer is then redirected to the merchant payment result page.

Bundle mode - Mobile

Scenario 6

Conditions:

  • Multiple wallets are available to the merchant.

Experience:

The following diagram illustrates the user experience for this scenario.

image.png

  1. When placing an order on a merchant app/WAP page, the consumer selects Alipay+ as a payment method.
  2. The consumer is redirected to the Alipay+ wallet list page and selects one of the wallet apps that are included in the bundle.
  3. The consumer is then redirected to the wallet payment confirmation page and completes the payment.
  4. The consumer is then redirected to the merchant payment result page.

More information

For all kinds of user experience that a consumer might have when using Alipay+ Cashier Payment, see: