【weixi】微信支付---微信公衆號JSAPI支付

1、JSAPI支付

JSAPI支付是用戶在微信中打開商戶的H5頁面，商戶在H5頁面經過調用微信支付提供的JSAPI接口調起微信支付模塊完成支付。應用場景有： ◆ 用戶在微信公衆帳號內進入商家公衆號，打開某個主頁面，完成支付 ◆ 用戶的好友在朋友圈、聊天窗口等分享商家頁面鏈接，用戶點擊連接打開商家頁面，完成支付 ◆ 將商戶頁面轉換成二維碼，用戶掃描二維碼後在微信瀏覽器中打開頁面後完成支付

2、場景介紹

商戶已有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返回值做爲觸發商戶網頁跳轉的標誌，但商戶後臺應該只在收到微信後臺的支付成功回調通知後，才作真正的支付成功的處理。

 3、開發步驟

1.設置支付目錄

請確保實際支付時的請求目錄與後臺配置的目錄一致（如今已經支持配置根目錄，配置後有必定的生效時間，通常5分鐘內生效），不然將沒法成功喚起微信支付。

在微信商戶平臺（pay.weixin.qq.com）設置您的JSAPI支付支付目錄，設置路徑：商戶平臺-->產品中心-->開發配置，如圖所示。JSAPI支付在請求支付的時候會校驗請求來源是否有在商戶平臺作了配置，因此必須確保支付目錄已經正確的被配置，不然將驗證失敗，請求支付不成功。

圖微信JSAPI支付-支付目錄配置

2.設置受權域名

開發JSAPI支付時，在統一下單接口中要求必傳用戶openid，而獲取openid則須要您在公衆平臺設置獲取openid的域名，只有被設置過的域名纔是一個有效的獲取openid的域名，不然將獲取失敗。具體界面如圖所示：

圖爲微信網頁受權域名設置

4、微信內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(); }

 相關資料：

• https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1