当前位置: 首页 > 编程笔记 >

vue项目使用微信公众号支付总结及遇到的坑

晋涛
2023-03-14
本文向大家介绍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配置

总结

以上所述是小编给大家介绍的vue项目使用微信公众号支付总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍微信公众号支付H5调用支付解析,包括了微信公众号支付H5调用支付解析的使用技巧和注意事项,需要的朋友参考一下 最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验。 一、配置公众号微信支付   需要我们配置微信公众号支付地址和测试白名单。    比如:支付JS页面

  • 本文向大家介绍nodejs微信公众号支付开发,包括了nodejs微信公众号支付开发的使用技巧和注意事项,需要的朋友参考一下 odeJs 微信公众号功能开发,移动端 H5页面调用微信的支付功能。这几天根据公司的需要使用 node 和 h5页面调用微信的支付功能完成支付需求。现在把开发过程重新捋一遍,以帮助更多的开发者顺利的完成微信支付功能的开发。(微信暂时还没有提供 node 的支付功能) 一.请求

  • 上一篇我们介绍了在h5 app 开发微信支付, 这篇我们说一说在微信公众号开发支付。 目录 环境准备 1  需要一个有支付能力的公众号 2 wex5 3.3 及以上版本 3 备案好的域名 4 微信web开发者工具 开发步骤 1 取得参数 2 编译Baas 3 基本URL配置 4 JS接口安全域名、授权回调页域名配置 5 开发UI 5.1 修改参数 5.2 修改代码二 6 配置微信支付授权目录 7

  • 本文向大家介绍详解nuxt 微信公众号支付遇到的问题与解决,包括了详解nuxt 微信公众号支付遇到的问题与解决的使用技巧和注意事项,需要的朋友参考一下 背景:nuxt为默认的history模式,用这个npm 支付weixin-js-sdk,开启debug模式,尽量在ios下调试,因为alert弹窗的信息会更多。 1、微信调起支付loading又立刻关闭,并提示:当前页面的url未注册:https:

  • 本文向大家介绍微信支付PHP SDK —— 公众号支付代码详解,包括了微信支付PHP SDK —— 公众号支付代码详解的使用技巧和注意事项,需要的朋友参考一下 在微信支付 开发者文档页面 下载最新的 php SDK http://mch.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1 这里假设你已经申请完微信支付 1. 微信后台配置  如图 我们

  • 说明 微信公众号支付SDK。 官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1 类 请求参数类 支付参数 类名:\Yurun\PaySDK\Weixin\JSAPI\Params\Pay\Request 属性 名称 类型 说明 $scene_info \Yurun\PaySDK\Weixin\JSAPI\Params