Scenario Description

If the mobile website is opened in mobile browsers such as Google Chrome and Safari, the payment can be completed via the H5 Payment mode of WeChat Pay.

The H5 Payment mode refers to users opening a web page of a merchant or institution outside of the WeChat system, such as Chrome or Safari, selecting the products on this page, then completing the payment in the WeChat APP.

When a user finishes selecting the product on the merchant's mobile website, the merchant sends a payment request to the institution for redirect to the institution gateway. The institution then requests WeChat Pay on the gateway page for redirect to WeChat for the user to pay. After completing the payment, the user will be redirected to the institution page and return to the merchant's website by the institution.

Parameter Configuration

In this scenario, Beside Parameters needs to be applied, API key configuration and Certificate configuration, institutions must configure one more parameter.

Launching WeChat from an outside source is a sensitive operation, so the domain name of the frontend web page used for requesting the redirect URL to WeChat must be configured in the backend. This configuration should be done manually. Contact the business assistant in your region for help.

Precautions

Currently, H5 Payment is not a standard product open to the public, but only open to KA merchants who need to apply for permission separately. Therefore, the method described in the other tab in this page is recommended for mobile website scenarios.

Scenario Description

If a merchant has an Official Account (What is Official Account), it can provide an entry to web payment for users by sending template messages or adding service menus. Users can then open the merchant's web page to select products and pay via the entry. For this scenario, Official Account Payment can be used.

Official Account Payment refers to the user opening a webpage in WeChat webview and loading the WeChat payment plugin through this webpage.

The user experience flow map is shown below:

Parameter Configuration

In this scenario, Beside Parameters needs to be applied, API key configuration and Certificate configuration, institutions must configure two more parameters.

1 . Authorization domain name

For this scenario, before initiating the payment, the user's openid (details can be found in Important Parameters) needs to be obtained via web authorization (auth2) to verify whether the order placement and payment are done by the same person. The domain name for auth2 authorization must be configured under "Settings" > "Account Info" > "Function Setting" on the institution's Official Accounts platform, as shown in the following figure.

For details, visit Webpage authorization development.

2 . Payment directory

In this solution, WeChat Pay is launched by a web page in WeChat using the frontend JSAPI. For security reasons, the web directory for launching WeChat Pay also needs to be configured in the development configuration, as shown below.

Note: The payment directory refers to the part before the last slash (/) in a page URL. For example, if the page URL is "xxx.xxx.com/xx/x/xx", then the payment directory will be "xxx.xxx.com/xx/x/".

Complete

Precautions

In this payment scenario, the synchronization of payment result depends on payment callback and order query. Refer to Callback verification and Query logic introduction for details.