Laravel 8 - Stripe payment gateway integration
Laravel 8 - Stripe payment gateway integration
In this tutorial, we'll discuss how to integrate the Stripe payment gateway in Laravel 8. Stripe is a popular payment processing platform that enables businesses to securely accept and manage payments online with ease.
If you're a video person, feel free to skip the post and check out the video instead!
Step # 1 : Install fresh laravel project.
Command : composer create-project --prefer-dist laravel/laravel stripe
Step # 2 : Let's install stripe via composer.
Access the project that we just created using git bash or any other command line interface of your choice
Git Bash : cd c:xampp/htdocs/stripe
Run the below command to install stripe package.
Command : composer require stripe/stripe-php
Step # 3 : Create stripe account.
link : https://stripe.com/
After successfully completing the 3rd step you will be able to access the publishable & private key.
Step # 4 : Create a CheckoutController.
Command : php artisan make:controller CheckoutController
Step # 5 : Access web.php and create below routes.
Route::get('checkout','App\Http\Controllers\CheckoutController@checkout');
Route::post('checkout','App\Http\Controllers\CheckoutController@afterpayment')->name('checkout.credit-card');
Step # 6 : Access CheckoutController and paste the below code.
Put your stripe secret key in the checkout method.
\Stripe\Stripe::setApiKey('use-your-stripe-key-here');
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CheckoutController extends Controller
{
public function checkout()
{
// Enter Your Stripe Secret
\Stripe\Stripe::setApiKey('use-your-stripe-key-here');
$amount = 100;
$amount *= 100;
$amount = (int) $amount;
$payment_intent = \Stripe\PaymentIntent::create([
'description' => 'Stripe Test Payment',
'amount' => $amount,
'currency' => 'AED',
'description' => 'Payment From All About Laravel',
'payment_method_types' => ['card'],
]);
$intent = $payment_intent->client_secret;
return view('checkout.credit-card',compact('intent'));
}
public function afterPayment()
{
echo 'Payment Received, Thanks you for using our services.';
}
}
Step # 7 : Create new folder inside views named checkout and then create a file named credit-card.blade.php.
It should look something like this (resources/views/checkout/credit-card.blade.php)
Paste the below code in credit-card.blade.php
Put you stripe publishable key in the blade file.
$stripe_key = 'put your publishable key here';
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stripe Payment</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
@php
$stripe_key = 'put your publishable key here';
@endphp
<div class="container" style="margin-top:10%;margin-bottom:10%">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="">
<p>Your Total Amount is 100 AED</p>
</div>
<div class="card">
<form action="{{route('checkout.credit-card')}}" method="post" id="payment-form">
@csrf
<div class="form-group">
<div class="card-header">
<label for="card-element">
Enter your credit card information
</label>
</div>
<div class="card-body">
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
<input type="hidden" name="plan" value="" />
</div>
</div>
<div class="card-footer">
<button
id="card-button"
class="btn btn-dark"
type="submit"
data-secret="{{ $intent }}"
> Pay </button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script>
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
const stripe = Stripe('{{ $stripe_key }}', { locale: 'en' }); // Create a Stripe client.
const elements = stripe.elements(); // Create an instance of Elements.
const cardElement = elements.create('card', { style: style }); // Create an instance of the card Element.
const cardButton = document.getElementById('card-button');
const clientSecret = cardButton.dataset.secret;
cardElement.mount('#card-element'); // Add an instance of the card Element into the `card-element` <div>.
// Handle real-time validation errors from the card Element.
cardElement.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.handleCardPayment(clientSecret, cardElement, {
payment_method_data: {
//billing_details: { name: cardHolderName.value }
}
})
.then(function(result) {
console.log(result);
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
console.log(result);
form.submit();
}
});
});
</script>
</body>
</html>
Step # 8 : It's time to test the stripe payment integration.
Run the project using below command.
Command : php artisan serve
Visit url : 127.0.0.1/checkout
Step # 9 : Test Stripe integration using below dummy data.
Card Number - 4242 4242 4242 4242
EXP - 12/32
CVV - 123
ZIP - 12345
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments