說明
本文試圖說明的是在微信環(huán)境中、前端部分調(diào)起H5支付的場(chǎng)景歹撒，需要區(qū)別于一般H5瀏覽器中調(diào)起和純公眾號(hào)內(nèi)調(diào)起的場(chǎng)景。
前期準(zhǔn)備：公眾號(hào)支付開發(fā)步驟
文檔地址：微信內(nèi)H5調(diào)起支付
請(qǐng)自行區(qū)別于：H5支付
步驟
1. 開發(fā)之前：
參考資料：公眾號(hào)支付介紹
- 首先需要一個(gè)類型為服務(wù)號(hào)（政府或媒體訂閱號(hào)）并完成微信認(rèn)證的公眾號(hào)诊胞；
- 提交資料為這個(gè)公眾號(hào)申請(qǐng)一個(gè)商戶賬號(hào)栈妆，并通過審核；
- 用申請(qǐng)商戶賬號(hào)的微信登錄微信商戶平臺(tái)厢钧，
賬戶設(shè)置->API安全，依次下載安裝安全控件和操作證書嬉橙。
注意：每次安裝后需要重啟瀏覽器重新登錄早直。另外在Mac系統(tǒng)上，僅支持使用Safari市框，不能使用Chrome霞扬。 - 用申請(qǐng)商戶賬號(hào)的微信登錄微信商戶平臺(tái)，產(chǎn)品中心->我的產(chǎn)品枫振，開通“公眾號(hào)支付”功能喻圃。
- 請(qǐng)記錄公眾號(hào)的appId、appSecret粪滤，商戶賬號(hào)的mch_id（純數(shù)字）斧拍、API密鑰key。
2. 微信中的安全域名設(shè)置：
- 在微信公眾號(hào)中杖小，公眾號(hào)設(shè)置->功能設(shè)置->網(wǎng)頁授權(quán)域名肆汹，需要加入支付頁面的域名愚墓。格式類似：“wechat.meiyue.com”，不需要協(xié)議名昂勉，不需要斜杠結(jié)尾浪册，不需要二級(jí)目錄。
- 在商戶平臺(tái)中岗照，產(chǎn)品中心->開發(fā)配置->支付配置->公眾號(hào)支付->支付授權(quán)目錄村象，需要添加支付頁面的域名。格式類似：“http://wechat.meiyue.com/”攒至，需要選擇協(xié)議厚者，需要以斜杠結(jié)尾，不需要二級(jí)目錄嗓袱。這一設(shè)置更新后在10分鐘內(nèi)生效籍救。
3. 流程整理
-
為了獲得公眾號(hào)的授權(quán)，微信要求不能直接將網(wǎng)址發(fā)給用戶渠抹，而要發(fā)出一個(gè)經(jīng)過公眾號(hào)處理的網(wǎng)址蝙昙，而真實(shí)網(wǎng)址則作為redire_url發(fā)出。微信規(guī)定的網(wǎng)址為：
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${true_url}&response_type=code&scope=${'snsapi_userinfo'}&state=${STATE}#wechat_redirect`其中：
- true_url：支付頁面的實(shí)際地址梧却；
- scope：如果僅需要用戶的open_id奇颠，可以使用
snsapi_base靜默授權(quán)，否則使用snsapi_userinfo放航； - state：可選參數(shù)烈拒，可以帶到實(shí)際網(wǎng)頁中的參數(shù)，需要進(jìn)行URI轉(zhuǎn)碼广鳍。希望獲取
?order_id=123荆几，需要寫成state=${encodeURIComponent('order_id=123')}，實(shí)際頁面拿到的字符為：&state=order_id%3D123赊时，然后需要在頁面自行提取吨铸。
-
用戶點(diǎn)擊微信重定向網(wǎng)址后，經(jīng)過確認(rèn)授權(quán)或靜默授權(quán)祖秒，跳轉(zhuǎn)到實(shí)際支付頁面诞吱，同時(shí)獲取到公眾號(hào)提供的CODE。網(wǎng)址格式類似于：
'http://wechat.meiyue.com/meiyue/weChatPay.html?code=081OfePZ0VzkRZ15uNRZ0MRaPZ0OfePI&state=order_id%3D123' // `${true_url}?code=${CODE}&state=${STATE}` 一堆請(qǐng)求的流程說明：
在頁面中竭缝，需要用code請(qǐng)求用戶的open_id房维，再用open_id交給服務(wù)器發(fā)起訂單或查詢訂單，換取訂單信息prepay_id抬纸。
（實(shí)際操作中咙俩，因?yàn)閛pen_id請(qǐng)求prepay_id的行為只能由服務(wù)器發(fā)起，所以這里的處理是前端向服務(wù)器發(fā)送code松却，由服務(wù)器進(jìn)行請(qǐng)求暴浦，最后返回訂單信息溅话。）
參考資料：微信網(wǎng)頁授權(quán)
如果不需要用戶的具體信息（用戶名頭像什么的），到文檔第三步就OK了歌焦。頁面中的處理：weChatPay.html
如果不使用微信環(huán)境飞几，則需要在頁面中引入微信JS-SDK腳本，自行配置config独撇，然后才能使用微信提供的接口屑墨。
而在當(dāng)前場(chǎng)景中，微信瀏覽器中已經(jīng)注入了相關(guān)代碼纷铣，直接使用就好：
wechatPay.html中的示例代碼
// 后端提供的訂單信息：
let data = {...}
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": data.appid, //公眾號(hào)名稱卵史，由商戶傳入 ok
"timeStamp": data.timestamp, //時(shí)間戳，自1970年以來的秒數(shù) ok
"nonceStr": data.noncestr, //隨機(jī)串
"package": "prepay_id=" + data.prepayid,
"signType": "MD5", //微信簽名方式
"paySign": data.sign //微信簽名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：
//res.err_msg將在用戶支付成功后返回ok搜立，但并不保證它絕對(duì)可靠以躯。
console.log('支付成功！')
}
});
}
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else{
onBridgeReady();
}
遇到的問題：
1. 關(guān)于微信開發(fā)者工具
網(wǎng)頁跳轉(zhuǎn)可以使用微信開發(fā)者工具測(cè)試啄踊，但是最后的調(diào)起支付方法不能測(cè)忧设。控制臺(tái)報(bào)錯(cuò)：errMsg:"chooseWXPay:fail, the permission value is offline verifying"颠通，翻譯過來是不能離線授權(quán)址晕。這很正常，微信開發(fā)者工具沒有錢包顿锰。
2. 支付簽名錯(cuò)誤
需要檢查的地方有：
- 前后端使用的參數(shù)名大小寫是否一致谨垃？
公眾號(hào)支付中使用駝峰寫法（appId），而H5中使用小寫（appid）硼控。 - 使用的信息是否一致刘陶？
一個(gè)公眾號(hào)可以注冊(cè)多個(gè)商戶號(hào)，請(qǐng)檢查基本信息是否一致牢撼。 - 后端計(jì)算的簽名是否正確易核？
微信支付接口簽名校驗(yàn)工具
微信公眾平臺(tái)支付接口調(diào)試工具
3. 當(dāng)前頁面的URL未注冊(cè)
肯定是授權(quán)域名、安全域名什么的寫錯(cuò)了浪默，請(qǐng)返回上文中的“ 2. 微信中的安全域名設(shè)置”。當(dāng)然也有可能是配錯(cuò)了公眾號(hào)或商戶號(hào)缀匕。
