Record wechat official ACCOUNT H5 payment (front end)

  • I changed a company some time ago, and I just gave a project, h5 mobile terminal page, involving login and registration, wechat binding, purchase, etc. Wechat payment has not been done before, but it is relatively simple, and it is recorded here.

Go to the official documentation first

  • WeChat pay

  • Wechat gets the code

Step one, get the code, get the code and pass it to the background.

  • So this is a code that you can just fill in, and when the user confirms the authorization and returns the url that they defined, they have the code parameter behind the URL, and then they bring up the code.
    var appid = "Public Id";
    var redirect_uri = encodeURIComponent("Return address on success");
    window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"
Copy the code
  • Gets the code parameter attached to the URL
    
    / / code
        function parse_url(url) { // Define the function
    
            var pattern = /(\w+)=(\w+)/ig; // Define a regular expression
    
            var parames = {}; // Define an array
    
            url.replace(pattern, function (a, b, c) {
                parames[b] = c;
            });
            return parames; // Return this array.
        }
    // get the current URL to code
     var url = window.location.href;
     		var params = parse_url(url);
     		//params.code is the current code
Copy the code
  • Pass the code to the background, and the background returns several parameters mentioned in the document
    var appIdVal = appId;
    var timeStampVal = timeStamp;
    var nonceStrVal = nonceStr;
    var packageVal = package;
    var signTypeVal = signType;
    var paySignVal = paySign;
Copy the code
  • To pull the payment, assign parameters to the function
    function onBridgeReady(){
       WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
             "appId":"".// The public id is passed in by the merchant
             "timeStamp":"".// Timestamp, the number of seconds since 1970
             "nonceStr":""./ / random string
             "package":"".// Order details extension string
             "signType":"".// wechat signature:
             "paySign":""     // Wechat signature
          },
          function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok") {// Use the above methods to judge the front-end return, wechat team solemnly remind:
                //res.err_msg will return OK after the user has paid successfully, 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();
    }
Copy the code
  • The first problem encountered is the public number configuration problem, because the public number is not my own configuration, the front part has been unable to afford to pay after writing, and then also a variety of Baidu, and finally confirmed that the authorization page callback address error.
  • As for backstage building Lord is not quite clear, had not studied. I’ll write it down here in the hope that it will be helpful to others.