Vue实现移动端H5支付宝支付篇 |
您所在的位置：网站首页 › h5调用支付 › Vue实现移动端H5支付宝支付篇 |
Vue实现移动端H5支付宝支付篇
|
前言
移动端支付宝支付，Vue中如何用H5支付，满足了业务需求？ 前端的准备工作支付宝中的H5支付和移动端的支付本质上是一样的，最繁琐的订单生成环节都是后端来配合完成。当后端完成订单的生成之后返给前端的是form表单，前端在获得到数据后，完成后续业务流程即可。 不要在前端尝试生成订单的操作，前端攻破的难度远低于后端。一旦公钥和私钥被截获，那么带来的损失无法估量。 后端返回的数据内容是啥？支付宝H5支付返回的内容，确实与移动支付大有不同。示例如下： { "code": 200, "message": "success", "data": { "pay_info":"document.forms['alipay_submit'].submit();", } } 前端怎么玩？方案一：选择支付宝方式之后进入支付宝承载页面 export default { data(){ return{ html:'' } }, methods:{ fetchVideoPay(){ let param={ orderId: this.$route.query.orderId }; this.$api.orderpage.videoAliPay(param).then( res => { this.html = res.data; this.$nextTick(() => { document.forms[0].submit() //渲染支付宝支付页面 }) }) } }, mounted(){ this.fetchVideoPay() } }方案二：在当前页面直接唤起支付宝支付 const div = document.createElement('div'); div.innerHTML = (res.data); //res.data是返回的表单 document.body.appendChild(div); document.forms.alipaysubmit.submit(); 效果图如下 |
【本文地址】