详解用vue.js和laravel实现微信支付

以下是详解用Vue.js和Laravel实现微信支付的完整攻略：

1. 前期准备

首先我们需要准备一些前期工作，包括：

• 注册微信支付账号，获取appid、商户号、支付秘钥等信息，以及生成API密钥证书；
• 安装Laravel框架，创建项目并安装必要扩展库；
• 安装Vue.js框架，创建项目并安装必要依赖库。

2. 后端实现

• 在Laravel项目中，配置微信支付的相关信息，包括公众号、商户号、支付密钥、证书等；
• 创建微信支付控制器，编写预支付和支付回调接口函数；
• 在预支付接口中，对订单信息进行校验，生成统一下单接口所需的参数并调用微信支付API，返回预支付结果；
• 在支付回调接口中，对支付状态进行验证，处理订单信息并返回支付结果。

3. 前端实现

• 在Vue.js项目中，创建微信支付组件；
• 在组件中使用axios库请求后端预支付接口，获取预支付结果；
• 将预支付结果传递给微信公众号支付API，生成支付二维码或跳转到微信支付页面；
• 在微信支付成功后，回调后端接口，更新订单状态等相关信息。

示例说明

1. 预支付实现示例

<?php

namespace App\Http\Controllers;

use App\Constants\PaymentMethod;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;
use Yansongda\Pay\Pay;

class WechatPayController extends Controller
{
    public function prepay(Request $request)
    {
        // 验证订单信息
        $this->validate($request, [
            'order_no' => 'required|unique:orders',
            'amount' => 'required|numeric|min:0.01',
            'description' => 'required',
        ]);

        $user = auth()->user();
        $order = Order::create([
            'order_no' => $request->input('order_no'),
            'amount' => $request->input('amount'),
            'description' => $request->input('description'),
            'user_id' => $user->id,
        ]);

        // 调用支付API
        $orderData = [
            'out_trade_no' => $order->order_no,
            'total_fee' => bcmul(strval($order->amount), '100'), // 单位为分
            'body' => $order->description,
            'trade_type' => 'JSAPI', // 微信公众号支付
            'openid' => $user->openid,
        ];
        $pay = Pay::wechat(config('pay.wechat'))->{$orderData['trade_type']}($orderData);
        if ($pay->return_code !== 'SUCCESS' || $pay->result_code !== 'SUCCESS') {
            $order->delete();
            return response()->json(['message' => '支付失败'], 500);
        }

        return $pay->toArray();
    }
}

1. 支付回调示例

<?php

namespace App\Http\Controllers;

use App\Models\Order;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;
use Symfony\Component\HttpFoundation\Response;
use Yansongda\Pay\Pay;

class WechatPayController extends Controller
{
    public function notify(Request $request)
    {
        $pay = Pay::wechat(config('pay.wechat'));

        try {
            $data = $pay->verify(); // 验证签名
            $order = Order::where('order_no', $data['out_trade_no'])->firstOrFail();
            if ($order->paid_at) { // 如果订单已经支付过了
                return $pay->success();
            }
            $order->update([
                'paid_at' => now(), // 支付时间
                'payment_method' => PaymentMethod::WECHAT, // 支付方式
                'payment_no' => $data['transaction_id'], // 微信支付订单号
            ]);
            // TODO: 处理支付成功后的业务逻辑
            Log::info('Wechat pay success', ['order_no' => $order->order_no]);
            return $pay->success();
        } catch (\Exception $e) {
            Log::error("WeChat Pay notify error: {$e->getMessage()}", ['request' => $request->all()]);
            return $pay->fail();
        }
    }
}

以上就是用Vue.js和Laravel实现微信支付的完整攻略，示例代码可以辅助理解。