前端 微信支付、支付宝支付
2020-11-27 本文已影响0人
jinxyyy
微信支付
1.pc扫码支付:
后端返回支付地址,前端引用生成code的组件,将地址生成为二维码以供用户扫码,因为没有支付回调地址的配置,需要前端轮询查询支付状态,以便判断是否支付成功。
2.微信外(h5支付):
后端返回支付地址,前端打开支付地址,就可唤醒微信app进行支付,前端可以在后端返回的支付地址后拼接回调地址 &redirect_url='http://www.baidu.com' (地址需要encodeURIComponent()加密) 此回调地址不分成功和失败,所以需要自己轮询查询
3.微信内 (公众号支付):
需要先在微信支付平台配置支付地址,最高上限为5个;支付地址若为 192.168.0.1:1888/#/store/pay, 则支付地址为192.168.0.1:1888/#/store
需要先引入微信sdk: const wx = require('weixin-js-sdk')
需要先进行先公众号授权登录,得到openId, 调用后台接口,得到timestamp,nonceStr,signature,然后调用微信sdk方法。
总结就为:先调用wx.config,在config里的jsApiList中添加‘chooseWXPay',然后在wx.ready中调用wx.chooseWXPay传入 appId,timestamp,nonceStr,package,signType,paySign。微信支付有success回调,其中res.errMsg = 'chooseWXPay:ok'即为支付成功,但微信不保证绝对成功,所以需要轮询查询是否成功。
wx.config({
debug: false,
appId: wxAppid, // 和获取Ticke的必须一样------必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
// 需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
jsApiList: [
'chooseWXPay'
]
})
wx.error(function(res) {
console.log(res)
})
wx.ready(() => {
let that = this
offlineClasspay(data).then(res => {
if(res.status === 0) {
if(res.result.channel == 'weixinforjsapi') {
let result = res.result.prepay;
let orderNumber = res.result.order_num
// 微信公众号支付
wx.chooseWXPay({
appId: result.appId,
timestamp: result.timeStamp,
nonceStr: result.nonceStr,
package: result.package,
signType: result.signType,
paySign: result.paySign,
success(res) {
console.log(res)
if (res.errMsg === 'chooseWXPay:ok') {
Indicator.open('Loading...')
let i = 0
let payTime = setInterval(() => {
i++
if (i > 10) {
clearInterval(payTime)
Indicator.close()
setTimeout(that.$router.push({path: `/activity/payStatus/2`}), 3000)
return false
} else {
getOrderInfo(orderNumber).then((res) => {
if (res.status === ERR_OK) {
if(res.result.order.status == 1) {
Indicator.close()
clearInterval(payTime)
that.$router.push({path: `/activity/payStatus/1`})
}
} else {
}
})
}
}, 1000)
}
},
cancel() {
Toast('取消支付~')
},
error(res) {
setTimeout(that.$router.push({path: `/activity/payStatus/2`}), 3000)
}
})
}
}
})
})
支付宝支付
1.pc支付:
后端返回一个form表单,但前端直接进行赋值到html中,直接提交即可;但是需要1秒后删除该表单,防止第二次用户继续支付,调用的还为上次的表单。后端可以配支付成功回调地址。
const div = document.createElement('div');
div.innerHTML = res.result.response
document.body.appendChild(div);
document.forms[0].submit();
setTimeout(()=> {
div.remove()
}, 1000)
2.手机支付:
与pc支付逻辑相同。