Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@Braunson

This comment has been minimized.

Copy link

@Braunson Braunson commented May 2, 2017

For anyone that's trying to use Stripe's V3 JS, this code won't work, it's deprecated (V2). They now recommend using Stripe Elements instead.

I ran into this error without reading the docs first, may save someone time I wasted 😛

@AdrienGiboire

This comment has been minimized.

Copy link

@AdrienGiboire AdrienGiboire commented May 28, 2017

I stumbled upon this looking for an alternative to Stripe Elements because Elements does not work well with Bootstrap, even with the customization options they implemented.

@Willgg

This comment has been minimized.

Copy link

@Willgg Willgg commented Jul 3, 2017

I dont really like the philosophy behind Element. I dont want Stripe to provide me with html elements. First if I change for mangopay I have to rewrite a new code then they should act as API that means they should only collect my http request and thats it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment