vue h5手機網站支付寶支付 - 前端

前端這塊代碼不是很複雜，在網上找了一些案例，就是後端返回一個form，插入body中，而後執行submit喚起支付寶

<form id="alipaysubmit" name="alipaysubmit" action="https://mapi.alipay.com/gateway.do?_input_charset=utf-8" method="get">
    <input type="hidden" name="service" value="alipay.wap.create.direct.pay.by.user" />
    <input type="hidden" name="partner" value="合做商戶ID，須要跟支付寶申請" />
    <input type="hidden" name="_input_charset" value="utf-8" />
    <input type="hidden" name="sign_type" value="MD5" />
    <input type="hidden" name="sign" value="78ff1f0d498b6bc1302b9fcb96e25edf" />
    <input type="hidden" name="notify_url" value="http://127.0.0.1:8080/pay-front/aliPayResultNotify" />
    <input type="hidden" name="return_url" value="http://127.0.0.1:8080/Service/toReturn.action" />
    <input type="hidden" name="out_trade_no" value="00652016012716580911842412986916" />
    <input type="hidden" name="subject" value="1" />
    <input type="hidden" name="total_fee" value="0.01" />
    <input type="hidden" name="seller_id" value="合做商戶ID，須要跟支付寶申請" />
    <input type="hidden" name="payment_type" value="1" />
    <input type="hidden" name="body" value="20160127|10201601271658060548484552912431|ALIPAY-WAP|1" />
    <input type="hidden" name="exter_invoke_ip" value="112.97.57.54" />
</form>

 

插入body中

aliPay(res) {
    const form = res.data;
    deleteExisting('#alipay'); // 判斷以前是否插入過#alipay
    const div = document.createElement('div');
    div.id = 'alipay';
    div.innerHTML = form;
    document.body.appendChild(div);
    document.querySelector('#alipay').children[0].submit(); // 執行後會喚起支付寶
}