因为公司的spa项目需要接入微信,而微信的支付确实比较坑,所以在这里整理下包含三点.微信外拉起微信支付的H5支付,微信内的公众号支付.而微信公众号支付官方给了两种方式,文档特别乱,入参大小写都不一样,这次经过测试,两种方式都成功
参数准备
微信内的支付需要用到openid,这里有几种情况要说一下
- 微信点击授权登录,
- 微信静默授权登录
以上两种方式都可以获取到openid
H5支付不需要openid,但是不可以在微信环境使用
我们公司的项目环境比较复杂, 有以下几种情况
a. 微信授权登录->获取到openid和uid->后台绑定用户->用户可以使用微信支付
b.账号密码登录->未曾绑定微信无openid,这时,我们在他登录的时候使用静默授权,获取到当前微信的openid,和用户信息一起暂存在本地,但不绑定,可以便可以使用微信支付
配置
1.在公众号后台->设置->公众号设置->功能设置中设置相关域名信息,并把验证文件放置在项目的根目录下
2.在开发->基本配置中设置白名单,并且appid和AppSecret给后台,AppSecret要单独保存下来,不然以后只能重置了,下面的服务器配置好像是公众号开发才用到的,暂且不用配置
插件部分
import wx from 'weixin-js-sdk'
// 微信公众号支付
export const wxpay = {
install: (Vue) => {
Vue.prototype.$wxpay = (msg, cb) => {
// 因为在我的上一篇文章中的微信分享已经注入过wx.config,获取了微信支付的权限,所以这里就不再次注入,如果没有分享要加上下面的
// wx.config({
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，
// // 参数信息会通过log打出，仅在pc端时才会打印。
// appId: msg.appId, // 必填，公众号的唯一标识
// timestamp: msg.timeStamp, // 必填，生成签名的时间戳
// nonceStr: msg.nonceStr, // 必填，生成签名的随机串
// signature: 'MD5', // 必填，签名，见附录1
// jsApiList: [
// 'chooseWXPay'// 微信支付
// ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
// })
wx.chooseWXPay({
timestamp: msg.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: msg.nonceStr, // 支付签名随机串，不长于 32 位
package: msg.package,
signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: msg.sign, // 支付签名
success: function (res) {
// 支付成功后的回调函数
if (res.errMsg === 'chooseWXPay:ok') {
// 支付成功
/*eslint-disable */
cb('success')
} else {
alert(res.errMsg)
cb('false')
}
},
cancel: function (res) {
// 支付取消
alert('支付取消')
cb('cancle')
}
})
}
}
}
// 微信公众号支付的第二种形式
export const wxpay2 = {
install: (Vue) => {
Vue.prototype.$wxpay2 = function onBridgeReady(msg, cb){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": msg.appId, //公众号名称，由商户传入
"timeStamp": msg.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": msg.nonceStr, //随机串
"package": msg.package,
"signType": "MD5", //微信签名方式：
"paySign": msg.sign //微信签名
},
function (res) {
if ( res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
}
}
)
}
}
}
// 微信H5支付
export const wxH5pay = {
install: (Vue) => {
Vue.prototype.$wxH5pay = (msg, url) => {
let redirectUrl = encodeURI(url)
window.location.href = msg.mweburl + redirectUrl
}
}
}
// 支付宝的H5支付
export const alipay = {
install: (Vue, msg) => {
Vue.prototype.$alipay = (msg) => {
alert('支付宝支付暂时还不能使用')
}
}
}
main.js引入
import { wxpay, wxpay2, wxH5pay } from './plugins/pay/pay'
Vue.use(wxpay)
Vue.use(wxpay2)
Vue.use(wxH5pay )
使用
// 给后台的传参,后台以获取支付签名
if(this.ua === 'wechat') { // 如果是微信浏览器
let query = {
userid: this.personInfo.userid,
token: this.personInfo.token,
title: '商品标题',
amount: this.order.ordersumprice, // 价格
openid: this.personInfo.wxopenid, // 公众号openid
orderno: this.order.orderno // 订单号
}
enchargeWx(query).then(res => { // 调用后台接口,返回参数
if (res.code === '1') {
// 调支付
this.$wxpay(res.data, this.cb) // 将参数和回调函数穿进去,根据不同的支付状态再做处理
} else {
this.$vux.alert.show({
title: '失败',
content: '获取支付签名失败'
})
}
})
} else {
// 非微信环境,调用微信h5支付
// 具体向后台传参请看官方文档, 同后台协商
let query = {
token: this.token,
title: this.formData.title,
price: this.formData.price,
coinsid: this.formData.coinsid,
homePageName: '网站主页名',
wareName: this.formData.title,
wapUrl: window.location.href,
wapName: '网站名'
}
buygoldBywxhfive(query).then((Response) => {
let redirctUrl = '&http://www.baidu.com/mine/wallet' // 支付成功后的重定向地址
this.$wxH5pay(Response.data, redirctUrl)
}).catch((err) => {
this.$alert(err)
})
}
