Alipay+ DocsAlipay+ Docs

Cashier Payment

Cashier Payment makes paying on merchant platforms easier with a unified payment option. On the merchant's cashier page, the consumer can just select Alipay+ as the payment method, and then go to the checkout page where they can select and use a preferred wallet to complete the payment.

Basic concepts

Terms (Abbreviations)

Definition

Acquiring Service Provider (ACQP)

An Acquiring Partner participating in Alipay+ Core or other acquirer cooperating with a member of Ant Group to enable payments.

Alipay+

Alipay+ solution is a collaborative effort along with all partners to provide more open, digitalized, and inclusive financial services to worldwide consumers and merchants.

Cashier Payment

An Online Payment product provided by Alipay+, whereby a Merchant redirects a User to the payment page of a Mobile Payment Provider to confirm the Transaction details and Authorise the Payment.

Merchant

A person that enters into a Transaction with a User which is acquired by an Acquiring Service Provider or an Indirect Acquiring Service Provider, as applicable.

Mobile Payment Provider (MPP)

A Mobile Payment Partner participating in Alipay+ Core or other user- or issuer-facing payment service provider cooperating with a member of Ant Group to enable payments.

QR Code

Quick response code as defined in ISO/IEC 18004.

Code value

Data that are encoded and stored in the QR code or barcode.

User experience

With Cashier Payment, the consumer can place an order on the merchant platform and select Alipay+ as the payment method. Then Alipay+ displays the available wallets for the consumer to select and complete the payment on the selected wallet's platform. After the payment is done, the consumer can return to the merchant platform.Mobile Payment Provider

UX Scenarios

The following sections list the main kinds of user experience that a consumer might have with Cashier Payment.

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

  • If the consumer places the order on a Mobile page, the consumer is redirected to the MPP app or WAP page to continue the payment process.
  • If the consumer places the order on a Web page, the consumer is redirected to a page that displays a QR code. Depending on whether the MPP app supports code scanning, the payment experience varies:
    • If the MPP app supports code scanning, the consumer scans the code and completes the payment by using the MPP app.
    • Otherwise, the consumer is redirected to a series of WAP pages to go through the payment process, including login and paying with a password.

Mobile

Scenario 1. Pay via the Alipay+ checkout page - SDK

Conditions:

  • The merchant app has integrated Alipay+ client SDK.
  • The consumer places an order in the merchant app.

The following diagram illustrates the user experience for this scenario:

image

Figure 1. Pay via the Alipay+ checkout page - SDK

The following steps describe the user experience for this scenario:

  1. The consumer selects Alipay+ as the payment method on the cashier page of the merchant app.
  2. The Alipay+ checkout sheet pops up and lets the consumer select a wallet to continue.
  3. The consumer clicks the pay button and is then redirected to the payment confirmation page of the wallet app to complete the payment.
  4. The consumer confirms the payment result in the wallet app and returns to the merchant app.

Scenario 2. Pay via the Alipay+ checkout page - WAP

Condition: The consumer places an order on the merchant's mobile page or app.

The following diagram illustrates the user experience for this scenario:

image

Figure 2. Pay via the Alipay+ checkout page - WAP

The following steps describe the user experience for this scenario:

  1. The consumer selects Alipay+ as the payment method on the cashier page of the merchant's mobile page or app.
  2. The consumer is redirected to the Alipay+ checkout page and selects one of the wallets.
  3. The consumer clicks the pay button and is then redirected to the payment confirmation page of the wallet app to complete the payment.
  4. The consumer confirms the payment result in the wallet app and returns to the merchant app.

Web

Scenario 3. Scan to pay

Conditions:

  • The consumer places an order on the merchant's PC website.
  • The wallet that the consumer pays with supports scan-to-pay.

The following diagram illustrates the user experience for this scenario:

image

Figure 3. Scan to pay

The following steps describe the user experience for this scenario:

  1. The consumer selects Alipay+ as the payment method on the cashier page of the merchant's PC website and clicks the pay button.
  2. The consumer is redirected to the Alipay+ checkout page, where a QR code and the supported wallets are displayed.
  3. The consumer opens a wallet app on their phone to scan the QR code. The wallet must be one of the supported wallets from the previous step.
  4. The consumer completes the payment in the wallet app. The wallet then displays the payment result.
  5. On the PC side, the consumer is redirected back to the merchant side.

