Use Case
About this Document
The Payer opens the merchant's HTML5 page in WeChat by clicking messages or scanning a related QR Code, and enters WeChat payment to complete their transaction.
About the detailed Official Account Payment , please refer to Product introduction
Step 1：The Merchant sends a rich media message or a self-defined menu to the Payer, as shown in Figure 8.1.
Step 2：The Payer clicks the message or selects a menu option to enter the Merchant's page and selects product(s).
Figure 8.1 Merchant's Rich Media |
 Figure 8.2 Merchant's Product Page |
Step 3：The Payer calls WeChat payment and enters their payment password as prompted, as shown in Figure 8.3.
Step 4：The payment is completed after the password has been verified successfully. The Merchant's backend receives the payment result notification, as shown in Figure 8.4.
 Figure 8.3: Enter Payment Password |
 Figure 8.4 Prompt after Successful Payment |
Step 5：The Merchant returns a page displaying that the payment was successful. This page is designed by the Merchant, as shown in Figure 8.5.
Step 6： The Merchant's official account sends a message to inform the Payer in WeChat of delivery, as shown in Figure 8.6. This step is optional.
 Figure 8.3: Enter Payment Password |
 Figure 8.4 Prompt after Successful Payment |
Notes: Merchants can convert their product URL into a QR Code so that payers can scan them to buy and pay quickly.
Detailed steps are as follows:
Please carefully read the instructions below before designing product pages:
1. The Payer opens the Merchant's product page and confirms a transaction. The getBrandWCPayRequest API is called via JavaScript on the page to initiate a WeChat payment request. This initiates the Payer’s payment process.
2. After the Payer clicks to pay successfully and completes the transaction, the Merchant’s front-end receives a value returned within the JavaScript. The Merchant can then directly redirect to a static page indicating successful payment.
3. The Merchant's backend receives a callback call from the WeChat Open Platform, indicating a result reporting the transaction was paid successfully.
Note: The triggering times of steps (2) and (3) are not strictly in order. The returned value of the JSAPI is the event that should trigger the Merchant's page redirect. However, the Merchant’s backend should process the payment result data only after a successful payment call is received from the WeChat payment system.
