laravelEcomm/resources/views/stripe.blade.php
2024-07-08 15:27:39 +05:45

140 lines
7.4 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>