If you have created a web application using Laravel 10 Framework. You want to use Stripe for the payment system in this web application. So, In this tutorial, you will learn how to integrate the stripe payment gateway in Laravel 10 app.
Stripe Payment Gateway Integration In Laravel 10
By using the following simple steps, you can integrate the stripe payment gateway in laravel 10:
- Step 1: Download Laravel 10 New Setup
- Step 2: Installing stripe Package
- Step 3: Configure Stripe with Laravel App
- Step 4: Add Routes
- Step 5: Create Controller
- Step 6: Create Blade View file
- Step 7: Run Development Server
Step 1: Download Laravel 10 New Setup
In this step, Open your terminal or command prompt.
Then execute the following command to download and install Laravel 10 app new setup:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Installing stripe Package
In this step, install stripe package in Laravel 10 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 a development stripe account. And get key and secret from stripe.com.
Step 3: Configure Stripe with Laravel App
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: Add Routes
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 10 - 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 10 - 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 : 4242 4242 4242 4242 Month : any future month Year : any future Year CVV : 123
Conclusion
Stripe payment gateway integration in Laravel 10 tutorial, you have learned how to integrate the stripe payment gateway in Laravel 10 app.
Recommended Laravel Posts
Recommended:- Laravel 10 Google Chart Tutorial Example
Recommended:- Laravel 10 Generate Fake Data
Recommended:- Laravel 10 Rest API with Passport Tutorial
Recommended:- Laravel 10 Dynamic Dependent Dropdown using Ajax
Recommended:- Laravel 10 Import Export Excel & CSV File
Recommended:- Laravel Eloquent whereRaw Query Example
Recommended:- How to Get Random Records in Laravel
Recommended:- Laravel InsertOrIgnore Example
Recommended:- Laravel whereIn, whereNotIn With SubQuery Example
Recommended:- Laravel Where Null and Where Not Null Query
Recommended:- Laravel Group by Example
Recommended:- Laravel Order by Example
Recommended:-Laravel 10 Rest API CRUD with Passport Auth Tutorial
Recommended:-Laravel 10 DataTable CRUD Tutorial
Recommended:-Laravel 10 Ajax CRUD Using Datatable Tutorial
Recommended:-Laravel 10 Send Emails using Office365 Example
Recommended:-Laravel 10 Ajax CRUD with Image Upload Tutorial
Recommended:-Laravel 10 Livewire CRUD with Jetstream Tutorial
Recommended:-Laravel 10 Send Email with PDF Attachment Tutorial
Recommended:-Laravel 10 Livewire Dependent Dropdown Tutorial
Recommended:-Laravel 10 Send SMS to Mobile with Nexmo Example
If you have any questions or thoughts to share, use the comment form below to reach us.
