Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Sep 15th, 2012  |  syntax: None  |  size: 3.43 KB  |  hits: 10  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5.         <title>Stripe Getting Started Form</title>
  6.         <script type="text/javascript" src="https://js.stripe.com/v1/"></script>
  7.         <!-- jQuery is used only for this example; it isn't required to use Stripe -->
  8.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  9.         <script type="text/javascript">
  10.             // this identifies your website in the createToken call below
  11.             Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');
  12.  
  13.             function stripeResponseHandler(status, response) {
  14.                 if (response.error) {
  15.                     // re-enable the submit button
  16.                     $('.submit-button').removeAttr("disabled");
  17.                     // show the errors on the form
  18.                     $(".payment-errors").html(response.error.message);
  19.                 } else {
  20.                     var form$ = $("#payment-form");
  21.                     // token contains id, last4, and card type
  22.                     var token = response['id'];
  23.                     // insert the token into the form so it gets submitted to the server
  24.                     form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
  25.                     // and submit
  26.                     form$.get(0).submit();
  27.                 }
  28.             }
  29.  
  30.             $(document).ready(function() {
  31.                 $("#payment-form").submit(function(event) {
  32.                     // disable the submit button to prevent repeated clicks
  33.                     $('.submit-button').attr("disabled", "disabled");
  34.                     // createToken returns immediately - the supplied callback submits the form if there are no errors
  35.                     Stripe.createToken({
  36.                         number: $('.card-number').val(),
  37.                         cvc: $('.card-cvc').val(),
  38.                         exp_month: $('.card-expiry-month').val(),
  39.                         exp_year: $('.card-expiry-year').val()
  40.                     }, stripeResponseHandler);
  41.                     return false; // submit from callback
  42.                 });
  43.             });
  44.  
  45.             if (window.location.protocol === 'file:') {
  46.                 alert("stripe.js does not work when included in pages served over file:// URLs. Try serving this page over a webserver. Contact support@stripe.com if you need assistance.");
  47.             }
  48.         </script>
  49.     </head>
  50.     <body>
  51.         <h1>Charge $10 with Stripe</h1>
  52.         <!-- to display errors returned by createToken -->
  53.         <span class="payment-errors"></span>
  54.         <form action="" method="POST" id="payment-form">
  55.             <div class="form-row">
  56.                 <label>Card Number</label>
  57.                 <input type="text" size="20" autocomplete="off" class="card-number" />
  58.             </div>
  59.             <div class="form-row">
  60.                 <label>CVC</label>
  61.                 <input type="text" size="4" autocomplete="off" class="card-cvc" />
  62.             </div>
  63.             <div class="form-row">
  64.                 <label>Expiration (MM/YYYY)</label>
  65.                 <input type="text" size="2" class="card-expiry-month"/>
  66.                 <span> / </span>
  67.                 <input type="text" size="4" class="card-expiry-year"/>
  68.             </div>
  69.             <button type="submit" class="submit-button">Submit Payment</button>
  70.         </form>
  71.     </body>
  72. </html>