業務場景描述:
使用者點選站點頁面的 "購買" --> 即彈出二維碼 --> 使用者用微信掃描二維碼 --> 根據微信的指引完成支付 --> 支付成功後頁面提示支付成功並跳轉
與微信之間的互動就三步:
- 傳參, 請求微信統一下單介面, 獲取支付二維碼
- 接收微信的通知(微信通過上一步引數中的回撥地址, 把支付結果傳送給我的伺服器)
- 請求微信檢視訂單的介面, 如果支付成功就跳轉頁面
下面的記錄也基本按照上面的流程.
準備工作:
安裝 overtrue/laravel-wechat
composer require "overtrue/laravel-wechat:~5.0"建立配置檔案：
php artisan vendor:publish --provider="Overtrue\LaravelWeChat\ServiceProvider"修改應用根目錄下的 config/wechat.php 中對應的引數 ( 這部分直接 copy / paste 就行了 ) :
'payment' => [
'default' => [
'sandbox' => env('WECHAT_PAYMENT_SANDBOX', false),
'app_id' => env('WECHAT_PAYMENT_APPID', ''),
'mch_id' => env('WECHAT_PAYMENT_MCH_ID', 'your-mch-id'),
'key' => env('WECHAT_PAYMENT_KEY', 'key-for-signature'),
'cert_path' => env('WECHAT_PAYMENT_CERT_PATH', 'path/to/cert/apiclient_cert.pem'), // XXX: 絕對路徑！！！！
'key_path' => env('WECHAT_PAYMENT_KEY_PATH', 'path/to/cert/apiclient_key.pem'), // XXX: 絕對路徑！！！！
'notify_url' => env('WECHAT_PAYMENT_NOTIFY_URL',''), // 預設支付結果通知地址
],
// ...
],需要配置的就是上面這個陣列裡的內容, 但其實都是需要在 .env 檔案中配置的:
# wechat_payment
WECHAT_PAYMENT_SANDBOX=false
# 真正需要配置的就下面這四行
WECHAT_PAYMENT_APPID=xxxxxxxxxxxxxxx // 自己的
WECHAT_PAYMENT_MCH_ID=xxxxxxx // 自己的
WECHAT_PAYMENT_KEY=xxxxxxxxxxxxxxxxxxxx // 自己的
WECHAT_PAYMENT_NOTIFY_URL='test.abc.com/payment/notify' // 這個地址只要是外網能夠訪問到專案的任何地址都可以, 不是需要在微信那裡配置的那種, 現在還不知道怎麼定義沒關係, 後面用到的時候自然就有了
SWAGGER_VERSION=3.0安裝 Simple QrCode 生成二維碼的包
在 composer.json 檔案中新增如下:
"require": {
"simplesoftwareio/simple-qrcode": "~2"
}在終端執行: composer update, 後面會用到.
------------------------------------------ 以上是準備工作, 下面開始按照流程 ---------------------------------------
使用者點選 "購買" 下單 --> 彈出二維碼
這裡是請求了微信的 統一下單 介面.
我處理的邏輯是:
使用者發起購買請求時, 先在建立支付日誌裡建立一條記錄, 等到使用者完成付款, 再建立訂單記錄.
新建一個 PaymentController 專門處理微信支付的邏輯 ( 跟 OrderController 是兩碼事 ). 對於使用者點選 "購買" 的請求, 我用 "place_order" 的方法處理, 也就是在這裡請求微信的 [統一下單] 介面.
頁面上發起下單請求的部分
Html 部分:
( 二維碼的 modal 框就是根據 Bootstrap 的文件寫的 )
<button type="button" id="order" class="btn btn-secondary btn-block">
掃碼支付
</button>
<!-- 二維碼, 隨便放在當前頁面的那裡都可以, 因為是通過 axios 控制, 請求成功後才會彈出的 -->
<div class="modal fade" id="qrcode" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content bg-transparent" style="border:none">
<div class="modal-body align-items-center text-center">
<p class="modal-title" id="exampleModalLabel" style="color:white">微信掃碼支付</p>
<br>
{{--生成的二維碼會放在這裡--}}
<div id="qrcode2"></div>
</div>
</div>
</div>
</div>JS 部分:
$('#order').click(function () {
/** 請求下單介面 **/
axios.get("/payment/place_order", {
params: {
id: "{{ $post->id }}"
}
}).then(function (response) {
if (response.data.code == 200) {
/** 把生成的二維碼放到頁面上 */
$('#qrcode2').html(response.data.html);
/** 彈出二維碼 **/
$('#qrcode').modal('show');
/** 設定定時器, 即一彈出二維碼就開始不斷請求檢視支付狀態, 直到收到支付成功的返回, 再終止定時器 **/
var timer = setInterval(function () {
/** 在這裡請求微信支付狀態的介面 **/
axios.get('/payment/paid', {
params: {
'out_trade_no':response.data.order_sn,
}
}).then(function (response) {
if (response.data.code == 200) {
/** 如果支付成功, 就取消定時器, 並重新載入頁面 */
window.clearInterval(timer);
window.location.reload();
}
}).catch(function (error) {
console.log(error);
});
}, 3000);
}
}).catch(function (error) {
console.log(error);
});
});建立路由
這裡先把上面 JS 部分請求的兩個路由都先寫出來了, 下面先說明第一個:
// 請求微信統一下單介面
Route::get('/payment/place_order', 'PaymentController@place_order')->name('web.payment.place_order');
// 請求微信介面, 檢視訂單支付狀態
Route::get('/payment/paid', 'PaymentController@paid')->name('web.payment.paid');PaymentController 裡的支付邏輯
下面是具體的邏輯, 使用者點選支付後, 先建立一條記錄在 PayLog (用來記錄支付的詳細資訊, 所以這裡還需要建 Paylog 的 model 和 migration, migration 的內容我附在最後了, 都是微信返回的欄位, 基本可以直接 copy 來用的 )
class PaymentController extends Controller
{
// 請求微信介面的公用配置, 所以單獨提出來
private function payment()
{
$config = [
// 必要配置, 這些都是之前在 .env 裡配置好的
'app_id' => config('wechat.payment.default.app_id'),
'mch_id' => config('wechat.payment.default.mch_id'),
'key' => config('wechat.payment.default.key'), // API 金鑰
'notify_url' => config('wechat.payment.default.notify_url'), // 通知地址
];
// 這個就是 easywechat 封裝的了, 一行程式碼搞定, 照著寫就行了
$app = Factory::payment($config);
return $app;
}
// 向微信請求統一下單介面, 建立預支付訂單
public function place_order($id)
{
// 因為沒有先建立訂單, 所以這裡先生成一個隨機的訂單號, 存在 pay_log 裡, 用來標識訂單, 支付成功後再把這個訂單號存到 order 表裡
$order_sn = date('ymd').substr(time(),-5).substr(microtime(),2,5);
// 根據文章 id 查出文章價格
$post_price = optional(Post::where('id', $id)->first())->pirce;
// 建立 Paylog 記錄
PayLog::create([
'appid' => config('wechat.payment.default.app_id'),
'mch_id' => config('wechat.payment.default.mch_id'),
'out_trade_no' => $order_sn,
'post_id' => $id
]);
$app = $this->payment();
$total_fee = env('APP_DEBUG') ? 1 : $post_price;
// 用 easywechat 封裝的方法請求微信的統一下單介面
$result = $app->order->unify([
'trade_type' => 'NATIVE', // 原生支付即掃碼支付，商戶根據微信支付協議格式生成的二維碼，使用者通過微信“掃一掃”掃描二維碼後即進入付款確認介面，輸入密碼即完成支付。
'body' => '投資平臺-訂單支付', // 這個就是會展示在使用者手機上鉅款介面的一句話, 隨便寫的
'out_trade_no' => $order_sn,
'total_fee' => $total_fee,
'spbill_create_ip' => request()->ip(), // 可選，如不傳該引數，SDK 將會自動獲取相應 IP 地址
]);
if ($result['result_code'] == 'SUCCESS') {
// 如果請求成功, 微信會返回一個 'code_url' 用於生成二維碼
$code_url = $result['code_url'];
return [
'code' => 200,
// 訂單編號, 用於在當前頁面向微信伺服器發起訂單狀態查詢請求
'order_sn' => $order_sn,
// 生成二維碼
'html' => QrCode::size(200)->generate($code_url),
];
}
}
}----------- 與微信互動的第一步 (請求統一下單介面) 完成 -----------
接收微信的 通知
路由
微信根據上面請求中傳參的 notify_url 請求我的伺服器, 傳送支付結果給我, 那麼必然是 post 請求:
Route::post('/payment/notify', 'paymentController@notify');取消 csrf 驗證
但是, 微信伺服器發起的 post 請求無法通過 csrf token 驗證, 所以必須取消用於微信的路由的驗證, 在 app/Http/Middleware/VerifyCsrfToken 檔案中:
protected $except = [
//
'payment/notify'
];在 PaymentController.php 檔案中處理接收微信資訊的邏輯
// 接收微信支付狀態的通知
public function notify()
{
$app = $this->payment();
// 用 easywechat 封裝的方法接收微信的資訊, 根據 $message 的內容進行處理, 之後要告知微信伺服器處理好了, 否則微信會一直請求這個 url, 傳送資訊
$response = $app->handlePaidNotify(function($message, $fail){
// 首先檢視 order 表, 如果 order 表有記錄, 表示已經支付過了
$order = Order::where('order_sn', $message['out_trade_no'])->first();
if ($order) {
return true; // 如果已經生成訂單, 表示已經處理完了, 告訴微信不用再通知了
}
// 檢視支付日誌
$payLog = PayLog::where('out_trade_no', $message['out_trade_no'])->first();
if (!$payLog || $payLog->paid_at) { // 如果訂單不存在 或者 訂單已經支付過了
return true; // 告訴微信，我已經處理完了，訂單沒找到，別再通知我了
}
// return_code 表示通訊狀態，不代表支付狀態
if ($message['return_code'] === 'SUCCESS') {
// 使用者是否支付成功
if ($message['result_code'] === 'SUCCESS') {
// 更新支付時間為當前時間
$payLog->paid_at = now();
$post_id = $payLog->post_id;
// 聯表查詢 post 的相關資訊
$post_title = $payLog->post->title;
$post_price = $payLog->post->price;
$post_original_price = $payLog->post->original_price;
$post_cover = $payLog->post->post_cover;
$post_description = $payLog->post->description;
$user_id = $payLog->post->user_id;
// 建立訂單記錄
Order::create([
'order_sn' => $message['out_trade_no'],
'total_fee' => $message['total_fee'],
'pay_log_id' => $payLog->id,
'status' => 1,
'user_id' => $user_id,
'paid_at' => $payLog->paid_at,
'post_id' => $post_id,
'post_title' => $post_title,
'post_price' => $post_price,
'post_original_price' => $post_original_price,
'post_cover' => $post_cover,
'post_description' => $post_description,
]);
// 更新 PayLog, 這裡的欄位都是根據微信支付結果通知的欄位設定的(https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_7&index=8)
PayLog::where('out_trade_no', $message['out_trade_no'])->update([
'appid' => $message['appid'],
'bank_type' => $message['bank_type'],
'total_fee' => $message['total_fee'],
'trade_type' => $message['trade_type'],
'is_subscribe' => $message['is_subscribe'],
'mch_id' => $message['mch_id'],
'nonce_str' => $message['nonce_str'],
'openid' => $message['openid'],
'sign' => $message['sign'],
'cash_fee' => $message['cash_fee'],
'fee_type' => $message['fee_type'],
'transaction_id' => $message['transaction_id'],
'time_end' => $payLog->paid_at,
'result_code' => $message['result_code'],
'return_code' => $message['return_code'],
]);
}
} else {
// 如果支付失敗, 也更新 PayLog, 跟上面一樣, 就是多了 error 資訊
PayLog::where('out_trade_no', $message['out_trade_no'])->update([
'appid' => $message['appid'],
'bank_type' => $message['bank_type'],
'total_fee' => $message['total_fee'],
'trade_type' => $message['trade_type'],
'is_subscribe' => $message['is_subscribe'],
'mch_id' => $message['mch_id'],
'nonce_str' => $message['nonce_str'],
'openid' => $message['openid'],
'sign' => $message['sign'],
'cash_fee' => $message['cash_fee'],
'fee_type' => $message['fee_type'],
'transaction_id' => $message['transaction_id'],
'time_end' => $payLog->paid_at,
'result_code' => $message['result_code'],
'return_code' => $message['return_code'],
'err_code' => $message['err_code'],
'err_code_des' => $message['err_code_des'],
]);
return $fail('通訊失敗，請稍後再通知我');
}
return true; // 返回處理完成
});
// 這裡是必須這樣返回的, 會傳送給微信伺服器處理結果
return $response;
}上面有用到 pay_logs 表和 posts 表的聯表查詢, 一篇 post 可以有多個 pay_logs, 所以是一對多的關係, 在 PayLog.php 裡設定一下:
public function post()
{
return $this->belongsTo(Post::class);
}--------------- 與微信互動的第二步 (接收資訊), 完成 --------------
請求微信 檢視訂單 介面
請求微信檢視訂單狀態介面, 路由在互動第一步已經寫過了
public function paid(Request $request)
{
$out_trade_no = $request->get('out_trade_no');
$app = $this->payment();
// 用 easywechat 封裝的方法請求微信
$result = $app->order->queryByOutTradeNumber($out_trade_no);
if ($result['trade_state'] === 'SUCCESS')
return [
'code' => 200,
'msg' => 'paid'
];
}else{
return [
'code' => 202,
'msg' => 'not paid'
];
}
}---------------- 與微信互動的第三步(檢視訂單狀態), 完成 ----------------
附: pay_logs 表的 migration
由於此表的欄位基本就是微信支付結果通知的欄位, 所以附在下面方便下次使用:
public function up()
{
Schema::create('pay_logs', function (Blueprint $table) {
$table->bigIncrements('id');
// 根據自身業務設計的欄位
$table->integer('post_id')->default(0)->comment('文章id');
// 以下均是微信支付結果通知介面返回的欄位
$table->string('appid', 255)->default('')->comment('微信分配的公眾賬號ID');
$table->string('mch_id', 255)->default('')->comment('微信支付分配的商戶號');
$table->string('bank_type', 16)->default('')->comment('付款銀行');
$table->integer('cash_fee')->default(0)->comment('現金支付金額');
$table->string('fee_type', 8)->default('')->comment('貨幣種類');
$table->string('is_subscribe', 1)->default('')->comment('是否關注公眾賬號');
$table->string('nonce_str', 32)->default('')->comment('隨機字串');
$table->string('openid', 128)->default('')->comment('使用者標識');
$table->string('out_trade_no', 32)->default('')->comment('商戶系統內部訂單號');
$table->string('result_code', 16)->default('')->comment('業務結果');
$table->string('return_code', 16)->default('')->comment('通訊標識');
$table->string('sign', 32)->default('')->comment('簽名');
$table->string('prepay_id', 64)->default('')->comment('微信生成的預支付回話標識，用於後續介面呼叫中使用，該值有效期為2小時');
$table->dateTime('time_end')->nullable()->comment('支付完成時間');
$table->integer('total_fee')->default(0)->comment('訂單金額');
$table->string('trade_type', 16)->default('')->comment('交易型別');
$table->string('transaction_id', 32)->default('')->comment('微信支付訂單號');
$table->string('err_code', 32)->default('')->comment('錯誤程式碼');
$table->string('err_code_des', 128)->default('')->comment('錯誤程式碼描述');
$table->string('device_info', 32)->default('')->comment('裝置號');
$table->text('attach')->nullable()->comment('商家資料包');
$table->nullableTimestamps();
});
}以上, 就是從頁面到下單到支付到頁面跳轉的全過程記錄. 除了很久以前跟著 Laravel-china 教程做過一次, 這算是真正第一次自己摸索, 根據自己的需求做的一次. 網上分享的文章教程也很多, 但都是大神級別的, 很多地方都一筆帶過, 對於我這種 junior 的感覺就是東一榔頭, 西一棒槌, 很難 follow. 我盡最大努力把筆記整理得細緻些, 希望對跟我一樣的 beginner 有幫助. 看著是很長啊, 但是, 真的實現也真得這麼多內容吧, 至少以我目前的水平是這樣的.
本作品採用《CC 協議》，轉載必須註明作者和本文連結