移动端h5网页调用支付宝支付接口

·  阅读 639

领导第一次让我做h5支付宝支付的时候,去了支付宝开放平台,一顿上上下下左左右右,看完了长呼一口气。这个支付好像没我啥事儿啊!小伙伴儿们自行查看:opendocs.alipay.com/open/203/10…

image.png 关于手机网页内支付宝支付,核心代码就是,后端会返回给你一个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>
复制代码

这里还有一个地方就是,支付宝支付是无法在微信环境内打开的,所以你需要在支付页面加一个判断,如果是微信环境,就给用户一个操作提示,打开右上角,去在浏览器里打开页面。判断微信环境的方法之前我们已经封装好了,这里不重复写出,朋友们自行前去查看即可(前面的文章,微信分享和支付中都有这个方法)。 好了,到这里,我们的支付宝和微信常用的几个接口我们都做完了。相信你在离前端入门到放弃的道路上越走越近了。码文不易,如果觉得对你有帮助的话,点个赞吧!谢谢!

分类:
前端
分类:
前端