因為項目需要,要在H5頁面中加入微信支付,所以便去嘗試,只想說真的很坑,尤其調試起來不方便
這是微信的官方API文檔 微信API
微信支付的准備工作
申請公眾號,申請開通支付,這個很簡單,自行百度
申請好之後 在微信公眾平台頁面的“微信支付”頁面中的“開發配置”Tab上配置“支付授權目錄”,“測試授權目錄”,“測試白名單”
在微信公眾平台頁面的“開發者中心”中找到“AppID(應用ID)”和“AppSecret(應用密鑰)”
在商戶平台中找到微信支付分配的商戶號,以及自己配置一個商戶支付密鑰
具體步驟
首先通過微信支付的api 獲得支付用的prepay_id,這裡需要用到上面提到的“AppID(應用ID)”,“AppSecret(應用密鑰)”,“微信支付分配的商戶號”,“商戶支付密鑰”以及其他的一些參數(具體參照微信開發文檔)用MD5加密成簽名(第一次簽名)獲得prepay_id後,用prepay_id和一些其他參數(具體參照微信開發文檔)用MD5加密成簽名(第二次簽名)然後在前端通過微信內置浏覽器提供的js API,WeixinJSBridge.invoke來調用微信支付的彈出頁面,這裡需要用到上面的第二次的簽名
具體代碼如下
$.get('/xxx',function(data){ if(data && data !== ""){ var _data = $.parseJSON(data)[0]; if(parseInt(_data.userAgent) < 5){ alert('您的微信版本低於5.0,無法使用微信支付!'); return false; } WeixinJSBridge.invoke('getBrandWCPayRequest',{ 'appId': _data.appId, 'timeStamp': _data.timeStamp, 'nonceStr': _data.nonceStr, 'package': 'prepay_id=' + _data.packageOne, 'signType': _data.signType, 'paySign': _data.paySign },function(res){ if(res.err_msg === 'get_brand_wcpay_request:ok'){ alert('支付成功,返回訂單列表!'); }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){ alert('取消支付!'); } }); } });
幾個容易失敗點需要注意
支付鏈接和在開發平台配置的鏈接不匹配
總共需要2次簽名,並且所需的參數是不同的,在JS中用到的簽名是第二次簽名,不要混淆參數傳遞的不能有錯
如果body中有中文需要轉義其中還有一些問題沒有完全解決,就是位置支付沒有一個判斷失效的時間,如果在微信支付的彈出層停留時間太久了,可能這個訂單在我們網站上已經失效了,可在微信支付中仍然能支付成功,如果有高人知道這個問題怎麼解決的,希望能告訴解決辦法