歡迎關注前端早茶，與廣東靚仔攜手共同進階
前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~
最近有個新的需求，H5實現聚合支付功能。頁面在微信、支付寶以及雲閃付App內實現掃碼支付，大體步驟如下。
根據userAgent區分瀏覽器，決定走哪個回調。
核心點
一、獲取code
1.雲閃付
let redirectUrl = 'https:******',//頁面回調地址 // 銀聯回調到這個地址，code會拼接在這個地址后面，字段名為userAuthCode,生產上回調地址必須是經過銀聯簽約的認證網站，普通的網址會從雲閃付的服務器跳出 window.location.href = 'https://qr.95516.com/qrcGtwWeb-web/api/userAuth?version=1.0.0&redirectUrl=' + encodeURIComponent(redirectUrl )
2.支付寶
文檔地址
（1）登錄支付寶平台申請應用
（2）配置開發設置，添加獲取會員信息功能
詳細說明文檔地址
//參數說明 app_id：應用的appId； scope:授權類型；redirect_uri：授權回調地址;state:自定義參數 window.location.href = ‘https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=APPID&scope=SCOPE&redirect_uri=ENCODED_URL&state=STATE’
3.微信
登錄微信公眾平台服務號，配置授權域名
參考微信開放文檔
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect'
二、根據code獲取用戶標識userId
調用后台會封裝好接口，上送上一步獲取到的code換取userId
三、支付
1.雲閃付下單支付
//下單流程成功后后台會返回redirectUrl ,直接跳轉支付即可 window.location.href = redirectUrl
2.支付寶支付參考文檔
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <script> ap.tradePay({ tradeNO: '201802282100100427058809844' }, function(res){ ap.alert(res.resultCode); //支付完成的邏輯 }); </script>
3.微信支付參考文檔
WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":"wx2421b1c4370ec43b", //公眾號ID，由商戶傳入 "timeStamp":"1395712654", //時間戳，自1970年以來的秒數 "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5", //微信簽名方式： "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ){ // 使用以上方式判斷前端返回,微信團隊鄭重提示： //res.err_msg將在用戶支付成功
具體實現
支付寶
一、通過授權獲取auth_code
1、通過CDN方式引入支付寶jsapi
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
2、通過getAuthCodeAPI根據主動授權或靜默授權獲得auth_code
ap.getAuthCode({ scopes: ['auth_user'], // 主動授權：auth_user，靜默授權：auth_base。或者其它scope。如需同時獲取用戶多項授權，可在 scopes 中傳入多個 scope 值。 success: (res) => { res.authCode }, });
3、獲得auth_code返回給后端換取 access_token、user_id
二、生成tradeNO
根據user_id，二維碼id和金額返回給后端，后端會生成一個 tradeNO（支付寶交易號）
注：支付寶H5開發文檔給出兩種調起收銀台的支付方式，我這里用的是使用支付寶交易號進行調起，
詳細方法請前往(https://myjsapi.alipay.com/jsapi/native/trade-pay.html)
三、根據tradeNO調起支付寶收銀台
ap.tradePay( { tradeNO: JSON.parse(data.expend.pay_info).tradeNO }, (res) => { // ap.alert(res.resultCode); if (res.resultCode == 9000) { // 支付成功 } else if (res.resultCode == 8000 || res.resultCode == 6001) { // 正在處理中 || 取消 } else { // 支付失敗 } } );
微信
一、通過拼接地址重定向的方式授權獲取code
1.拼接地址參數：
redirect_uri：重定向地址。（注：重定向地址需要使用 urlEncode 對鏈接進行處理）
appId：公眾號的唯一標識。
scope：授權方式。（注：snsapi_base （靜默授權），snsapi_userinfo （彈出授權頁面））
response_type：返回類型，請填寫code。（寫死即可）
#wechat_redirect：無論直接打開還是做頁面302重定向時候，必須帶此參數。
2.拼接列子：
如果靜默授權，頁面將跳轉至 redirect_uri/?code=CODE&state=STATE
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=STATE&connect_redirect=1#wechat_redirect`; window.location.replace(url);
3.截取code值
二、把code值傳給后台，后台返回用戶userId
三、使用JSAPI 調起收銀台
WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId": "wx2421b1c4370ec43b",
"timeStamp": "1395712654",
"nonceStr": "e61463f8efa94090b1f366cccfbbb444",
"package": "prepay_id=up_wx21201855730335ac86f8c43d1889123400",
"signType": "RSA",
"paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==" //微信簽名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判斷前端返回,微信團隊鄭重提示：
//res.err_msg將在用戶支付成功后返回ok，但並不保證它絕對可靠。
}
});
}
在微信瀏覽器中可以直接調用WeixinJSBridge.invoke API