【wxPay】微信支付

方式一:微信支付【微信公众号】,wx.chooseWXPay

  • 此支付方式需要在 HTML 页面中引入 JS 文件,即【 jweixin-1.6.0.js 】;

  • 通过请求接口,返回 appId 等,再 wx.config 打开权限

  • 在微信浏览器里打开 H5 网页中执行 JS 调起支付;

    let WeChatPay = function() {
      // 引入js后、获取公众号校验信息
      let timestamp = '',
        nonceStr = '',
        signature = '';
      let params = {
        // 用于接口请求换取微信校验信息的参数:要求不可以包含 “#” 号
        url: location.split('#')[0]
      };
    
      // 通过config接口注入权限验证配置(需要同步进行,在获取到校验信息后方可注入config,否则校验失败!)
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '', // 必填,签名
        jsApiList: ["checkJsApi", "chooseWXPay", "updateAppMessageShareData", "updateTimelineShareData"] // 必填,需要使用的JS接口列表
      });
    
      axios.post('/wx/pay/orderPay_XXXX', data).then(res => {
        // 支付成功状态
        if (res.code == 200) {
          // 获取支付必备的参数
          let {
            nonceStr,
            package,
            signType,
            paySign
          } = res.data;
          // 4、通过ready接口处理成功验证
          wx.ready(function() {
            /* 微信支付 */
            wx.chooseWXPay({
              timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: nonceStr, // 支付签名随机串,不长于 32 位
              package: package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
              signType: signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
              paySign: paySign, // 支付签名
              success: function(res) {
                // 前端判断返回方式,微信团队郑重提示:不保证绝对可靠,切记!
                if (res.errMsg == 'chooseWXPay:ok') {
                  // 【支付成功】
                } else if (res.errMsg == 'chooseWXPay:cancel') {
                  // 【支付取消】:用户取消支付不会进入这个判断,而是进入complate和cancel函数
                } else {
    
                }
              },
              complete: function(res) {
                // 接口调用完成时执行的回调函数,无论成功或失败都会执行
                if (res.errMsg == 'chooseWXPay:ok') {
                  // 【支付成功】:支付成功提示页面,点击完成按钮之后
                  wx.closeWindow(); /* 关闭微信窗口,调用时需要在config中进行校验 */
                } else if (res.errMsg == 'chooseWXPay:cancel') {
                  // 【支付取消】
                } else {
    
                }
                /**
                 * iOS和Android支付成功点击“完成”后都会进入success和complete函数,都返回'chooseWXPay:ok'
                 * (也有人说Android支付成功不进入success函数,)
                 * 原因是【iOS和Android返回数据不同。支付成功后Android返回 {"errMsg":"getBrandWCPayRequest:ok"},iOS返回{"err_Info":"success","errMsg":"chooseWXPay:ok"},故Android找不到success方法,导致失败】
                 * */
              },
              fail: function(err) {
                // 接口调用失败
              },
              cancel: function(err) {
                // 用户点击取消时的回调函数:用户取消支付后实际上进入cancel 和 complate函数
              }
            });
          });
        }
      }).catch(err => {
        console.log('支付失败:', err);
      });
    }
    
  • 接口说明:

    success:接口调用成功时执行的回调函数。

    fail:接口调用失败时执行的回调函数。

    complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。

    cancel:用户点击取消时的回调函数,仅部分有用户取消操作的 api 才会用到。

方式二:微信支付【 WeixinJSBridge 内置方法】 WeixinJSBridge.invoke

  • WeixinJSBridge 是微信浏览器内置对象,在其他浏览器中无效;

    function onBridgeReady() {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: "appId", //公众号名称,由商户传入
          timeStamp: "timeStamp", //时间戳,自 1970 年以来的秒数
          nonceStr: "nonceStr", //随机串
          package: "package",
          signType: "MD5", //微信签名方式:
          paySign: "paySign", //微信签名
        },
        function (res) {
          // 支付成功
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示:
            //res.err_msg 将在用户支付成功后返回 ok,但并不保证它绝对可靠。
          }
          // 支付过程中用户取消
          if (res.err_msg == "get_brand_wcpay_request:cancel") {
          }
          // 支付失败
          if (res.err_msg == "get_brand_wcpay_request:fail") {
          }
          /**
           * 其它
           * 1、请检查预支付会话标识prepay_id是否已失效
           * 2、请求的appid与下单接口的appid是否一致
           * */
          if (res.err_msg == "调用支付JSAPI缺少参数:total_fee") {
          }
        }
      );
    }
    // 检测支付环境中的 WeixinJSBridge
    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();
    }
    
  • 接口说明:

    get_brand_wcpay_request:ok : 支付成功

    get_brand_wcpay_request:cancel : 支付过程中用户取消

    get_brand_wcpay_request:fail : 支付失败

  • 补充下 eslint 会针对 WeixinJSBridge 报错,需要添加下屏蔽(在 package.json)

    "eslintConfig": {
      "globals": {"WeixinJSBridge" : false},// 不要检测WeixinJSBridge
    },
    

你可能感兴趣的:(h5,微信)