這次總結一下用戶在微信內打開網頁時，可以調用微信支付完成下單功能的模塊開發，也就是在微信內的H5頁面通過jsApi接口實現支付功能。當然了，微信官網上的微信支付開發文檔也講解的很詳細，並且有實現代碼可供參考，有的朋友直接看文檔就可以自己實現此支付接口的開發了。
一、前言
為何我還寫一篇微信支付接口的博文呢？第一，我們必須知道，所謂的工作經驗很多都是靠總結出來的，你只有總結了更多知識，積累了更多經驗，你才能在該行業中脫穎而出，我個人覺得如今的招聘，很多都需要工作經驗（1年、3年、5年....），其實，工作時間的長久不能衡量一個人技術水平的高低，有的人一年的工作經驗能拿3年工作經驗的程序猿的工資，有的3年工作經驗的卻有可能比別人只有一年工作經驗的還低，所以說，總結才能讓自己的知識體系，經驗深度更牛逼更穩固（雖然寫一篇博文挺花費時間的）；第二，寫博文分享給大家還是挺有成就感的，首先是能讓新手從我分享的博文中能學到東西，並且能快速將博文所講解的技術運用到實際中來，所以我寫的博文基本上能讓新人快速讀懂並且容易理解，另外，技術大神的話，看到博文有講解的不對之處，還可以指出，並且可以交流，何樂而不為呢，我們需要的就是分享和交流。
扯遠了，直接進入該主題的詳解。
現在的微信支付方式有N種，看下圖，有刷卡支付、公眾號支付、掃碼支付和APP支付，另外還有支付工具的開發，本博文選擇的是公眾號支付借口而開發進行講解，其他幾種支付接口開發基本上思路都是一樣的，只要你能看懂我這博文所講解的基本思路，你基本上也能獨自開發其他幾個支付接口。
二、思路詳解
我們可以拿微信支付接口文檔里的業務流程時序圖看看，如下圖，基本思路是這樣子：首先在后台生成一個鏈接，展示給用戶讓用戶點擊（例如頁面上有微信支付的按鈕），用戶點擊按鈕后，網站后台會根據訂單的相關信息生成一個支付訂單，此時會調用統一下單接口，對微信支付系統發起請求，而微信支付系統受到請求后，會根據請求過來的數據，生成一個 預支付交易會話標識（prepay_id，就是通過這個來識別該訂單的），我們的網站收到微信支付系統的響應后，會得到prepay_id，然后通過自己構造微信支付所需要的參數，接着將支付所需參數返回給客戶端，用戶此時可能會有一個訂單信息頁，會有一個按鈕，點擊支付，此時會調用JSAPI接口對微信支付系統發起 請求支付，微信支付系統檢查了請求的相關合法性之后，就會提示輸入密碼，用戶此時輸入密碼確認，微信支付系統會對其進行驗證，通過的話會返回支付結果，然后微信跳轉會H5頁面，這其中有一步是異步通知網站支付結果，我們網站需要對此進行處理（比如說異步支付結果通過后，需要更新數據表或者訂單信息，例如標志用戶已支付該訂單了，同時也需要更新訂單日志，防止用戶重復提交訂單）。
三、代碼講解
本次開發環境用的是php5.6 + MySQL + Redis + Linux + Apache，所選用的框架的CI框架（這些環境不一定需要和我的一致，框架也可以自己選擇，反正自己稍微修改下代碼就能移植過去了）。
微信支付接口的開發代碼我已經提前寫好了，在這里我對其進行分析講解，方便大家能輕松理解，當然，假如你有一定的基礎，直接看代碼就能理清所有流程了，並且我的代碼基本上都寫上了注釋（對於新手來說，這一點比微信文檔所提供的代碼好一點）。
1、構造一個鏈接展示給用戶
這里我們提前需要知道一個點，那就是請求統一下單接口需要微信用戶的openid（詳情可看這https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1），而獲取openid需要先獲取code（詳情可看這微信登錄接口），所以我們需要構造一個獲取code的URL：
Wxpay.php文件：
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Wxpay extends MY_Controller { public function __construct() { parent::__construct(); $this->load->model('wxpay_model'); //$this->load->model('wxpay'); } public function index() { //微信支付 $this->smarty['wxPayUrl'] = $this->wxpay_model->retWxPayUrl(); $this->displayView('wxpay/index.tpl'); } }
在這先看看model里所寫的幾個類：model里有幾個類：微信支付類、統一下單接口類、響應型接口基類、請求型接口基類、所有接口基類、配置類。為何要分那么多類而不在一個類里實現所有的方法的，因為，這樣看起來代碼邏輯清晰，哪個類該干嘛就干嘛。
這里我直接附上model的代碼了,里面基本上每一個類每一個方法甚至每一行代碼都會有解釋的了，這里我就不對其展開一句句分析了：
Wxpay_model.php
獲取到code的URL后，將其分配到頁面去，讓用戶去點擊，用戶進行點擊后，就會從微信服務器獲取到code，然后回調到redirect_uri所指的地址去。
2、獲取到code后，會回調到redirect_uri所指向的地址去，這里是到了/Wxpay/confirm/，看看這個confirm方法是打算干嘛的：
/**
* 手機端微信支付，此處是授權獲取到code時的回調地址
* @param [type] $orderId 訂單編號id
* @return [type] [description]
*/
public function confirm($orderId) {
//先確認用戶是否登錄
$this->ensureLogin();
//通過訂單編號獲取訂單數據
$order = $this->wxpay_model->get($orderId);
//驗證訂單是否是當前用戶
$this->_verifyUser($order);
//取得支付所需要的訂單數據
$orderData = $this->returnOrderData[$orderId];
//取得jsApi所需要的數據
$wxJsApiData = $this->wxpay_model->wxPayJsApi($orderData);
//將數據分配到模板去，在js里使用
$this->smartyData['wxJsApiData'] = json_encode($wxJsApiData, JSON_UNESCAPED_UNICODE);
$this->smartyData['order'] = $orderData;
$this->displayView('wxpay/confirm.tpl');
}
這一步開始去取JSAPI支付接口所需要的數據了，這一步算是最主要的一步，這里還會調用統一下單接口獲取到prepay_id，我們跳到
$this->wxpay_model->wxPayJsApi($orderData) 看看：
/**
* 微信jsapi點擊支付
* @param [type] $data [description]
* @return [type] [description]
*/
public function wxPayJsApi($data) {
$jsApi = new JsApi_handle();
//統一下單接口所需數據
$payData = $this->returnData($data);
//獲取code碼，用以獲取openid
$code = $_GET['code'];
$jsApi->setCode($code);
//通過code獲取openid
$openid = $jsApi->getOpenId();
$unifiedOrderResult = null;
if ($openid != null) {
//取得統一下單接口返回的數據
$unifiedOrderResult = $this->getResult($payData, 'JSAPI', $openid);
//獲取訂單接口狀態
$returnMessage = $this->returnMessage($unifiedOrder, 'prepay_id');
if ($returnMessage['resultCode']) {
$jsApi->setPrepayId($retuenMessage['resultField']);
//取得wxjsapi接口所需要的數據
$returnMessage['resultData'] = $jsApi->getParams();
}
return $returnMessage;
}
}
這里首先是取得下單接口所需要的數據；
接着獲取到code碼，通過code碼獲取到openid；
然后調用統一下單接口，取得下單接口的響應數據，即prepay_id；
最后取得微信支付JSAPI所需要的數據。
這就是上面這個方法所要做的事情，取到數據后，會將數據分配到模板里，然后根據官方文檔所給的參考格式將其放在js里,如下面的代碼：
<!doctype html>
<html>
<head lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Make sure that we can test against real IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title></title>
</head>
<body>
<a href="javascript:callpay();" id="btnOrder">點擊支付</a>
</body>
<script type="text/javascript">
//將數據付給js變量
var wxJsApiData = {$wxJsApiData};
function onBridgeReady()
{
//格式參考官方文檔 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
$.parseJSON(wxJsApiData.resultData),
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
window.location.href="/wxpay/paysuccess/"+{$order.sn};
}
}
);
}
function callpay()
{
if(!wxJsApiData.resultCode){
alert(wxJsApiData.resultType+","+wxJsApiData.resultMsg+"!");
return false;
}
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();
}
}
</script>
</html>
3、此時用戶只需要點擊支付，就可以開始進入支付界面了，接着就是輸入密碼，確認，最后會提示支付成功，緊接着網站會提供一個支付成功跳轉頁面。類似微信文檔里所提供的圖片這樣，這里我就直接截取文檔里的案例圖了：
4、這里還有一步，就是微信支付系統會異步通知網站后台用戶的支付結果。在獲取統一下單數據時，我們指定了一個通知地址，在model里可以找到
支付成功后，微信支付系統會將支付結果異步發送到此地址上/Wxpay/pay_callback/ ，我們來看一下這個方法
/**
* 支付回調接口
* @return [type] [description]
*/
public function pay_callback() {
$postData = '';
if (file_get_contents("php://input")) {
$postData = file_get_contents("php://input");
} else {
return;
}
$payInfo = array();
$notify = $this->wxpay_model->wxPayNotify($postData);
if ($notify->checkSign == TRUE) {
if ($notify->data['return_code'] == 'FAIL') {
$payInfo['status'] = FALSE;
$payInfo['msg'] = '通信出錯';
} elseif ($notify->data['result_code'] == 'FAIL') {
$payInfo['status'] = FALSE;
$payInfo['msg'] = '業務出錯';
} else {
$payInfo['status'] = TRUE;
$payInfo['msg'] = '支付成功';
$payInfo['sn']=substr($notify->data['out_trade_no'],8);
$payInfo['order_no'] = $notify->data['out_trade_no'];
$payInfo['platform_no']=$notify->data['transaction_id'];
$payInfo['attach']=$notify->data['attach'];
$payInfo['fee']=$notify->data['cash_fee'];
$payInfo['currency']=$notify->data['fee_type'];
$payInfo['user_sign']=$notify->data['openid'];
}
}
$returnXml = $notify->returnXml();
echo $returnXml;
$this->load->library('RedisCache');
if($payInfo['status']){
//這里要記錄到日志處理（略）
$this->model->order->onPaySuccess($payInfo['sn'], $payInfo['order_no'], $payInfo['platform_no'],'', $payInfo['user_sign'], $payInfo);
$this->redis->RedisCache->set('order:payNo:'.$payInfo['order_no'],'OK',5000);
}else{
//這里要記錄到日志處理（略）
$this->model->order->onPayFailure($payInfo['sn'], $payInfo['order_no'], $payInfo['platform_no'],'', $payInfo['user_sign'], $payInfo, '訂單支付失敗 ['.$payInfo['msg'].']');
}
}
這方法就是對支付是否成功，對網站的支付相關邏輯進行后續處理，例如假如支付失敗，就需要記錄日志里說明此次交易失敗，或者是做某一些邏輯處理，而支付成功又該如何做處理，等等。
這里我們就分析下這個方法 $this->wxpay_model->wxPayNotify($postData); 對異步返回的數據進行安全性校驗，例如驗證簽名，看看model里的這個方法：
/**
* 微信回調接口返回 驗證簽名並回應微信
* @param [type] $xml [description]
* @return [type] [description]
*/
public function wxPayNotify($xml) {
$notify = new Wxpay_server();
$notify->saveData($xml);
//驗證簽名，並回復微信
//對后台通知交互時，如果微信收到商戶的應答不是成功或者超時，微信認為通知失敗
//微信會通過一定的策略（如30分鍾共8次），定期重新發起通知
if ($notify->checkSign() == false) {
$notify->setReturnParameter("return_code","FAIL");//返回狀態碼
$notify->setReturnParameter("return_msg","簽名失敗");//返回信息
} else {
$notify->checkSign=TRUE;
$notify->setReturnParameter("return_code","SUCCESS");//設置返回碼
}
return $notify;
}
如果驗證通過，則就開始進行交易成功或者失敗時所要做的邏輯處理了，這邏輯處理的代碼我就不寫了，因為每一個網站的處理方式都不一樣，我這里是這樣處理的，我把思路寫下，方便不懂的朋友可以按着我的思路去完善后續的處理：首先是查看數據庫里的訂單日志表，看這筆交易之前是否已經交易過了，交易過就不用再更新數據表了，如果沒交易過，就會將之前存在redis的訂單數據給取出來，再將這些數據插入到訂單日志表里，差不多就這樣處理。
好了，基於H5的微信支付接口開發詳解就講到這里，如果你認真理清博文里所講解的思路，自己基本上也可以嘗試開發此接口了，同時只要會了這個，你也基本上可以開發二維碼支付，刷卡支付等等的支付接口。
關注公眾號： MATLAB基於模型的設計 （ID：xaxymaker） ，每天推送MATLAB學習最常見的問題，每天進步一點點，業精於勤荒於嬉。
打開微信掃一掃哦！