rafasashi/stripe_js_bootstrap.html

## stripe_js_bootstrap.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Stripe.js example form</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center">
          <h1>A simple Bootstrap Stripe.js payment form</h1>
        </div>
      </div>
      <!-- Simple Bootstrap payment form starts here -->
      <!-- Use Jquery in this example -->
      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      <!-- Bootstrap JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
      <!-- Stripe.js to collect payment details -->
      <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
      <!-- Jquery payment library for nicer formatting -->
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.4.1/jquery.payment.js"></script>
      <script>
        // Set your Stripe publishable API key here
        Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

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

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

            // Request a token from Stripe:
            Stripe.card.createToken($form, stripeResponseHandler);

            // Prevent the form from being submitted:
            return false;
          });

          // Format the card number
          $('#number').payment('formatCardNumber');
        });

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

          // Clear any existing errors
          $form.find('.has-error').removeClass('has-error')

          if (response.error){
            // Show the errors on the form
            $form.find('.payment-errors').text(response.error.message).addClass('alert alert-danger');
            $form.find('#' + response.error.param).parents('.form-group').addClass('has-error');
            $form.find('button').prop('disabled', false).text('Pay $20'); // Re-enable submission
          }
          else { // Token was created!
            // Get the token ID:
            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));

            // Submit the form:
            $form.get(0).submit();
          }
        }
      </script>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <div class="panel panel-default">
            <div class="panel-body">
              <form action="" method="POST" id="payment-form">
                <div class="payment-errors"></div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label>Cardholder Name</label>
                      <input class="form-control input-lg" id="name" data-stripe="name" type="text" placeholder="Jimmy Dean" required>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label>Card Number</label>
                      <input class="form-control input-lg" id="number" type="tel" size="20" data-stripe="number" placeholder="4242 4242 4242 4242" required>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-3 col-sm-3 col-xs-4">
                    <div class="form-group">
                      <label>Exp Month</label>
                      <input class="form-control input-lg" id="exp_month" type="tel" size="2" data-stripe="exp-month" placeholder="01" required>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-4">
                    <div class="form-group">
                      <label>Exp Year</label>
                      <input class="form-control input-lg" id="exp_year" type="tel" size="4" data-stripe="exp-year" placeholder="2020" required>
                    </div>
                  </div>
                  <div class="col-md-6 col-sm-3 col-xs-4">
                    <div class="form-group pull-right">
                      <label>CVC</label>
                      <input class="form-control input-lg" id="cvc" type="tel" size="4" data-stripe="cvc" placeholder="555" required>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <button class="btn btn-lg btn-block btn-success submit" type="submit">Pay $20</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- Simple Bootstrap payment form ends here -->
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Bootstrap Stripe.js example form</title>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-md-12 text-center">
	<h1>A simple Bootstrap Stripe.js payment form</h1>
	</div>
	</div>
	<!-- Simple Bootstrap payment form starts here -->
	<!-- Use Jquery in this example -->
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<!-- Bootstrap JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<!-- Stripe.js to collect payment details -->
	<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
	<!-- Jquery payment library for nicer formatting -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.4.1/jquery.payment.js"></script>
	<script>
	// Set your Stripe publishable API key here
	Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

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

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

	// Request a token from Stripe:
	Stripe.card.createToken($form, stripeResponseHandler);

	// Prevent the form from being submitted:
	return false;
	});

	// Format the card number
	$('#number').payment('formatCardNumber');
	});

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

	// Clear any existing errors
	$form.find('.has-error').removeClass('has-error')

	if (response.error){
	// Show the errors on the form
	$form.find('.payment-errors').text(response.error.message).addClass('alert alert-danger');
	$form.find('#' + response.error.param).parents('.form-group').addClass('has-error');
	$form.find('button').prop('disabled', false).text('Pay $20'); // Re-enable submission
	}
	else { // Token was created!
	// Get the token ID:
	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));

	// Submit the form:
	$form.get(0).submit();
	}
	}
	</script>
	<div class="row">
	<div class="col-md-6 col-md-offset-3">
	<div class="panel panel-default">
	<div class="panel-body">
	<form action="" method="POST" id="payment-form">
	<div class="payment-errors"></div>
	<div class="row">
	<div class="col-md-12">
	<div class="form-group">
	<label>Cardholder Name</label>
	<input class="form-control input-lg" id="name" data-stripe="name" type="text" placeholder="Jimmy Dean" required>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-md-12">
	<div class="form-group">
	<label>Card Number</label>
	<input class="form-control input-lg" id="number" type="tel" size="20" data-stripe="number" placeholder="4242 4242 4242 4242" required>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-md-3 col-sm-3 col-xs-4">
	<div class="form-group">
	<label>Exp Month</label>
	<input class="form-control input-lg" id="exp_month" type="tel" size="2" data-stripe="exp-month" placeholder="01" required>
	</div>
	</div>
	<div class="col-md-3 col-sm-3 col-xs-4">
	<div class="form-group">
	<label>Exp Year</label>
	<input class="form-control input-lg" id="exp_year" type="tel" size="4" data-stripe="exp-year" placeholder="2020" required>
	</div>
	</div>
	<div class="col-md-6 col-sm-3 col-xs-4">
	<div class="form-group pull-right">
	<label>CVC</label>
	<input class="form-control input-lg" id="cvc" type="tel" size="4" data-stripe="cvc" placeholder="555" required>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-md-12">
	<button class="btn btn-lg btn-block btn-success submit" type="submit">Pay $20</button>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	<!-- Simple Bootstrap payment form ends here -->
	</div>
	</body>
	</html>