Use Case
Scenario
The merchant already has H5 Mall website. Users can call WeChat Pay to complete the purchase process after opening the webpage in WeChat through a message or by scanning a QR code.
Step 1：As shown in Fig. 7.1, the merchant attracts users to click and enter the merchant's webpage by sending an article or through a custom menu.
Step 2：As shown in Fig. 7.2, a user selects the goods to buy and completes the purchase process after entering the merchant's webpage.
Fig. 7.1 Placing an order in merchant's webpage |
 Fig. 7.2 Request for WeChat Pay |
Step 3：As shown in Fig. 7.3, the WeChat Pay control is called and users start to enter the payment password.
Step 4：As shown in Fig. 7.4, the password is verified and the payment is made successfully. The notification of successful payment is received by the merchant backend.
 Fig. 7.3 Confirm payment and enter password. |
 Fig. 7.4 Message of successful payment |
Step 5：As shown in Fig. 7.5, return to the merchant’s page and show that the purchase is successfully completed. This page is customized by the merchant.
Step 6：As shown in Fig. 7.6, a payment voucher is issued in the WeChat Pay Official Account.
Step 7：A message is sent in the merchant's Official Account to indicate successful delivery. This step is optional.
 Fig. 7.5 Return to merchant's page/p> |
 Fig. 7.6 User receives WeChat notification |
Note: The merchant can also generate a QR code for the URL of the product webpages, and users can complete payment after scanning and opening the page.
interaction details:
The following are the interactive details of the payment scenario. Read carefully and design the logic of the merchant’s page:
（1）A user opens the merchant's webpage to purchase products and make payments. The getBrandWCP ayRequest API is called through JavaScript on the webpage to send a request to WeChat Pay, and then the user enters the payment process.
（2）After the user makes payment successfully and taps the OK button, the merchant frontend will receive a return value from JavaScript. The merchant can redirect to the static page of successful payment for display.
（3）The merchant backend receives a callback notification of successful payment from WeChat Open Platform, indicating that the payment has been made successfully.
Note: No strict time sequence is guaranteed to trigger (2) and (3). JS API return value serves as a sign to trigger the merchant's webpage redirection, but the merchant backend should only process the successful payment after receiving the successful payment callback notification from the WeChat backend.
