Stripe Payment Gateway Integration in Laravel 5.8

https://www.itsolutionstuff.com/post/stripe-payment-gateway-integration-in-laravel-58example.html

Stripe Payment Gateway Integration in Laravel 5.8

By Hardik Savani June 1, 2019 Category : PHP LaravelPauseUnmuteLoaded: 2.85%FullscreenIn this tutorial, i will guide you step by step laravel 5.8 stripe integration example from scratch. you will learn to implement stripe payment gateway integration with your laravel 5.8 application.

You need to create stripe developer account and need to get api key and secret from there. Then we will use stripe/stripe-php composer library for stripe payment gateway in laravel 5.8. I write step by step integration for stripe payment gateway.

Stripe is a very popular and secure internet payment gateway company which helps to accept payment worldwide. Stripe provide really nice development interface to start and you don’t have to pay subscription charges to learn it provides free developer account, before starting to code in your app.

Follow Tuto: Payment Processing by HighRiskPay

I will give you example from scratch to implement stripe payment gateway in laravel 5.8 application. You just need to follow few step to get full example to pay.

Step 1: Install Laravel 5.8

I am going to explain step by step from scratch so, we need to get fresh Laravel 5.8 application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2: Install stripe-php Package

In this step we need to install stripe-php via the Composer package manager, so one your terminal and fire bellow command:

composer require stripe/stripe-php

Step 3: Set Stripe API Key and SECRET

Now, we need to set stripe key and secret. so first you can go on Stripe website and create development stripe account key and secret and add bellow:

.env

STRIPE_KEY=pk_test_reFxwbsm9cdCKASdTfxARSTRIPE_SECRET=sk_test_oQMFWteJiPd4wj4AtgApY

Step 4: Create Routes

In this step, we will create two routes for get request and another for post request. So, let's add new route on that file.

routes/api.php

<?php    Route::get('stripe', 'StripePaymentController@stripe');Route::post('stripe', 'StripePaymentController@stripePost')->name('stripe.post');

Step 5: Create Controller File

in next step, now we have create new controller as StripePaymentController and write both method on it like as bellow, So let's create both 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 itsolutionstuff.com."         ]);          Session::flash('success', 'Payment successful!');                  return back();    }}

Step 6: Create Blade File

In Last step, let's create stripe.blade.php(resources/views/stripe.blade.php) for layout and write code of jquery to get token from stripe here and put following code:

resources/views/stripe.blade.php

<!DOCTYPE html><html><head>	<title>Laravel 5 - Stripe Payment Gateway Integration Example - ItSolutionStuff.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 5 - Stripe Payment Gateway Integration Example <br/> ItSolutionStuff.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'];            // insert the token into the form so it gets submitted to the server            $form.find('input[type=text]').empty();            $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");            $form.get(0).submit();        }    }  });</script></html>

Now you can check with following card details:

Name: Test

Number: 4242 4242 4242 4242

CSV: 123

Expiration Month: 12

Expiration Year: 2024

I hope it can help you...

PreviousLaravel Dynamic Autocomplete Search using Select2 JS Ajax - Part 2 NextLaravel Razorpay Payment Gateway Example

Last updated 3 years ago

<!DOCTYPE html><html><head> <title>Laravel 5 - Stripe Payment Gateway Integration Example - ItSolutionStuff.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 5 - Stripe Payment Gateway Integration Example <br/> ItSolutionStuff.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']; // insert the token into the form so it gets submitted to the server $form.find('input[type=text]').empty(); $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>"); $form.get(0).submit(); } } });</script></html>

hashtagStripe Payment Gateway Integration in Laravel 5.8

Stripe Payment Gateway Integration in Laravel 5.8