公衆號H5支付流程

公衆號支付(H5頁面支付流程)
在做H5頁面支付前期準備工作:

1. 需要準備兩個域名(域名必須通過ICP備案)
   例如: www.baidu.com(生產環境)
   www.baidu.com(測試環境)
   appId: “wx1231313131231123”, //公衆號ID
   secret: “f759f131313131312313131312313121”, //公衆號開發密碼

公衆號後臺進行相應配置
2. 登錄微信支付商戶平臺（pay.weixin.qq.com）–>產品中心–>開發配置。
3. 設置授權目錄(確保在該目錄下可以訪問到支付界面，在訪問界面需先下載微信提供的.txt文件，將其放到域名指定的服務器上，保證可以訪問。)

設置授權域名
開發JSAPI支付時，在統一下單接口中要求必傳用戶openid，而獲取openid則需要您在公衆平臺設置獲取openid的域名，只有被設置過的域名纔是一個有效的獲取openid的域名，否則將獲取失敗。

4. 配置獲取授權是的IP(此IP是公網可以訪問的IP地址，用來接收微信平臺返回的access_token)
5. 確保公衆號對微信開放平臺進行綁定。
6. 在H5界面進行獲取授權操作。
   在獲取授權分四步:
   第一步：用戶同意授權，獲取code
   (1) 在確保微信公衆賬號擁有授權作用域（scope參數）的權限的前提下（服務號獲得高級接口後，默認擁有scope參數中的snsapi_base和snsapi_userinfo），引導關注者打開如下頁面：
   (2) https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redire
   
   以上地址標紅字段是需要填寫公衆號ID以及獲取授權之後要跳轉到界面
   Appid：公衆號ID
   Redirect_uri：前端需要通過encodeURIComponent（Url）進行編碼

通過以上操作會獲取到Code
通過接口將code傳給後臺獲取用戶信息並進行展示。

第二步：通過code換取網頁授權access_token
後臺同學通過傳過來的code獲取到access_token oppenid 獲取用戶信息
通過code換取網頁授權access_token

獲取code後，請求以下鏈接獲取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

第三步：拉取用戶信息(需scope爲 snsapi_userinfo)
如果網頁授權作用域爲snsapi_userinfo，則此時開發者可以通過access_token和openid拉取用戶信息了。
請求方法
http：GET（請使用https協議） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

前端同學進行網頁支付代碼
window.WeixinJSBridge.invoke(
‘getBrandWCPayRequest’, {
“appId”: “wx4c1bd0dabeb65e97”, //公衆號名稱，由商戶傳入
“timeStamp”: res.data.payment.timeStamp, //時間戳，自1970年以來的秒數
“nonceStr”: res.data.payment.nonceStr, //隨機串
“package”: res.data.payment.prepayId,
“signType”: res.data.payment.signType, //微信簽名方式：
“paySign”: res.data.payment.paySign //微信簽名
},
function (resBody) {
if (resBody.err_msg == “get_brand_wcpay_request:ok”) {
that.paymentEnd()
that.setState({
isDisplay:true
})
// 使用以上方式判斷前端返回,微信團隊鄭重提示：
//res.err_msg將在用戶支付成功後返回ok，但並不保證它絕對可靠。
}else if(resBody.err_msg ==“get_brand_wcpay_request:fail”){
alert(‘支付失敗，請稍後重試或聯繫客服部門尋求幫助。’);
}
});