微信支付 JASAPI 支付

2021-07-13

字数统计: 919字 | 阅读时长≈ 3分

1. 接入前准备

1.1 支付授权目录设置

微信支付商户平台 –> 产品中心 –> 开发配置
注：商户实际的支付目录必须和在微信支付商户平台设置的一致，不然会报错“当前页面的 URL 未注册”（一般情况，可以设置为顶级域名）

1.2 支付授权目录校验规则

如果支付授权目录设置为顶级域名，则只校验顶级域名，不校验后缀。
如果支付授权目录设置为多级域名，就会进行全匹配，例如设置的支付授权目录为 “https://www.weixin.com/abc"，那么实际请求页面路径不能为 “https://www.weixin.com/qwe" 或其他任何后缀的页面，只能是 “https://www.weixin.com/abc"

1.3 设置授权域名

开发 JSAPI 支付时，在统一下单接口中要求必传用户 openid，而获取 openid 则需要您在公众平台设置获取 openid 的域名，只有被设置过的域名才是一个有效的获取 openid 的域名，否则将获取失败。
设置授权域名路径：登录微信公众平台 –> 公众号设置 –> 功能设置 –> 网页授权域名
注：这里会有一个 txt 文件，需要下载下来，放到项目打包之后的根目录。

2. JSAPI 调起支付

WeixinJSBridge 内置对象在其他浏览器中无效。
示例代码

defray () {
  // id 为订单 ID，这里是调用后台的接口提交订单，并获取网页端接口请求需要的参数
  this.$api.user.getwechatData(this.id).then(res => {
    console.log(res.data)
    if (res.data.code === 200) {
      console.log('获取微信 JSAPI 支付----', res)
      const weChatConfig = res.data.item
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
        }
      } else {
        onBridgeReady(weChatConfig)
      }
      // eslint-disable-next-line no-inner-declarations
      function onBridgeReady (weChatConfig) {
        console.log('-------------->', weChatConfig)
        // eslint-disable-next-line no-undef
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            appId: weChatConfig.appId,          // 公众号名称，由商户传入
            timeStamp: weChatConfig.timeStamp,  // 时间戳，自1970年以来的秒数
            nonceStr: weChatConfig.nonceStr,    // 随机串
            package: weChatConfig._package,
            signType: weChatConfig.signType,    // 微信签名方式：
            paySign: weChatConfig.paySign       // 微信签名
          },
          function (res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              // res.err_msg 将在用户支付成功后返回 ok，但并不保证它绝对可靠。
              window.location.href = encodeURIComponent('http://www.weixin.com/success')
            } else {
              window.location.href = encodeURIComponent('http://www.weixin.com/error')
            }
          })
      }
    } else {
      this.$toast('支付失败，请重新支付')
    }
  })
}

网页端接口请求参数列表

名称	变量名	必填	类型	示例值	描述
公众号 id	appId	是	String(16)	wx8888888888888	appId 为当前服务商号绑定的 appId
时间戳	timeStamp	是	String(32)	141561699	当前的时间，其他详见【时间戳规则】
随机字符串	nonceStr	是	String(32)	5K865LJH16CHLNNDJL20233JD	随机字符串，不长于 32 位。推荐【随机数生成算法】
订单详情扩展字符串	package	是	String(128)	prepay_id=12345678	统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
签名方式	singType	是	String(32)	MD5	签名类型，默认为 MD5，支持 HMAC-SHA256 和 MD5。注意此处需与统一下单的签名类型一致
签名	paySign	是	String(64)	C890JDMA7890DJKLSA	签名，详见【签名生成算法】

返回结果值说明

返回值描述

get_brand_wcpay_request:ok 支付成功

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

get_brand_wcpay_request:fail 支付失败

返回值	描述
get_brand_wcpay_request:ok	支付成功
get_brand_wcpay_request:cancel	支付过程中用户取消
get_brand_wcpay_request:fail	支付失败

支付常见问题

【参考官方：支付常见问题】

参考

【官方文档】

本文作者： Gladysdrea
本文链接： https://gladysdrea.github.io/blogs/2021/07/13/WeChat/支付/微信支付-JASAPI支付/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！