Laravel 8 Stripe Payment Gateway Integration Tutorial

Laravel 8 Stripe Payment Gateway Integration Tutorial

Laravel 8 stripe payment gateway integration tutorial example. In this tutorial, we will show you how to integrate stripe payment gateway in laravel 8 app.

In this tutorial, you will learn step by step how to integrate stripe payment gateway in laravel 8 app.

Stripe is the most popular payment gateway which is integrated into many websites, Stripe payment is easy to integrate and use. Stripe is a very simple and most powerful and flexible tool.

Stripe Payment Gateway Integration In Laravel 8

  • Step 1: Install Laravel 8 App
  • Step 2: Install stripe Package
  • Step 3: Stripe Configuration
  • Step 4: Make Route
  • Step 5: Create Controller
  • Step 6: Create Blade View file
  • Step 7: Run Development Server

Step 1: Install Laravel 8 App

In this step, execute the following command on terminal to install Laravel 8 app. So, Open command prompt and execute the following command:

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

Step 2: Install Stripe package

In this step, install stripe package in laravel 8 app by executing the following command on terminal:

composer require stripe/stripe-php

After that, you need to set stripe key and secret. So, visit on Stripe website and create development stripe account. And get key and secret from stripe.com.

Step 3: Stripe Configuration

Now open .evn file and set the secret credential provided by a stripe payment gateway

STRIPE_KEY=pk_test_xxxxxxxxxxxxxxxxxxx 
STRIPE_SECRET=sk_test_xxxxxxxxxxxxxx

Next step, you need to set up the Stripe API key, to do this open or create the config/services.php file, and add or update the 'stripe' array:

   'stripe' => [
        'secret' => env('STRIPE_SECRET'),
    ],

Step 4: Make Route

In this step, open web.php file, which is placed inside routes directory. And add the following routes into it:

<?php
   
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\StripeController;
  
/*
|--------------------------------------------------------------------------
| 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', [StripeController::class, 'stripe']);
Route::post('stripe', [StripeController::class, 'stripePost'])->name('stripe.post');

Step 5: Create Controller

In this step, execute the following command on terminal to create the controller name StripeController:

php artisan make:controller StripeController

Then visit app/Http/Controllers/ directory and open StripeController. Then add the following code into StripeController.php

<?php
   
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use Session;
use Stripe;
   
class StripeController 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 tutsmake.com." 
        ]);
  
        Session::flash('success', 'Payment successful!');
          
        return back();
    }
}

Step 6: Create Blade View file

In this step, Visit app/resources/views/ and create one blade view file name stripe.blade.php. Then add the following code into Stripe.blade.php file:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 - Stripe Payment Gateway Integration Tutorial Example - Tutsmake.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.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/> Tutsmake.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>

Step 7: Run Development Server

In this step, execute the PHP artisan serve command on terminal to start development server:

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now, open browser and hit the following URL on it:

http://localhost:8000/stripe

Testing Card Credential

 Card No : 4242424242424242
Month : any future month
Year : any future Year
CVV : 123

Conclusion

Stripe payment gateway integration in laravel 8 tutorial, you have learn how to integrate the stripe payment gateway in laravel 8 app.

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *