微信 JSAPI 支付

后台服务是 Java,前端 Vue

在做之前先把官方文档过一遍 ,把需要配置的都配置好

开发前

  1. 调试需要可访问的域名,不可以在微信开发者工具中调试,因为开发者工具中没有钱包,所以只能调试到调起微信支付之前的步骤
  2. 官方文档 微信 JSAPI 支付官方文档
  3. 设置微信支付授权目录(支持配置根目录),设置网页授权域名

流程图

微信提供的流程图十分详细

微信JSAPI支付流程图

前端代码 (Vue)

基本就是官方提供的 demo ,封装一个 wxjsBridge.js 调用时传入需要的参数和回调函数即可

export default {
  wechatPay (payInfo, callback) {
    function onBridgeReady(){
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          "appId":payInfo.appId,     //公众号名称,由商户传入     
          "timeStamp": payInfo.timeStamp,         //时间戳,自1970年以来的秒数     
          "nonceStr":payInfo.nonceStr, //随机串     
          "package":payInfo.package,     
          "signType":payInfo.signType,         //微信签名方式:     
          "paySign":payInfo.paySign //微信签名 
        },
        function(res){
          callback(res)
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
          // 使用以上方式判断前端返回,微信团队郑重提示:
          //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
          } 
      }); 
    }
    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();
    }
  }
}

调用时

wxjsBridge.wechatPay(that.payInfo, function (res) {
    if (res.err_msg === 'get_brand_wcpay_request:ok') {
        that.$vux.toast.text('返回ok', 'bottom')
        that.checkOrderStatus() // 调用轮询查询订单状态的方法,获取订单真实状态
    } else if (
        res.err_msg === 'get_brand_wcpay_request:fail' ||
        res.err_msg === 'get_brand_wcpay_request:cancel'
    ) {
        console.log(res.err_msg)
        that.$vux.toast.text('尚未支付成功,请重新支付', 'bottom')
    } else {
        console.log(res.err_msg)
        that.$vux.toast.text('尚未支付成功,请重新支付', 'bottom')
    }
})

遇到的问题

签名无效的原因 99% 是因为参数的原因,要么是不符合要求,要么是配置有误导致签名错误,不是说正确生成了签名就一定是有效的签名,可能其中某个参数错误,导致签名算法正确却报 Unable to verify signature

  1. Java 中 package 是保留字段,不能直接返回 package 字段,需前端处理一下
  2. AppId 的大小写要注意(签名无效)
  3. 参数的配置错误,填错字段之类的(签名无效)

标签: 前端, Vue, 微信

添加新评论