電腦端支付寶支付 -前端獲取支付寶返回的form 以及submit 調用支付掃碼頁面

前端調取支付寶支付接口（後臺進行封裝，沒有直接調取支付寶接口），調用返回的數據中，將會有一串的form表單數據返回，咱們須要將此表單在當前調用頁面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>

 

實例代碼：

//支付寶支付
        async aliPay(orderCode,phone,price){
               var resp=await aliPay(orderCode,phone,price);
               if(resp.msg=="SUCCESS"){
                   const div=document.createElement('divform');
                   div.innerHTML=resp.data;
                   document.body.appendChild(div);
                   document.forms[0].acceptCharset='GBK';//保持與支付寶默認編碼格式一致，若是不一致將會出現：調試錯誤，請回到請求來源地，從新發起請求，錯誤代碼 invalid-signature 錯誤緣由: 驗簽出錯，建議檢查簽名字符串或簽名私鑰與應用公鑰是否匹配

                   document.forms[0].submit();
               }else{
                   this.$alert("錯誤："+resp.data,"提示",{
                       confirmButtonText:'肯定'
                   });
               }
           },

 * 舒適提示：在form submit 前，必須設置 acceptCharset='GBK' ，此處不必定是要GBK ,能夠是UTF-8 ,前提是支付寶返回的action 必須是UTF-8  ,需保持一致 

第一次接觸支付寶電腦端掃描支付，在這個編碼格式上花了我幾個小時的時間，找到問題後，真的以爲很是無語。。。。

報錯誤截圖：