由於微信支付接口更新，本文檔已過期，請查看新版微信支付JS API支付教程。地址 http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html
本文介紹如何使用JS API支付接口完成微信支付。
一、JS API支付接口（getBrandWCPayRequest）
微信JS API只能在微信內置瀏覽器中使用，其他瀏覽器調用無效。微信提供getBrandWCPayRequest接口供商戶前端網頁調用，調用之前微信會鑒定商戶支付權限，若商戶具有調起支付的權限，則將開始支付流程。這里主要介紹支付前的接口調用規則，支付狀態消息通知機制請參加下文。接口需要注意：所有傳入參數都是字符串類型！
getBrandWCPayRequest參數如表6-5所示。
| 參數 |
名稱 |
必填 |
格式 |
說明 |
| appId |
公眾號id |
是 |
字符串類型 |
商戶注冊具有支付權限的公眾號成功后即可獲得； |
| timeStamp |
時間戳 |
是 |
字符串類型，32個字節以下 |
商戶生成，從1970年1月1日00:00:00至今的秒數，即當前的時間，且最終需要轉換為字符串形式； |
| nonceStr |
隨機字符串 |
是 |
字符串類型，32個字節以下 |
商戶生成的隨機字符串； |
| package |
訂單詳情擴展字符串 |
是 |
字符串類型，4096個字節以下 |
商戶將訂單信息組成該字符串，具體組成方案參見接口使用說明中package組包幫劣；由商戶按照規范拼接后傳入； |
| signType |
簽名方式 |
是 |
字符串類型，參數取值"SHA1" |
按照文檔中所示填入，目前僅支持SHA1； |
| paySign |
簽名 |
是 |
字符串類型 |
商戶將接口列表中的參數按照指定方式迚行簽名，簽名方式使用signType中標示的簽名方式，具體簽名方案參見接口使用說明中簽名幫劣；由商戶按照規范簽名后傳入； |
表6-5 getBrandWCPayRequest參數
getBrandWCPayRequest返回值如表6-6所示。
| 返回值 |
說明 |
| err_msg |
get_brand_wcpay_request:ok 支付成功 |
表6-6 getBrandWCPayRequest返回值
JS API的返回結果 get_brand_wcpay_request:ok 僅在用戶成功完成支付時返回。由於前端交互復雜，get_brand_wcpay_request:cancel 或者 get_brand_wcpay_request:fail 可以統一處理為用戶遇到錯誤或者主動放棄，不必細化區分。
二、JS API支付實現
下面代碼是微信官方提供的JS API支付demo
1 <?php 2 include_once("WxPayHelper.php"); 3 4 5 $commonUtil = new CommonUtil(); 6 $wxPayHelper = new WxPayHelper(); 7 8 9 $wxPayHelper->setParameter("bank_type", "WX"); 10 $wxPayHelper->setParameter("body", "test"); 11 $wxPayHelper->setParameter("partner", "1900000109"); 12 $wxPayHelper->setParameter("out_trade_no", $commonUtil->create_noncestr()); 13 $wxPayHelper->setParameter("total_fee", "1"); 14 $wxPayHelper->setParameter("fee_type", "1"); 15 $wxPayHelper->setParameter("notify_url", "htttp://www.baidu.com"); 16 $wxPayHelper->setParameter("spbill_create_ip", "127.0.0.1"); 17 $wxPayHelper->setParameter("input_charset", "GBK"); 18 19 20 ?> 21 <html> 22 <script language="javascript"> 23 function callpay() 24 { 25 WeixinJSBridge.invoke('getBrandWCPayRequest',<?php echo $wxPayHelper->create_biz_package(); ?>,function(res){ 26 WeixinJSBridge.log(res.err_msg); 27 alert(res.err_code+res.err_desc+res.err_msg); 28 }); 29 } 30 </script> 31 <body> 32 <button type="button" onclick="callpay()">wx pay test</button> 33 </body> 34 </html>
將其中的微信支付參數修改成自己所申請得到的，然后將網頁上傳到微信支付目錄下，給測試賬號回復該網頁地址。用戶就可以實現一次JS API支付。
三、效果演示
下面是官方DEMO修改后，發起支付的頁面圖。
確認交易
輸入支付密碼
交易成功
