Stripe payment gateway integration with Laravel 5.8.
Greetings to everyone, I am Shivasish Dey. In this article, we are going to see how we can integrate the Stripe payment gateway with the Laravel 5.8 project.
Let’s first get a brief idea about Stripe. It allows business owners to accept payments worldwide from credit and debit cards and processes those payments. Businesses can also accept payments from mobile wallets and buy now, pay later services. Stripe also offers a test mode that can be used by developers for testing purposes.
Requirements
- Stripe account for developers.
- Publishable key and Secret key, which you will get at the home tab after logging in.
Step 1: Install Laravel 5.8
Let’s start from scratch, for installing Laravel 5.8 we will use the below command. Open your command prompt and navigate it to the “htdocs” folder.
composer create-project — prefer-dist laravel/laravel blogStep 2: Install stripe-php package
Using composer package manager, we have to run the below command to install stripe-php Package.
composer require stripe/stripe-phpStep 3: Setting Stripe Publishable key and Secret key
Now, we have to set the Publishable key and Secret key. We can find the Publishable key and Secret key on the home page after logging into the Stripe website.
STRIPE_KEY=pk_test_txxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_SECRET=sk_test_exxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxCopy and paste those two above keys in “.env” file.
Step 4: Creating Routes
Route::get('stripe', 'StripePaymentController@stripe');
Route::post('stripe', 'StripePaymentController@stripePost')->name('stripe.post');Step 5: Create Controller
I will suggest you make a separate controller file for Stripe to avoid further confusion.
app/Http/Controllers/StripePaymentController.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: Working on Frontend(Blade file)
Our Frontend file will contain jQuery to get the token from Stripe.
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">
<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="https://openjournalsystems.com/file/2017/07/payment-success.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 {
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: Test data
Name: <Your name>
Card Number: 4242 4242 4242 4242
CVV: 123
Expiry month: 12
Expiry year: 2024
Good Luck 👍
