vue项目 支付宝 支付

vue项目 支付宝 支付

关于支付宝支付，调后端接口之后会返回一个form表单，我们只需要将这个form表单用JS动态创建至页面中调用即可；

• 后端返回的数据：

<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.page.pay&sign=E6bPCDpuDO392x%2BTXH7NrCPc177ruA4OsOHVzvVwhJgrfGp0khrByX18Kn8VztKaAXmXHyyrxTW0Zgwyp7Z9lzPUCIFwXk7JHWrXmJoQcB1yg1kspixRJ0%2BOjZPzyrrV0NGCbi5mTy%2BttYArIBZGAZYvFdrYm6YcEfr1%2FO53VJlfroVnVJw57v7jhsyPYtux209Hl3OBG8PIRvyTlubFACl5GOc10X5T1lWmZ0TtMjUEyIVKiQCjwhHrgnCsnMZGWE4nE334iXe2lkgLCZE0aNhaX%2FCqQVU6BKMFTHRjNzM7Bsc5pEN4LM4HsYO9nG8PPUbZKlzCIbWRFkLHprvxnQ%3D%3D&return_url=http%3A%2F%2Ff1713205z9.iask.in%2F%2Fapi%2FaliPay%2Freturn_url&notify_url=http%3A%2F%2Ff1713205z9.iask.in%2F%2Fapi%2FaliPay%2Fnotify_url&version=1.0&app_id=2021002112630300&sign_type=RSA2&timestamp=2020-12-02+18%3A12%3A50&alipay_sdk=alipay-sdk-java-4.8.10.ALL&format=json">
<input type="hidden" name="biz_content" value="{
     
     &quot;body&quot;:&quot;模拟电子技术&quot;,&quot;out_trade_no&quot;:&quot;fa68bf467fd1478d98fb277dc9f81429&quot;,&quot;passback_params&quot;:&quot;passback_params&quot;,&quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;,&quot;subject&quot;:&quot;模拟电子技术&quot;,&quot;total_amount&quot;:&quot;0.01&quot;}">
<input type="submit" value="立即支付" >
</form>

• 将数据放至页面并调用：

 getpay(){
    
    
         let data={
    
    
             orderSn:this.orderSn,
             totalAmount:this.orderPrice,
             body:this.goodsDetail,
             orderName:this.goodsName,
         }
          getPcPay(data).then(res=>{
    
    
            //res即为后端返回的form表单
            //js创建一个div将form表单添加上去
            const div = document.createElement('div')
            div.innerHTML = res;
            document.body.appendChild(div)
            //调用form表单
            document.forms[0].submit();
          })
     },

代码完成之后点击支付，即可自动跳转至支付宝支付页面进行支付！