移动端h5网页调用支付宝支付接口
web前端开发
共 2225字,需浏览 5分钟
·
2021-04-12 10:11
来源 | https://www.dsiab.com/post/4181
领导第一次让我做h5支付宝支付的时候,去了支付宝开放平台,一顿上上下下左左右右,看完了长呼一口气。
这个支付好像没我啥事儿啊!小伙伴儿们自行查看:https://opendocs.alipay.com/open/203/105285
关于手机网页内支付宝支付,核心代码就是,后端会返回给你一个form,然后你拿着这个form去调用就行了。
这样就需要你准备两网页。一个是你写好的盛装后台返回的支付页面,一个是支付成功后,给return_url跳转的成功页面。
并且你可以通过获取网页url参数的方法去根据参数在这个回调页面里做些什么。
首先,我们先请求后端给我们的支付接口。
//点击支付业务页面
<template>
<div>
<button @click="handlePay" class="pay_money_button" type="info" :loading="load" loading-text="支付中">去支付</button>
</div>
</template>
<script>
export default {
data(){
return {
load:false
}
},
methods:{
//点击支付
handlePay(){
this.load = true;
//请求支付参数
let data = {
orderId:this.payForm.orderId
}
aliPaySignH5(data).then((res) => {
if (res.status == 1000) {
if (res.data !== null) {
//这里我用了缓存来处理返回值,用router传参,一个会显示在浏览器上,
//一个强制刷新会消失参数,而且form表单过长。个人喜好,自行更改
sessionStorage.setItem('html',res.data);
this.$router.push({path:'/bigdatapay'})
}
}
}).finally((res)=>{
this.load = false;
Toast.fail(res.data.msg);
})
.catch((err) => {
//你想吃点啥吃点啥吧
})
},
}
}
</script>
//支付宝返回表单前端调用页面
<template>
<div class="container">
<div v-html="apply">
</div>
</div>
</template>
<script>
export default {
data(){
return {
apply:'',
}
},
mounted(){
let form = sessionStorage.getItem('html')
this.apply = form;
this.$nextTick(()=>{
document.forms[0].submit()
})
},
methods:{
}
}
</script>
学习更多技能
请点击下方web前端开发
评论