使用场景

如果您在开发微信公众号网页的网页支付,这里的内容可能会对你有所帮助

阅读官方文档可能会让你了解到更多:

微信网页开发-JS-SDK说明

微信支付JSAPI支付开发步骤

微信网页授权

阅读此文档时默认您已对接好微信登录授权,若你还没有做好微信登录,请参考上面官方文档:微信网页授权

使用步骤

1 公众号后台配置

1.1 绑定JS安全域名

微信公众平台 -> 公众号设置 -> 功能设置 -> JS接口安全域名

登录后可在“开发者中心”查看是否具有支付接口的调用权限,支付需要公众号性质为服务号并且已认证!

1.2 设置支付目录

微信商户平台 -> 产品中心 -> 开发配置 -> 支付配置

请确保实际支付时的请求目录与后台配置的目录一致（现在已经支持配置根目录，配置后有一定的生效时间，一般5分钟内生效），否则将无法成功唤起微信支付。

在微信商户平台（pay.weixin.qq.com）设置您的JSAPI支付支付目录，设置路径：商户平台-->产品中心-->开发配置，如图所示。JSAPI支付在请求支付的时候会校验请求来源是否有在商户平台做了配置，所以必须确保支付目录已经正确的被配置，否则将验证失败，请求支付不成功。

2 引入文件

npm install wx-choose-pay

或者直接下载index.js,在自己的项目中使用script引入;

3 使用

要先初始化微信JS-SDK,并注入验证参数,然后再调用支付; 如果你已经使用了微信JS-SDK,请直接看3.2步骤

3.1 当前页面未注入微信JS-SDK权限验证

如果你尚未引入微信 JS-SDK,请先参考代码注入验证,参数来源请参考 微信JSSDK附录1-JS-SDK使用权限签名算法(点击查看) 后端人员会把生成好的参数给你,如果你的页面地址发生变化,要重新注入权限验证

注意此签名配置与支付的签名是两回事,先注入JS-SDK权限,然后才能调用微信支付API,注入微信支付签名参数

支付参数备注:prepay_id 通过微信支付统一下单接口拿到，paySign 采用统一的微信支付 Sign 签名生成方法，注意这里 appId 也要参与签名，appId 与 config 中传入的 appId 一致，即最后参与签名的参数有appId, timeStamp, nonceStr, package, signType。 具体生成方法参考顶部微信支付文档

import {initWxJSSDK,chooseWxPay} from 'wx-choose-pay'

let config = {
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
}

//初始化JS-SDK
initWxJSSDK(config).then(function(){
    //支付参数
    let payment = {
        timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: '', // 支付签名随机串，不长于 32 位
        package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: '', // 支付签名
    }
    //发起微信支付
    wx.choosePay(payment).then(res=>{
        console.log('支付成功',res);    
    },err=>{
        console.log('支付失败',err);
    })
})

3.2 当前页面已注入过微信JS-SDK权限验证

import {chooseWxPay} from 'wx-choose-pay'

    //支付参数
    let payment = {
        timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: '', // 支付签名随机串，不长于 32 位
        package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: '', // 支付签名
    }
     //发起微信支付
     wx.choosePay(payment).then(res=>{
         console.log('支付成功',res);    
     },err=>{
         console.log('支付失败',err);
     })

特别提醒:

支付参数中的package中一般使用后端从统一支付接口获取到的prepay_id;假设prepay_id为a1b2c3;提交时package的值应为package:'prepay_id=a1b2c3'; 如果是package:'a1b2c3';会返回失败!!!

4 API

api | 参数 | 返回值 | 说明 ---- | ----- | ------ | ------
createWxJSSDK | 无 | Promise | 引入微信JS-SDK
initWxJSSDK | JSSDKConfig | Promise | 内部调用createWxJSSDK并注入权限验证
chooseWxPay | wxPayment | Promise | 发起微信支付

JSSDKConfig

key | 类型 | 说明 ---- | ------ | ------
debug | Boolean | 开启调试模式,调用的所有api的返回值会在客户端alert出来， 若要查看传入的参数，可以在pc端打开， 参数信息会通过log打出，仅在pc端时才会打印。
appId | String | 必填，公众号的唯一标识 timestamp | String Number | 必填，生成签名的时间戳
nonceStr | String | 必填，生成签名的随机串 signature | String | 必填，签名 jsApiList | Array[String] | 必填，需要使用的JS接口列表, 如果只使用微信支付,填['wxChoosePay']

wxPayment

key | 类型 | 说明 ---- | ------ | ------
timestamp | String | 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。 但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr | String | 支付签名随机串，不长于 32 位 package | String | 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***） signType | String | 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' paySign | String | 支付签名

createWxJSSDK

createWxJSSDK().then(()=>{
    console.log(wx);
    console.log('wx is ready');//wx-JS-SDK已经引入成功
})

initWxJSSDK

let config = {
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [''] // 必填，需要使用的JS接口列表
}

//初始化JS-SDK
initWxJSSDK(config).then(()=>{
    /*初始化完成,config的jsApiList中注入的api已经可以调用*/
    console.log('init ok');
},()=>{
    /*注入失败,大概率是签名验证不通过,可能是后台配置不正确或者后端生成签名时的url与当前页面url不一致*/
})

chooseWxPay

//支付参数
let payment = {
    timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    nonceStr: '', // 支付签名随机串，不长于 32 位
    package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
    signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    paySign: '', // 支付签名
}
//发起微信支付
wx.choosePay(payment).then(res=>{
    /*如果真机调试时支付界面一闪消失掉,没有成功发起支付,大概率是商家后端支付接口没有配置好,查看顶部 微信支付JSAPI支付开发步骤 文档,配置JSAPI支付路径*/
    console.log('支付结果',res);  
},err=>{
    console.log('失败',err);
})

常见问题

没反应,未能成功发起支付

可能原因1: 未成功注入config 可能原因2: 支付参数不正确 可能原因3: 商户后台未配置对应域名

闪一下然后报错,未能成功发起支付

可能原因: 商户后台未配置支付安全域名

注意

1:调用chooseWxPay 需先在当前页面注入权限验证

2:需要先在微信商户平台(不是公众平台)后台配置支付安全域名

3:支付参数中的timestamp 的 's' 是小写;

最后

简单来讲,微信授权后,后端获取到access_token等,然后再获取jsapi_ticket,给前端生成JS-SDK的注入权限签名;

在需要支付的时候,后端再生成对应的支付参数,前端用这些参数直接发起支付就可以了;

就是说参数怎么获得是后端老哥要考虑的事情,建议多看顶部的官方文档

最后要注意:页面url发生变化,都要重新注入权限验证,哪怕是spa的页面变化,也一样

最后的最后:这个JS-SDK的验证特别麻烦,建议使用微信内置浏览器自带API发起微信支付; WeixinJSBridge