Stripe Payment Gateway Integration in Laravel 5.8
By Super Admin |
Dec 20, 2020 |
Laravel
Stripe Payment Gateway Integration in laravel 5.8
In this article, your will step by step laravel 5.8 stripe integration example from scratch.
You have to create Stripe Developer Account and get your API key and Secret Key from there. We will use Stripe PHP Package for stripe payment gateway in laravel 5.8.
Follow below step by step integration for stripe payment gateway.
Step 1: First, create a project in laravel with the following command:
composer create-project --prefer-dist laravel/laravel stripelaravel
Step 2: After Laravel successfully created project, let's Install stripe-php Package to integrate in laravel as follows:
composer require stripe/stripe-php
Step 3: Let's create a pop up modal where we will ask for CARD Details a blade.php file as follows:
<button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#StripeCardModal">Stripe - Pay Online</button>
<!-- Modal -->
<div class="modal fade" id="StripeCardModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pay with Stripe</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form role="form" action="{{ url('place-order-with-stripe') }}" method="POST"
class="require-validation" data-cc-on-file="false" id="payment-form">
{{ csrf_field() }}
<div class="row">
<div class="col-md-12">
<div><p class="stripe-error py-3 text-danger"></p></div>
</div>
<div class="col-md-12 required">
<div class="form-group">
<label class="control-label">Name on Card</label>
<input type="text" class="form-control" required size="4">
</div>
</div>
<div class="col-md-12 required">
<div class="form-group">
<label class="control-label">Card Number</label>
<input type="text" autocomplete='off' class="form-control card-number" required size="20">
</div>
</div>
<div class="col-md-4 required">
<div class="form-group">
<label class='control-label'>CVC</label>
<input type="text" autocomplete="off" class="form-control card-cvc" required placeholder="ex. 311" size="4">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Expiration Month</label>
<input type="text" class="form-control card-expiry-month" required placeholder="MM" size="2">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class='control-label'>Expiration Year</label>
<input type="text" class="form-control card-expiry-year" required placeholder="YYYY" size="4">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group d-none">
<div class="alert-danger alert">
<h6 class="inp-error">Please correct the errors and try again.</h6>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
<input type="text" name="stipe_payment_btn" value="1">
<button type="submit" class="btn btn-primary btn-sm btn-block">Pay Now with Stripe</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Step 4: Let's add the scripts as given below directly in blade file or else create stripecheckout.js file and paste in it:
<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('.inp-error'),
valid = true;
$errorMessage.addClass('d-none');
$('.has-error').removeClass('has-error');
$inputs.each(function(i, el) {
var $input = $(el);
if ($input.val() === '') {
$input.parent().addClass('has-error');
$errorMessage.removeClass('d-none');
e.preventDefault();
}
});
if (!$form.data('cc-on-file')) {
var StripeKey = "pk_test_YourSkipePublication_KEY_value";
e.preventDefault();
Stripe.setPublishableKey(StripeKey);
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) {
$('.stripe-error').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>
Step 5: Let's create a controller and paste the below code:
use Stripe\Charge;
use Stripe\Stripe;
public function stripeorder(Request $request)
{
if(isset($_POST['stipe_payment_btn']))
{
$stripetoken = $request->input('stripeToken');
$STRIPE_SECRET = "YOUR_STRIPE_SECRET";
Stripe::setApiKey($STRIPE_SECRET);
\Stripe\Charge::create([
'amount' => 100 * 100,
'currency' => 'usd',
'description' => "Thank you for purchasing with Fabcart",
'source' => $stripetoken,
'shipping' => [
'name' => "User Name",
'phone' => "+1XXXXXXX",
'address' => [
'line1' => "Address 1",
'line2' => "Address 2",
'postal_code' => "Zipcode",
'city' => "City",
'state' => "State",
'country' => 'US',
],
],
]);
return redirect('/thank-you')->with('status','Order has been placed Successfully');
}
}
Step 7: Let's give a route to set and call the controller code as follows route/web.php:
// Stripe
Route::post('place-order-with-stripe','Frontend\CheckoutController@stripeorder');
Step 8: You are done with it. Now, run the artisan command to check:
$ php artisan serve
Step 9: Now lets test the payment thing:
Name: Any Name (Test)
Card No: 4242 4242 4242 4242
CSV: 123
Expiry month: 12
Expiry year: 2024
Thanks for reading.