vue 微信公众号支付接口_vue项目中使用微信公众号支付的方法有哪些

vue项目中使用微信公众号支付的方法有哪些

发布时间：2020-07-11 11:31:45

来源：亿速云

阅读：143

这篇文章将为大家详细讲解有关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项目中使用微信公众号支付的方法有哪些就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

vue 微信公众号支付接口_vue项目中使用微信公众号支付的方法有哪些相关推荐

vue怎么vw布局好用_Vue项目中使用vw实现移动端适配-阿里云开发者社区
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
vue 微信公众号支付接口_总结vue项目中使用微信公众号支付的方法
本篇文章给大家带来的内容是总结vue项目中使用微信公众号支付的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档 ...
PHP支付接口教程，详解微信支付（二）
PC扫码支付扫码支付首先是要分清楚两种模式: [模式一]:商户后台系统根据微信支付规则链接生成二维码,链接中带固定参数productid(可定义为产品标识或订单号).[模式二]:商户后台系统调用微信 ...
python 微信支付接口详解_Python支付接口汇总大全（包含微信、支付宝等，长期更新、欢迎补充）...
wzhifuSDK- 由微信支付SDK 官方PHP Demo移植而来,v3.37下载地址学习Python中有不明白推荐加入交流群号:864573496 群里有志同道合的小伙伴,互帮互助, 群里有不 ...
java支付接口开发原理_java对接微信支付接口开发的过程是什么?
java对接微信支付接口开发的过程是什么?以下是小编整理的java对接微信支付接口实现的方法和过程,有需要的朋友可以学习以下的java对接微信支付接口内容. java对接微信支付接口开发的过程是什么? ...
如何正确的在项目中接入微信JS-SDK
微信JS-SDK的功能如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了.微信的官方文档描述如下. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. ...
支付宝官方支付接口申请配置教程（如何开通支付宝支付接口）
支付宝官方支付接口申请配置教程(如何开通支付宝支付接口) 支付产品开通(当面付.手机网站支付.电脑网站支付等) 注册登录支付宝(企业或个体户资质) Alipay 登录[支付宝商家] https://b ...
JavaEE学习08（解决项目导入eclipse后项目中的红错号）
解决项目中的红错号一.出错如图所示二.解决步骤三.解决项目包红错号(代码没报错) 四.解决java compiler level does not match the version of th ...
C#开发微信门户及应用(10)--在管理系统中同步微信用户分组信息
在前面几篇文章中,逐步从原有微信的API封装的基础上过渡到微信应用平台管理系统里面,逐步介绍管理系统中的微信数据的界面设计,以及相关的处理操作过程的逻辑和代码,希望从更高一个层次,向大家介绍微信的应用 ...
python编写交互界面查分app_Django项目中model的数据处理以及页面交互方法
Django中Models是什么: 通常,一个Model对应一张数据表, Django中Models以类的形式表现, 它包含一些基本字段以及数据的一些行为 ORM: 对象关系映射(Object Rel ...

vue 微信公众号支付接口_vue项目中使用微信公众号支付的方法有哪些

vue 微信公众号支付接口_vue项目中使用微信公众号支付的方法有哪些相关推荐

最新文章

热门文章