前端解析支付宝返回form表单,自动跳转支付

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&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表单可以通过以下步骤: 1. 在Vue组件中使用axios等工具向后端发送请求,获取后端返回支付宝支付form表单数据。 2. 在Vue组件的模板中使用v-html指令将获取到的form表单数据渲染到页面上。 3. 需要注意的是,由于支付宝支付form表单中包含了敏感信息,为了避免安全问题,应该将form表单的提交动作设置为空,即不提交到任何地址,而是在前端通过JavaScript代码来触发提交操作。 例如,假设后端返回支付宝支付form表单数据如下: ```html <form name="alipayment" method="post" action="https://openapi.alipay.com/gateway.do?charset=utf-8"> <input type="hidden" name="app_id" value="your_app_id"> <input type="hidden" name="biz_content" value="your_biz_content"> <input type="hidden" name="charset" value="UTF-8"> <input type="hidden" name="format" value="JSON"> <input type="hidden" name="method" value="alipay.trade.wap.pay"> <input type="hidden" name="sign_type" value="RSA2"> <input type="hidden" name="timestamp" value="your_timestamp"> <input type="hidden" name="version" value="1.0"> <input type="hidden" name="sign" value="your_sign"> </form> ``` 在Vue组件的模板中,可以使用以下代码展示这个form表单: ```html <template> <div v-html="alipayForm"></div> </template> <script> import axios from 'axios' export default { data() { return { alipayForm: '' } }, mounted() { axios.get('/api/alipay-form').then(response => { this.alipayForm = response.data this.submitAlipayForm() }) }, methods: { submitAlipayForm() { // 触发form表单的提交操作 document.forms['alipayment'].submit() } } } </script> ``` 在上面的代码中,mounted方法中通过axios发送请求获取后端返回支付宝支付form表单数据,并将其赋值给alipayForm属性,然后在模板中使用v-html指令将alipayForm属性的值渲染到页面上。同时,为了避免安全问题,submitAlipayForm方法中通过JavaScript代码手动触发form表单的提交操作。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值