作者

创建项目

laravel new wechat

cd alipay

composer require laravel/ui

php artisan ui vue --auth

cnpm install

npm run dev

# 修改数据库配置后执行如下命令
php artisan migrate

# 启动项目
php artisan serve 

接下来安装 easyWeChat 包文件,执行下面的命令:

// 安装easyWeChat包
composer require "overtrue/laravel-wechat:~5.0"

// 创建配置文件
php artisan vendor:publish --provider="Overtrue\LaravelWeChat\ServiceProvider"

config/wechat.php 中打开微信支付的配置,然后在 .env 文件中做如下配置:

WECHAT_DEBUG=true
WECHAT_PAYMENT_APPID=********
WECHAT_OFFICIAL_ACCOUNT_SECRET=********
WECHAT_OFFICIAL_ACCOUNT_TOKEN=********
WECHAT_OFFICIAL_ACCOUNT_AES_KEY=********
WECHAT_OFFICIAL_ACCOUNT_OAUTH_SCOPES=********
WECHAT_PAYMENT_MCH_ID=********
WECHAT_PAYMENT_KEY=********

正式开发

1、在 web.php 中添加如下路由:

Route::prefix('order')->group(function () {
    Route::get('pay', 'OrderController@pay');
});

2、创建对应的控制器方法和模型以及数据表 orders

php artisan make:controller OrderController

php artisan make:model Models/Order

// 模型里面添加黑名单
protected $guarded = [];

// 建表语句
CREATE TABLE `orders` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `out_trade_no` varchar(255) DEFAULT NULL,
  `status` tinyint(1) DEFAULT '1',
  `total_price` decimal(10,2) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4;

创建完表后,在里面随便加一条数据,用于测试。如图

3、控制器里面的 pay 方法添加如下代码:

use App\Models\Order;
use EasyWeChat;

public function pay()
{
    $payment = EasyWeChat::payment();

    /**
     * 第 1 步:查询订单并计算金额,以分为单位
     */
    $order = Order::find(1);  // 我这里以订单表里面的第一条数据付款

    /**
     * 第 2 步:统一下单
     */
    $result = $payment->order->unify([
        'body' => '测试微信支付',
        'out_trade_no' => date('Ymd') . str_pad(mt_rand(1, 99999), 5, '0', STR_PAD_LEFT) . rand(1000, 9999),
        'total_fee' => $order->total_price * 100,
        'notify_url' => 'https://***.***.com/api/order/notify', // 支付结果通知网址,如果不设置则会使用配置里的默认地址
        'trade_type' => 'JSAPI',
        'openid' => 'ojoGDjgE9PjlDc8***',  // 我这里的openid写的一个假的,仅用于测试
    ]);

    //return $result; 

    /**
     * 第 3 步:JSSDK
     */
    if ($result['result_code'] == 'SUCCESS' && $result['return_code'] == 'SUCCESS') {
        $prepayId = $result['prepay_id'];
        $jssdk = $payment->jssdk;
        $json = $jssdk->sdkConfig($prepayId);
        //return $json;
        return view('order.pay', compact('json'));
    } else {
        return $result;
    }
}

前端页面

resource/views/order 新建模板 pay.blade.php,里面写上如下代码:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <!-- Styles -->
    <style>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div class="flex-center position-ref full-height">
    @if (Route::has('login'))
        <div class="top-right links">
            @auth
                <a href="{{ url('/home') }}">Home</a>
            @else
                <a href="{{ route('login') }}">Login</a>

                @if (Route::has('register'))
                    <a href="{{ route('register') }}">Register</a>
                @endif
            @endauth
        </div>
    @endif

    <div class="content">
        <div class="title m-b-md">
            Laravel
        </div>

        <div class="links">
            <a href="javascript:;" id="pay">支付</a>
            <a href="https://laracasts.com">Laracasts</a>
            <a href="https://laravel-news.com">News</a>
            <a href="https://blog.laravel.com">Blog</a>
            <a href="https://nova.laravel.com">Nova</a>
            <a href="https://forge.laravel.com">Forge</a>
            <a href="https://vapor.laravel.com">Vapor</a>
            <a href="https://github.com/laravel/laravel">GitHub</a>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    $(function () {
        $("#pay").click(function () {
            if (typeof WeixinJSBridge === 'undefined') {
                alert('请从微信端打开页面!');
                return false;
            }
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',{!! json_encode($json) !!} , function (res) {
                    switch (res.err_msg) {
                        case 'get_brand_wcpay_request:cancel':
                            alert('您取消了支付!');
                            break;
                        case 'get_brand_wcpay_request:fail':
                            alert('支付失败!(' + res.err_desc + '');
                            break;
                        case 'get_brand_wcpay_request:ok':
                            alert('支付成功!');
                            window.location.reload();
                            break;
                        default:
                            alert(JSON.stringify(res));
                            break;
                    }
                });
        })
    })
</script>
</body>
</html>

5、接下来把项目部署上线,此步骤自行完成。

6、测试:微信访问支付的路由地址:https://***.***.com/order/pay/,看到如图所示即为成功:

点击支付按钮,如下图,大功告成,可以愉快的支付了!

我这里只是写了一个案例,正式项目请自行集成。还有回调没写,后期继续完善。

转载请注明,来自https://itfun.tv/news/167