Payment gateways are an essential operational component of any ecommerce store. It completes the payment mechanism of any ecommerce store and allows users to make hassle-free online payments. In this regard, store owners really haven’t got much choice as the top tier of payment gateways is populated by a handful of names including Stripe and PayPal. Both of these platforms provide easy, secure & fast payment services, and are mostly recommended by the majority of the store owners.
Installation cmd
composer require stripe/stripe-php
Login in stripe and get stripe_key and stripe_secret key.
.env
STRIPE_KEY=pk_test_51JvgSRSBXP2B8tcXYRrnp1SqC78WjJJVu0ti0G7RdTFpna1xI6mvugUkvj0CZL6Bp2Fvv44xZvk5Fo3p8Lrt6EiK00n9Ub0emB
STRIPE_SECRET=sk_test_51JvgSRSBXP2B8tcXfazSm8tvfCMkvMwlk6Q2Nvdl9gCklCRRFcrn1W1HKqdlLUnLX17MmeXk4UWX6voZX2YkcMi4007snaRs04
web.php
Route::get('/user/payments', [StripePaymentController::class, 'stripe'])->name('user_payments');
Route::get('/user/payments/checkout', [StripePaymentController::class, 'checkout'])->name('stripe_checkout');
Route::get('/payment/stripe-success', [StripePaymentController::class, 'stripe_success'])->name('stripe_success');
config/services.php
'stripe' => [ 'secret' => env('STRIPE_SECRET'), ],
payment.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Stripe Payment Gateway Integration</title>
<link rel="stylesheet" href="https://stackpath.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>
</head>
<body>
<div class="container">
<div class="row">
<h3 style="text-align: center;margin-top: 40px;margin-bottom: 40px;">Stripe Payment Gateway Integration</h3>
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default credit-card-box">
<div class="panel-heading" >
<div class="row">
<h3>Payment Details</h3>
<div>
<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><br>
</div>
@endif
<br>
<form role="form" action="{{ route('stripe_checkout') }}" 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 col-md-6 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
<div class='col-xs-12 col-md-6 form-group 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="form-row row">
<div class="col-xs-12">
<button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<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>
StripePaymentController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Stripe;
use Illuminate\View\View;
class StripePaymentController extends Controller
{
function stripe(){
return view('services.stripe.payment');
}
function checkout(Request $req){
Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
Stripe\Charge::create ([
"amount" => 100*100,
"currency" => "INR",
"source" => $request->stripeToken,
"description" => "This payment is testing purpose",
]);
Session::flash('success', 'Payment Successfull!');
return back();
}
}
checkout.blade.php <form action="/subscribe" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_51JvgSRSBXP2B8tcXYRrnp1SqC78WjJJVu0ti0G7RdTFpna1xI6mvugUkvj0CZL6Bp2Fvv44xZvk5Fo3p8Lrt6EiK00n9Ub0emB""pk_test_51JvgSRSBXP2B8tcXYR...p8Lrt6EiK00n9Ub0emB"data-name="Cleaning Service" data-description="Charged after your home is spotless" data-amount="2000"> </script> </form>