VUE+Element 对接Alipay

本文主要是介绍VUE+Element 对接Alipay，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近项目需要尝试了一下对接AliPay，在此做个笔记

首先我调用的AliPay接口是经过后台的小伙伴封装过一层的。
在调用的时候我需要上传用户账户信息和充值金额，然后后台会放回调用结果，并在返回的数据中包含AliPay接口返回的Form表单。Form表单数据格式大概如下所示：

<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=GBK&method=alipay.trade.page.pay&sign=tXR6yxB9Uowu7tfbXVPHBoQXeyOqP2JXvo%2Fzmz%2BIA08aWin63h1%2FF7gHNN7I2K%2FnTV3ZYtvPkILu%2FS8uPmzpsAv1SJev0UNN2AbLDIGvbd%2BWn5neyIUqKcu5ySP1S8Bt4fbnvkMgnlijR25obVi5aFbj99JBZDrpeJ5cB9uq7Ccx7nX54%2F7coNv26PFD%2FPirlIKVVr2avD2w%3D%3D&return_url=http%3A%2F%2Fwww.shanshiwangluo.com%2F%23%2FpayNotify&notify_url=http%3A%2F%2Fwww.shanshiwangluo.com%2Fssmall%2Fportal%2Forder%2Fpay%2FaliCallback&version=1.0&app_id=2018062260383877&sign_type=RSA2&timestamp=2018-12-15+17%3A13%3A32&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json">
<input type="hidden" name="biz_content" value="{    &quot;out_trade_no&quot;:&quot;1812141933252566&quot;,    &quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;,    &quot;total_amount&quot;:0.02,    &quot;subject&quot;:&quot; 订单：1812141933252566&quot;,    &quot;extend_params&quot;:{    &quot;sys_service_provider_id&quot;:&quot;2018062211454921&quot;    }  }">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

我们获取到这个表单之后的使用方法如下：

 if (res.data.code == 0) {document.querySelector('body').innerHTML = JSON.parse(res.data.data).responsePage;//这里的JSON.parse(res.data.data).responsePage是为了拿到上面所说的Form表单数据，因为我请求的接口是被封装过一层的，所以大家使用的时候将这里替换成实际拿到的Form表单数据就可以了const div = document.createElement('div') // 创建divdiv.innerHTML = JSON.parse(res.data.data).responsePage//这里同上面所说的使用时将JSON.parse(res.data.data).responsePage替换为自己获取的Form表单数据// 将返回的form 放入divdocument.body.appendChild(div)document.forms[0].submit()}