How to implement WeChat payment for H5 page payment with built-in browser_javascript skills

Due to project requirements, WeChat payment needs to be added to the H5 page, so I tried it. I just want to say that it is really tricky, especially when debugging is inconvenient

This is the official API document of WeChat WeChat API

Preparation for WeChat payment

Apply for a public account and activate payment. This is very simple. Just use Baidu yourself
After applying, configure the "Payment Authorization Directory", "Test Authorization Directory", and "Test Whitelist" on the "Development Configuration" tab in the "WeChat Payment" page of the WeChat public platform page
Find "AppID (Application ID)" and "AppSecret (Application Key)" in the "Developer Center" on the WeChat public platform page
Find the merchant number assigned by WeChat payment in the merchant platform, and configure a merchant payment key

Specific steps

First, obtain the prepay_id for payment through the WeChat payment api. Here you need to use the above-mentioned "AppID (application ID)", "AppSecret (application key)", "merchant number assigned by WeChat payment", " "Merchant Payment Key" and some other parameters (please refer to the WeChat development documentation for details) are encrypted into a signature using MD5 (the first signature). After obtaining the prepay_id, use prepay_id and some other parameters (please refer to the WeChat development documentation for details) to encrypt it into a signature using MD5. (Second signature) Then on the front end, use the js API provided by WeChat’s built-in browser, WeixinJSBridge.invoke, to call the pop-up page of WeChat payment. Here you need to use the second signature above

The specific code is as follows

$.get('/xxx',function(data){
 if(data && data !== ""){
  var _data = $.parseJSON(data)[0];
  if(parseInt(_data.userAgent) < 5){
  alert('您的微信版本低于5.0，无法使用微信支付！');
  return false;
  }
  WeixinJSBridge.invoke('getBrandWCPayRequest',{
  'appId': _data.appId,
  'timeStamp': _data.timeStamp,
  'nonceStr': _data.nonceStr,
  'package': 'prepay_id=' + _data.packageOne,
  'signType': _data.signType,
  'paySign': _data.paySign
  },function(res){
   if(res.err_msg === 'get_brand_wcpay_request:ok'){
   alert('支付成功，返回订单列表！');
   }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
   alert('取消支付！');
   }
  });

 }
});

A few easy failure points need attention

The payment link does not match the link configured on the development platform

A total of 2 signatures are required, and the required parameters are different. The signature used in JS is the second signature. Don’t confuse the parameters and pass them correctly

If there are Chinese characters in the body that need to be escaped, there are still some problems that have not been completely solved, that is, there is no time to judge the validity of location payment. If the pop-up layer of WeChat payment stays for too long, the order may be on our website. It has expired, but the payment can still be successful in WeChat payment. If anyone knows how to solve this problem, I hope they can tell you the solution