<!DOCTYPE html> <html> <head> <title>Laravel - Stripe Payment Gateway Integration Example - ItSolutionStuff.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container"> <h1 class="text-center">Stripe Payment Gateway </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"> <h3 class="panel-title">Payment Details</h3> </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"> <input type="hidden" value="{{ $name }}" name="name" class="form-control mt-2" placeholder="Enter Name" id="" required> <input type="hidden" value="{{ $phone }}" name="phone" class="form-control mt-2" placeholder="Enter Phone" id="" required> <input type="hidden" value="{{ $address }}" name="address" class="form-control mt-2" placeholder="Enter Address" id="" required> <input type="hidden" name="bill" class="form-control mt-2" value="{{ $bill }}" id="" required> <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now(Nrs{{ $bill }})</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() { /*------------------------------------------ -------------------------------------------- Stripe Payment Code -------------------------------------------- --------------------------------------------*/ 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); } }); /*------------------------------------------ -------------------------------------------- Stripe Response Handler -------------------------------------------- --------------------------------------------*/ 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>