A four-step checkout you can hand to a Laravel app. Validate shipping before payment, keep the summary beside the form, and replace placeOrder with Stripe, Paddle, or Lemon Squeezy.

The pricing block SaaS landing pages ask for. Yearly prices are the monthly equivalent, and the selected plan is a Livewire action you can turn into a checkout.

1. Run the migration to create the cart_items table:

php artisan migrate

2. Copy the component files:

• Copy ShoppingCart.php to your app/Livewire directory
• Copy shopping-cart.blade.php to your resources/views/livewire directory
• Copy CartItem.php to your app/Models directory

Integration

To integrate this component into your Laravel project, use the following Livewire directive:

@livewire('shopping-cart')

For testing purposes, you can also include the test component:

@livewire('add-to-cart-test')

Usage Instructions

The shopping cart automatically manages items based on the user's session. Users can:

• Update item quantities using the dropdown selector
• Remove items using the X button
• View real-time price calculations
• Proceed to checkout when ready

Configuration Options

The component includes several configurable options:

public $shipping = 5.00;    // Default shipping cost
private $taxRate = 0.08;    // Tax rate (8% by default)

Customization Possibilities

The component can be customized in several ways:

1. Tax Calculation:

private function calculateTotals()
{
    $this->tax = round($this->subtotal * $this->taxRate, 2);
}

2. Checkout Process:

public function checkout()
{
    // Add your custom checkout logic here
    $this->dispatch('checkout-initiated', [
        'total' => $this->total,
        'items' => $this->cartItems->count()
    ]);
}

3. Session Management:

public function mount()
{
    $this->sessionId = session()->get('cart_session_id', Str::random(32));
    session()->put('cart_session_id', $this->sessionId);
}

Additional Features

• Real-time quantity updates
• Dynamic price calculations
• Tax and shipping handling
• Session-based cart management
• Support for guest and authenticated users
• Responsive design with Tailwind CSS

Requirements

• Laravel 10.x or higher
• Livewire 3.x
• Alpine.js
• Tailwind CSS