Laravel 11 Stripe Payment Gateway Integration Tutorial

PHP Stripe SDK allows users to integrate payment gateway into Laravel 11 applications which helps in collecting international and domestic payments in the application.

Let’s start to add stripe payment gateway in application:

Step 1: Set Up Your Stripe Account

Open browser and type https://dashboard.stripe.com/register url to set up account on stripe, and then copy Publishable key and the Secret key under Developers > API keys.

Step 2: Install Stripe PHP Library

Run the following command to install stripe php library:

composer require stripe/stripe-php

Step 3: Configure API Keys in .env

Edit .env file and add the secret key and publishable key in it:

STRIPE_KEY=your_stripe_publishable_key
STRIPE_SECRET=your_stripe_secret_key

Step 4: Set Up Routes

In routes/web.php, add the routes for the checkout page and the payment processing requests:

use App\Http\Controllers\StripeController;
use Illuminate\Support\Facades\Route;

Route::get('/checkout', [StripeController::class, 'checkout'])->name('checkout');
Route::post('/payment', [StripeController::class, 'payment'])->name('payment');

Step 5: Create Controller

Create a controller to handle the Stripe payment process logic:

php artisan make:controller StripeController

In app/Http/Controllers/StripeController.php file, create some methods to handle the Stripe payment process logic:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Stripe\Stripe;
use Stripe\Charge;

class StripeController extends Controller
{
    public function checkout()
    {
        return view('checkout');
    }

    public function payment(Request $request)
    {
        Stripe::setApiKey(env('STRIPE_SECRET'));

        try {
            $charge = Charge::create([
                'amount' => 1000, // Amount in cents
                'currency' => 'usd',
                'source' => $request->stripeToken,
                'description' => 'Test payment from Laravel Stripe Integration'
            ]);

            return back()->with('success_message', 'Payment successful!');
        } catch (\Exception $ex) {
            return back()->with('error_message', 'Error! ' . $ex->getMessage());
        }
    }
}

Step 6: Create Blade View

Create a checkout.blade.php file in the resources/views directory:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Stripe Payment Gateway Integration - ItcodStuff.com</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>Laravel 11 Stripe Payment Gateway Integration - ItcodStuff.com</h1>
    @if (session('success_message'))
        <div class="alert alert-success">{{ session('success_message') }}</div>
    @endif
    @if (session('error_message'))
        <div class="alert alert-danger">{{ session('error_message') }}</div>
    @endif

    <form action="{{ route('payment') }}" method="post" id="payment-form">
        @csrf
        <div class="form-group">
            <label for="card-element">Credit or debit card</label>
            <div id="card-element">
                <!-- A Stripe Element will be inserted here. -->
            </div>
            <div id="card-errors" role="alert"></div>
        </div>
        <button class="btn btn-primary">Submit Payment</button>
    </form>
</div>

<script src="https://js.stripe.com/v3/"></script>
<script>
    var stripe = Stripe('{{ env('STRIPE_KEY') }}');
    var elements = stripe.elements();
    var card = elements.create('card');
    card.mount('#card-element');
    card.on('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });

    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        stripe.createToken(card).then(function(result) {
            if (result.error) {
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
            } else {
                stripeTokenHandler(result.token);
            }
        });
    });

    function stripeTokenHandler(token) {
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);
        form.submit();
    }
</script>
</body>
</html>

Step 7: Test Stripe Integration

Run the Laravel development server by using artisan command:

Type http://127.0.0.1:8000/checkout in your web browser.