微信JSAPI支付

微信JSAPI支付小结

 

　　　　公司项目用到微信公众号支付，所以，从看文档，到完成，整整用了两天，好多坑，有的坑爬出来，虽然能用了，但是还没去深究原因，这里我先整理一下从头到尾的流程。

 

　　　　

 

　　　　上面是官方给的时序图，我也是跟着这个流程走的。

　　　　这里我省略了从微信公众号点击自定义菜单获取用户openid的过程，这个打算另外记录。

　　　　另外的一些支付的先决条件，这里简单说一下：（没做过微信的其他支付方式，这里只是说微信公众号的）

　　　　　　　　1.  微信支付商户号（下图中被我打马赛克的地方）

　　　　　　　　

　　　　　　　　2.  商户支付密钥

　　　　　　　　3.  需要支付的微信公众号要跟微信商户绑定

　　　　　　4.  微信公众号的appId和密钥

　　　　

 

　　　　有了这些以后，就可以开发了：

　　　　　　　　1.  需要支付的页面引入js:(这个官方有)　　　　　　　　

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

　　　　　　　　2. 需要支付的页面鉴权：

　　　　　　　　进来该页面的controller里面：

model.addAttribute("jsauthmap",wxOfficalJsApiService.getAuthMap(request));

　　

public Map getAuthMap(HttpServletRequest request) {
        String url = pageUrlUtils.getPageUrl(request);
        return getAuthMap(url);
    }

//这个方法是获取url的，在我的一个工具包中，我摘出来了：

public String getPageUrl(HttpServletRequest request){
    String queryString = request.getQueryString();
    if(!StringUtils.isEmpty(queryString) || "null".equals(queryString)){
        queryString = "?"+queryString;
    }else{
        queryString = "";
    }
    String domain = request.getScheme()
            +"://"+ microAttr.getDomain()
            + request.getRequestURI()
            +queryString;
    return domain;
}

public Map getAuthMap(String url){
    log.info("获取微信公众号jsapi鉴权数据,,,,,,url:"+url);
　　 //获取随机字符串，这里网上搜索一大堆，我就不晒具体代码了
    String nonceStr = RandomStr.getRandom(7, RandomStr.TYPE.LETTER);
    long timeStamp = System.currentTimeMillis() / 1000;
　　//下面是去获取jsapi_ticket
    String ticket = wxOfficalJsApiService.getWxOfficalJsApiTicket();
    String signature = null;
    try {
        signature = sign(ticket, nonceStr, timeStamp, url);
    } catch (OApiException e) {
        e.printStackTrace();
    }
    Map<String, Object> configValue = new HashMap<>();
    configValue.put("jsticket", ticket);
    configValue.put("signature", signature);
    configValue.put("nonceStr", nonceStr);
    configValue.put("timeStamp", timeStamp);
    return configValue;
}


/**
 *  获取jsapi_ticket
 *  这里用到了缓存，第一句是从缓存中取，如果没有就使用accessToken去获取
 *  访问微信服务区获取jsapi_ticket我使用了restTemplate,只是发起远程调用的一个工具，可以任意换
 */

