作者:esnard夏_368 | 来源:互联网 | 2023-09-08 14:54
业务场景介绍: H5移动端支持微信支付 [ 微信支付分为微信内支付(JSAPI支付官方API)和微信外支付(H5支付官方API)] && 支付宝支付 [手机网站支付转 APP 支付 官方API ]
订单生成逻辑:前端请求后端提交订单,后端去和微信或者支付宝对接生成订单(后续支付都是这个逻辑进行的对接)
一、移动端微信支付,vue中如何玩? 在移动端微信支付分为微信内支付和微信外支付。 1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内:
is_weixn ( ) { var ua = window. navigator. userAgent. toLowerCase ( ) ; if ( ua. match ( /MicroMessenger/i ) == 'micromessenger' ) { return true ; } else { return false ; } } ,
2.触发立即支付方法,根据微信内外的不同请求后端不同的接口,如果是微信外支付非常简单了~
3.【微信外支付】下面先看微信外支付,官方文档也写的很清楚,后端返回一个url地址,前端的工作就是拿到这个url地址进行跳转就可以了,看一下2-3步代码:
handelPay ( ) { if ( this . wechatpayType == 'wxpay' ) { let data= { amount: this . number, } this . $http. insideWeChatPay ( data) . then ( res => { if ( res. data. code === 200 ) { this . weChatParameter= res. data. datathis . weixinPay ( ) } else { Toast ( { message: res. data. msg, position: 'middle' , duration: 1000 } ) ; } } ) ; } else if ( this . wechatpayType == 'wxpay_php' ) { let data= { amount: this . number, } this . $http. outsideWeChatPay ( data) . then ( res => { if ( res. data. code === 200 ) { let url= res. data. datawindow. location. replace ( url) } else { Toast ( { message: res. data. msg, position: 'middle' , duration: 1000 } ) ; } } ) ; } } ,
4.在调起支付的页面监听从其他页面返回的事件,进行一些刷新业务逻辑的实现即可,至此微信外支付已经完成。
document. addEventListener ( "visibilitychange" , function ( ) { } ) ;
5.【微信内支付】微信内支付比起微信外支付稍微复杂一点,但是也不难,(3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数)根据官方API 微信内置js对象 WeixinJSBridge,进行开发,至此微信浏览器内支付已经完成
weixinPay ( data) { var vm= this ; if ( typeof WeixinJSBridge == "undefined" ) { if ( document. addEventListener ) { document. addEventListener ( 'WeixinJSBridgeReady' , vm. onBridgeReady ( data) , false ) ; } else if ( document. attachEvent) { document. attachEvent ( 'WeixinJSBridgeReady' , vm. onBridgeReady ( data) ) ; document. attachEvent ( 'onWeixinJSBridgeReady' , vm. onBridgeReady ( data) ) ; } } else { vm. onBridgeReady ( ) ; } } , onBridgeReady ( ) { var vm = this ; var timestamp= Math. round ( vm. weChatParameter. timeStamp) . toString ( ) ; WeixinJSBridge. invoke ( 'getBrandWCPayRequest' , { debug: true , "appId" : vm. weChatParameter. appId, "timeStamp" : timestamp, "nonceStr" : vm. weChatParameter. nonceStr, "package" : vm. weChatParameter. package , "signType" : vm. weChatParameter. signType, "paySign" : vm. weChatParameter. paySign, jsApiList: [ 'chooseWXPay' ] } , function ( res) { if ( res. err_msg == "get_brand_wcpay_request:ok" ) { Toast ( { message: '支付成功' , position: 'middle' , duration: 3000 } ) ; vm. number= null vm. $router. go ( - 1 ) } else { Toast ( { message: '支付失败' , position: 'middle' , duration: 3000 } ) ; } } ) ; } ,
6.微信内部浏览器支付也可以封装一下,在全局都可以直接调用:
function wxpay ( params, callback) { if ( typeof WeixinJSBridge == "undefined" ) { if ( document. addEventListener ) { document. addEventListener ( 'WeixinJSBridgeReady' , onBridgeReady ( params, callback) , false ) ; } else if ( document. attachEvent) { document. attachEvent ( 'WeixinJSBridgeReady' , onBridgeReady ( params, callback) ) ; document. attachEvent ( 'onWeixinJSBridgeReady' , onBridgeReady ( params, callback) ) ; } } else { onBridgeReady ( params, callback) ; } } function onBridgeReady ( params, callback) { var that = this WeixinJSBridge. invoke ( 'getBrandWCPayRequest' , { "appId" : params. appId, "timeStamp" : params. timeStamp, "nonceStr" : params. nonceStr, "package" : params. package , "signType" : params. signType, "paySign" : params. paySign } , function ( res) { callback ( res) } ) ; }
7.组件中调用微信支付:
this . commonUtils. wxpay ( res. data. data, function ( payResult) { if ( payResult. err_msg == "get_brand_wcpay_request:ok" ) { } } )
二、移动端支付宝支付,vue中如何玩? 其实支付宝支付也有H5支付和支付宝浏览器支付,这里只做H5支付,因为已经满足了业务需求。
1.支付宝中的H5支付和PC端的一样,主要是后端的工作量,后端完成订单的生成之后返给前端的是form表单,前端只需要负责做页面的跳转即可:
onSubmit ( ) { if ( this . payWay == 1 ) { this . $router. push ( { path: '/aliPay' , query: { orderId: this . orderId} } ) ; } else if ( this . payWay == 2 ) { } } ,
2.选择支付宝方式之后进入支付宝承载页面:
< template> < div v- html&#61; "html" > < / div> < / template> < script> export default { data ( ) { return { html: &#39;&#39; } } , methods: { fetchVideoPay ( ) { let param&#61; { orderId: this . $route. query. orderId} ; this . $api. orderpage. videoAliPay ( param) . then ( res &#61;> { this . html &#61; res. data; this . $nextTick ( ( ) &#61;> { document. forms[ 0 ] . submit ( ) } ) } ) } } , mounted ( ) { this . fetchVideoPay ( ) } } < / script>
当然不想写承载页的还有其他方法调起支付&#xff0c;具体逻辑具体分析&#xff0c;根据不同的业务类型去变通比如&#xff1a;
const div &#61; document. createElement ( &#39;div&#39; ) ; div. innerHTML &#61; ( res. data) ; document. body. appendChild ( div) ; document. forms. alipaysubmit. submit ( ) ;
3.进入到支付宝支付页&#xff08;至此但有一个问题&#xff0c;调起支付后&#xff0c;用户中途取消支付或者点返回键会整个网页一起关闭退出&#xff0c;或者一直在进入支付页面&#xff0c;不知道有没有更好的SEO方案&#xff09;