vue移动端浏览器项目,微信内置浏览器中调用微信支付

微信内置浏览器中调用微信支付,前提需获取微信签名等信息,然后通过wx.config配置签名等信息,代码示例如下:

 wxPayInside (wxData) { // 微信内部浏览器
      let that = this
      that.wxconfig(wxData)
      wx.ready(function () {
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

        // 进行微信支付
        wx.chooseWXPay({
          appId: wxData.appId,
          timestamp: wxData.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: wxData.nonceStr, // 支付签名随机串,不长于 32 位
          package: wxData.packageValue, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
          signType: wxData.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
          paySign: wxData.paySign, // 支付签名
          success: function (res) {
            // 支付成功后的回调函数
            if (res.errMsg == 'chooseWXPay:ok') {
              that.$router.replace('/paySuccess')
              // 支付成功
              // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。
            } else {
              alert('支付失败')
            }
          },
          cancel: function (res) {
            that.getCancelPay({// 取消支付,红包/余额回滚
              payOrderId: sessionStorage.getItem('payOrderId')
            })
            sessionStorage.removeItem('orderId')
            that.$router.replace({ name: 'order', params: { index: 0 } })
          },
          fail: function (res) {
            alert('购买失败,请重新创建订单')
          }
        })
      })
    },
    wxconfig (configJson) {
      wx.config({
        debug: false,
        appId: configJson.appId,
        timestamp: configJson.timeStamp,
        nonceStr: configJson.nonceStr,
        signature: configJson.paySign,
        jsApiList: ['chooseWXPay']
      })
    },

其中就是创建订单后接口返回的签名等信息

你可能感兴趣的:(前端,vue)