Alipay+ DocsAlipay+ Docs

User-presented Mode Payment

With User-presented Mode Payment, the merchant scans the payment code that the consumer presents to initiate a payment. Generally, the payment code is displayed on a digital wallet app owned by an Alipay+ Mobile Payment Provider (MPP).

Basic concepts

The following key terms are used in this document:

Term (Abbreviation)

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.

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.

User-presented Mode Payment

Payment scenario that the merchant scans the consumer presented code with a device to initiate the payment.

payment code

Also known as business-scan-consumer (B-scan-C) code. QR codes or barcodes presented by consumers for merchants to scan with their reading devices to initiate payments.

User experience

The following figure illustrates the user experience with the User-presented Mode Payment product:

image.png

Figure 1. User experience of User-presented Mode Payment

The user experience consists of the following steps:

  1. The consumer opens the MPP's app (normally a digital wallet) and then presents the Alipay+ payment code to the merchant. On the top left corner of the payment code, the consumer can always see the image.png logo.
  2. The merchant scans the payment code that the consumer presents.
  3. The MPP presents the Payment Result Page to the consumer.

Notes:

  • In the MPP app, the entry to the Alipay+ payment code and the MPP's local payment code is the same. Tab switches are provided so that the consumer can easily switch between the Alipay+ payment code and the local payment code.
  • When the consumer opens the Payment Code Page in the MPP app, the MPP app needs to display the Alipay+ payment code if the MPP identifies that the consumer is abroad. If the MPP app fails to obtain the consumer's location, the consumer can switch the local payment code to the Alipay+ payment code manually.

For more information, see Page detail requirements.

Product functionalities

The Alipay+ User-presented Mode Payment product provides several capabilities to facilitate your business. Refer to the following section for detailed information:

Alipay+ availability notification: When the MPP identifies a consumer is abroad in a location where Alipay+ payment is available, the MPP informs the consumer of Alipay+ availability by in-app notifications or short messages.

How it works

图片 1.png

Figure 2. Alipay+ User-presented Mode Payment workflow

After the merchant places an order, the workflow consists of the following steps:

  1. The MPP app requests a payment code from the MPP server, which calls Alipay+ to get the payment code. Then, the user presents the payment code to the merchant.
  2. The merchant scans the payment code and sends a payment request to Alipay+.
  3. Alipay+ decodes the payment code to obtain the customer ID, and then sends the payment request with the customer ID to the MPP.
  4. The MPP debits the payment amount from the user's account according to the customer ID.
  5. The MPP presents the payment result to the user on its app.

Page detail requirements

This section describes the design requirements for the three main pages for User-presented Mode Payment.

  • Alipay+ Payment Code Page
  • Payment Result Page
  • Transaction Detail Page

Alipay+ Payment Code Page

The following figure illustrates the fields that can be displayed on the Alipay+ Payment Code Page for User-presented Mode Payment.

image.png

Figure 3. Fields for Alipay+ Payment Code Page

Alipay+ payment code page - region selector.png

Figure 4. Fields for Alipay+ Payment Code Page with region selector and exchange rate

Note:

  • The exchange rates are not always greater than or equal to 1.
  • The order currency can be displayed either before or after the user's payment currency in the exchange rates.

Ensure to display the image.png logo as a brand mark next to the upper corner of the payment code.

Adhere to the following guidelines for the QR code and the barcode on the Alipay+ Payment Code Page:

  • Display the "Alipay+ icon" at the center of the QR code.
  • The QR code and barcode are clear and scannable.
  • By default, mask part of the barcode number to protect the user information.

To obtain the assets of the Alipay+ icon, see Alipay+ Brand Mark Assets.

Open the Alipay+ payment code page

When the user opens the payment code page in the MPP app, the app must ensure that the user can use the Alipay+ payment code. By default, the MPP needs to automatically obtain the user's current location. If the user is abroad, the MPP automatically opens the Alipay+ payment code page. If the MPP fails to obtain the user's location, the user can manually select the Alipay+ payment code by a tab switch.

Automatically open the Alipay+ payment code page

You can use the location-based service (LBS) or other methods to check if the user is abroad. If the user is abroad, when the user opens the payment code in the MPP app, the MPP app must automatically open the Alipay+ payment code page.

