Detailed explanation of the pitfalls of Html5 WeChat payment

During the development of WeChat public accounts, I had no experience with WeChat-related development before, so I fell into pitfalls and climbed into pitfalls. However, it also greatly increased my familiarity with WeChat public and WeChat official documents.

Pitfall 1: Problems with single-page SPA and back-end routing

Pitfall 2: There is a high probability that Android will fail to activate WeChat payment (failed to introduce WeChat’s js-sdk package)

In WeChat’s official documentation: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

There is a DEMO like this:

 function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //The name of the official account, passed in by the merchant timeStamp:1395712654, //Time stamp, number of seconds since 1970 nonceStr:e61463f8efa94090b1f366cccfbbb444, //Random string package:prepay_id=u802345jgfjsdfgsdg888, signType:MD5, //WeChat signature method: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //WeChat signature}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ //Use the above method to determine the front-end return. The WeChat team solemnly reminds: //res.err_msg will be used when the user pays successfully. Returns ok, but it is not guaranteed to be absolutely reliable. } }); }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();}

After the back-end colleague successfully authorized the code, he introduced this code to the activity page, happily, and submitted the build for testing. Well, Apple has no problem, and Android seems to have no problem. However, Android sometimes cannot adjust the payment, and at first I thought it was the WeChat version. There are other reasons, but the probability of success is too low. It can only be done once every 10 times. It must be due to the code. Change it.

Open the WeChat developer tools, log, and finally find that at this step if (typeof WeixinJSBridge == undefined)

1.ios can activate the js-sdk of WeChat browser

2. Most Androids have gone to undefined.

In fact, I don't know the reason here. Personally, I feel it is a problem with the built-in browser version of WeChat Android and the WeixinJSBridge method. (I hope someone can give me an answer)

Since js-sdk cannot be adjusted, let’s introduce the configuration manually // So sometimes being lazy is more troublesome, learn from the lesson

 if (typeof WeixinJSBridge == undefined){ console.log( WeixinJSBridge); if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent(' WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); }}else{ onBridgeReady();}

 npm i -S weixin-js-sdk

Import the module into the page that needs to be introduced

 import wx from 'weixin-js-sdk'

Configuration (refer to WeChat official documentation: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115):

 wx.config({ debug: true, // Turn on debugging mode. The return values ​​of all api calls will be alerted on the client side. If you want to view the incoming parameters, you can open it on the PC side. The parameter information will be output through the log. It will only be printed on the PC side. appId: '', // Required, the unique identifier of the official account timestamp: , // Required, the timestamp of the generated signature nonceStr: '', // Required, the timestamp of the generated signature Random string signature: '', // Required, signature jsApiList: [] // Required, list of JS interfaces that need to be used. For example, if I want to call the payment interface, it is [chooseWXPay]});

Here timestamp is lowercase, s is lowercase, and the data type is int type.

Now that the configuration is successful, continue reading the official documentation.

The official documentation says that there is a ready method. After the config verification is successful, the interface is placed in it to ensure execution.

 wx.ready(function(){ // The ready method will be executed after the config information is verified. All interface calls must be made after the config interface obtains the result. config is an asynchronous operation on the client side, so if you need to call the relevant interface when the page is loaded , the relevant interface must be called in the ready function to ensure correct execution. For interfaces that are called only when triggered by the user, they can be called directly and do not need to be placed in the ready function. });

Import parameters in ready (pay attention to the data type, and cooperate well with back-end colleagues - -)

 wx.chooseWXPay({timestamp: 0, // Payment signature timestamp. Note that all timestamp fields used in WeChat jssdk are lowercase. However, the timeStamp field name used by the latest version of the payment background to generate signatures needs to capitalize the S character nonceStr: '', // Random string of payment signature, no longer than 32 bits package: '', // The prepay_id parameter value returned by the unified payment interface, the submission format is: prepay_id=/*/*/*) signType: '', // The signature method, the default is 'SHA1', and you need to pass in 'MD5' when using the new version of payment paySign: ' ', // Payment signature success: function (res) {// Callback function after successful payment}});

When using the data in Vue data in ready, I accidentally fell into the pit pointed by this. If bind is not added, the parameters in wx.chooseWXPay cannot get the data requested from the backend. This here does not point to VueComponent naturally cannot obtain the data that I assigned to the array object this.wx_config after the request.

 getConfig(){ wx.config({ debug: this.wx_config.debug, // Turn on the debug mode. The return values ​​of all APIs called will be alerted on the client side. If you want to view the incoming parameters, you can open it on the PC side. , the parameter information will be printed through the log, and will only be printed on the PC side appId: this.wx_config.appId, // Required, the unique identifier of the official account timestamp: this.wx_config.timestamp, // Required, generate signature timestamp nonceStr: this.wx_config.nonceStr, // Required, generate random string of signature signature: this.wx_config.signature, // Required, signature jsApiList: this.wx_config.jsApiList // Required Fill in the list of JS interfaces that need to be used}); //WeChat payment wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ timestamp: this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, package: this.wechat_code.package, signType: this.wechat_code.signType, paySign: this.wechat_code.paySign, success: function () { // Callback function after successful payment alert(payment successful); window.location.href = /hd/becomevip; }, cancel: function() { alert(payment failed); } }); }.bind(this)); },

It is always inevitable to step on pitfalls. In summary, don’t do the right thing just because you are afraid of trouble~

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.