Stripe is the best platform to collection payment online. In this tutorial, we’ll learn Stripe integration with Laravel and create a demo. Let’s see Stripe payment gateway integration with laravel
To get started we must have a laravel setup ready. If you don’t know how to setup laravel project click here
Install Stripe Package
To communicate with the stripe payment gateway we need a laravel package for stripe.
Go to the root directory of your project and run the below command to install the package
composer require cartalyst/stripe-laravel
Please make sure you have install the correct version of package.
After installing the package, open your Laravel config file located at config/app.php and add the following lines.
In the $providers array add the following service provider for this package.
Cartalyst\Stripe\Laravel\StripeServiceProvider::class
In the $aliases array add the following facade for this package.
'Stripe' => Cartalyst\Stripe\Laravel\Facades\Stripe::class
Now you need to setup the Stripe API key, to do this open or create the config/services.php file, and add or update the 'stripe' array:
<?php
return [
'stripe' => [
'secret' => 'your-stripe-key-here',
],
];
Here your-stripe-key-hereis your stripe public key, You can get this key from the stripe dashboard. Login or register on stripe then go to the Developer then Api Keys . Here you can see the Publishable key copy this key and replace with the above your-stripe-key-here
Create Controller
Next, We will create controller named StripeController this will contain two method, one for the view where we will create payment button and second where we will capture the payment. Run the below command to create the controller
php artisan make:controller StripeController
Next, Open StripeController and put the below method on this
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Redirect,Response,Stripe;
class StripeController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('stripe');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$stripe = Stripe::charges()->create([
'source' => $request->get('tokenId'),
'currency' => 'USD',
'amount' => $request->get('amount') * 100
]);
return $stripe;
}
}
Here you may noticed that we have two methods
The index method is to load the view for the payment. and store method is to capture the payment
Create Route
Next, We will add routes in web.php file as like below.
Route::get('stripe', '[email protected]');
Route::post('stripe', '[email protected]');
Create View
Next, We will create view named stripe.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>W3path | laravel Stripe Payment Gateway Integration - W3path.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.container{
padding: 0.5%;
}
</style>
</head>
<body>
<div class="container">
<h2 style="margin-top: 12px;" class="alert alert-success">laravel Stripe Payment Gateway Integration - <a href="https://www.w3path.com" target="_blank" >W3path</a></h2><br>
<div class="row">
<div class="col-md-12"><pre id="token_response"></pre></div>
</div>
<div class="row">
<div class="col-md-4">
<button class="btn btn-primary btn-block" onclick="pay(10)">Pay $10</button>
</div>
<div class="col-md-4">
<button class="btn btn-success btn-block" onclick="pay(50)">Pay $50</button>
</div>
<div class="col-md-4">
<button class="btn btn-info btn-block" onclick="pay(100)">Pay $100</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
function pay(amount) {
var handler = StripeCheckout.configure({
key: 'pk_test_aeUUjYYcx4XNfKVW60pmHTtI',
locale: 'auto',
token: function (token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
console.log('Token Created!!');
console.log(token)
$('#token_response').html(JSON.stringify(token));
$.ajax({
url: '{{ url("stripe") }}',
method: 'post',
data: { tokenId: token.id, amount: amount },
success: (response) => {
console.log(response)
},
error: (error) => {
console.log(error);
alert('Oops! Something went wrong')
}
})
}
});
handler.open({
name: 'Demo Site',
description: '2 widgets',
amount: amount * 100
});
}
</script>
</body>
</html>
Here, We are using Stripe JS library to create token
When user hit any of the above buttons our pay()function will called and here we will initialize stripe object and open the stripe popup. The popup will be default popup of stripe. You need not to worry about the validation and security stripe will handle everything for you.
The StripeCheckout.configure method has a property called token the stripe will give callback after the token created then you can use this token to capture the payment.
If you have any questions or thoughts to share, use the comment form below to reach us.