image.png

Manually select the Alipay+ payment code

If the MPP app fails to obtain the user's location, you must let the user select the Alipay+ payment code manually. For this, provide an apparent entry to the Alipay+ payment code on the MPP app's payment code page.

It is recommended to use a tab switch as the entry. See the following figure for example:

Tab switch

image.png

Payment code related functionalities

Screenshot prohibitions

On Android, use technical methods to prohibit users from taking screenshots of payment codes.

On iOS, invalidate the code if a screenshot is taken, and notify the user of the prohibition. After the user closes the notification, generate a new code.image.png

Barcode numbers

When the user clicks Tap to view numbers below the barcode, a security message pops up to warn the user not to share the number with anyone but the cashier. After that, show the unmasked number under the barcode.image.png

QR code scaling

The user can tap the QR code to enlarge it and tap it again to restore it.image.png

Code refresh

The Alipay+ payment code must be refreshed automatically in a periodical manner (one minute). The MPP app can also provide an entry for the user to manually refresh the code. The entry to refresh the code can be set in the "more" option list in the upper right corner of the screen.

Payment Result Page

The following figures illustrate the fields that can be displayed on the Payment Result Page for User-presented Mode Payment.

The payment succeeds:

Payment result-In store-Success.png

Figure 5. Fields for Payment Result Page - payment succeeds

Note:

  • The exchange rates are not always greater than or equal to 1.
  • The order currency can be displayed either before or after the user's payment currency in the exchange rates.

The payment fails:

image.png

Figure 6. Fields for Payment Result Page - payment fails

The following table lists additional information about the fields in Figures 4 and 5. Information on all of the fields (except the Alipay+ brand) in the table can be obtained from the related APIs.

If the fields in the following table are available, the fields must be provided on the Payment result Page.

Field

Description

Payment amount

The amount that the user pays.

Order amount

The order amount.

Exchange rate

The exchange rate. Used when the order currency differs from the user's payment currency.

Alipay+ discount

The amount of the discount from Alipay+.

If the merchant name is displayed on the Payment result Page, the merchant name needs to support multiple languages.

Transaction Detail Page

The following figure illustrates the fields that can be displayed on the Transaction Detail Page for User-presented Mode Payment.

Transaction detail page.png

Figure 7. Fields for Transaction Detail Page

Note:

  • The exchange rates are not always greater than or equal to 1.
  • The order currency can be displayed either before or after the user's payment currency in the exchange rates.

The following table lists additional information about the fields in Figure 6. Information on all of the fields in the table can be obtained from the related APIs.

If the fields in the following table are available, the fields must be provided on the Transaction Detail Page.

Field

Description

Merchant name

The display name of the merchant, which needs to support multiple languages.

Payment amount

The amount that the user pays.

Transaction No.

The transaction number assigned by the merchant.

Alipay+ discount

The amount of the discount from Alipay+.

Optional design standards

Follow the optional standards to ensure an optimal user experience.

Display a country/region list

Due to regulation requirements, some MPPs might have to display the exchange rate between the order currency and the payment currency on the Alipay+ payment code page. In this case, the MPP needs to display a list of the countries/regions that the user can select. When the number of countries/regions takes up more than two mobile screens, the MPP app needs to provide a search capability. The countries/regions need to be listed alphabetically.

In addition, if the MPP app can identify the user's location, the MPP app needs to use the user's country/region by default.

See the following figure for an example:image.png

Note:

  • The exchange rates are not always greater than or equal to 1.
  • The order currency can be displayed either before or after the user's payment currency in the exchange rates.

Design of the QR code & barcode

  • Recommended width: 40 mm to 60 mm.
  • Recommended height: No less than 14 mm.
  • The barcode must be displayed in full and not be obscured in any way.

User-presented Mode Payment

Screen brightness

Automatically increase the screen brightness for the Alipay+ Payment Code Page to improve scannability.

image.png

Get started

If you intend to access this product, please submit your information first. We will get back to you soon.

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

For more information about how to integrate the User-presented Mode Payment functionalities, see Integration guide for User-presented Mode Payment.