vue前端实现微信支付-微信公众号JSSDK

最近在做支付功能，微信支付准备工作之类的请参考官方说明，注意个人申请的测试号不支持，要申请企业号，还要商户号，开通支付权限，配置域名，JSSDK的权限问题，尽可能都开通吧！

官方地址可参考这里：接入准备工作

这里大概说一下前端要做的，项目先引入微信jssdk，安装依赖，

npm install weixin-js-sdk --save

main.js引入，设置成全局属性，也可以设置成局部属性，那当前页引入就好了，

import wx from 'weixin-js-sdk'
Vue.use(wx);
Vue.prototype.$wx = wx

先是微信登录授权，获取code传给后台，拿到用户信息，之前有写过，这里不做说明了====

大概说一下前端要做的事情，大概逻辑是：用户下单->选择微信支付->提交订单，

// 提交订单this.$http.get(`/xxx/xxx/xxx/pay/`).then(async res=> {console.log('返回的支付res:',res);console.log('是否微信浏览器====',isWechat);if(isWechat&&json.payType === 'WECHAT_PAY') {console.log('微信公众号内-微信支付===============');this.wechatPayFunction(res.pay) // 微信公众号支付}......})

这里后端返回的数据大概是这样：

记得要先通过后端接口获取到微信公众号的配置信息，返回的数据格式大概是这样：

微信配置成功之后，就可以使用微信自带的wx.chooseWXPay发起微信支付请求啦！

官方文档可参考这里：微信支付

上代码：

// 微信公众号内微信支付方法
async wechatPayFunction(payData) {let that = this;let url = window.location.href.split('#')[0];await this.$http.get(`/api/wechat/jssdk?url=`+url).then(res=>{console.log('微信config', res);// 配置config信息wx.config({debug: false,appId: res.appId, // 必填，公众号的唯一标识timestamp: res.timestamp, // 必填，生成签名的时间戳nonceStr: res.nonceStr, // 必填，生成签名的随机串signature: res.signature, // 必填，签名jsApiList: ['checkJsApi', 'chooseWXPay'] // 必填，需要使用的JS接口列表});// 通过ready接口处理成功验证wx.ready(function () {wx.checkJsApi({jsApiList: ['chooseWXPay'],success: function (res) {console.log('微信config检验成功',res);}});wx.chooseWXPay({timestamp: payData.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符nonceStr: payData.nonceStr, // 支付签名随机串，不长于 32 位package: payData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: payData.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致paySign: payData.paySign, // 支付签名success: function (res) {  // 支付成功后的回调函数console.log('支付成功=============' + res)},fail: function (res) {console.log('支付失败===============' + res)}});});});

需要注意的问题：

1、调取微信支付前需要先获取到微信config信息，用后台返回的参数注入当前权限，才可以正常调用wx.chooseWXPay；

2、wx.chooseWXPay需要的参数通过支付接口再返回给前端，再发起微信支付请求；

3、注意一下参数大小写，核实后台接口返的和前端是否一致，因为本地不方便调试，每次都要发到服务器上，耽误了好久；还有因为也做了APP内的微信支付，一开始跟APP微信支付的后端接口返回参数搞错了，报错原因也查了很久，总之细心一点再细心一点，测试通过了还是很开心的，哈哈哈==；

vue前端实现微信支付-微信公众号JSSDK相关推荐

微信支付 php详解,微信支付之公众号支付详解
本文主要和大家分享微信支付之公众号支付详解,随着微信支付的流行,大多产品都开发了自己的公众号.小程序等,产品的营销需要支付的支撑,最近做了个微信公号号支付,采坑无数,今天给大家分享一下,希望能帮助到大 ...
php微信公众号支付实例教程,php微信支付之公众号支付功能
这篇文章主要为大家详细介绍了php微信支付之公众号支付功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下网上的很多PHP微信扫码支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后 ...
服务商快速进件V1.6.3源码帮助客户开通微信支付账号公众号应用
源码下载:服务商快速进件V1.6.3源码帮助客户开通微信支付账号公众号应用-小程序文档类资源-CSDN下载
微信支付、公众号支付、微信APP支付教程
这两天有朋友问我微信支付的一些事情,我就抽了点时间整理了一下微信支付相关的一些东西,在这里分享给大家,希望能帮助大家少走弯路. 微信支付分为APP支付和公众号支付两大类,其中公众号支付又分为(公众号支 ...
微信支付（公众号支付）微信公众平台开发教程（5）
简介 Senparc.Weixin SDK 是由盛派网络(Senparc)团队自主研发的针对微信各模块的开发套件(C#SDK), 已全面支持微信公众号.微信支付.企业号.开放平台.JSSDK.摇一摇 ...
php 公众号支付文档,【微信支付】公众号支付开发者文档
在微信浏览器里面打开H5网页中执行JS调起支付.接口输入输出数据格式为JSON. 注意:WeixinJSBridge内置对象在其他浏览器中无效.列表中参数名区分大小,大小写错误签名验证会失败. get ...
微信支付之公众号支付
经过近一周的敲代码,终于把公众号支付和H5支付实现完成并测试通过,特此分享一些流程,一方面自己记录另一方面给新入门的一点思路 [本文介绍普通商户的公众号支付] 一.基本信息和配置公众号支付的前提是要 ...
微信支付，公众号支付（jsapi支付）如何配置支付授权目录
开发微信支付的过程中,可能所有的流程都搞明白了,可能在配置公众号的支付授权目录时会遇到问题,会不大好理解. 如果支付授权目录没有设置正确,在请求JSAPI时,会提示"3当前页面的url未注册 ...
java微信支付代码_Java微信支付之服务号支付代码示例
Java微信支付之服务号支付实现,网上的java微信支付sdk和Demo基本上是水的,看着头疼所以我决心自己开始写Java微信支付之公众号支付,多的不说见下面源码,为了方便使用我分别用了两个Servl ...
微信公众号jssdk 分享/App原生应用接入分享开发及应用场景
文章目录前言一.应用场景二.Jssdk 接入准备工作 1.申请企业版微信公众号,并进行认证,并设置成为开发者 2.公众号配置 3.查看appid.设置密钥.并配置ip 白名单等三.开发接入 1 ...

vue前端实现微信支付-微信公众号JSSDK

vue前端实现微信支付-微信公众号JSSDK相关推荐

最新文章

热门文章