Scenario 4. Log in to pay

Conditions:

  • The consumer places an order on the merchant's PC website.
  • The wallet that the consumer pays with supports log-in-to-pay.

The following diagram illustrates the user experience for this scenario.

image

Figure 4. Log in to pay

The following steps describe the user experience for this scenario:

  1. The consumer selects Alipay+ as the payment method on the cashier page of the merchant's PC website and clicks the pay button.
  2. The consumer is redirected to the Alipay+ checkout page, where the wallets for log-in-to-pay are displayed under the scan-to-pay area.
  3. The consumer clicks the Log in to Pay button of a preferred wallet.
  4. The consumer is redirected to the wallet page to log in and complete the payment.
  5. After payment, the consumer is redirected back to the merchant side.

Brand display

For all the Cashier Payment scenarios, Alipay+ supports the configuration of an aggregated logo according to the pattern and size of the merchant cashier page. With an aggregated logo, you can display the Alipay+ logo along with certain other wallet logos to indicate that the consumer can pay with these wallets after selecting Alipay+ to check out. See the figure below for examples:

image

Figure 5. Alipay+ logo and aggregated logos

For more information about page design and brand display, see Brand Display Guidelines for Cashier Payment in the Alipay+ Brand guideline.

Product functionalities

Alipay+ Cashier Payment offers the following main features:

  • Make a payment: Customers can make payments on the merchant's cashier page and be redirected to the selected wallet to pay.
  • Easy redirection: Alipay+ provides the redirection URL that suits the situation, with which the merchant redirects the consumer to the wallet to complete the payment.

How it works

The interaction between different parties differs depending on whether the ACQP has integrated Alipay+ SDK.

Alipay+ SDK workflow

The following figure illustrates the Cashier Payment workflow with Alipay+ SDK. The ACQP can use theAlipay+ SDK to obtain Alipay+payment methods and to open the Alipay+ checkout page.

image.png

Figure 6. Alipay+ Cashier Payment SDK workflow

Alipay+ Cashier Payment SDK workflow contains the following steps: 

1-2. The merchant sends a request to Alipay+ to get the Alipay+ payment method information.

3-4. The merchant sends the order information to the ACQP server, and the ACQP server sends a payment request to Alipay+.

5-7. Alipay+ places the order, generates payment data, and returns the payment data to the ACQP. The ACQP processes the payment data and returns the processing result (order information) to the merchant.

8-11. The merchant calls ACQP SDK to render the payment sheet. The ACQP SDK then extracts the payment data and sends a request with the payment data to Alipay+ to render the Alipay+ checkout page.

12-14. The user selects an Alipay+ MPP on the checkout page, and is redirected to the MPP page to pay.

15. After completing a payment, the user is redirected back to the merchant page.

16-17. The merchant inquires the payment result through the ACQP and waits for the payment result notification to get the final payment result.

18. After getting the final payment result, the merchant notifies the user of the order status.

Alipay+ non-SDK workflow

The following figure illustrates the Cashier Payment workflow without Alipay+ SDK. In this case, Alipay+ can call the CDN server to obtain Alipay+payment methods.

image.png

Figure 7. Alipay+ Cashier Payment non-SDK workflow

Alipay+ Cashier Payment non-SDK workflow contains the following steps: 

1-2. The merchant sends a request to the Alipay+ CDN server to get the Alipay+ payment method information.

3-4. The merchant sends the order information to the ACQP server, and the ACQP server sends a payment request to Alipay+.

5-7. The merchant receives the Alipay+ Unified checkout redirection URL and renders the Alipay+ checkout page.

8-10. The user selects an Alipay+ MPP on the checkout page, and is redirected to the MPP page to pay.

11. After completing a payment, the user is redirected back to the merchant page.

12-13. The merchant inquires the payment result through the ACQP and waits for the payment result notification to get the final payment result.

14. After getting the final payment result, the merchant notifies the user of the order status.

Get started

To get started with the Alipay+ integration, see Get started with Alipay+ integration.

For more information about how to integrate the Cashier Payment functionalities, see integration overview for Cashier Payment.