相信程序猿們都開發(fā)過電商類的項目纵东，那就會有支付功能。
我聽說洒扎，微信有很多坑衰絮，我好慌......

一、設(shè)置支付目錄

請確保實際支付時的請求目錄與后臺配置的目錄一致（現(xiàn)在已經(jīng)支持配置根目錄胡诗，配置后有一定的生效時間淌友，一般5分鐘內(nèi)生效），否則將無法成功喚起微信支付震庭。

在微信商戶平臺（pay.weixin.qq.com）設(shè)置您的JSAPI支付支付目錄，設(shè)置路徑：商戶平臺-->產(chǎn)品中心-->開發(fā)配置二汛，如圖7.7所示拨拓。JSAPI支付在請求支付的時候會校驗請求來源是否有在商戶平臺做了配置，所以必須確保支付目錄已經(jīng)正確的被配置苫昌，否則將驗證失敗，請求支付不成功奥务。`

image.png

二袜硫、設(shè)置授權(quán)域名

開發(fā)JSAPI支付時，在統(tǒng)一下單接口中要求必傳用戶openid帚称，而獲取openid則需要您在公眾平臺設(shè)置獲取openid的域名秽澳，只有被設(shè)置過的域名才是一個有效的獲取openid的域名，否則將獲取失敗担神。具體界面如圖7.8所示：

image.png

三妄讯、微信內(nèi)H5調(diào)起支付

在微信瀏覽器里面打開H5網(wǎng)頁中執(zhí)行JS調(diào)起支付。接口輸入輸出數(shù)據(jù)格式為JSON躬窜。 注意：WeixinJSBridge內(nèi)置對象在其他瀏覽器中無效。 getBrandWCPayRequest參數(shù)以及返回值定義：

• 1荣挨、網(wǎng)頁端接口請求參數(shù)列表（參數(shù)需要重新進行簽名計算朴摊，參與簽名的參數(shù)為：appId、timeStamp、nonceStr寡壮、package、signType况既，參數(shù)區(qū)分大小寫。）

• 2箫爷、返回結(jié)果值說明

注：JS API的返回結(jié)果get_brand_wcpay_request:ok僅在用戶成功完成支付時返回翁都。由于前端交互復(fù)雜谅猾，get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以統(tǒng)一處理為用戶遇到錯誤或者主動放棄，不必細化區(qū)分坐搔。

示例代碼如下

// 在你需要的地方復(fù)制下面代碼
 // 這里需要的簽名等字段敬矩，前端開發(fā)者只需要調(diào)用后端指定的接口返回即可。
// 如果你全干弧岳，那也是OK的。 
// 你是大佬涧卵。
function onBridgeReady(){
 window.WeixinJSBridge.invoke(
   'getBrandWCPayRequest', {
     'appId': res.data.appId, // 公眾號名稱腹尖，由商戶傳入
     'timeStamp': res.data.timeStamp, // 時間戳，自1970年以來的秒數(shù)
     'nonceStr': res.data.nonceStr, // 隨機串
     'package': res.data.package,
     'signType': res.data.signType, // 微信簽名方式：
     'paySign': res.data.paySign // 微信簽名
   },
   function (res) {
     alert(JSON.stringify(res))
     if (res.err_msg === 'get_brand_wcpay_request:ok') {
       // 使用以上方式判斷前端返回,微信團隊鄭重提示：
       // res.err_msg將在用戶支付成功后返回ok乐设，但并不保證它絕對可靠。
    }
 })
}
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();
}

當(dāng)你出現(xiàn)下圖這種方法巫俺，說明你的授權(quán)域名配置有誤肿男，記住，區(qū)分 http 和 https 的舶沛，如果配置的是 http請使用 http訪問嘹承，https即是一樣叹卷。

image.png

有問題骤竹，咱一起分享討論。