微信支付和h5支付详解与示例
2 微信公众号支付的基本逻辑如下
《1》---配置好一个url,直接通过window.location.href的方式访问 ,与此同时会重定向到配置好的redicturl中,微信会给改url自动加上两个参数:code和state
《2》---前端截取到code参数,访问后端接口拿到如下参数
"appId":self.appId, //公众号名称,由商户传入
"nonceStr":self.nonceStr, //随机串
"package":self.package,
"paySign":self.paySign,//微信签名
"signType":self.signType, //微信签名方式:
"timeStamp":self.timeStamp,
《3》拿到后端给与的参数以后,就可以监听微信提供的事件来唤醒微信支付,只要微信提供的事件被监听到,就会出现金额弹窗进行支付
如下:
onBridgeReady(){
let self=this
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":self.appId, //公众号名称,由商户传入
"nonceStr":self.nonceStr, //随机串
"package":self.package,
"paySign":self.paySign,//微信签名
"signType":self.signType, //微信签名方式:
"timeStamp":self.timeStamp, //时间戳,自1970年以来的秒数
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
console.log("支付成功",res)
window.location.href=`http://http://testaa.bb.net/#/pay?orderCode=${decodeURIComponent(self.orderCode)}&isWxPayOk=true`
}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
console.log("取消支付")
window.location.href='http://testaa.bb.net/#/pay/#/myOrder/1'
}else if(res.err_msg == "get_brand_wcpay_request:fail"){
console.log("支付失败")
// WeixinJSBridge.call('closeWindow');
window.location.href=`http://testaa.bb.net/#/pay?orderCode=cls${decodeURIComponent(self.orderCode)}`
}
});
},
再说一说h5支付。h5支付再唤醒微信支付时候的逻辑基本一致,都是先有一个配置好的url然后重定向到对应 的
redirecturl地址然后获取code,再向后端发请求拿到appid等参数,最后通过这些参数调用微信提供的方法唤醒微信支付。
但是在配置url时有一个地方却迥然不同。
对于微信浏览器,
const wxurl="https://open.weixin.qq.com/connect/oauth2/authorize"
let deCodeUrl=encodeURIComponent('http://testaa.bb.net/#/pay')---->这里是你要重定向的页面地址
const httpWxUrl=wxurl+`?appid=wx12345678&redirect_uri=${deCodeUrl}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
然后通过window.location.href=httpWxUrl
而对于其他浏览器而言:
这个wxurl地址却并非我们写死的。是需要后端提供的。所以h5支付在唤醒微信支付的时候流程应该是这样的:
(1)请求后端接口获取到一个url,本例中的mwebUrl,
(2)拼接一个带有redirectur的新的地址,本例中的url
(3)重定向到这个地址,页面打开获取code---->请求接口获取appid等参数---->调用微信提供的WeixinJSBridgeReady方法在改方法内通过 WeixinJSBridge.invoke的回调内处理成功或失败的跳转逻辑
let orderCode=db.ls.get("vuex").user.orderCode
let res= await orderApi.wxCreateOrder({...data,tradeType:'MWEB'})
console.log("获取微信支付参数,",res.data.data.mwebUrl)
let mwebUrl=res.data.data.mwebUrl||""
let url=`${mwebUrl}&redirect_url=${encodeURIComponent('http://testaa.bb.net/#/pay?orderCode='+orderCode+'&isWxPayOk=true')}`
window.location.href=url
接下来说一说踩坑
1 微信支付的回调函数
onBridgeReady(){
let self=this
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":self.appId, //公众号名称,由商户传入
"nonceStr":self.nonceStr, //随机串
"package":self.package,
"paySign":self.paySign,//微信签名
"signType":self.signType, //微信签名方式:
"timeStamp":self.timeStamp, //时间戳,自1970年以来的秒数
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
console.log("支付成功",res)
window.location.href=`http://testaa.bb.net/#/pay/#/pay?orderCode=${decodeURIComponent(self.orderCode)}&isWxPayOk=true`
// self.$router.push({path:"/pay",query:{orderCode:decodeURIComponent(self.orderCode),isWxPayOk:true}})
}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
console.log("取消支付")
window.location.href=`http://testaa.bb.net/#/pay?orderCode=${decodeURIComponent(self.orderCode)}`
}else if(res.err_msg == "get_brand_wcpay_request:fail"){
console.log("支付失败")
// WeixinJSBridge.call('closeWindow');
window.location.href=`http://testaa.bb.net/#/pay?orderCode=cls${decodeURIComponent(self.orderCode)}`
}
}
对于微信浏览器内打开的网页进行支付,取消支付,支付成功,和支付失败都会有触发,也就是里面的console.log()
但是对于h5支付而言。也即是除了微信浏览器而言。不管是取消还是成功或是失败。都会都get_brand_wcpay_request:ok"成功的回调。
也正是如此,微信官方希望在取消支付或者支付成功的redirecturl里开发者自己设计一个弹窗,让用户手动点击,而点击的时候走自己后端的接口
从而确定订单是否真实完成。
既然上面提到了获取code需要通过重定向一个页面。然后通过该页面的url截取到code。那容易就想到做一个中间页面,这样在点击支付的时候
跳转到该页面获取到code,但是这也是坑的开始。因为每次在支付成功以后返回都会退回到这个中间页,再返回才能回到之前的支付页面。而正常的交互
显然不是这样的,用户支付成功以后点击退回应该是支付页面才对。而且还有一个问题是因为返回到了中间页,而中间页此时url没有code,(只有正常点击
支付按钮走支付进入到中间页此时中间页的url才会出现code,所以获取不到code。也就意味着请求后端的接口走不通),这时就会出现一旦用户取消获取支付成功
以后返回就会报错appid不存在之类的。
所以能不能不走中间页,直接在点击支付的前一个页面获取到code
所以正确的流程应该是
在进入支付页面的前一个页面进行重定向,在支付页面获取code
在这个页面重定向
代码如下:主要要区分下h5浏览器还是微信浏览器
在支付页面
1 获取code
2 通过code请求后端接口获取openid
3用户点击支付 ,先走后端接口,传入openid和其他参数,获取到appid,nonceStr,signType等参数
4 在步骤3的成功回调里拿到appid,nonceStr,signType等参数,触发微信内置的函数唤醒微信支付
5触发步骤4的函数逻辑里将有成功,失败,取消等相应,前端进行相应的逻辑跳转