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:

User experience

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

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 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.

Before payment

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.

Payment

• Accept a payment: The MPP takes a series of integration steps to ensure the consumer completes the payment.
• Automatic code generation: When a consumer opens the Payment Code page, the MPP app automatically obtains the consumer's current location. If the MPP identifies that the consumer is abroad, an Alipay+ QR code is automatically generated to support payments.
• Standardized payment code: The standardized payment code can be used across the globe, which helps the MPP easily reach out to worldwide merchants.
• Promotion provided: With this product, the MPP can directly offer promotional discounts that are provided by Alipay+ to consumers who use the MPP app to pay.
• Multiple currencies supported: With cross-border settlement supported, the MPP can make payments in multiple currencies across the world, as well as allow its consumers to pay in their local currencies.
• Payment result inquiry: The MPP can send the payment result to Alipay+ on Alipay+'s inquiry about the payment status.
• Payment result notification: When the MPP confirms that the payment is successful, Alipay+ actively pushes the payment result to the ACQP, who can then relay the result to merchants.

Post payments

• Refund: MPPs support both full and partial refunds.
• Cancellation: MPPs support transaction cancellations that are requested by ACQPs within the cancellable period.

Business operations

• One-stop settlement: Alipay+ provides a unified funds clearing and settlement service for the MPPs. Instead of mutual settlement, the MPPs only need to settle with Alipay+, which greatly simplifies the funds processing and improves the settlement efficiency.
• Alipay+ Partner Workspace: Alipay+ Partner Workspace is a platform where the MPPs can execute operational tasks related to the Alipay+ business, which includes transaction management, risk management, account management, dispute handling, and integration.

How it works

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.

Figure 3. Fields for Alipay+ Payment Code Page

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 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.

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

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.

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.

QR code scaling

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

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:

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:

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.

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.

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.

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:

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

Barcode design

• 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.

QR code design

• Recommended height and width: 25 mm to 40 mm.
• Recommended height and width of the Alipay+ icon: around 15%-25% of the QR height and width.
• Leave some empty space around the QR code.

Screen brightness

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

Get started

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 overview for User-presented Mode Payment.