vue项目使用微信公众号支付总结
程序员文章站
2022-06-15 15:42:17
微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档; 使用的vuex,在mutations中 在支付页面中commit 2. 支付点击完成按钮后,前端会收到JavaScript的返回值; 3. 后台收到来自微信开放平台的支付成功回调通知 踩坑 1. chooseWXPay:fail, ......
微信公众号支付
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配置
上一篇: php生成唯一uid的解决方法详解
下一篇: 零开始的领域驱动设计