Skip to content

Instantly share code, notes, and snippets.

@cryptixcoder

cryptixcoder/gist:f2586dce299c1a1c9be2

Created June 10, 2015 19:41
Show Gist options
  • Save cryptixcoder/f2586dce299c1a1c9be2 to your computer and use it in GitHub Desktop.
Save cryptixcoder/f2586dce299c1a1c9be2 to your computer and use it in GitHub Desktop.
Download ZIP
Modal Checkout with stripe
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal Checkout - POC</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" data-toggle="modal" href='#modal-id'>Checkout</a>
<div class="modal small fade" id="modal-id">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form action="3" method="post" class="checkout">
<div class="modal-header">
<h4 class="modal-title" align="center">Checkout</h4>
<p align="center">The New Hotness</p>
</div>
<div class="modal-body">
<div class="message-wrapper"></div>
<h1 align="center">$150</h1>
<div class="form-group">
<label>Name On Card</label>
<input type="text" class="form-control" name="card_holder_name" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<label>Card Number</label>
<input type="text" class="form-control" id="ccnumber" />
</div>
<div class="form-group row">
<div class="col-xs-6">
<label>CVC</label>
<input type="text" class="form-control" id="securitycode" />
</div>
<div class="col-xs-6">
<label>EXP</label>
<input type="text" class="form-control" id="expdate" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Checkout</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e){
$('.checkout').submit(function(e){
e.preventDefault();
var stripeKey = $('meta[name=stripe-publishable-key]').attr('content');
var form = $(this);
form.find('button').prop('disabled', true);
var number = form.find('#ccnumber').val();
var securitycode = form.find('#securitycode').val();
var exp = form.find('#expdate').val().split;
Stripe.setPublishableKey(stripeKey);
Stripe.card.createToken({
number: number,
cvc: securitycode,
exp_month: exp[0],
exp_year: exp[1]
}, function(status, response){
if(response.error){
$('.message-wrapper').addClass('alert alert-danger').text(response.error.message);
form.find('button').prop('disabled', false);
}
else{
var token = response.id;
form.append($("<input type='hidden' name='stripeToken'/>").val(token));
$.ajax({
url: form.attr('action'),
type: 'POST',
data: form.serialize(),
success: function(response){
if(response.error){
$('.message-wrapper').addClass('alert alert-danger').text(response.error);
form.find('button').prop('disabled', false);
}
else{
//Do thankyou
}
}
});
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment