vue项目使用微信公众号支付总结及遇到的坑
微信公众号支付
1. 使用jssdk调用微信支付,具体查看开发文档;
使用的vuex,在mutations中
wechatPay (state, data) {
state.payObject = data
console.log('微信支付开始请求')
if (wechat) {
wx.chooseWXPay({
timestamp: state.payObject.timeStamp, // 支付签名时间戳
nonceStr: state.payObject.nonceStr, // 支付签名随机串,不长于 32 位
package: state.payObject.package, // 统一支付接口返回的prepay_id参数值
signType: state.payObject.signType, // 签名方式使用新版支付需传入'MD5'
paySign: state.payObject.paySign, // 支付签名
success: function (res) {
alert('成功')
alert(JSON.stringify(res))
},
cancel: function (res) {
alert('已取消支付')
alert(JSON.stringify(res))
},
fail: function (res) {
alert(JSON.stringify(res))
}
})
}
}
在支付页面中commit
// 存储微信支付数据data
let data = res.body.data
console.log('即将跳转微信支付')
this.$store.commit({
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
type: 'wechatPay',
package: data.package,
signType: data.signType,
paySign: data.paySign
})
2. 支付点击完成按钮后,前端会收到JavaScript的返回值;
3. 后台收到来自微信开放平台的支付成功回调通知
踩坑
1. chooseWXPay:fail, the permission value is offline verifying
这是因为不能在在微信开发者工具上测试,需要真机测试
2. chooseWXPay:fail
需要配置正确的支付授权目录,vue的单页应用直接配置为域名就行。
其他需要配置为调用支付的上一级目录,以/结束
3. 下单账户与支付账户不一致
需要后台看一下openId配置
总结
以上所述是小编给大家介绍的vue项目使用微信公众号支付总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
vue3+ts+EsLint+Prettier规范代码的方法实现
本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范。感兴趣的可以了解一下2021-10-10
vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的简单示例
在vue项目中难免遇到有要生成条形码或者二维码的功能需求,下面这篇文章主要给大家介绍了关于vue中生成条形码(jsbarcode)和二维码(qrcodejs2)的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-12-12
Vue项目中安装依赖npm install一直报错的解决过程
这篇文章主要给大家介绍了关于Vue项目中安装依赖npm install一直报错的解决过程,要解决NPM安装依赖报错,首先要分析出错误的原因,文中将解决的过程介绍的非常详细,需要的朋友可以参考下2023-05-05


最新评论