Usage scenarios

  1. Wechat public account embedded H5 webpage to call wechat payment
  2. A web page in the wechat browser evokes the wechat Pay interface

For details, please refer to official wechat Pay documentsThe link address

Function approach

  1. The background integrates the relevant order interface of wechat official, writes the pre-order interface to provide the foreground call, and returns the order related parameters
  2. The front desk will invoke the wechat payment interface after passing the relevant order parameters according to the sample code below
  3. The background integrates wechat official order status query interface, writes order status query interface to provide foreground call and return order payment status
  4. After the payment is completed, the user can judge whether the order is successfully paid through the parameters returned by wechat and the order status interface in Step 3 to complete the subsequent business logic operations

The front-end code

1. Set variables to determine whether wechat Pay can be called

let can_pay;
Copy the code

2. Determine whether the WeixinJSBridge object exists in the current browser. This object is only valid in wechat browser

if (typeof WeixinJSBridge === 'undefined') { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } } else { onBridgeReady(); } onBridgeReady() { can_pay = true; WeixinJSBridge.call('hideOptionMenu'); // wechat API to hide the upper right corner button, corresponding to show the upper right corner button (showOptionMenu), and show hide the bottom navigation bar API (showToolbar/hideToolbar)}Copy the code

3. If the variable is judged to be true, start to call up the payment interface through the object, and complete other business logic operations in the callback function, pay attention to view the annotation content do not directly copy all the code without modification

If (can_pay) {weixinjsbridge. invoke('getBrandWCPayRequest', {// res.data object returns parameter object appId: Res.data. appId, // public id, appId binding to the current service name timeStamp: res.data.timeStamp, // timeStamp, number of seconds since 1970 nonceStr: Res.data. nonceStr, // A random string of characters, not longer than 32 bits package: res.data.payInfo, // An extended string of order details, the prepay_id parameter value returned by the unified order interface signType: Res.data. signType, // The signature mode is MD5 by default and supports HMAC-SHA256 and MD5 paySign: Res.data.sign // sign}, Function (res) {if (res.err_msg === 'get_brand_wcpay_request: OK ') {console.log(' here call the order status query function, If the background query is successful, wechat payment is successful, otherwise it fails ')} else {console.log(' payment exception ')}}); }Copy the code

I’m FX67ll.com. If you find anything wrong with this article, please comment on it in the comments section. Thank you for reading! If you like this article, welcome to visit my github warehouse address, for me to click a Star, Thanks~ 🙂 forward please note the reference article address, very thank you!!