Forked from briancollins/StripeTutorialPage.html
Last active
August 29, 2015 14:06
-
-
Save msGenDev/2f32a7e5d0faaa2a0a4a to your computer and use it in GitHub Desktop.
This file contains hidden or 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 Getting Started Form</title> | |
| <!-- jQuery is used only for this example; it isn't required to use Stripe --> | |
| <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://js.stripe.com/v1/"></script> | |
| <script type="text/javascript"> | |
| //this identifies your website in the createToken call below | |
| Stripe.setPublishableKey('pk_Mt4UGpSnJq4CesyhzUgcz1a99OpJl'); | |
| var stripeResponseHandler = function(status, response) { | |
| if (response.error) { | |
| // re-enable the submit button | |
| $('.submit-button').removeAttr("disabled"); | |
| //show the errors on the form | |
| $(".payment-errors").html(response.error.message); | |
| } else { | |
| var form$ = $("#payment-form"); | |
| // token contains id, last4, and card type | |
| var token = response['id']; | |
| // insert the token into the form so it gets submitted to the server | |
| form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />"); | |
| // and submit | |
| form$.get(0).submit(); | |
| } | |
| } | |
| $(document).ready(function() { | |
| $("#payment-form").submit(function(event) { | |
| var amount = 1000; //amount you want to charge, in cents. 1000 = $10.00, 2000 = $20.00 ... | |
| // disable the submit button to prevent repeated clicks | |
| $('.submit-button').attr("disabled", "disabled"); | |
| //createToken returns immediately - the supplied callback submits the form if there are no errors | |
| Stripe.createToken({ | |
| number: $('.card-number').val(), | |
| cvc: $('.card-cvc').val(), | |
| exp_month: $('.card-expiry-month').val(), | |
| exp_year: $('.card-expiry-year').val() | |
| }, amount, stripeResponseHandler); | |
| return false; //submit from callback | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Charge $10 with Stripe</h1> | |
| <!-- to display errors returned by createToken --> | |
| <span class="payment-errors"></span> | |
| <form action="" method="post" id="payment-form"> | |
| <div class="form-row"> | |
| <label>Card Number</label> | |
| <input type="text" maxlength="20" autocomplete="off" class="card-number required" /> | |
| </div> | |
| <div class="form-row"> | |
| <label>CVC</label> | |
| <input type="text" maxlength="4" autocomplete="off" class="card-cvc required" /> | |
| </div> | |
| <div class="form-row"> | |
| <label>Expiration</label> | |
| <div class="expiry-wrapper"> | |
| <select class="card-expiry-month required"> | |
| </select> | |
| <script type="text/javascript"> | |
| //populate the expiration month dropdown | |
| var select = $(".card-expiry-month"); | |
| for (var i = 1; i <= 12; i++) { | |
| select.append($("<option value='"+i+"'>"+i+"</option>")) | |
| } | |
| </script> | |
| <span> / </span> | |
| <select class="card-expiry-year required"></select> | |
| <script type="text/javascript"> | |
| var select = $(".card-expiry-year"), | |
| year = new Date().getFullYear(); | |
| for (var i = 1; i < 10; i++) { | |
| select.append($("<option value='"+(i + year)+"' "+(i === 0 ? "selected" : "")+">"+(i + year)+"</option>")) | |
| } | |
| </script> | |
| </div> | |
| </div> | |
| <button type="submit" class="submit-button">Submit Payment</button> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment