How to integrate Stripe payment gateway in
laravel
Today, i will share with you how to integrate stripe payment
gateway in laravel. I will use stripe/stripe-php composer library for stripe
payment gateway. i will make $15 charge using stripe payment gateway with
laravel.
Stripe is a very popular and secure internet payment gateway
which helps to accept payment world wide. Stripe provide really nice
development interface to start and you don’t have to pay subscription charges
to learn it provides free developer account, before starting to code in your
app.
First we need to create https://stripe.com/ developer
account. Then we need to add .env file STRIPE_KEY,
STRIPE_SECRET
Step -1
STRIPE_PUBLISHABLE_KEY=pk_test_............................
STRIPE_SECRET_KEY=sk_test…………..
STRIPE_CURRENCY=USD
Step 2
Whenever we add new
constants in the environment file, we should run the below command to clear the
configuration cache.
php
artisan config:cache
Step -3
php artisan make:migration create_payments_table
public function up(){
Schema::create('payments',
function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('payment_id');
$table->string('payer_email');
$table->float('amount',
10, 2);
$table->string('currency');
$table->string('payment_status');
$table->timestamps();
});
}
Next, run the below command to
execute migration.
php artisan migrate
We need to require an HTML
form where a user can enter their card information. Create a stripepayment.blade.php file and add the code below in it.
<link rel="stylesheet" href="{{
asset('/css/style.css') }}" />
<script src="https://js.stripe.com/v3/"></script>
<form action="{{
url('charge') }}" method="post" id="payment-form">
<div class="form-row">
<p><input type="text" name="amount" placeholder="Enter
Amount" /></p>
<p><input type="email" name="email" placeholder="Enter
Email" /></p>
<label for="card-element">
Credit
or debit card
</label>
<div id="card-element">
<!--
A Stripe Element will be inserted here. -->
</div>
<!--
Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit
Payment</button>
{{
csrf_field() }}
</form>
<script>
var
publishable_key = '{{ env('STRIPE_PUBLISHABLE_KEY') }}';
</script>
<script src="{{
asset('/js/card.js') }}"></script>
In the blade file, we
included CSS and JS files directly. You can include it in another way as per
your project flow. Finally, define the routes as follows.
routes/web.php
|
1 2 |
Route::get('/payment',
'PaymentController@index'); Route::post('/charge',
'PaymentController@charge'); |
We will create the controller PaymentController in the next steps.
Stripe provides its own
prebuilt UI components that collect customer card data securely without
handling sensitive data. The card details are converted to ‘Token’ which then
needs to be sent to your servers. Using this ‘Token’ you can charge the
customers. This is a way secure as your application doesn’t need to store or
interact with customer card details.
You may have noticed in the blade file we included card.js file.
Create this JS file under the public directory and add the below code to it.
js/card.js
//
Create a Stripe client.
var stripe =
Stripe(publishable_key);
//
Create an instance of Elements.
var elements =
stripe.elements();
//
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',
fontFamily:
'"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing:
'antialiased',
fontSize:
'16px',
'::placeholder':
{
color:
'#aab7c4'
}
},
invalid:
{
color:
'#fa755a',
iconColor:
'#fa755a'
}
};
//
Create an instance of the card Element.
var card =
elements.create('card', {style: style});
// Add
an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
//
Handle real-time validation errors from the card Element.
card.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.createToken(card).then(function(result)
{
if (result.error) {
//
Inform the user if there was an error.
var errorElement =
document.getElementById('card-errors');
errorElement.textContent
= result.error.message;
}
else {
//
Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
//
Submit the form with the token ID.
function stripeTokenHandler(token)
{
//
Insert the token ID into the form so it gets submitted to the server
var form =
document.getElementById('payment-form');
var hiddenInput =
document.createElement('input');
hiddenInput.setAttribute('type',
'hidden');
hiddenInput.setAttribute('name',
'stripeToken');
hiddenInput.setAttribute('value',
token.id);
form.appendChild(hiddenInput);
//
Submit the form
form.submit();
}
The blade file has also included style.css file. Create style.css inside the public folder. This CSS will have
the below code.
Add
this style sheet into the head tag
.StripeElement
{
box-sizing:
border-box;
height:
40px;
padding:
10px 12px;
border:
1px solid transparent;
border-radius:
4px;
background-color:
white;
box-shadow:
0 1px 3px 0 #e6ebf1;
-webkit-transition:
box-shadow 150ms ease;
transition:
box-shadow 150ms ease;
}
.StripeElement--focus
{
box-shadow:
0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid
{
border-color:
#fa755a;
}
.StripeElement--webkit-autofill
{
background-color:
#fefde5 !important;
}
.StripeElement
{
box-sizing:
border-box;
height:
40px;
padding:
10px 12px;
border:
1px solid transparent;
border-radius:
4px;
background-color:
white;
box-shadow:
0 1px 3px 0 #e6ebf1;
-webkit-transition:
box-shadow 150ms ease;
transition:
box-shadow 150ms ease;
}
.StripeElement--focus
{
box-shadow:
0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid
{
border-color:
#fa755a;
}
.StripeElement--webkit-autofill
{
background-color:
#fefde5 !important;
}
Add
this
composer require league/omnipay omnipay/stripephp artisan make:controller PaymentControllerphp artisan make:model Payment
Finally, PaymentController.php will
have the following code which charges the transaction and insert the
transaction details in your database.
PaymentController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Omnipay\Omnipay;
use App\Models\Payment;
class PaymentController
extends Controller
{
public function index()
{
return view('payment');
}
public function charge(Request
$request)
{
if ($request->input('stripeToken'))
{
$gateway =
Omnipay::create('Stripe');
$gateway->setApiKey(env('STRIPE_SECRET_KEY'));
$token = $request->input('stripeToken');
$response =
$gateway->purchase([
'amount' =>
$request->input('amount'),
'currency' =>
env('STRIPE_CURRENCY'),
'token' =>
$token,
])->send();
if ($response->isSuccessful())
{
//
payment was successful: insert transaction data into the database
$arr_payment_data =
$response->getData();
$isPaymentExist =
Payment::where('payment_id', $arr_payment_data['id'])->first();
if(!$isPaymentExist)
{
$payment =
new Payment;
$payment->payment_id
= $arr_payment_data['id'];
$payment->payer_email
= $request->input('email');
$payment->amount
= $arr_payment_data['amount']/100;
$payment->currency
= env('STRIPE_CURRENCY');
$payment->payment_status
= $arr_payment_data['status'];
$payment->save();
}
return "Payment
is successful. Your payment id is: ". $arr_payment_data['id'];
}
else {
//
payment failed: display message to customer
return $response->getMessage();
}
}
}
}
Now We will run the application and will test with the following
card
Name: Test
Number: 4242 4242 4242
4242
CSV: 123
Expiration Month: 12
Expiration Year: 2024
I hope it can help you...
