pc端 前端对接支付宝支付-前端获取支付宝返回的form 表单以及submit提交表单,自动跳转支付页面扫码支付
项目中用到了微信扫码,支付宝扫码支付。前端调取支付宝接口(后台进行了封装,没有直接调取支付宝接口)。
调用接口返回数据中,会有一串form表单字符串返回,前端需要做的就是把这串form 表单字符串通过appendchild 方法添加到当前页面中,并且执行这个表单的submit() 方法,表单提交以后,会自动跳转到支付宝扫码支付页面
返回的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¬ify_url=http%3A%2F%2Fwww.shanshiwangluo.com%2Fssmall%2Fportal%2Forder%2Fpay%2FaliCallback&version=1.0&app_id=2018062260383877&sign_type=RSA2×tamp=2018-12-15+17%3A13%3A32&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json">
<input type="hidden" name="biz_content" value="{ "out_trade_no":"1812141933252566", "product_code":"FAST_INSTANT_TRADE_PAY", "total_amount":0.02, "subject":" 订单:1812141933252566", "extend_params":{ "sys_service_provider_id":"2018062211454921" } }">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>
前端实例代码:
if (res.code === 200) {
let divForm = document.getElementsByTagName('divform')
if (divForm.length) {
document.body.removeChild(divForm[0])
}
const div=document.createElement('divform');
div.innerHTML=res.data.formDate;
document.body.appendChild(div);
document.forms[0].setAttribute('target', '_blank')
document.forms[0].submit();
}
————学习的每一步