即彈出二維碼 --> 使用者用微信掃描二維碼 --> 根據微信的指引完成付款 --> 付款成功後頁面提示支付成功並跳轉"/> 即彈出二維碼 --> 使用者用微信掃描二維碼 --> 根據微信的指引完成付款 --> 付款成功後頁面提示支付成功並跳轉">

首頁  >  文章  >  php框架  >  (easywechat + Laravel 5.8)整理 PC 端微信掃碼支付全過程

(easywechat + Laravel 5.8)整理 PC 端微信掃碼支付全過程

藏色散人
藏色散人轉載
2019-08-21 14:47:306482瀏覽

業務場景描述:

使用者點擊網站頁面的"購買" --> 即彈出二維碼--> 使用者用微信掃描二維碼--> ; 根據微信的指引完成付款--> 付款成功後頁面提示支付成功並跳轉

#與微信之間的交互就三步:

1 .傳參,請求微信統一下單接口,獲取支付二維碼

2.接收微信的通知(微信通過上一步參數中的回調地址,把支付結果發送給我的服務器)

3.請求微信查看訂單的接口,如果支付成功就跳轉頁面

下面的記錄也基本按照上面的流程.

準備工作:

安裝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 部分:

$(&#39;#order&#39;).click(function () {
    /** 请求下单接口 **/
    axios.get("/payment/place_order", {
        params: {
            id: "{{ $post->id }}"
        }
    }).then(function (response) {
        if (response.data.code == 200) {
            /** 把生成的二维码放到页面上 */
            $(&#39;#qrcode2&#39;).html(response.data.html);
            /** 弹出二维码 **/
            $(&#39;#qrcode&#39;).modal(&#39;show&#39;);
            /** 设置定时器, 即一弹出二维码就开始不断请求查看支付状态, 直到收到支付成功的返回, 再终止定时器 **/
            var timer = setInterval(function () {
                /** 在这里请求微信支付状态的接口 **/
                axios.get(&#39;/payment/paid&#39;, {
                    params: {
                    &#39;out_trade_no&#39;: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(&#39;/payment/place_order&#39;, &#39;PaymentController@place_order&#39;)->name(&#39;web.payment.place_order&#39;);
// 请求微信接口, 查看订单支付状态
Route::get(&#39;/payment/paid&#39;, &#39;PaymentController@paid&#39;)->name(&#39;web.payment.paid&#39;);
PaymentController 里的支付逻辑
下面是具体的逻辑,用户点击支付后,先创建一条记录在 PayLog (用来记录支付的详细信息,所以这里还需要建 Paylog 的 model 和 migration, migration 的内容我附在最后了,都是微信返回的字段,基本可以直接 copy 来用的)
class PaymentController extends Controller
{
    // 请求微信接口的公用配置, 所以单独提出来
    private function payment()
    {
        $config = [
            // 必要配置, 这些都是之前在 .env 里配置好的
            &#39;app_id&#39; => config(&#39;wechat.payment.default.app_id&#39;),
            &#39;mch_id&#39; => config(&#39;wechat.payment.default.mch_id&#39;),
            &#39;key&#39;    => config(&#39;wechat.payment.default.key&#39;),   // API 密钥
            &#39;notify_url&#39; => config(&#39;wechat.payment.default.notify_url&#39;),   // 通知地址
        ];
        // 这个就是 easywechat 封装的了, 一行代码搞定, 照着写就行了
        $app = Factory::payment($config);
        return $app;
    }
    // 向微信请求统一下单接口, 创建预支付订单
    public function place_order($id)
    {
        // 因为没有先创建订单, 所以这里先生成一个随机的订单号, 存在 pay_log 里, 用来标识订单, 支付成功后再把这个订单号存到 order 表里
        $order_sn = date(&#39;ymd&#39;).substr(time(),-5).substr(microtime(),2,5);
        // 根据文章 id 查出文章价格
        $post_price = optional(Post::where(&#39;id&#39;, $id)->first())->pirce;
        // 创建 Paylog 记录
        PayLog::create([
            &#39;appid&#39; => config(&#39;wechat.payment.default.app_id&#39;),
            &#39;mch_id&#39; => config(&#39;wechat.payment.default.mch_id&#39;),
            &#39;out_trade_no&#39; => $order_sn,
            &#39;post_id&#39; => $id
        ]);
        $app = $this->payment();
        $total_fee = env(&#39;APP_DEBUG&#39;) ? 1 : $post_price;
        // 用 easywechat 封装的方法请求微信的统一下单接口
        $result = $app->order->unify([
            &#39;trade_type&#39;       => &#39;NATIVE&#39;, // 原生支付即扫码支付,商户根据微信支付协议格式生成的二维码,用户通过微信“扫一扫”扫描二维码后即进入付款确认界面,输入密码即完成支付。  
            &#39;body&#39;             => &#39;投资平台-订单支付&#39;, // 这个就是会展示在用户手机上巨款界面的一句话, 随便写的
            &#39;out_trade_no&#39;     => $order_sn,
            &#39;total_fee&#39;        => $total_fee,
            &#39;spbill_create_ip&#39; => request()->ip(), // 可选,如不传该参数,SDK 将会自动获取相应 IP 地址
        ]);
        if ($result[&#39;result_code&#39;] == &#39;SUCCESS&#39;) {
            // 如果请求成功, 微信会返回一个 &#39;code_url&#39; 用于生成二维码
            $code_url = $result[&#39;code_url&#39;];
            return [
                &#39;code&#39;     => 200,
                // 订单编号, 用于在当前页面向微信服务器发起订单状态查询请求
                &#39;order_sn&#39; => $order_sn,
                // 生成二维码
                &#39;html&#39; => QrCode::size(200)->generate($code_url),
            ];
        }
    }
}

----------- 與微信互動的第一步(請求統一下單一介面) 完成------ -----

接收微信的通知

#微信根據上面請求中傳參的notify_url 請求我的伺服器,發送付款結果給我,那麼必然是post 請求:

Route::post(&#39;/payment/notify&#39;, &#39;paymentController@notify&#39;);

取消csrf 驗證

但是,微信伺服器發起的post 請求無法通過csrf token 驗證,所以必須取消用於微信的路由的驗證,在app/Http/Middleware/VerifyCsrfToken 文件中:

protected $except = [
        //
        &#39;payment/notify&#39;
    ];
在 PaymentController.php 文件中处理接收微信信息的逻辑
    // 接收微信支付状态的通知
    public function notify()
    {
        $app = $this->payment();
        // 用 easywechat 封装的方法接收微信的信息, 根据 $message 的内容进行处理, 之后要告知微信服务器处理好了, 否则微信会一直请求这个 url, 发送信息
        $response = $app->handlePaidNotify(function($message, $fail){
            // 首先查看 order 表, 如果 order 表有记录, 表示已经支付过了
            $order = Order::where(&#39;order_sn&#39;, $message[&#39;out_trade_no&#39;])->first();
            if ($order) {
                return true; // 如果已经生成订单, 表示已经处理完了, 告诉微信不用再通知了
            }
            // 查看支付日志
            $payLog = PayLog::where(&#39;out_trade_no&#39;, $message[&#39;out_trade_no&#39;])->first();
            if (!$payLog || $payLog->paid_at) { // 如果订单不存在 或者 订单已经支付过了
                return true; // 告诉微信,我已经处理完了,订单没找到,别再通知我了
            }
            // return_code 表示通信状态,不代表支付状态
            if ($message[&#39;return_code&#39;] === &#39;SUCCESS&#39;) {
                // 用户是否支付成功
                if ($message[&#39;result_code&#39;] === &#39;SUCCESS&#39;) {
                    // 更新支付时间为当前时间
                    $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([
                        &#39;order_sn&#39; => $message[&#39;out_trade_no&#39;],
                        &#39;total_fee&#39; => $message[&#39;total_fee&#39;],
                        &#39;pay_log_id&#39; => $payLog->id,
                        &#39;status&#39; => 1,
                        &#39;user_id&#39; => $user_id,
                        &#39;paid_at&#39; => $payLog->paid_at,
                        &#39;post_id&#39; => $post_id,
                        &#39;post_title&#39; => $post_title,
                        &#39;post_price&#39; => $post_price,
                        &#39;post_original_price&#39; => $post_original_price,
                        &#39;post_cover&#39; => $post_cover,
                        &#39;post_description&#39; => $post_description,
                    ]);
                    // 更新 PayLog, 这里的字段都是根据微信支付结果通知的字段设置的(https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_7&index=8)
                    PayLog::where(&#39;out_trade_no&#39;, $message[&#39;out_trade_no&#39;])->update([
                        &#39;appid&#39; => $message[&#39;appid&#39;],
                        &#39;bank_type&#39; => $message[&#39;bank_type&#39;],
                        &#39;total_fee&#39; => $message[&#39;total_fee&#39;],
                        &#39;trade_type&#39; => $message[&#39;trade_type&#39;],
                        &#39;is_subscribe&#39; => $message[&#39;is_subscribe&#39;],
                        &#39;mch_id&#39; => $message[&#39;mch_id&#39;],
                        &#39;nonce_str&#39; => $message[&#39;nonce_str&#39;],
                        &#39;openid&#39; => $message[&#39;openid&#39;],
                        &#39;sign&#39; => $message[&#39;sign&#39;],
                        &#39;cash_fee&#39; => $message[&#39;cash_fee&#39;],
                        &#39;fee_type&#39; => $message[&#39;fee_type&#39;],
                        &#39;transaction_id&#39; => $message[&#39;transaction_id&#39;],
                        &#39;time_end&#39; => $payLog->paid_at,
                        &#39;result_code&#39; => $message[&#39;result_code&#39;],
                        &#39;return_code&#39; => $message[&#39;return_code&#39;],
                    ]);
                }
            } else {
                // 如果支付失败, 也更新 PayLog, 跟上面一样, 就是多了 error 信息
                PayLog::where(&#39;out_trade_no&#39;, $message[&#39;out_trade_no&#39;])->update([
                    &#39;appid&#39; => $message[&#39;appid&#39;],
                    &#39;bank_type&#39; => $message[&#39;bank_type&#39;],
                    &#39;total_fee&#39; => $message[&#39;total_fee&#39;],
                    &#39;trade_type&#39; => $message[&#39;trade_type&#39;],
                    &#39;is_subscribe&#39; => $message[&#39;is_subscribe&#39;],
                    &#39;mch_id&#39; => $message[&#39;mch_id&#39;],
                    &#39;nonce_str&#39; => $message[&#39;nonce_str&#39;],
                    &#39;openid&#39; => $message[&#39;openid&#39;],
                    &#39;sign&#39; => $message[&#39;sign&#39;],
                    &#39;cash_fee&#39; => $message[&#39;cash_fee&#39;],
                    &#39;fee_type&#39; => $message[&#39;fee_type&#39;],
                    &#39;transaction_id&#39; => $message[&#39;transaction_id&#39;],
                    &#39;time_end&#39; => $payLog->paid_at,
                    &#39;result_code&#39; => $message[&#39;result_code&#39;],
                    &#39;return_code&#39; => $message[&#39;return_code&#39;],
                    &#39;err_code&#39; => $message[&#39;err_code&#39;],
                    &#39;err_code_des&#39; => $message[&#39;err_code_des&#39;],
                ]);
                return $fail(&#39;通信失败,请稍后再通知我&#39;);
            }
            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(&#39;out_trade_no&#39;);
        $app = $this->payment();
        // 用 easywechat 封装的方法请求微信
        $result = $app->order->queryByOutTradeNumber($out_trade_no);
        if ($result[&#39;trade_state&#39;] === &#39;SUCCESS&#39;) 
            return [
                &#39;code&#39; => 200,
                &#39;msg&#39; => &#39;paid&#39;
            ];
        }else{
            return [
                &#39;code&#39; => 202,
                &#39;msg&#39; => &#39;not paid&#39;
            ];
        }
    }

---------------- 與微信交互的第三步(查看訂單狀態), 完成----------------

附: pay_logs 表的migration

#由於此表的欄位基本上就是微信支付結果通知的字段,所以附在下面方便下次使用:

public function up()
    {
        Schema::create(&#39;pay_logs&#39;, function (Blueprint $table) {
            $table->bigIncrements(&#39;id&#39;);
            // 根据自身业务设计的字段
            $table->integer(&#39;post_id&#39;)->default(0)->comment(&#39;文章id&#39;);
            // 以下均是微信支付结果通知接口返回的字段
            $table->string(&#39;appid&#39;, 255)->default(&#39;&#39;)->comment(&#39;微信分配的公众账号ID&#39;);
            $table->string(&#39;mch_id&#39;, 255)->default(&#39;&#39;)->comment(&#39;微信支付分配的商户号&#39;);
            $table->string(&#39;bank_type&#39;, 16)->default(&#39;&#39;)->comment(&#39;付款银行&#39;);
            $table->integer(&#39;cash_fee&#39;)->default(0)->comment(&#39;现金支付金额&#39;);
            $table->string(&#39;fee_type&#39;, 8)->default(&#39;&#39;)->comment(&#39;货币种类&#39;);
            $table->string(&#39;is_subscribe&#39;, 1)->default(&#39;&#39;)->comment(&#39;是否关注公众账号&#39;);
            $table->string(&#39;nonce_str&#39;, 32)->default(&#39;&#39;)->comment(&#39;随机字符串&#39;);
            $table->string(&#39;openid&#39;, 128)->default(&#39;&#39;)->comment(&#39;用户标识&#39;);
            $table->string(&#39;out_trade_no&#39;, 32)->default(&#39;&#39;)->comment(&#39;商户系统内部订单号&#39;);
            $table->string(&#39;result_code&#39;, 16)->default(&#39;&#39;)->comment(&#39;业务结果&#39;);
            $table->string(&#39;return_code&#39;, 16)->default(&#39;&#39;)->comment(&#39;通信标识&#39;);
            $table->string(&#39;sign&#39;, 32)->default(&#39;&#39;)->comment(&#39;签名&#39;);
            $table->string(&#39;prepay_id&#39;, 64)->default(&#39;&#39;)->comment(&#39;微信生成的预支付回话标识,用于后续接口调用中使用,该值有效期为2小时&#39;);
            $table->dateTime(&#39;time_end&#39;)->nullable()->comment(&#39;支付完成时间&#39;);
            $table->integer(&#39;total_fee&#39;)->default(0)->comment(&#39;订单金额&#39;);
            $table->string(&#39;trade_type&#39;, 16)->default(&#39;&#39;)->comment(&#39;交易类型&#39;);
            $table->string(&#39;transaction_id&#39;, 32)->default(&#39;&#39;)->comment(&#39;微信支付订单号&#39;);
            $table->string(&#39;err_code&#39;, 32)->default(&#39;&#39;)->comment(&#39;错误代码&#39;);
            $table->string(&#39;err_code_des&#39;, 128)->default(&#39;&#39;)->comment(&#39;错误代码描述&#39;);
            $table->string(&#39;device_info&#39;, 32)->default(&#39;&#39;)->comment(&#39;设备号&#39;);
            $table->text(&#39;attach&#39;)->nullable()->comment(&#39;商家数据包&#39;);
            $table->nullableTimestamps();
        });
    }

以上,就是從頁面到下單到支付到頁面跳轉的全過程記錄。除了很久以前跟著 Laravel-china 教學做過一次,這算是真正第一次自己摸索,根據自己的需求做的一次。網路上分享的文章教學也很多,但都是大神級別的,很多地方都一筆帶過,對於我這種junior 的感覺就是東一榔頭,西一棒槌,很難follow. 我盡最大努力把筆記整理得細緻些,希望對跟我一樣的beginner 有幫助。看著是很長啊,但是,真的實現也真得這麼多內容吧,至少以我目前的水平是這樣的.

以上是(easywechat + Laravel 5.8)整理 PC 端微信掃碼支付全過程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:learnku.com。如有侵權,請聯絡admin@php.cn刪除