public String getWxOfficalJsApiTicket(){
    String ticket = cacheHandle.getStr(RedisKeys.REDISKEY_WXOFFICAL_JSAPI_TICKET);
    if(StringUtils.isEmpty(ticket)){
        //缓存中没有，使用accessToken去微信服务器中获取：
        String wxOfficalAccessToken = moltechToken.getToken();
        if(StringUtils.isEmpty(wxOfficalAccessToken)){
            log.warning("获取微信公众号jsapiticket时，获取微信公众号accessToken失败！");
            return "";
        }
        String jsapiResultStr = restTemplate.getForObject("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + wxOfficalAccessToken + "&type=jsapi", String.class);
        log.info("获取微信公众号jsapiTicket返回的结果为：");
        log.info(jsapiResultStr);
        if(StringUtils.isEmpty(jsapiResultStr)){
            log.warning("获取微信公众号的jsapiticket，返回值为空！");
            return "";
        }
        JSONObject jsonObject = JSONObject.parseObject(jsapiResultStr);
        if("ok".equals(jsonObject.getString("errmsg")) && StringUtils.isNotEmpty(jsonObject.getString("ticket"))){
            log.info("访问微信服务器获取到的jsapi_ticket为："+jsonObject.getString("ticket"));
            ticket = jsonObject.getString("ticket");
            cacheHandle.saveStr(RedisKeys.REDISKEY_WXOFFICAL_JSAPI_TICKET,7000,ticket);
        }
    }
    return ticket;
}

　　  　　　　上面的代码就是后台获取前端页面需要用到的鉴权数据的逻辑，获取到以后存到model中，然后看前端页面：

 

　　　　　

//页面加载完成后执行
    window.onload = function(){

            console.log("微信公众号，获取到的JS-SDK鉴权数据：");
            var jsauthmap = [[${jsauthmap}]];
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: jsauthmap.appId, // 必填，公众号的唯一标识
                timestamp: jsauthmap.timestamp, // 必填，生成签名的时间戳
                nonceStr: jsauthmap.nonceStr, // 必填，生成签名的随机串
                signature: jsauthmap.signature,// 必填，签名
                jsApiList: [
                    'chooseWXPay'
                ] // 必填，需要使用的JS接口列表
            });
            //微信公众号登录的，使用微信jsapi支付：
            //pay_btn是支付按钮的id,这里使用jquery给它绑定点击事件
            $("#pay-btn").on('click',function(){
                //支付1.去后端获取支付信息     2，带着支付信息调用微信统一支付接口
                //禁用支付，防止多次支付
                var theBtn = $("#pay-btn");
                theBtn.attr('disabled','disable');
                //money是要支付的金额，，payfor是自定义的支付用途
                var money = $("#cost_span").text().trim();
               wx.ready(function(){
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    /* 微信公众号支付支付 */
                        $.get("/wxPay/webPay", {
                            totalFee: money,
                            payfor: '1'
                        }, function (res) {
                            if (res.code == 0) {
                                let data = $.parseJSON(res.data.jsonStr);
                                let orderid = res.data.outTradeNo;

                                if (typeof WeixinJSBridge == "undefined") {
                                    if (document.addEventListener) {
                                        document.addEventListener('WeixinJSBridgeReady',
                                            onBridgeReady(data,orderid), false);
                                    } else if (document.attachEvent) {
                                        document.attachEvent('WeixinJSBridgeReady',
                                            onBridgeReady(data,orderid));
                                        document.attachEvent('onWeixinJSBridgeReady',
                                            onBridgeReady(data,orderid));
                                    }
                                } else {
                                    onBridgeReady(data,orderid);
                                }
                            } else {
                                if (res.code == 2) {
                                    layer.alert(res.message);
                                } else {
                                    layer.msg("error：" + res.message, {
                                        shift: 6
                                    });
                                }
                            }
                        });
                    /* 微信公众号支付支付 END */
                });
            })
        
    }   

function onBridgeReady(json,orderid) {
    WeixinJSBridge.invoke('getBrandWCPayRequest', json, function (res) {
        // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
        // alert(JSON.stringify(res));
        if (res.err_msg == "get_brand_wcpay_request:ok") {
　　　　　　　　//支付成功的逻辑：
            // layer.msg("支付成功", {
            //     shift: 6
            // });
            //支付成功跳转到认证页面：
            // setTimeout(function(){
            //     window.location.href = '/attr/zhanlve';
            // },1000);
　　　　　　　　//我自己写的没隔5秒去后端获取支付状态的逻辑，后面带着支付成功后跳转的路径
            getOrderStatus(orderid,5,'/auth/attr/zhanlve');
            // self.location = "#(ctxPath)/success";

        } else {
            layer.msg("支付失败", {
                shift: 6
            });
        }
    });
}

　　

 

　　　　　　/wxPay/webPay：

/     * 公众号支付

