StripeTutorialPage.html

## StripeTutorialPage.html
<!--//  Fixed for accessibility by Karl Groves 22-Oct 2013. Original Gist @ https://gist.github.com/briancollins/6365455  //-->
<!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/v2/"></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>

		<script type="text/javascript">
            // 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
                    // accessibility hotness added by KLG, to provide focus to errors and give alert role
                    $form.find('.payment-errors')
                         .text(response.error.message)
                         .prepend('<h2>The Following Errors Must Be Corrected:</h2>')
                         .attr({
                            role : 'alert',
                            tabindex : '-1'
                          })
                          .focus();
                    $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;
                });
            });
		</script>
	</head>
	<body>
		<h1>Charge $10 with Stripe</h1>

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

			<div class="form-row">
				<label for="card_number"> <span>Card Number</span>
					<input type="text" size="20" data-stripe="number" name="card_number" id="card_number" />
				</label>
			</div>

			<div class="form-row">
				<label for="card_cvc"> <span>CVC</span>
					<input type="text" size="4" data-stripe="cvc"  name="card_cvc" id="card_cvc"  />
				</label>
			</div>

			<div class="form-row">
				<span>Expiration (MM/YYYY)</span>
				<input type="text" size="2" data-stripe="exp-month" name="exp-month" id="exp-month" aria-label="Card Expiration: Month. Must be 2 digits"  />
				<span> / </span>
				<input type="text" size="4" data-stripe="exp-year" name="" id="" aria-label="Card Expiration: Year. Must be 4 digits"  />
			</div>

			<button type="submit">
				Submit Payment
			</button>
		</form>
	</body>
</html>