移动端H5支付（微信和支付宝）

我们直接进入主题吧，先说功能：

1、用户通过我们的页面输入充值帐号和金额调起支付（微信或者支付宝），支付成功返回获取支付结果。

2、微信支付成功后重定向到指定页面（没有设置重定向地址的话，默认返回调起支付的页面，支付宝同理）。

3、支付宝支付成功后重定向到指定页面。

4、重定向地址带参数返回。

5、支付成功后，回到页面开始进行轮询，获取支付成功的结果后结束轮询。

下面是我的支付页面结构图：pay.html

至于调起支付的接口需要传什么参数，你们要和后台的哥们沟通好。

请求成功后，微信返回的是一个超链接，如图：

支付宝返回的是一个表单，如图：

这里就已经在后台生成订单号了，也就是已经存在该订单了，接下来是去支付，代码附上：

if ('选择微信支付') {
    // 微信返回的是超链接 https
    //  我这里使用redirect_url来让支付成功后重定向回指定页面，并且后面带了参数，参数为订单ID和用户ID和充值金额。
    let return_url = `${payChannelData.payInfo}&redirect_url=${returnAdreess}?userInfomation=${cpOrderId}|${userId}|${money}`;
    location.href = return_url;
} else if ('选择支付宝支付') {
    // 支付宝返回是个表单 <form>
    let divForm = document.getElementsByTagName('divform');
    if (divForm.length) {
    document.body.removeChild(divForm[0]);
    }
    const div = document.createElement('divform');
    div.innerHTML = payChannelData;
    document.body.appendChild(div);

    if (!payTools.isIOS) {
    //    ios手机可以直接调起支付，安卓需要执行以下代码。
    document.forms[0].setAttribute('target', '_blank'); // 新开窗口跳转
    }
    document.forms[0].submit();
}