快捷導(dǎo)航

微信支付 JS API支付接口詳解

更新時間：2016年07月11日 17:50:21 投稿：lqh

本文是對微信支付 JS API支付接口介紹,并附代碼實例,在開發(fā)過程中具有參考價值,希望能幫助到需要的朋友

一、JS API支付接口（getBrandWCPayRequest）

微信JS API只能在微信內(nèi)置瀏覽器中使用，其他瀏覽器調(diào)用無效。微信提供getBrandWCPayRequest接口供商戶前端網(wǎng)頁調(diào)用，調(diào)用之前微信會鑒定商戶支付權(quán)限，若商戶具有調(diào)起支付的權(quán)限，則將開始支付流程。這里主要介紹支付前的接口調(diào)用規(guī)則，支付狀態(tài)消息通知機制請參加下文。接口需要注意：所有傳入?yún)?shù)都是字符串類型！

getBrandWCPayRequest參數(shù)如下圖所示。

參數(shù)	名稱	必填	格式	說明
appId	公眾號id	是	字符串類型	商戶注冊具有支付權(quán)限的公眾號成功后即可獲得；
timeStamp	時間戳	是	字符串類型，32個字節(jié)以下	商戶生成，從1970年1月1日00:00:00至今的秒數(shù)，即當(dāng)前的時間，且最終需要轉(zhuǎn)換為字符串形式；
nonceStr	隨機字符串	是	字符串類型，32個字節(jié)以下	商戶生成的隨機字符串；
package	訂單詳情擴展字符串	是	字符串類型，4096個字節(jié)以下	商戶將訂單信息組成該字符串，具體組成方案參見接口使用說明中package組包幫劣；由商戶按照規(guī)范拼接后傳入；
signType	簽名方式	是	字符串類型，參數(shù)取值"SHA1"	按照文檔中所示填入，目前僅支持SHA1；
paySign	簽名	是	字符串類型	商戶將接口列表中的參數(shù)按照指定方式迚行簽名，簽名方式使用signType中標(biāo)示的簽名方式，具體簽名方案參見接口使用說明中簽名幫劣；由商戶按照規(guī)范簽名后傳入；

getBrandWCPayRequest返回值如下表所示。

返回值	說明
err_msg	get_brand_wcpay_request:ok 支付成功 get_brand_wcpay_request:cancel 支付過程中用戶取消 get_brand_wcpay_request:fail 支付失敗

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

二、JS API支付實現(xiàn)

下面代碼是微信官方提供的JS API支付demo

<?php
include_once("WxPayHelper.php");
$commonUtil = new CommonUtil();
$wxPayHelper = new WxPayHelper();
$wxPayHelper->setParameter("bank_type", "WX");
$wxPayHelper->setParameter("body", "test");
$wxPayHelper->setParameter("partner", "1900000109");
$wxPayHelper->setParameter("out_trade_no", $commonUtil->create_noncestr());
$wxPayHelper->setParameter("total_fee", "1");
$wxPayHelper->setParameter("fee_type", "1");
$wxPayHelper->setParameter("notify_url", "htttp://www.baidu.com");
$wxPayHelper->setParameter("spbill_create_ip", "127.0.0.1");
$wxPayHelper->setParameter("input_charset", "GBK");
?>

<html>
<script language="javascript">
function callpay()
{
 WeixinJSBridge.invoke('getBrandWCPayRequest',<?php echo $wxPayHelper->create_biz_package(); ?>,function(res){
 WeixinJSBridge.log(res.err_msg);
 alert(res.err_code+res.err_desc+res.err_msg);
 });
}
</script>
<body>
<button type="button" onclick="callpay()">wx pay test</button>
</body>
</html>

將其中的微信支付參數(shù)修改成自己所申請得到的，然后將網(wǎng)頁上傳到微信支付目錄下，給測試賬號回復(fù)該網(wǎng)頁地址。用戶就可以實現(xiàn)一次JS API支付。

三、效果演示

下面是官方DEMO修改后，發(fā)起支付的頁面圖。