WeChat payment – applet H5 official account Payment SDK



Today is the day of 2020. In the last month of last year, the order and payment system were developed. Especially when the payment system and wechat were connected, there were many pitfalls. Here’s a summary for you, so as not to waste a lot of time in the same problem

Wechat payment preparation

  1. Wechat merchant number, requiredMerchant number,Password, refund requiredcertificate, the default password of the certificate is the merchant number
  2. WeChat app (such as WeChat applet or WeChat official account) appid and appsecret
  3. It is necessary to associate WeChat Mini program and WeChat official account with the operator, and then confirm the operator.
    So far, the preliminary work of wechat payment has been completed


    Encapsulated WeChat, Alipay UnionPay and many other SDK payments.
    Git address https://github.com/essensoft/payment

    Wechat applet uses H5 embedding to complete wechat payment

    Due to the long audit cycle of small program release, our company adopts H5 embedded method (WebView)
    The implementation is very simple. Use jssdk to jump from H5 to applet page, call up payment, and then jump back to H5 after payment is completed

1. obtain the accesstoken
2. Take the accesstoken to get the ticket

Both are valid for two hours. It is recommended to inject a single object. Each time you get it, you can judge the expiration time in the interceptor

3. Jssdk needs to be initialized before introducing H5, that is to say, wx.config needs to be initialized successfully to use the functions it provides

It took me four days, four days, to report that the signature was invalid. With the solutions provided on the Internet, my problem is that the URL in wx.config is not encoded first in the background interface and then decoded. During the development process, there is no need to configure any HTTPS in the background of wechat.

4. H5 then calls the background interface for pre payment. After success,wx.miniProgram.navigateTo({ url: path });Launch to native appletwx.requestPayment

Payment is now complete

WeChat official account

To be updated