Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rafasashi/3be45524e5c2119e14fb52a26a6c9592 to your computer and use it in GitHub Desktop.
Save rafasashi/3be45524e5c2119e14fb52a26a6c9592 to your computer and use it in GitHub Desktop.
Stripe.js bootstrap example -- simple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Stripe.js example form</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>A simple Bootstrap Stripe.js payment form</h1>
</div>
</div>
<!-- Simple Bootstrap payment form starts here -->
<!-- Use Jquery in this example -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Stripe.js to collect payment details -->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- Jquery payment library for nicer formatting -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.4.1/jquery.payment.js"></script>
<script>
// Set your Stripe publishable API key here
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
$(function() {
var $form = $('#payment-form');
$form.submit(function(event){
// Disable the submit button to prevent repeated clicks:
$form.find('.submit').prop('disabled', true).html('Please wait...');
// Request a token from Stripe:
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from being submitted:
return false;
});
// Format the card number
$('#number').payment('formatCardNumber');
});
function stripeResponseHandler(status, response){
var $form = $('#payment-form');
// Clear any existing errors
$form.find('.has-error').removeClass('has-error')
if (response.error){
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message).addClass('alert alert-danger');
$form.find('#' + response.error.param).parents('.form-group').addClass('has-error');
$form.find('button').prop('disabled', false).text('Pay $20'); // Re-enable submission
}
else { // Token was created!
// Get the token ID:
var token = response.id;
// Insert the token into the form so it gets submitted to the server:
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// Submit the form:
$form.get(0).submit();
}
}
</script>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<form action="" method="POST" id="payment-form">
<div class="payment-errors"></div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Cardholder Name</label>
<input class="form-control input-lg" id="name" data-stripe="name" type="text" placeholder="Jimmy Dean" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Card Number</label>
<input class="form-control input-lg" id="number" type="tel" size="20" data-stripe="number" placeholder="4242 4242 4242 4242" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-4">
<div class="form-group">
<label>Exp Month</label>
<input class="form-control input-lg" id="exp_month" type="tel" size="2" data-stripe="exp-month" placeholder="01" required>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-4">
<div class="form-group">
<label>Exp Year</label>
<input class="form-control input-lg" id="exp_year" type="tel" size="4" data-stripe="exp-year" placeholder="2020" required>
</div>
</div>
<div class="col-md-6 col-sm-3 col-xs-4">
<div class="form-group pull-right">
<label>CVC</label>
<input class="form-control input-lg" id="cvc" type="tel" size="4" data-stripe="cvc" placeholder="555" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-lg btn-block btn-success submit" type="submit">Pay $20</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Simple Bootstrap payment form ends here -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment