Skip to content

Instantly share code, notes, and snippets.

@ggamel
Forked from boucher/gist:1750368
Created July 25, 2013 01:18

Revisions

  1. @boucher boucher revised this gist Feb 6, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.html
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,7 @@
    cvc: $('.card-cvc').val(),
    exp_month: $('.card-expiry-month').val(),
    exp_year: $('.card-expiry-year').val()
    }, 100, function(status, response) {
    }, function(status, response) {
    if (response.error) {
    // re-enable the submit button
    $(form['submit-button']).removeAttr("disabled")
  2. Saikat Chakrabarti revised this gist Aug 8, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions gistfile1.html
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,8 @@
    <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://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');
  3. Saikat Chakrabarti revised this gist Jul 22, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.html
    Original file line number Diff line number Diff line change
    @@ -50,7 +50,7 @@
    addInputNames();
    } else {
    // token contains id, last4, and card type
    var token = response['token'];
    var token = response['id'];

    // insert the stripe token
    var input = $("<input name='stripeToken' value='" + token + "' style='display:none;' />");
  4. Saikat Chakrabarti revised this gist Jul 18, 2011. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion gistfile1.html
    Original file line number Diff line number Diff line change
    @@ -133,7 +133,6 @@ <h1>Stripe Example Form</h1>
    </script>
    <span> / </span>
    <select class="card-expiry-year stripe-sensitive required"></select>
    </select>
    <script type="text/javascript">
    var select = $(".card-expiry-year"),
    year = new Date().getFullYear();
  5. Saikat Chakrabarti revised this gist Jul 15, 2011. 1 changed file with 6 additions and 7 deletions.
    13 changes: 6 additions & 7 deletions gistfile1.html
    Original file line number Diff line number Diff line change
    @@ -34,16 +34,15 @@
    $(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) {

    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);

  6. Saikat Chakrabarti created this gist Jul 15, 2011.
    162 changes: 162 additions & 0 deletions gistfile1.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,162 @@
    <!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>
    </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>