公衆号支付(H5頁面支付流程)
在做H5頁面支付前期準備工作:
-
需要準備兩個域名(域名必須通過ICP備案)
例如: www.baidu.com(生産環境)
www.baidu.com(測試環境)
appId: “wx1231313131231123”, //公衆号ID
secret: “f759f131313131312313131312313121”, //公衆号開發密碼
公衆号背景進行相應配置
2. 登入微信支付商戶平台（pay.weixin.qq.com）–>産品中心–>開發配置。
3. 設定授權目錄(確定在該目錄下可以通路到支付界面，在通路界面需先下載下傳微信提供的.txt檔案，将其放到域名指定的伺服器上，保證可以通路。)
設定授權域名
開發JSAPI支付時，在統一下單接口中要求必傳使用者openid，而擷取openid則需要您在公衆平台設定擷取openid的域名，隻有被設定過的域名才是一個有效的擷取openid的域名，否則将擷取失敗。
- 配置擷取授權是的IP(此IP是公網可以通路的IP位址，用來接收微信平台傳回的access_token)
- 確定公衆号對微信開放平台進行綁定。
-
在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
公衆号H5支付流程 以上位址标紅字段是需要填寫公衆号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&在這裡插入圖檔描述" src="https://img-blog.csdnimg.cn/20200525113547902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAwMDgzNA==,size_16,color_FFFFFF,t_70" />
前端同學進行網頁支付代碼
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(‘支付失敗，請稍後重試或聯系客服部門尋求幫助。’);
}
});