boucher/StripeTutorialPage.html

## StripeTutorialPage.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Stripe Getting Started Form</title>
        <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.6.2/jquery.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                // this identifies your website in the createToken call below
                Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');

                // this flag prevents us from infinitely creating a token in a loop
                var creatingToken = false;

                function stripeResponseHandler(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();
                    }

                    // we are no longer creating a token
                    creatingToken = false;
                }

                $("#payment-form").submit(function(event) {
                    // if we're already creating a token, do nothing here
                    if (creatingToken) {
                        return;
                    }

                    // don't come back into this block
                    creatingToken = true;

                    // disable the submit button to prevent repeated clicks
                    $('.submit-button').attr("disabled", "disabled");
                    var chargeAmount = 1000; //amount you want to charge, in cents. 1000 = $10.00, 2000 = $20.00 ...
                    // createToken calls the supplied callback after receiving a response from Stripe
                    Stripe.createToken({
                        number: $('.card-number').val(),
                        cvc: $('.card-cvc').val(),
                        exp_month: $('.card-expiry-month').val(),
                        exp_year: $('.card-expiry-year').val()
                    }, chargeAmount, stripeResponseHandler);

                    // prevent submission of the form while we wait for a token
                    return false;
                });
            });
        </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" size="20" autocomplete="off" class="card-number" />
            </div>
            <div class="form-row">
                <label>CVC</label>
                <input type="text" size="4" autocomplete="off" class="card-cvc" />
            </div>
            <div class="form-row">
                <label>Expiration (MM/YYYY)</label>
                <input type="text" size="2" class="card-expiry-month"/>
                <span> / </span>
                <input type="text" size="4" class="card-expiry-year"/>
            </div>
            <button type="submit" class="submit-button">Submit Payment</button>
        </form>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Stripe Getting Started Form</title>
	<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.6.2/jquery.min.js"></script>
	<script type="text/javascript">

	$(document).ready(function() {
	// this identifies your website in the createToken call below
	Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');

	// this flag prevents us from infinitely creating a token in a loop
	var creatingToken = false;

	function stripeResponseHandler(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();
	}

	// we are no longer creating a token
	creatingToken = false;
	}

	$("#payment-form").submit(function(event) {
	// if we're already creating a token, do nothing here
	if (creatingToken) {
	return;
	}

	// don't come back into this block
	creatingToken = true;

	// disable the submit button to prevent repeated clicks
	$('.submit-button').attr("disabled", "disabled");
	var chargeAmount = 1000; //amount you want to charge, in cents. 1000 = $10.00, 2000 = $20.00 ...
	// createToken calls the supplied callback after receiving a response from Stripe
	Stripe.createToken({
	number: $('.card-number').val(),
	cvc: $('.card-cvc').val(),
	exp_month: $('.card-expiry-month').val(),
	exp_year: $('.card-expiry-year').val()
	}, chargeAmount, stripeResponseHandler);

	// prevent submission of the form while we wait for a token
	return false;
	});
	});
	</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" size="20" autocomplete="off" class="card-number" />
	</div>
	<div class="form-row">
	<label>CVC</label>
	<input type="text" size="4" autocomplete="off" class="card-cvc" />
	</div>
	<div class="form-row">
	<label>Expiration (MM/YYYY)</label>
	<input type="text" size="2" class="card-expiry-month"/>
	<span> / </span>
	<input type="text" size="4" class="card-expiry-year"/>
	</div>
	<button type="submit" class="submit-button">Submit Payment</button>
	</form>
	</body>
	</html>