微信公众号网页支付详解

首先先看微信公众开放文档:https://blog.csdn.net/qq_41971087/article/details/82466647
其实他的下单和我们微信小程序下单是一样的请观看:https://blog.csdn.net/qq_41971087/article/details/82666376,
只是调起支付是不同的，这里是网页调用支付，
首先我们要进行一些配置，在微信商户平台（pay.weixin.qq.com）设置您的公众号支付支付目录，设置路径：商户平台–>产品中心–>开发配置，如图7.7所示。公众号支付在请求支付的时候会校验请求来源是否有在商户平台做了配置，所以必须确保支付目录已经正确的被配置，否则将验证失败，请求支付不成功。
这个是文档原话，这个目录中是我们放的支付的页面，在调用微信公众号网页支付时我们要在

要先走这几个步骤才能进行下面的调用网页支付，这里我就只给网页支付的代码，下单的代码就看我的小程序下单是一样的

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript">

        $.ajax({
              type: "post",
              url: "https://xueyi.gzyouquan.com/Miniapp/api/accountOrder/getsun.do",
              dataType: "json",
              success: function(data){
                  wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timeStamps, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.packages,// 必填，签名
                    jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
                });
              }
        }) 

/*      var appId;
        var timeStamp;
        var nonceStr;
        var pack;
        var signType;
        var paySign; */
        // 推荐商家点击收起
        $('.confirm_defrayal').on('click', function(){
        //获取购买的金额
        var radio=$("input[name='radio']:checked").val();
            if (radio == undefined){
                alert("请选择购买的服务！");
            }else{
                var openid=$("input[name='openid']").val();
                $.ajax({
                     type: "post",
                     url: "https://xueyi.gzyouquan.com/Miniapp/api/accountOrder/createaccountOrder.do",
                     data: {"openid":openid,"total_fee":radio},
                     dataType: "json",
                     success: function(data){
                        /*  alert(data.appId);
                         alert(data.timeStamp);
                         alert(data.nonceStr);
                         alert(data.nonceStr);
                         alert(data.packaget);
                         console.info(data); */
                         WeixinJSBridge.invoke(
                              'getBrandWCPayRequest', {
                                 "appId":data.appId,     //公众号名称，由商户传入     
                                 "timeStamp":data.timeStamp,         
                                 "nonceStr":data.nonceStr, //随机串     
                                 "package":data.packaget,     
                                 "signType":"MD5",         //微信签名方式：     
                                 "paySign":data.paySign  //微信签名 
                              },
                              function(res){
                                 /*  alert(JSON.stringify(res)); */
                              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                              // 使用以上方式判断前端返回,微信团队郑重提示：
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                /*    $("#appidtest").onclick(); */
                                 alert("支付成功"); 
                              } 

                              if(res.err_msg =="get_brand_wcpay_request:fail"){
                                  alert("支付失败");
                              }
                           });  
                         console.log(data)
                     },
                });
            }
        });

    })

这里是验证的接口代码:

    @RequestMapping("/getsun")
    @ResponseBody
   public Map<String,String>  getsunx(){
       Map<String,String> result = new HashMap<String, String>();


//     String access_token = feedbackService.access_token();
       Map getinsert = tokenController.getinsert();
       Token token =(Token) getinsert.get("data");
       System.out.println(token.getAccess_token());
        String url=WeChatTools.getticket+"?"+"access_token="+token.getAccess_token()+"&type="+WeChatTools.type;
        System.out.println("发送微信网页支付的路径:"+url);
        JSONObject httpGet = HttpUtils.httpGet(url);
        System.out.println("返回来的数据:---->"+httpGet.toString());
        String times= WXPayUtil.getCurrentTimestamp()+""; //获取当前时间
        /**
         * 微信发送支付:
         */
        Map<String,String> maps = new HashMap<String, String>();
        maps.put("noncestr", result.get("nonceStr")+"");
        maps.put("jsapi_ticket", httpGet.getString("ticket"));
        maps.put("timestamp", times);
        maps.put("url", "https://xueyi.gzyouquan.com/Miniapp/wx/callBack.do");
        String signs="";
        try {
            signs= WXPayUtil.generateSignature(maps, WeChatTools.accountsercet_key); //生成签名:
        } catch (Exception e) {
            e.printStackTrace();
        }
        String nonceStr=WXPayUtil.generateUUID();
       result.put("timestamps", times);
       result.put("nonceStrs", nonceStr);
       result.put("packages", result.get("package")+"");
       result.put("paySigns", signs);
       result.put("appId", WeChatTools.AccountAppiD);
       return result;
   }

其他的发送请求的代码就不放到这里了，可以去看我的小程序支付哪里就有，其他的自己去看文档会有解释