即彈出二維碼 --> 使用者用微信掃描二維碼 --> 根據微信的指引完成付款 --> 付款成功後頁面提示支付成功並跳轉"/> 即彈出二維碼 --> 使用者用微信掃描二維碼 --> 根據微信的指引完成付款 --> 付款成功後頁面提示支付成功並跳轉">
業務場景描述:
使用者點擊網站頁面的"購買" --> 即彈出二維碼--> 使用者用微信掃描二維碼--> ; 根據微信的指引完成付款--> 付款成功後頁面提示支付成功並跳轉
#與微信之間的交互就三步:
1 .傳參,請求微信統一下單接口,獲取支付二維碼
2.接收微信的通知(微信通過上一步參數中的回調地址,把支付結果發送給我的服務器)
3.請求微信查看訂單的接口,如果支付成功就跳轉頁面
下面的記錄也基本按照上面的流程.
準備工作:
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 有幫助。看著是很長啊,但是,真的實現也真得這麼多內容吧,至少以我目前的水平是這樣的.
以上是(easywechat + Laravel 5.8)整理 PC 端微信掃碼支付全過程的詳細內容。更多資訊請關注PHP中文網其他相關文章!