matsubo/stripe_js.html

## stripe_js.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Stripe JS Sample Page</title>
        <meta name="author" content="Yuki Matsukura">
    </head>
    <body>


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

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

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

            <div class="form-row">
                <label>
                    <span>Expiration (MM/YYYY)</span>
                    <input type="text" size="2" data-stripe="exp-month"/>
                </label>
                <span> / </span>
                <input type="text" size="4" data-stripe="exp-year"/>
            </div>

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


        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1.4.2");
            </script>

            <script type="text/javascript" src="https://js.stripe.com/v2/"></script>


            <script type="text/javascript">
                Stripe.setPublishableKey('pk_test_O0DPDXL9WmAs6EloZi0YfW0x');


                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').attr('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 submit
                        $form.get(0).submit();
                    }
                };


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

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

            Stripe.card.createToken($form, stripeResponseHandler);

            // Prevent the form from submitting with the default action
            return false;
            });
        });


</script>


</body>
        </html>

	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>Stripe JS Sample Page</title>
	<meta name="author" content="Yuki Matsukura">
	</head>
	<body>


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

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

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

	<div class="form-row">
	<label>
	<span>Expiration (MM/YYYY)</span>
	<input type="text" size="2" data-stripe="exp-month"/>
	</label>
	<span> / </span>
	<input type="text" size="4" data-stripe="exp-year"/>
	</div>

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






	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script>
	google.load("jquery", "1.4.2");
	</script>

	<script type="text/javascript" src="https://js.stripe.com/v2/"></script>



	<script type="text/javascript">
	Stripe.setPublishableKey('pk_test_O0DPDXL9WmAs6EloZi0YfW0x');





	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').attr('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 submit
	$form.get(0).submit();
	}
	};






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

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

	Stripe.card.createToken($form, stripeResponseHandler);

	// Prevent the form from submitting with the default action
	return false;
	});
	});



	</script>





	</body>
	</html>