H5页面支付宝扫码拉起支付宝支付
我这里是微信公众号的项目,其实也可以单纯的看成是一个h5页面,因为支付宝扫码后跳转的也就是一个页面地址,需要支付宝扫码拉起支付宝支付,需求明了,接下来就是步骤了第一步,扫码成功之后跳转页面需要先获取用户的code(用户授权),需要先引入支付宝的js文件,我是在app.vue,index.htm,当前页面也引了(我没测是在哪个页面起的作用,所以都加了)<script src="https://
我这里是微信公众号的项目,其实也可以单纯的看成是一个h5页面,因为支付宝扫码后跳转的也就是一个页面地址,需要支付宝扫码拉起支付宝支付,需求明了,接下来就是步骤了
第一步,扫码成功之后跳转页面需要先获取用户的code(用户授权),需要先引入支付宝的js文件,我是在app.vue,index.htm,当前页面也引了(我没测是在哪个页面起的作用,所以都加了)
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
getUserCode(){
//判断是不是支付宝
// if (ua.match(/AlipayClient/i) == "alipayclient") {
//支付宝获取code
window.ap.getAuthCode ({
appId:'2019082866519380',
scopes:[ 'auth_base' ],
}, function ( res ){
// window.ap.alert('res2:'+res.authCode)
localStorage.setItem('code',res.authCode)
});
// }
},
第二步,获取到code之后调用后台支付接口,把我们获取到的code和一些后端需要的参数传给后端(后端需要用code换取access_token 及用户的 user_id),然后通过调用支付宝api,ap.tradePay(如果不起作用前面请加window,具体原因还不清楚),把我们调用后台接口返回的交易订单号传给支付宝,从而拉起支付
let code = localStorage.getItem('code')
// alert('code3:'+code)
this.$http
.post(this.HOST + "后台支付接口", {
orderIds: orderids,
payChannelType:'2',
code:code
})
.then(data => {
if (data.body.returnCode == "000000") {
this.$vux.loading.hide();
//支付宝拉起支付
window.ap.tradePay({
tradeNO: data.body.doc
}, function(res){
window.ap.alert(res.resultCode);
if(res.resultCode=='9000'){
newthat.$vux.toast.text("支付成功");
newthat.toQueryOrder();
if (androidids.length==1) {
newthat.$router.push({
path: "/resultPage",
query: { orderId: androidids[0] }
});
}
androidids = new Array();
orderids = new Array();
newthat.selectIds = [];
newthat.needPayMoneyList = [];
}else if(res.resultCode=='6001'){
newthat.$vux.toast.text("您取消了支付");
// newthat.$vux.toast.text('androidids:'+JSON.stringify(androidids))
} else{
newthat.toQueryOrder();
newthat.$vux.toast.text("支付出错,请稍后再试");
}
});
}else{
this.$vux.loading.hide();
newthat.toQueryOrder();
}
},error=>{
this.$vux.loading.hide();
}
)
小tips(必看):
1.用户获取授权时,我这里是静默授权,即没有半屏授权浮层,授权这里需要先去支付宝配置授权回调地址,且必须以https开头,否则会报错,提示服务正忙,请稍后再试!具体请参考支付宝文档
(https://opendocs.alipay.com/open/284/h5)
2.拉起支付之后是否成功,可以看返回的code,以此可以排查是什么问题,请查看文档
(https://opendocs.alipay.com/open/20180417160701241302/fqxh5v)
3.其他的一些支付宝的配置可以参考下面链接
支付宝拉起支付的相关配置
更多推荐
所有评论(0)