Stripe Payment Gateway Integration In Laravel 8 With Example

Laravel

225

w3alert.com

02-11-2020


Laravel 8 Stripe Payment Gateway Integration Example

In this tutorial, We will discuss stripe payment gateway integration in laravel 8. You will learn stripe payment gateway in laravel 8 by an example. step by step explain the laravel 8 payment integration stripe example.

You need to create a Stripe Developer account and get more secrets of API from there. Then we will use the Stripe / Stripe-PHP Composer library for Stripe Payment Gateway in Laravel 8. We are showing step by step integration for Stripe Payment Gateway.

Stripe is a very popular and secure Internet payment gateway company that helps in accepting payments worldwide. Stripe provides you with a really good development interface to get you started and you have to pay a membership fee to know that it offers a free developer account before starting the code in your app.

So, let's follow some steps to make an example of the stripe payment gateway in the Laravel 8 application.

  • Install Laravel 8
  • Install stripe-php Package
  • Set Stripe API Key and SECRET
  • Add Routes
  • Create Controller File
  • Create Blade File

Step 1: Install Laravel 8

First Step, you need to download or install the laravel web application new setup on your local machine. you can use the following command to download or install the laravel application new setup:

    composer create-project --prefer-dist laravel/laravel blog

If you want to install a specific version of laravel, you can follow the following tutorial.

    https://w3alert.com/laravel-tutorial/laravel-install-on-windows-ubuntu-with-composer

Step 2: Install stripe-php Package

In this step, we need to install Stripe-PHP through the Composer Package Manager, so one of your terminal and fire bellow commands:

    composer require stripe/stripe-php

Step 3: Set Stripe API Key and SECRET

Now, we need to 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 bellow:

.env

    STRIPE_KEY=pk_test_reFxwbsm9cdCKASdTfxAR
    STRIPE_SECRET=sk_test_oQMFWteJiPd4wj4AtgApY

Step 4: Add Routes

Next step, we will add two routes for get request and another for post request and add the following routes into your web.php file:

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::get('stripe', [StripePaymentController::class, 'stripe']);
    Route::post('stripe', [StripePaymentController::class, 'stripePost'])->name('stripe.post');

Step 5: Create Controller File

in next step, now we have create new controller as StripePaymentController, So let's create controller:

app/Http/Controllers/StripePaymentController.php

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

Step 6: Create Blade File

In last step, we have to create stripe.blade.php(resources/views/stripe.blade.php) for layout and write code of jquery to get token from stripe here and put bellow code:

resources/views/stripe.blade.php

    <!DOCTYPE html>
    <html>
    <head>
        <title>Laravel 8 - Stripe Payment Gateway Integration Example - w3alert.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>
        <style type="text/css">
            .panel-title {
            display: inline;
            font-weight: bold;
            }
            .display-table {
                display: table;
            }
            .display-tr {
                display: table-row;
            }
            .display-td {
                display: table-cell;
                vertical-align: middle;
                width: 61%;
            }
        </style>
    </head>
    <body>
      
    <div class="container">
      
        <h1>Laravel 8 - Stripe Payment Gateway Integration Example <br/> w3alert
.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" >
                        <div class="row display-tr" >
                            <h3 class="panel-title display-td" >Payment Details</h3>
                            <div class="display-td" >                            
                                <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
                            </div>
                        </div>                    
                    </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 
                                role="form" 
                                action="{{ route('stripe.post') }}" 
                                method="post" 
                                class="require-validation"
                                data-cc-on-file="false"
                                data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"
                                id="payment-form">
                            @csrf
      
                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>Name on Card</label> <input
                                        class='form-control' size='4' type='text'>
                                </div>
                            </div>
      
                            <div class='form-row row'>
                                <div class='col-xs-12 form-group card required'>
                                    <label class='control-label'>Card Number</label> <input
                                        autocomplete='off' class='form-control card-number' size='20'
                                        type='text'>
                                </div>
                            </div>
      
                            <div class='form-row row'>
                                <div class='col-xs-12 col-md-4 form-group cvc required'>
                                    <label class='control-label'>CVC</label> <input autocomplete='off'
                                        class='form-control card-cvc' placeholder='ex. 311' size='4'
                                        type='text'>
                                </div>
                                <div class='col-xs-12 col-md-4 form-group expiration required'>
                                    <label class='control-label'>Expiration Month</label> <input
                                        class='form-control card-expiry-month' placeholder='MM' size='2'
                                        type='text'>
                                </div>
                                <div class='col-xs-12 col-md-4 form-group expiration required'>
                                    <label class='control-label'>Expiration Year</label> <input
                                        class='form-control card-expiry-year' placeholder='YYYY' size='4'
                                        type='text'>
                                </div>
                            </div>
      
                            <div class='form-row row'>
                                <div class='col-md-12 error form-group hide'>
                                    <div class='alert-danger alert'>Please correct the errors and try
                                        again.</div>
                                </div>
                            </div>
      
                            <div class="row">
                                <div class="col-xs-12">
                                    <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now ($100)</button>
                                </div>
                            </div>
                              
                        </form>
                    </div>
                </div>        
            </div>
        </div>
          
    </div>
      
    </body>
      
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
      
    <script type="text/javascript">
    $(function() {
       
        var $form         = $(".require-validation");
       
        $('form.require-validation').bind('submit', function(e) {
            var $form         = $(".require-validation"),
            inputSelector = ['input[type=email]', 'input[type=password]',
                             'input[type=text]', 'input[type=file]',
                             'textarea'].join(', '),
            $inputs       = $form.find('.required').find(inputSelector),
            $errorMessage = $form.find('div.error'),
            valid         = true;
            $errorMessage.addClass('hide');
      
            $('.has-error').removeClass('has-error');
            $inputs.each(function(i, el) {
              var $input = $(el);
              if ($input.val() === '') {
                $input.parent().addClass('has-error');
                $errorMessage.removeClass('hide');
                e.preventDefault();
              }
            });
       
            if (!$form.data('cc-on-file')) {
              e.preventDefault();
              Stripe.setPublishableKey($form.data('stripe-publishable-key'));
              Stripe.createToken({
                number: $('.card-number').val(),
                cvc: $('.card-cvc').val(),
                exp_month: $('.card-expiry-month').val(),
                exp_year: $('.card-expiry-year').val()
              }, stripeResponseHandler);
            }
      
      });
      
      function stripeResponseHandler(status, response) {
            if (response.error) {
                $('.error')
                    .removeClass('hide')
                    .find('.alert')
                    .text(response.error.message);
            } else {
                /* token contains id, last4, and card type */
                var token = response['id'];
                   
                $form.find('input[type=text]').empty();
                $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                $form.get(0).submit();
            }
        }
       
    });
    </script>
    </html>

Now you can run and check.