Laravel 11 + Vue Paddle Integration

Level 58

Integrating Paddle with Laravel and Vue can be a bit tricky, but I'll guide you through the process step-by-step. We'll cover setting up the backend with Laravel and the frontend with Vue.

Step 1: Set Up Laravel Backend

Install Laravel: If you haven't already, install Laravel using Composer:
```
composer create-project --prefer-dist laravel/laravel laravel-paddle
```
Set Up Paddle SDK: Install the Paddle SDK for PHP:
```
composer require paddle/paddle-php
```

Configure Paddle: Add your Paddle credentials to the .env file:

PADDLE_VENDOR_ID=your_vendor_id
PADDLE_API_KEY=your_api_key

Create a Paddle Service: Create a service class to handle Paddle interactions:

// app/Services/PaddleService.php
namespace App\Services;

use Paddle\API;

class PaddleService
{
    protected $api;

    public function __construct()
    {
        $this->api = new API(env('PADDLE_VENDOR_ID'), env('PADDLE_API_KEY'));
    }

    public function createCheckout($productId, $customerEmail)
    {
        return $this->api->checkout->create([
            'product_id' => $productId,
            'customer_email' => $customerEmail,
        ]);
    }
}

Create a Controller: Create a controller to handle Paddle requests:

// app/Http/Controllers/PaddleController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Services\PaddleService;

class PaddleController extends Controller
{
    protected $paddleService;

    public function __construct(PaddleService $paddleService)
    {
        $this->paddleService = $paddleService;
    }

    public function createCheckout(Request $request)
    {
        $checkout = $this->paddleService->createCheckout($request->product_id, $request->customer_email);
        return response()->json($checkout);
    }
}

Define Routes: Add routes to handle Paddle requests:

// routes/api.php
use App\Http\Controllers\PaddleController;

Route::post('/paddle/checkout', [PaddleController::class, 'createCheckout']);

Step 2: Set Up Vue Frontend

Install Vue: If you haven't already, install Vue in your Laravel project:
```
npm install vue@next
```

Create a Vue Component: Create a Vue component to handle the checkout process:

<!-- resources/js/components/PaddleCheckout.vue -->
<template>
    <div>
        <input v-model="email" placeholder="Enter your email" />
        <button @click="createCheckout">Checkout</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            email: '',
        };
    },
    methods: {
        async createCheckout() {
            try {
                const response = await axios.post('/api/paddle/checkout', {
                    product_id: 12345, // Replace with your product ID
                    customer_email: this.email,
                });
                window.location.href = response.data.url;
            } catch (error) {
                console.error(error);
            }
        },
    },
};
</script>

Register the Component: Register the component in your main JavaScript file:

// resources/js/app.js
import { createApp } from 'vue';
import PaddleCheckout from './components/PaddleCheckout.vue';

const app = createApp({});
app.component('paddle-checkout', PaddleCheckout);
app.mount('#app');

Include the Component in a Blade View: Add the Vue component to a Blade view:

<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Laravel Paddle Integration</title>
    <script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <paddle-checkout></paddle-checkout>
    </div>
</body>
</html>

Step 3: Test the Integration

Run Migrations: Make sure your database is set up and run migrations:
```
php artisan migrate
```
Serve the Application: Serve your Laravel application:
```
php artisan serve
```
Compile Assets: Compile your JavaScript assets:
```
npm run dev
```
Test the Checkout: Open your application in a browser and test the checkout process.

This should give you a basic integration of Paddle with Laravel and Vue. You can expand on this by adding more features and handling different scenarios as needed.