-
-
Save boucher/1090506 to your computer and use it in GitHub Desktop.
Stripe sample checkout form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="/jquery.min.js"></script> | |
| <script type="text/javascript" src="/jquery.validate.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['token']; | |
| // 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> |
It seems like you call "Stripe.createToken" which uses values of form fields' values such as "
$('.card-expiry-year').val(), etc. selects the input by class -- not by name. We've tested this code and it works in IE9. If you have a specific implementation that isn't working, email your code to [email protected], and we'll take a look.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When running your code in IE9, it gives an error: "The exp_year parameter should be an integer (instead, is undefined)." While the code runs perfectly fine in Chrome and Firefox. Please check.