标签：支付宝 扫码 form 前端 表单 跳转 document

pc端 前端对接支付宝支付-前端获取支付宝返回的form 表单以及submit提交表单，自动跳转支付页面扫码支付

• • 返回的form数据大概如下，（可能会有差别）
  • 前端实例代码：

项目中用到了微信扫码，支付宝扫码支付。前端调取支付宝接口（后台进行了封装，没有直接调取支付宝接口）。
调用接口返回数据中，会有一串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&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.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();
 }

											————学习的每一步

标签：支付宝,扫码,form,前端,表单,跳转,document
来源： https://blog.csdn.net/m0_56540111/article/details/118721015

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。