*/ @RequestMapping(value = "/webPay", method = {RequestMethod.POST, RequestMethod.GET}) @ResponseBody public AjaxResult webPay(HttpServletRequest request, @RequestParam("totalFee") String totalFee,@RequestParam("payfor") String payfor,String purchaseId) { // openId，采用 网页授权获取 access_token API：SnsAccessTokenApi获取
        log.info("/wxPay/webPay....totalFee:"+totalFee+",,,payfor:"+payfor+",,,purchaseId:"+purchaseId); // log.info("wxPayBean:"); // log.info(wxPayBean.toString()); 　　　　//获取用户在微信公众号中的openid,这个是我之前用户通过微信公众号的自定义菜单进来以后我存入session中的 String openId = (String) request.getSession().getAttribute("wxOpenId"); if (openId == null || StrUtil.isEmpty(openId)) { return new AjaxResult().addError("openId is null"); } if (StrUtil.isEmpty(totalFee)) { return new AjaxResult().addError("请输入数字金额"); } 
　　　　　//微信支付，金额的单位是分，所以要乘以100 Integer totalFeeInt = (int)(Double.valueOf(totalFee)*100); String ip = IpKit.getRealIp(request); if (StrUtil.isEmpty(ip)) { ip = "127.0.0.1"; } 
　　　　 //我这里封装的map是打算在微信支付的回调事件里面使用，用于业务，如果有需要自定义的东西跟随支付的最后，可以这样做 Map paraMap = new HashMap(); paraMap.put("payFor", payfor); paraMap.put("supplierId",supplier.getPkSupplier()); if(payfor.equals(PayContants.ORDER_PAY_FOR_EXPERT_REVIEW_AND_CONTRACT_FEE)){ if(StringUtils.isBlank(purchaseId)){ return new AjaxResult().addError("支付合同费用时订单id不能为空！"); } paraMap.put("purchaseId",purchaseId); } // WxPayApiConfig wxPayApiConfig = WxPayApiConfigKit.getWxPayApiConfig();
 　　　　 //获取随机字符串充当商户单号 String outTradeNo = WxPayKit.generateStr(); UnifiedOrderModel build = UnifiedOrderModel .builder() .appid(wxPayBean.getAppId())　　　　　　　　　　　　//微信公众号的appid .mch_id(wxPayBean.getMchId())　　　　　　　　　　　　//微信支付商户号 .nonce_str(WxPayKit.generateStr())　　　　　　　　　//随机字符串 .body(body)　　　　　　　　　　　　　　　　　　　　　　　//商品名称 .attach(JSONObject.toJSONString(paraMap))　　　　 //填充自定义参数的地方 .out_trade_no(outTradeNo)　　　　　　　　　　　　　　 //商户单号， .total_fee(totalFeeInt + "")　　　　　　　　　　　　　//支付金额，这里一定要传字符串，否则会报错 .spbill_create_ip(ip)　　　　　　　　　　　　　　　　　//这个ip我的理解是服务器的ip .notify_url("http://xxxx/wxPay/payNotify")　　//支付结果异步回调接口地址 .trade_type(TradeType.JSAPI.getTradeType())　　　　//微信JSAPI支付标识 .openid(openId)　　　　　　　　　　　　　　　　　　　　 //用户的微信公众号的openid .build(); log.info(JSON.toJSONString(build)); /** * {"appid":"wx12f87136ac56ba6e", * "attach":"1", * "body":"战略供应商服务费用", * "mch_id":"1489352152", * "nonce_str":"0a39fadd2abe4145b44ce6163abdd089", * "notify_url":"http://ding.starint.cn/wxPay/payNotify", * "openid":"o_VB40gpnCnTZJHE9R1rZDQj5Xto", * "out_trade_no":"b1f49c61c794470daf09de9d247a6f92", * "spbill_create_ip":"223.99.0.13", * "total_fee":"1", * "trade_type":"JSAPI"} */ Map<String, String> params = build.createSign(wxPayBean.getPartnerKey(), SignType.HMACSHA256); String xmlResult = WxPayApi.pushOrder(false, params); log.info("获取预支付订单信息："); log.info(xmlResult); /** * <xml> * <return_code><![CDATA[SUCCESS]]></return_code> * <return_msg><![CDATA[OK]]></return_msg> * <appid><![CDATA[wx12f87136ac56ba6e]]></appid> * <mch_id><![CDATA[1489352152]]></mch_id> * <nonce_str><![CDATA[miebAaIw7PLx7ZV6]]></nonce_str> * <sign><![CDATA[075360B8CA6D2A8C378764041915DA6CD809558543CBDBF3CD4DC7CBF66408BF]]></sign> * <result_code><![CDATA[SUCCESS]]></result_code> * <prepay_id><![CDATA[wx1110261039192337a6b817c4ba1f4e0000]]></prepay_id> * <trade_type><![CDATA[JSAPI]]></trade_type> * </xml> */ Map<String, String> resultMap = WxPayKit.xmlToMap(xmlResult); String returnCode = resultMap.get("return_code"); String returnMsg = resultMap.get("return_msg"); if (!WxPayKit.codeIsOk(returnCode)) { return new AjaxResult().addError(returnMsg); } String resultCode = resultMap.get("result_code"); if (!WxPayKit.codeIsOk(resultCode)) { return new AjaxResult().addError(returnMsg); } // 以下字段在 return_code 和 result_code 都为 SUCCESS 的时候有返回
 String prepayId = resultMap.get("prepay_id"); Map<String, String> packageParams = WxPayKit.prepayIdCreateSign(prepayId, wxPayBean.getAppId(), wxPayBean.getPartnerKey(), SignType.HMACSHA256); String jsonStr = JSON.toJSONString(packageParams); log.info("生成的前台页面需要传递的参数及sign为："); log.info(jsonStr); Map resultMap2 = new HashMap(); resultMap2.put("jsonStr",jsonStr); resultMap2.put("outTradeNo",outTradeNo); /** * { * "timeStamp":"1599791528", * "signType":"HMAC-SHA256", * "package":"prepay_id=wx1110320782721960a9b0c3912d67670000", * "paySign":"3F9C32F7DADE0F65C4053CC1CE0CF6FBABC3549FF745BBA4AE45853331F80B98", * "nonceStr":"1599791528139", * "appId":"wx12f87136ac56ba6e" * } */
        return new AjaxResult().success(resultMap2); }

　　回调时间略

　　里面的一些工具类请看这个开源项目：https://gitee.com/javen205/IJPay

　　里面有一个springboot的Demo,下下来比较着做就OK;

　　在此特别感谢作者开源，方便他人。

看完开源框架里面的内容，然后在跟着我的代码比较一下，微信支付基本就没啥问题了。
　　　　　　

　　

 

　　　　　　　　2.  去后台