一、JSAPI支付
JSAPI支付是用戶在微信中打開商戶的H5頁面，商戶在H5頁面通過調用微信支付提供的JSAPI接口調起微信支付模塊完成支付。應用場景有：
◆ 用戶在微信公眾賬號內進入商家公眾號，打開某個主頁面，完成支付
◆ 用戶的好友在朋友圈、聊天窗口等分享商家頁面連接，用戶點擊鏈接打開商家頁面，完成支付
◆ 將商戶頁面轉換成二維碼，用戶掃描二維碼后在微信瀏覽器中打開頁面后完成支付
二、場景介紹
商戶已有H5商城網站，用戶通過消息或掃描二維碼在微信內打開網頁時，可以調用微信支付完成下單購買的流程。
步驟（1）：如圖1，商戶下發圖文消息或者通過自定義菜單吸引用戶點擊進入商戶網頁。
步驟（2）：如圖2，進入商戶網頁，用戶選擇購買，完成選購流程。
 圖1 商戶網頁下單 |
 圖2 請求微信支付 |
步驟（3）：如圖3，調起微信支付控件，用戶開始輸入支付密碼。
步驟（4）：如圖4，密碼驗證通過，支付成功。商戶后台得到支付成功的通知。
 圖3 用戶確認支付，輸入密碼 |
 圖4 用戶支付成功提示 |
步驟（5）：如圖5，返回商戶頁面，顯示購買成功。該頁面由商戶自定義。
步驟（6）：如圖6，微信支付公眾號下發支付憑證。
步驟（7）：商戶公眾號下發消息，提示發貨成功。該步驟可選。
 圖5 返回商戶頁面 |
 圖6 用戶收到微信通知 |
注意：商戶也可以把商品網頁的鏈接生成二維碼，用戶掃一掃打開后即可完成購買支付。
交互細節：
以下是支付場景的交互細節，請認真閱讀，設計商戶頁面的邏輯：
（1）用戶打開商戶網頁選購商品，發起支付，在網頁通過JavaScript調用getBrandWCPayRequest接口，發起微信支付請求，用戶進入支付流程。
（2）用戶成功支付點擊完成按鈕后，商戶的前端會收到JavaScript的返回值。商戶可直接跳轉到支付成功的靜態頁面進行展示。
（3）商戶后台收到來自微信開放平台的支付成功回調通知，標志該筆訂單支付成功。
注：（2）和（3）的觸發不保證遵循嚴格的時序。JS API返回值作為觸發商戶網頁跳轉的標志，但商戶后台應該只在收到微信后台的支付成功回調通知后，才做真正的支付成功的處理。
三、開發步驟
1.設置支付目錄
請確保實際支付時的請求目錄與后台配置的目錄一致（現在已經支持配置根目錄，配置后有一定的生效時間，一般5分鍾內生效），否則將無法成功喚起微信支付。
在微信商戶平台（pay.weixin.qq.com）設置您的JSAPI支付支付目錄，設置路徑：商戶平台-->產品中心-->開發配置，如圖所示。JSAPI支付在請求支付的時候會校驗請求來源是否有在商戶平台做了配置，所以必須確保支付目錄已經正確的被配置，否則將驗證失敗，請求支付不成功。
圖微信JSAPI支付-支付目錄配置
2.設置授權域名
開發JSAPI支付時，在統一下單接口中要求必傳用戶openid，而獲取openid則需要您在公眾平台設置獲取openid的域名，只有被設置過的域名才是一個有效的獲取openid的域名，否則將獲取失敗。具體界面如圖所示：
圖為微信網頁授權域名設置
四、微信內H5調起支付
在微信瀏覽器里面打開H5網頁中執行JS調起支付。接口輸入輸出數據格式為JSON。
注意：WeixinJSBridge內置對象在其他瀏覽器中無效。
getBrandWCPayRequest參數以及返回值定義：
1.
網頁端接口請求參數列表（參數需要重新進行簽名計算，參與簽名的參數為：appId、timeStamp、nonceStr、package、signType，參數區分大小寫。）
2.返回結果值說明
注：
JSAPI的返回結果get_brand_wcpay_request:ok僅在用戶成功完成支付時返回。
get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以統一處理為用戶遇到錯誤或者主動放棄，不必細化區分。
3.代碼范例
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":"wx2421b1c4370ec43b", //公眾號名稱，由商戶傳入 "timeStamp":"1395712654", //時間戳，自1970年以來的秒數 "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5", //微信簽名方式： "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }, function(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(); }