前言
最近公司產品在做微信支付接入，有幸接觸到微信支付開發(fā)這一塊兒的任務，在整個支付接入過程中積累了一些經驗（日常爬坑），就此和小伙伴們分享一下！（主要是前端）
流程
業(yè)務流程：
微信在支付頁面輸入金額，點擊支付按鈕，后臺處理處理數據并獲取到預支付ID（prepay_id），返回到前端的頁面上。頁面上通過js_sdk喚起微信支付的頁面，彈出輸入密碼頁面，用戶輸入密碼后，由微信展示支付成功頁面（微信自己實現），跳轉到我們自己定義的頁面，展示支付結果。
開發(fā)流程：
獲取用戶授權
在生成預支付id的過程中需要獲取用戶授權，并且拿到用戶的openid。可以直接參考官方文檔：
https://open.weixin.qq.com/cgibin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN引入JSSDK
在需要調用微信支付功能的頁面引入的jssdk，直接放在HTML的head里面。
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>H5喚起微信支付功能
使用微信jssdk中的wx.config配置方法注冊支付功能
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: json.appid._cdata, // 必填，公眾號的唯一標識
timestamp: timestamp, // 必填，生成簽名的時間戳
nonceStr: json.nonce_str._cdata, // 必填，生成簽名的隨機串
signature: Sign(arr1, 'SHA1'),// 必填，調用js簽名，
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，這里只寫支付的
});
- 在使用wx.choosePay喚起支付
wx.chooseWXPay({
timestamp: timestamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺生成簽名使用的timeStamp字段名需大寫其中的S字符
nonceStr: json.nonce_str._cdata, // 支付簽名隨機串，不長于 32 位
package: "prepay_id=" + json.prepay_id._cdata, // 統(tǒng)一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）
signType: "MD5", // 簽名方式，默認為′SHA1′，使用新版支付需傳入′MD5′
paySign: Sign(arr2, 'MD5'), // 支付簽名
success: function (res) {
},
cancel: function (res) {
//alert(′取消支付′);
}
});
3.支付成功后，處理回調URL
官方解釋：
支付完成后，微信會把相關支付和用戶信息發(fā)送到商戶設定的通知URL，驗證簽名，并回應微信。對后臺通知交互時，如果微信收到商戶的應答不是成功或超時，微信認為通知失敗，微信會通過一定的策略（如30分鐘共8次）定期重新發(fā)起通知，盡可能提高通知的成功率，但微信不保證通知最終能成功。
主要是3步：
- 解析傳過來的流信息，通過重新簽名的方式驗證流中包含的信息的正確性。就是判斷這個信息到底是不是微信發(fā)的。
- return_code和result_code都是SUCCESS的話，處理商戶自己的業(yè)務邏輯。就是訂單的支付狀態(tài)啊等一些信息。
- 告訴微信，我收到你的返回值了。不用在發(fā)了。
注意事項
獲取預支付id的時候如果前后端是分離的，那么一定要都統(tǒng)一使用MD5簽名，因為在生成預支付ID的時候可以使用MD5或者HMACSHA256，但是但是但是，新版支付中，在前端喚起支付的時候的簽名只能使用MD5簽名，當后臺使用HMACSHA256的時候就會提示驗簽出錯，如果你和后臺人員沒有事先商量過，那你很可能調試很久都不會發(fā)現這個問題。
因為微信獲取授權,拿到（openid），是通過URL重定向拿到的，所以當你重定向到當前頁面會造成頁面的不斷刷新，這個時候你需要判斷用戶是否是第一次進入這個頁面，如果是重定向到當前頁面，就不要再跳轉了。我們使用的方法是利用cookie來做判斷。
if(document.cookie.indexOf("a=one")==-1){
let t=new Date(new Date().getTime()+1000*5);
document.cookie="a=one; expires="+t.toUTCString();
window.location.href='//獲取用戶授權，拿到openid的鏈接'
}else{
let t=new Date(new Date().getTime()+1000);
document.cookie="a=two; expires="+t.toUTCString();
}
- 關于簽名，利用jssdk喚起微信支付功能需要有兩次簽名，算上后端獲取預支付ID的過程中也有一次簽名，這就是3次簽名。第一次簽名是在wx.config中的signature,此處使用的是SHA1簽名，生成預支付ID的sign和喚起支付功能的paySign使用的是MD5簽名。在wx.choosePay中的簽名的參數也有值得注意的一些地方，主要是參數的大小寫。
signature中參與簽名的字段
const arr1 = [
'noncestr='+ json.nonce_str._cdata,
'jsapi_ticket='+ json.wx_jsapi_ticket._cdata,
'timestamp='+ timestamp,
'url=授權目錄 '
]
paySign中參數簽名的字段
const arr2 = [
'nonceStr='+json.nonce_str._cdata,
'package=prepay_id='+json.prepay_id._cdata,
'signType=MD5',
'appId='+json.appid._cdata,
'timeStamp='+timestamp
]
結語
微信支付的接入過程中，最具參考價值的就是官方文檔，一定要先對文檔的內容有一個清晰的了解（就因為微信的文檔會讓人非常的抓毛，才會需要更加仔細的了解），還有在前后端一起開發(fā)的過程中，一定要多溝通，就如同上面的簽名方式一樣，如果沒有事先商量，喚起支付的時候就很容易失敗，然后自己的參數又是完全正確的，簡直無從下手！團隊開發(fā)一定要學會團隊合作，這樣才能事半功倍，不然只是徒增麻煩！
【海說軟件接受各種技術咨詢及開發(fā)業(yè)務】
END
