移動端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();
}

至此，整個支付流程就完成了。

補充一下，細心的人應該發現了我上面只講到微信的回調地址，而沒有支付寶的回調地址。

支付寶的回調地址的配置需要和后端協調好，讓他在發起訂單的接口增加一個字段 returnUrl（名字你們自己協調），然后把回調地址傳給后台就可以了。

微信的回調地址配置，其實官網是有說明的：

 

 微信支付傳送門：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4

開發中遇到的問題：

官方給出的答復是：

 

版權聲明：本文為博主原創文章，轉載需注明出處。https://www.cnblogs.com/silent007/p/12878342.html

 

***********************************    END   ***********************************