Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Stripe sample checkout form
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Stripe Sample Form</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script type="text/javascript">
Stripe.setPublishableKey('pk_YOUR_PUBLISHABLE_KEY');
$(document).ready(function() {
function addInputNames() {
// Not ideal, but jQuery's validate plugin requires fields to have names
// so we add them at the last possible minute, in case any javascript
// exceptions have caused other parts of the script to fail.
$(".card-number").attr("name", "card-number")
$(".card-cvc").attr("name", "card-cvc")
$(".card-expiry-year").attr("name", "card-expiry-year")
}
function removeInputNames() {
$(".card-number").removeAttr("name")
$(".card-cvc").removeAttr("name")
$(".card-expiry-year").removeAttr("name")
}
function submit(form) {
// remove the input field names for security
// we do this *before* anything else which might throw an exception
removeInputNames(); // THIS IS IMPORTANT!
// given a valid form, submit the payment details to stripe
$(form['submit-button']).attr("disabled", "disabled")
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, 100, function(status, response) {
if (response.error) {
// re-enable the submit button
$(form['submit-button']).removeAttr("disabled")
// show the error
$(".payment-errors").html(response.error.message);
// we add these names back in so we can revalidate properly
addInputNames();
} else {
// token contains id, last4, and card type
var token = response['id'];
// insert the stripe token
var input = $("<input name='stripeToken' value='" + token + "' style='display:none;' />");
form.appendChild(input[0])
// and submit
form.submit();
}
});
return false;
}
// add custom rules for credit card validating
jQuery.validator.addMethod("cardNumber", Stripe.validateCardNumber, "Please enter a valid card number");
jQuery.validator.addMethod("cardCVC", Stripe.validateCVC, "Please enter a valid security code");
jQuery.validator.addMethod("cardExpiry", function() {
return Stripe.validateExpiry($(".card-expiry-month").val(),
$(".card-expiry-year").val())
}, "Please enter a valid expiration");
// We use the jQuery validate plugin to validate required params on submit
$("#example-form").validate({
submitHandler: submit,
rules: {
"card-cvc" : {
cardCVC: true,
required: true
},
"card-number" : {
cardNumber: true,
required: true
},
"card-expiry-year" : "cardExpiry" // we don't validate month separately
}
});
// adding the input field names is the last step, in case an earlier step errors
addInputNames();
});
</script>
</head>
<body>
<h1>Stripe Example Form</h1>
<form action="/" method="post" id="example-form" style="display: none;">
<div class="form-row">
<label for="name" class="stripeLabel">Your Name</label>
<input type="text" name="name" class="required" />
</div>
<div class="form-row">
<label for="email">E-mail Address</label>
<input type="text" name="email" class="required" />
</div>
<div class="form-row">
<label>Card Number</label>
<input type="text" maxlength="20" autocomplete="off" class="card-number stripe-sensitive required" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" maxlength="4" autocomplete="off" class="card-cvc stripe-sensitive required" />
</div>
<div class="form-row">
<label>Expiration</label>
<div class="expiry-wrapper">
<select class="card-expiry-month stripe-sensitive required">
</select>
<script type="text/javascript">
var select = $(".card-expiry-month"),
month = new Date().getMonth() + 1;
for (var i = 1; i <= 12; i++) {
select.append($("<option value='"+i+"' "+(month === i ? "selected" : "")+">"+i+"</option>"))
}
</script>
<span> / </span>
<select class="card-expiry-year stripe-sensitive required"></select>
<script type="text/javascript">
var select = $(".card-expiry-year"),
year = new Date().getFullYear();
for (var i = 0; i < 12; i++) {
select.append($("<option value='"+(i + year)+"' "+(i === 0 ? "selected" : "")+">"+(i + year)+"</option>"))
}
</script>
</div>
</div>
<button type="submit" name="submit-button">Submit</button>
<span class="payment-errors"></span>
</form>
<!--
The easiest way to indicate that the form requires JavaScript is to show
the form with JavaScript (otherwise it will not render). You can add a
helpful message in a noscript to indicate that users should enable JS.
-->
<script>if (window.Stripe) $("#example-form").show()</script>
<noscript><p>JavaScript is required for the registration form.</p></noscript>
</body>
</html>
@gonzalop

This comment has been minimized.

Copy link

@gonzalop gonzalop commented Jul 16, 2011

There's an extra </select> on line 136.

@saikat

This comment has been minimized.

Copy link
Owner Author

@saikat saikat commented Jul 18, 2011

Fixed, thanks!

@gonzalop

This comment has been minimized.

Copy link

@gonzalop gonzalop commented Jul 19, 2011

Line 53: var token = response['token'];

Should be "var token = response['id'];" after the latest changes.

@saikat

This comment has been minimized.

Copy link
Owner Author

@saikat saikat commented Jul 22, 2011

Also fixed, thanks!

@deepkut

This comment has been minimized.

Copy link

@deepkut deepkut commented Aug 1, 2011

I'm not sure why, but I had to add a form tag on line 99 to get the form to load.

@boinggg

This comment has been minimized.

Copy link

@boinggg boinggg commented Nov 9, 2011

Huge bug, your month js is not making 2 digit months. Stripe returns error. Fix:

                    <script type="text/javascript">
                        var select = $(".card-expiry-month"),
                            month = new Date().getMonth() + 1;
                        for (var i = 1; i <= 12; i++) {
                            select.append($("<option value='"+(i < 10 ? "0" : "")+i+"'"+(month === i ? " selected" : "")+">"+(i < 10 ? "0" : "")+i+"</option>"));
                        }
                    </script>
@saikat

This comment has been minimized.

Copy link
Owner Author

@saikat saikat commented Nov 9, 2011

The currently maintained example form is now located at https://gist.github.com/1204718#file_stripe_tutorial_page.html . boinggg: try using that one -- it doesn't do as much for you though, so your code here could still be useful for your own form.

@boinggg

This comment has been minimized.

Copy link

@boinggg boinggg commented Nov 10, 2011

I see, you are still listed at https://stripe.com/docs/examples though

@saikat

This comment has been minimized.

Copy link
Owner Author

@saikat saikat commented Nov 17, 2011

boingg, you're totally right, we do still support this form (my mistake). I just checked though and I can't reproduce your issue (you're saying that if you pick a single digit month, stripe returns an error? what's the error?). I just tried filling out a form with the month set to 3 and the year set to 2012 and it worked for me -- what browser are you getting this issue on?

@boinggg

This comment has been minimized.

Copy link

@boinggg boinggg commented Nov 17, 2011

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