對于調用微信支付，微信提供了 js sdk 來幫助我們實現在微信里面調用微信支付的功能。下面是具體的實現步驟，
第一步、安裝實現微信支付所需的包
我們依然使用Omnipay Wechat Pay這個包來幫助我們實現微信支付，其實和之前的原生掃碼支付方法是類似的，只不過使用的接口不同罷了。下面是我開發的微信網站中使用的庫。其中前兩個不用說了，很明顯是微信支付所用的 Omnipay 庫，Wordpress Dispatcher 是一個?WordPress Router 系統，用來實現自定義 URL，Valitron 主要用來驗證用戶提交數據。
"require":?{ ????"omnipay/omnipay":?"~2.0", ????"lokielse/omnipay-wechatpay":?"^1.0", ????"thefold/wordpress-dispatcher":?"^1.0", ????"vlucas/valitron":?"^1.2", ????},
運行composer install命令安裝完成后，在主題或插件中引入自動加載文件。
require_once(?get_template_directory()?.?'/vendor/autoload.php'?);
前端實現：配置微信 JS SDK，并實現微信支付
這里的 jssdk.php 是微信官方提供的，用來實現為初始化微信 JS SDK 提供簽名包。在需要實現微信支付的頁面引入這個文件，然后初始化 JSSDK 類即可。
require_once(?get_template_directory()?.?'/inc/jssdk.php'?); $jssdk???????=?new?JSSDK(?"xxxxx",?"xxxxxxxxxxxxxxxx"?); $signPackage?=?$jssdk->GetSignPackage();
初始化微信 JS sdk, 調用微信支付方法實現微信支付
首先、確保在頁面的 head 因為了微信 JS SDK 的 JavaScript 文件：jweixin-1.0.0.js。根據上面獲取的 $signPackage，我們在下面代碼中完成了以下幾個操作。
使用 wx.config 初始化 js sdk使用 wx.ready 檢測 js sdk 是否初始化成功，如果初始化成功，我們就可以使用微信 js sdk 提供的接口進行操作了。點擊支付按鈕時，發送一個 Ajax 請求到服務器，獲取微信訂單，然后使用?wx.chooseWXPay 發起微信支付，就是我們在微信里面看到的彈出輸入微信密碼的界面。
jQuery(document).ready(function?($)?{ ???? ???//?配置?js?sdk ???wx.config({ ??????debug:?false, ??????appId:?'<?php echo $signPackage[ "appId" ];?>', ??????timestamp:?<?php echo $signPackage[ "timestamp" ];?>, ??????nonceStr:?'<?php echo $signPackage[ "nonceStr" ];?>', ??????signature:?'<?php echo $signPackage[ "signature" ];?>', ??????jsApiList:?['chooseWXPay'] ??????//?這里的?jsApiList?需要什么就填寫什么 ???}); ???//?一定要檢查?js?sdk?是否已經準備好了 ???wx.ready(function?()?{ ??????$("#topay").click(function?()?{ ?????????$.ajax({ ????????????url:?'/order/', ????????????type:?'POST', ????????????dataType:?'json', ????????????data:?$("#wepay").serialize(), ????????????success:?function?(order)?{ ???????????????var?params?=?{ ??????????????????'timestamp':?order.timeStamp, ??????????????????'nonceStr':?order.nonceStr, ??????????????????'package':?order.package, ??????????????????'signType':?order.signType, ??????????????????'paySign':?order.paySign???????????????}; ???????????????wx.chooseWXPay(params); ????????????}, ????????????error:?function?(order)?{ ???????????????c-alert(order.message); ????????????} ?????????}); ?????????return?false; ??????}); ???});});
支付窗口閃一下消失有以下幾種情況
在微信上測試微信支付的時候，經常會遇到微信支付窗口閃一下就消失了，看不到輸入支付密碼的界面，可能的原因有以下幾點，仔細檢查一下。
jssdk 沒有配置，檢查上面代碼中的 wx.config 和?wx.readyAjax 返回的數據有錯誤，檢查 Ajax 請求的返回數據安全域名設置錯誤，檢查在微信管理后臺中，是否把測試域名加入到了安全域名中
后端實現：驗證并發送訂單數據
后端實現很簡單，就是接收上面 Ajax 提交過來的數據，然后處理微信支付需要的 Json 數據，同時保存訂單到站點的數據庫中，供后續查詢和后面的通知回調中使用。
//?獲取微信支付網關的函數function?get_wechat_gateway()?{ ???$gateway?=?Omnipay::create(?'WechatPay_Js'?); ???$gateway->setAppId(?'?xxxxxxxx'?); ???$gateway->setMchId(?'xxxxxxxx'?); ???$gateway->setApiKey(?'xxxxxxxx'?);?//注意這里的?ApiKey?是我們在微信商戶后臺設置的一個32位的隨機字符串，和微信公眾號里面的?App?Secrit?不是一回事。 ???return?$gateway;}/** ?*?處理訂單信息,?跳轉到微信支付 ?*/new?Dispatch(?[ ???'wepay/order'?=>?function?(?$request?)?{ ??????//?檢查用戶提交的數據是否有錯，如果有錯誤，返回錯誤信息 ??????$v?=?new?Validator(?$_POST?); ??????$v->rule(?'required',?[?'count',?'buyer_name',?'buyer_phone',?'buyer_address'?]?); ??????if?(?!?$v->validate()?)?{ ?????????$msg?=?[ ????????????'success'?=>?'0', ????????????'message'?=>?'下單失敗,?請檢查所有必填項。', ?????????]; ?????????wp_send_json(?$msg?); ??????} ??????$user?=?wp_get_current_user(); ??????$req?=?Request::createFromGlobals(); ??????$pid?????=?$req->get(?'pid'?); ??????$count???=?$req->get(?'count'?); ??????$open_id?=?$req->cookies->get(?'open_id'?); ??????$prod??=?get_post(?$pid?); ??????$price?=?get_post_meta(?$pid,?'_prod_price',?true?); ??????$total_fee?=?$price?*?$count?*?100; ??????$tn????????=?date(?'YmdHis'?)?.?mt_rand(?1000,?9999?); ??????//?在實際開發過程中，我們需要把用戶提交的訂單數據保存到數據庫一份 ??????//?訂單參數 ??????$order?=?[ ?????????'body'?????????????=>?$prod->post_title', ?????????'out_trade_no'?????=>?$tn, ?????????'total_fee'????????=>?$total_fee, ?????????'spbill_create_ip'?=>?wizhi_get_real_ip(), ?????????'fee_type'?????????=>?'CNY', ?????????'open_id'??????????=>?$open_id, ??????]; ??????//?發送支付請求到微信并獲取返回信息 ??????$gateway?=?get_wechat_gateway(); ??????$gateway->setNotifyUrl(?'https://www.wpzhiku.com/order/return'?); ??????$response?=?$gateway->purchase(?$order?)->send(); ??????$wechat_return?=?$response->getJsOrderData(); ??????wp_send_json(?$wechat_return?); ???},]?);
接受微信支付成功通知，實現自動完成訂單或自動充值
支付完成后，微信會返回一個支付成功的通知到我們提供的通知 URL，我們可以根據返回的內容，進行自動完成訂單或者自動充值等操作。這里有兩點需要注意。
通知 URL 一定要能訪問，如果不能訪問，微信不會發送通知。要和支付URL在一個目錄下
微信官方提供的 SDK 和接口數據非常不規范，在使用的時候一定要代碼中的注意大小寫，出現了問題，仔細和微信官方提供的開發文檔相對照，如果你使用的語言或開發框架提供了微信開發所用到庫，建議直接使用這些庫進行開發，這些庫可以幫助我們繞過微信為我們挖下的各種大坑小坑，減少調試難度、加快開發速度。
更多wordpress相關技術文章，請訪問wordpress教程欄目進行學習！
