Laravel Livewire Subscription Integration with Stripe

In this tutorial, learn how to implement a subscription payment system in a Laravel application using Livewire and Stripe. We’ll cover the installation of the Stripe and Livewire packages, setting up the subscription flow, and creating views to handle the payment process. Follow these steps to add subscription functionality with Stripe in your Laravel application.

Step 1: Install Livewire and Stripe Packages

First, install Laravel Livewire and the Stripe SDK via Composer:

composer require livewire/livewire
composer require stripe/stripe-php

Step 2: Configure Stripe API Keys

Get your API keys from the Stripe Dashboard and add them to your .env file:


STRIPE_KEY=your_stripe_public_key
STRIPE_SECRET=your_stripe_secret_key

Step 3: Create a Livewire Component for Subscription

Generate a Livewire component to handle the subscription logic. Run the following command:

php artisan make:livewire SubscriptionForm

In the generated component, open app/Http/Livewire/SubscriptionForm.php and add the following code to set up Stripe's checkout session and handle subscriptions:


<?php
namespace App\Http\Livewire;

use Livewire\Component;
use Stripe\Stripe;
use Stripe\Checkout\Session;

class SubscriptionForm extends Component
{
    public $plan;

    public function mount($planId)
    {
        $this->plan = $planId;
    }

    public function createCheckoutSession()
    {
        Stripe::setApiKey(env('STRIPE_SECRET'));

        $session = Session::create([
            'payment_method_types' => ['card'],
            'line_items' => [[
                'price' => $this->plan,
                'quantity' => 1,
            ]],
            'mode' => 'subscription',
            'success_url' => route('subscription.success'),
            'cancel_url' => route('subscription.cancel'),
        ]);

        return redirect($session->url);
    }

    public function render()
    {
        return view('livewire.subscription-form');
    }
}

Step 4: Define Routes for Subscription

Define routes in your web.php file to handle the subscription process. These include routes for the checkout page, success, and cancellation:


use App\Http\Livewire\SubscriptionForm;

Route::get('/subscribe/{plan}', SubscriptionForm::class);
Route::get('/subscription/success', function () {
    return 'Subscription successful!';
})->name('subscription.success');

Route::get('/subscription/cancel', function () {
    return 'Subscription canceled.';
})->name('subscription.cancel');

Step 5: Create the Subscription Blade View

In resources/views/livewire/subscription-form.blade.php, create a view that will display a "Subscribe" button to initiate the subscription:


<div>
    <h3>Subscribe to our Plan</h3>
    <button wire:click="createCheckoutSession" class="btn btn-primary">Subscribe Now</button>
</div>

Step 6: Include Livewire Scripts

In your main layout file (e.g., resources/views/layouts/app.blade.php), include Livewire’s styles and scripts:


<head>
    ...
    <livewire:styles />
</head>

<body>
    ...
    <livewire:scripts />
</body>

Conclusion

By following these steps, you can set up a subscription payment system using Livewire and Stripe in Laravel. This integration provides a smooth, interactive subscription flow for users. Remember to test the subscription with Stripe's test mode before switching to live credentials in production.