May 29, 2013 00:57
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Stripe Getting Started Form</title>

  <!-- The required Stripe lib -->
  <script type="text/javascript" src="https://js.stripe.com/v1/"></script>

  <!-- 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.9.1/jquery.min.js"></script>

  
 </head>
 <body class='ui-widget'>
  <h1>Charge ten bucks with Stripe</h1>

  <form action="" method="POST" id="payment-form">
    <span class="payment-errors"></span>

    <p>
        <input type="text" size="20" data-stripe="number"/>
        <span>card number</span>
    </p>
    
 <p class='cvc'>    
    <input type="text" size="4" data-stripe="cvc"/>
  <label for='cvc'>cvc</label>
 </p>
    <p class='exp'>
        <input type="text" size="2" data-stripe="exp-month"/>
    <span> / </span>
      <input type="text" size="4" data-stripe="exp-year"/>
      <label for='exp'>expiration</label>
    </p>
    
    <p class='submit'>
      <input type="submit" value='Submit'>
    </p>
  </form>
 </body>
 </html>
diff --git a/script.js b/script.js
  // This identifies your website in the createToken call below
    Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');

    var stripeResponseHandler = function(status, response) {
      var $form = $('#payment-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
      } else {
        // 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" />').val(token));
        // and re-submit
        $form.get(0).submit();
      }
    };

    jQuery(function($) {
      $('#payment-form').submit(function(e) {
        var $form = $(this);

        // Disable the submit button to prevent repeated clicks
        $form.find('button').prop('disabled', true);

        Stripe.createToken($form, stripeResponseHandler);

        // Prevent the form from submitting with the default action
        return false;
      });
    });
  
diff --git a/style.css b/style.css
 body { padding:50px 100px; font:13px/150% Verdana, Tahoma, sans-serif; }

 /* tutorial */

 input, textarea { 
 	padding: 9px;
 	border: solid 1px #E5E5E5;
 	outline: 0;
 	font: normal 13px/100% Verdana, Tahoma, sans-serif;
 	width: 200px;
 	background: #FFFFFF url('bg_form.png') left top repeat-x;
 	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
 	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
 	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
 	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
 	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
 	}

 textarea { 
 	width: 400px;
 	max-width: 400px;
 	height: 150px;
 	line-height: 150%;
 	}

 input:hover, textarea:hover,
 input:focus, textarea:focus { 
 	border-color: #C9C9C9; 
 	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
 	}

 .form label { 
 	margin-left: 10px; 
 	color: #999999; 
 	}

 .submit input {
 	width: auto;
 	padding: 9px 15px;
 	background: #617798;
 	border: 0;
 	font-size: 14px;
 	color: #FFFFFF;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
 	cursor: pointer;
 	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Stripe Getting Started Form</title>

	<!-- The required Stripe lib -->
	<script type="text/javascript" src="https://js.stripe.com/v1/"></script>

	<!-- 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.9.1/jquery.min.js"></script>


	</head>
	<body class='ui-widget'>
	<h1>Charge ten bucks with Stripe</h1>

	<form action="" method="POST" id="payment-form">
	<span class="payment-errors"></span>

	<p>
	<input type="text" size="20" data-stripe="number"/>
	<span>card number</span>
	</p>

	<p class='cvc'>
	<input type="text" size="4" data-stripe="cvc"/>
	<label for='cvc'>cvc</label>
	</p>
	<p class='exp'>
	<input type="text" size="2" data-stripe="exp-month"/>
	<span> / </span>
	<input type="text" size="4" data-stripe="exp-year"/>
	<label for='exp'>expiration</label>
	</p>

	<p class='submit'>
	<input type="submit" value='Submit'>
	</p>
	</form>
	</body>
	</html>
	// This identifies your website in the createToken call below
	Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');

	var stripeResponseHandler = function(status, response) {
	var $form = $('#payment-form');

	if (response.error) {
	// Show the errors on the form
	$form.find('.payment-errors').text(response.error.message);
	$form.find('button').prop('disabled', false);
	} else {
	// 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" />').val(token));
	// and re-submit
	$form.get(0).submit();
	}
	};

	jQuery(function($) {
	$('#payment-form').submit(function(e) {
	var $form = $(this);

	// Disable the submit button to prevent repeated clicks
	$form.find('button').prop('disabled', true);

	Stripe.createToken($form, stripeResponseHandler);

	// Prevent the form from submitting with the default action
	return false;
	});
	});
	body { padding:50px 100px; font:13px/150% Verdana, Tahoma, sans-serif; }

	/* tutorial */

	input, textarea {
	padding: 9px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 13px/100% Verdana, Tahoma, sans-serif;
	width: 200px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	}

	textarea {
	width: 400px;
	max-width: 400px;
	height: 150px;
	line-height: 150%;
	}

	input:hover, textarea:hover,
	input:focus, textarea:focus {
	border-color: #C9C9C9;
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	}

	.form label {
	margin-left: 10px;
	color: #999999;
	}

	.submit input {
	width: auto;
	padding: 9px 15px;
	background: #617798;
	border: 0;
	font-size: 14px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	cursor: pointer;
	}