支付宝扫码支付（pc网站端）

前端在订单列表选择一条数据，去支付，调用后台封装好的支付宝接口，该接口将会返回一个form表单，该表单包括两个input，一个是传给支付宝的订单信息，一个是submit的提交按钮
前端需要做的就是在当前页面，把表单内容放入该页代码中，然后提交该表单，提交后该窗口会跳转到支付宝扫码页面，然后手机端扫码完成支付，完成后，后台重定向回原支付页面，

1.返回的form表单类似如下：

<form name="punchout_form" method="post" action="https://openapi.alipaydev.com/gateway.do?charset=utf8&method=alipay.trade.page.pay&sign=fcN7xD5kl350O9R4Ft8Zt%BYoKQCFPDqB3A3wPV5BjMkX2g&return_url=333&notify_url=333&version=1.0&app_id=2016100100642161&sign_type=RSA&timestamp=2019-07-04+16%3A70%3A54&alipay_sdk=alipay-sdk-java-3.4.49.ALL&format=json">↵
  <input type="hidden" name="biz_content" value="{&quot;out_trade_no&quot;:&quot;52cd1528d227f0b9&quot;,&quot;subject&quot;:&quot;5494&quot;,&quot;total_amount&quot;:&quot;1&quot;,&quot;body&quot;:&quot;1&quot;,&quot;timeout_express&quot;:&quot;100m&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;}">↵
  <input type="submit" value="立即支付" style="display:none" >↵
</form>↵
<script>document.forms[0].submit();</script>

image.png

2.前端处理：把这串form 表单字符串添加到当前页面中，并且执行这个表单的submit() 方法，然后会自动跳转到支付宝扫码支付页面

pay(obj).then((res)=>{
              if(res.code=="200"){
                  //在payForm的块中，加入后台返回的表单数据，
                  const div=document.getElementById('payForm')
                  div.innerHTML=res.data; // 接口返回的form 表单字符串
                  document.forms[0].target = " _blank";//在新页面弹出支付宝页面
                  //document.forms[0].acceptCharset='GBK';//如果后台返回form的charset=GBK，需要做此修改
                  document.forms[0].submit();
                  //当前页支付提示框显示（此处应有成功与遇到问题两个选项按钮）
                  this.payTip=true
              }else{
                  this.$alert("错误："+res.msg,"提示",{
                      confirmButtonText:'确定'
                  });
              }
})

3.注意点

3-1 注意表单返回的action中charset的格式，如果此处charset=GBK，那么前端form表单提交前要设置document.forms[0].acceptCharset='GBK';，否则将会报错

image.png

3-2如果想在当前窗口弹出支付宝扫码页面，代码如下

  const div=document.createElement('div');
  div.innerHTML=res.data; // 接口返回的form 表单字符串
  document.body.appendChild(div);
  document.forms[0].submit();