Laravel 10 Stripe Payment Gateway Integration Tutorial

Stripe provides really nice development interface to start and you don’t have to pay subscription charges to learn it provides a free developer account, before starting to code in your app.

Step 1: Install Laravel 10

composer create-project laravel/laravel example-app

Step 2: Install stripe-php Package

composer require stripe/stripe-php

Step 3: Set Stripe API Key and SECRET

 now we set the stripe key and secret. so first you can go on Stripe website and create a development stripe account key and secret and add below:

.env

STRIPE_KEY=pk_test_reFxwbsm9cdCKASdTfxAR
STRIPE_SECRET=sk_test_oQMFWteJiPd4wj4AtgApY

Step 4: Create Controller 

app/Http/Controllers/StripePaymentController.php 

<?php
      
    namespace App\Http\Controllers;
           
    use Illuminate\Http\Request;
    use Stripe;
    use Illuminate\View\View;
    use Illuminate\Http\RedirectResponse;
           
    class StripePaymentController extends Controller
    {
        /**
         * success response method.
         *
         * @return \Illuminate\Http\Response
         */
        public function stripe(): View
        {
            return view('stripe');
        }
          
        /**
         * success response method.
         *
         * @return \Illuminate\Http\Response
         */
        public function stripePost(Request $request): RedirectResponse
        {
            Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
          
            Stripe\Charge::create ([
                    "amount" => 10 * 100,
                    "currency" => "usd",
                    "source" => $request->stripeToken,
                    "description" => "Test payment from itsolutionstuff.com." 
            ]);
                    
            return back()
                    ->with('success', 'Payment successful!');
        }
    }

Step 5: Create Routes

routes/web.php 

<?php
   
    use Illuminate\Support\Facades\Route;
      
    use App\Http\Controllers\StripePaymentController;
      
    /*
    |--------------------------------------------------------------------------
    | Web Routes
    |--------------------------------------------------------------------------
    |
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider within a group which
    | contains the "web" middleware group. Now create something great!
    |
    */
      
    Route::controller(StripePaymentController::class)->group(function(){
        Route::get('stripe', 'stripe');
        Route::post('stripe', 'stripePost')->name('stripe.post');
    });

Step 6: Create Blade File

resources/views/stripe.blade.php 

<!DOCTYPE html>
    <html>
    <head>
        <title>Laravel 10 - Stripe Payment Gateway Integration Example - webthestuff.com</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
          
    <div class="container">
          
        <h1>Laravel 10 - Stripe Payment Gateway Integration Example <br/> webthestuff.com</h1>
          
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default credit-card-box">
                    <div class="panel-heading display-table" >
                        <h2 class="panel-title" >Checkout Forms</h2>
                    </div>
                    <div class="panel-body">
          
                        @if (Session::has('success'))
                            <div class="alert alert-success text-center">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                                <p>{{ Session::get('success') }}</p>
                            </div>
                        @endif
      
                         <form id='checkout-form' method='post' action="{{ route('stripe.post') }}">   
                            @csrf             
                            <input type='hidden' name='stripeToken' id='stripe-token-id'>                              
                            <br>
                            <div id="card-element" class="form-control" ></div>
                            <button 
                                id='pay-btn'
                                class="btn btn-success mt-3"
                                type="button"
                                style="margin-top: 20px; width: 100%;padding: 7px;"
                                onclick="createToken()">PAY $10
                            </button>
                        <form>
          
                    </div>
                </div>        
            </div>
        </div>
              
    </div>
          
    </body>
         
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
      
        var stripe = Stripe('{{ env('STRIPE_KEY') }}')
        var elements = stripe.elements();
        var cardElement = elements.create('card');
        cardElement.mount('#card-element');
      
        /*------------------------------------------
        --------------------------------------------
        Create Token Code
        --------------------------------------------
        --------------------------------------------*/
        function createToken() {
            document.getElementById("pay-btn").disabled = true;
            stripe.createToken(cardElement).then(function(result) {
       
                if(typeof result.error != 'undefined') {
                    document.getElementById("pay-btn").disabled = false;
                    alert(result.error.message);
                }
      
                /* creating token success */
                if(typeof result.token != 'undefined') {
                    document.getElementById("stripe-token-id").value = result.token.id;
                    document.getElementById('checkout-form').submit();
                }
            });
        }
    </script>
     
    </html>

Run Laravel App:

php artisan serve

Now, Go to web browser, type the given URL, and see the output:

http://localhost:8000/stripe