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(); // 执行后会唤起支付宝
}
原文地址:https://www.cnblogs.com/amang/p/9961586.html