【wxPay】WeChat payment

Method 1: WeChat payment [WeChat official account],wx.chooseWXPay

• This payment method requires the introduction of JS files into the HTML page, namely [jweixin-1.6.0.js];

• Through the request interface, return the appId, etc., and then open the permissions in wx.config

• Open the H5 webpage in the WeChat browser and execute JS to initiate payment;

  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);
    });
  }
  

• Interface Description:

  success: callback function executed when the interface call is successful.

  fail: The callback function executed when the interface call fails.

  complete: The callback function executed when the interface call is completed, regardless of success or failure.

  cancel: The callback function when the user clicks cancel. It is only used by some APIs where the user cancels the operation.

Method 2: WeChat payment [WeixinJSBridge built-in method]WeixinJSBridge.invoke

• WeixinJSBridge is a built-in object of WeChat browser and is invalid in other browsers;

  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();
  }
  

• Interface Description:

  get_brand_wcpay_request:ok: payment successful

  get_brand_wcpay_request:cancel: The user cancels during the payment process

  get_brand_wcpay_request:fail: payment failed

• In addition, eslint will report an error for WeixinJSBridge, and you need to add a shield (in package.json)

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