总结vue项目中使用微信公众号支付的方法

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是总结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配置
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 总结vue项目中使用微信公众号支付的方法

发表评论

提供最优质的资源集合

立即查看 了解详情