Alipay mobile website H5 payment

Mobile website payment product introduction｜Webpage & mobile application

In order to facilitate merchants to integrate Alipay payment functions in mobile web applications, Alipay provides mobile website payment capabilities.

Process introduction: The merchant calls the web payment interface provided by Alipay on the webpage to invoke the payment module in the Alipay client. The merchant webpage will jump to Alipay to complete the payment. After payment, it will jump back to the merchant webpage, and finally display the payment result. If the Alipay client cannot be activated, it will automatically enter the webpage payment process after a certain period of time.

The configuration method in the formal environment:

The user has installed Alipay payment process

1. The user accesses the merchant web application in the browser, selects the product to place an order, confirms the purchase, enters the payment link, selects Alipay to pay, and the user clicks to pay, as shown in Figure 1 below;

2. Enter the Alipay payment routing page, Alipay processes the payment request, and tries to wake up the Alipay client, as shown in Figure 2 below (this page cannot be customized and deleted);

3. Enter the Alipay page, start Alipay payment, and the confirmation payment interface will appear, as shown in Figure 3

4. The user confirms the payee and the amount, and after clicking Pay Now, the password input interface appears, as shown in Figure 4 below;

5. After entering the correct password, Alipay will display the payment result, as shown in Figure 5 below;

6. Automatically jump back to the browser, and the merchant will display the order processing result in a personalized manner according to the payment result, as shown in Figure 6 below.

The user has not installed Alipay payment process

If the user has not installed the Alipay client, the user can first click the blue link on the Alipay payment routing page to download the Alipay APP , and download Alipay, as shown in Figure 7;
After successfully downloading and installing the Alipay client, click the Pay with Alipay APP button on the Alipay payment routing page to make payment, as shown in Figure 8;
After clicking the Pay with Alipay APP button, restart the above-mentioned "user has installed Alipay payment process" step.

To access Alipay H5 payment, you first need to create an application on the Alipay open platform and review it. After the review is passed, a unique identifier APPID will be generated. And you can apply to open the product use permission. Only through the APPID application can the interface capabilities of open products be invoked.

Image 12.png

After the application is created, the system will automatically jump to the application details page. Click Add Capability in the capability list to add the mobile website payment function. Reference documents:

Create an App | Web & Mobile Apps

development settings

Enter the development settings to complete the interface signing method, IP whitelist, application gateway, and interface content encryption method development information settings.

Reference document: Interface Signature Method Configuration Instructions｜Mini Program

Interface signing method: required. It is used to ensure the security of the interaction between the merchant application and Alipay.
IP whitelist: optional. It is used to ensure the safety of user funds.
Application gateway: optional. Used to receive Alipay asynchronous notification messages.
Interface content encryption method: optional . It is used to encrypt/decrypt OpenAPI bizContent message content and encrypt/decrypt some user privacy information.
Authorization callback address: optional. Callback address after third-party application authorization or user information authorization . The value of redirect_uri configured in the authorization link must be consistent with this value (for example: https://www.alipay.com). After successful authorization, the user will carry the authorization code and other information after the url and jump to this page. When the address is filled in, the system will automatically perform a security check.

Online application

After adding functions and configuring keys, the merchant can submit the app for review. It is estimated that there will be one working day for review. Please wait patiently. Reference Documentation: Web & Mobile Apps

After the application is launched, the application contract needs to be completed before the function can be used in the online environment (production environment).

sign the contract

Please click Sign on the right side of the function list on the application details page , fill in and submit the relevant information. Reference Documentation: Web & Mobile Apps

The above is the preparatory work before the development.

Let's talk about the access of SDK.

SDK download address: mobile website payment DEMO ｜ web page & mobile application

Just choose the programming voice you need and download the demo. Next, let's explain the PHP version.

First, we need to create a payment order. The logic of this order can be completed by itself. Remember, the order record needs to have a unique order number, so that the order information can be matched in the asynchronous callback after the payment is completed.

Configuration method in the sandbox environment test:

Reference Documents: Sandbox Environment | Web & Mobile Apps

Note: The Alipay sandbox wallet needs to be downloaded on the Android phone , and only supports the Android system.

Both buyer and seller account passwords of the sandbox wallet are provided by Alipay, which can be viewed by clicking on the sandbox account, as shown in the figure below:

After downloading the sandbox wallet on the mobile phone, log in to the buyer account , deploy the DEMO provided by Alipay on the server site or LAN in advance and configure the sandbox information as shown below:

Replace the appid and Alipay gateway with the information provided in the sandbox application page. The asynchronous notification address is not used in the sandbox account, so it can be commented out first. The application private key and application public key need to be generated using the encryption tool provided by Alipay, and then the application public key must be configured to the RSA2 (SHA256) key in the sandbox application to obtain the Alipay public key:

Then configure the Alipay public key to the config.php file in the code (take PHP DEMO as an example), and fill in the application private key generated in the encryption tool directly to the merchant private key in config.php.