Laravel 8 Stripe Payment Gateway Integration Example

In this tutorial you will learn about the Laravel 8 Stripe Payment Gateway Integration Example and its application with practical example.

In this Laravel 8 stripe payment gateway integration tutorial, I’ll show you how to integrate stripe payment gateway in laravel 8. In this tutorial you will learn to integrate stripe in laravel 8. In this step by step tutorial I’ll share laravel 8 stripe integration example.

Table Of Contents−

Stripe Payment Gateway
Laravel 8 Stripe Payment Gateway Integration Example

Laravel 8 Stripe Integration Example

Stripe Payment Gateway

Stripe is one of the most popular payment gateway, that allows us to accept payment worldwide. Stripe is very simple, hassle free and easy to integrate payment gateway. Integrating stripe payment gateway with laravel is a breeze. After integrating stripe in laravel you will be able to collect payment via simple payment form which allow customer to provide card information like card number, expiry date and a CVC code.

In this tutorial, you will learn to integrate stripe payment gateway in your laravel 8 project. Follow this step by step tutorial to learn stripe payment gateway integration in laravel 8.

Laravel 8 Stripe Integration Example

Install Laravel 8 App

Install stripe Package
Stripe Configuration
Make Route

Create Controller
Create Blade View file
Run Development Server

Install Laravel 8

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

1	composer create-project --prefer-dist laravel/laravel lara8blog

Make sure you have composer installed.

Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara8blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara8blog

DB_USERNAME=root

DB_PASSWORD=

Install Stripe package

Now, we need to install stripe-php package in our project. Open your terminal and switch to project directory and use the following composer command to install stripe-php package.

composer require stripe/stripe-php

1	composer require stripe/stripe-php

Stripe Configuration

Create Stripe account and generate key and secret key. Go to the official Stripe website and signup with basic details. Now, we need to set stripe key and secret key in our project’s .env file. In stripe dashboard switch to the test mode and get the stripe key and secret. Now, open .env file located in project’s root folder and set the stripe key and secret as following –

.env file

STRIPE_KEY=test_publishable_key
STRIPE_SECRET=test_secret_key

1 2	STRIPE_KEY=test_publishable_key STRIPE_SECRET=test_secret_key

You will also need to set up the Stripe API key, Let’s open or create the config/services.php file, and add or update the 'stripe' array as following:

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

'stripe' => [

'secret' => env('STRIPE_SECRET'),

Create Route

After this, we need to add following two routes in “routes/web.php” to display barcode. Lets open “routes/web.php” file and add following route.

routes/web.php

<?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');

<?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');

Create Controller and Methods

Now, lets create a payment controller using following command

php artisan make:controller StripeController

1	php artisan make:controller StripeController

Once the above command executed, it will create a controller file StripeController.php in app/Http/Controllers/ directory. Open the StripeController.php file and put the following code in it.

Controllers/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();
    }
}

<?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();

}

Create View/Blade File

In this step, we will create view/blade file to accept stripe payment. Lets create a “stripe.blade.php” file in “resources/views/” directory and put the following code in it.

resources/views/stripe.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 - Stripe Payment Gateway Integration Tutorial Example</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</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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 - Stripe Payment Gateway Integration Tutorial Example</title>

.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>

<h1>Laravel 8 - Stripe Payment Gateway Integration Example</h1>

<h3 class="panel-title display-td" >Payment Details</h3>

</div>

@if (Session::has('success'))

<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

<label class='control-label'>Name on Card</label> <input

class='form-control' size='4' type='text'>

</div>

<label class='control-label'>Card Number</label> <input

autocomplete='off' class='form-control card-number' size='20'

type='text'>

</div>

<label class='control-label'>CVC</label> <input autocomplete='off'

class='form-control card-cvc' placeholder='ex. 311' size='4'

type='text'>

</div>

<label class='control-label'>Expiration Month</label> <input

class='form-control card-expiry-month' placeholder='MM' size='2'

type='text'>

</div>

<label class='control-label'>Expiration Year</label> <input

class='form-control card-expiry-year' placeholder='YYYY' size='4'

type='text'>

</div>

<div class='alert-danger alert'>Please correct the errors and try

again.</div>

</div>

</div>

</form>

</div>

</body>

$(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>

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/stripe

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Stripe Payment Gateway Integration Example

Stripe Payment Gateway