molinto/quaderno-charges-for-stripe.html

## quaderno-charges-for-stripe.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Quaderno.js for One-off Charges on Stripe</title>

    <!-- The required libs -->
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
    <script type="text/javascript" src="https://js.quaderno.io/v2/"></script>

    <!-- jQuery is used only for this example; it isn't required to use Quaderno -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>Create a One-off Charge</h1>

    <p>Subtotal: $<span class="quaderno-subtotal"></span></p>
    <p>Taxes: $<span class="quaderno-taxes"></span></p>
    <p>Total: $<span class="quaderno-total"></span></p>

    <!-- Use something like: https://github.com/mikemaccana/quaderno-server to create your 'data-charge' value -->
    <form action="" method="POST" id="payment-form"
      data-gateway-key="YOUR_STRIPE_PUBLISHABLE_KEY"
      data-key="YOUR_QUADERNO_PUBLISHABLE_KEY"
      data-charge="JSON_WEB_TOKEN"
      data-amount="1000"
      data-taxes="excluded">

      <span class="payment-errors"></span>

      <fieldset>
        <legend>Billing Address</legend>
        <div class="form-row">
          <label>
            <span>* First Name / Company Name</span>
            <input data-quaderno="first-name"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Last Name</span>
            <input data-quaderno="last-name"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Email</span>
            <input data-quaderno="email"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Street Line 1</span>
            <input data-quaderno="street-line-1"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Street Line 2</span>
            <input data-quaderno="street-line-2"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>City</span>
            <input data-quaderno="city"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Postal Code</span>
            <input data-quaderno="postal-code"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Region</span>
            <input data-quaderno="region"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Country</span>
            <select data-quaderno="country">
              <option value="US" selected>United States</option>
              <option value="GB">United Kingdom</option>
              <option value="DE">Germany</option>
              <option value="FR">France</option>
              <option value="IT">Italy</option>
              <option value="ES">Spain</option>
              <option value="CA">Canada</option>
              <option value="AU">Australia</option>
            </select>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>VAT Number</span>
            <input data-quaderno="vat-number"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>Coupon</span>
            <input data-quaderno="coupon"/>
          </label>
        </div>
      </fieldset>

      <fieldset>
        <legend>Credit Card Data</legend>
        <div class="form-row">
          <label>
            <span>* Card Number</span>
            <input class="card-number" data-quaderno="number"/>
          </label>
        </div>

        <div class="form-row">
          <label>
            <span>* CVC</span>
            <input class="card-cvc" data-quaderno="cvc" type="password"/>
          </label>
        </div>

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

      <button type="submit">Pay Now</button>
    </form>

    <script type="text/javascript">
      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" data-quaderno="cardToken" />').val(token));

          // create the charge in Stripe via Quaderno and submit
          Quaderno.createCharge({
            success: function(status, response){
              // response contains the message and the Stripe customer id
              $form.append($('<input type="hidden" name="transactionDetails" data-quaderno="transactionDetails" />').val(response.details));
              // and re-submit the form
              $form.get(0).submit();
            },
            error: function(status, response){
              $form.find('.payment-errors').text(response.message);
              $form.find('button').prop('disabled', false);
            }
          });

        }
      };

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

          // This identifies your website in the createToken call below
          Stripe.setPublishableKey($(this).data('gateway-key'));

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

          // Get the card token from Stripe
          Stripe.card.createToken({
            number: $('.card-number').val(),
            cvc: $('.card-cvc').val(),
            exp_month: $('.card-expiry-month').val(),
            exp_year: $('.card-expiry-year').val()
          }, stripeResponseHandler);

          // Prevent the form from submitting with the default action
          return false;
        });
      });
    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Quaderno.js for One-off Charges on Stripe</title>

	<!-- The required libs -->
	<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
	<script type="text/javascript" src="https://js.quaderno.io/v2/"></script>

	<!-- jQuery is used only for this example; it isn't required to use Quaderno -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	</head>
	<body>
	<h1>Create a One-off Charge</h1>

	<p>Subtotal: $<span class="quaderno-subtotal"></span></p>
	<p>Taxes: $<span class="quaderno-taxes"></span></p>
	<p>Total: $<span class="quaderno-total"></span></p>

	<!-- Use something like: https://github.com/mikemaccana/quaderno-server to create your 'data-charge' value -->
	<form action="" method="POST" id="payment-form"
	data-gateway-key="YOUR_STRIPE_PUBLISHABLE_KEY"
	data-key="YOUR_QUADERNO_PUBLISHABLE_KEY"
	data-charge="JSON_WEB_TOKEN"
	data-amount="1000"
	data-taxes="excluded">

	<span class="payment-errors"></span>

	<fieldset>
	<legend>Billing Address</legend>
	<div class="form-row">
	<label>
	<span>* First Name / Company Name</span>
	<input data-quaderno="first-name"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Last Name</span>
	<input data-quaderno="last-name"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Email</span>
	<input data-quaderno="email"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Street Line 1</span>
	<input data-quaderno="street-line-1"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Street Line 2</span>
	<input data-quaderno="street-line-2"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>City</span>
	<input data-quaderno="city"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Postal Code</span>
	<input data-quaderno="postal-code"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Region</span>
	<input data-quaderno="region"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Country</span>
	<select data-quaderno="country">
	<option value="US" selected>United States</option>
	<option value="GB">United Kingdom</option>
	<option value="DE">Germany</option>
	<option value="FR">France</option>
	<option value="IT">Italy</option>
	<option value="ES">Spain</option>
	<option value="CA">Canada</option>
	<option value="AU">Australia</option>
	</select>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>VAT Number</span>
	<input data-quaderno="vat-number"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>Coupon</span>
	<input data-quaderno="coupon"/>
	</label>
	</div>
	</fieldset>

	<fieldset>
	<legend>Credit Card Data</legend>
	<div class="form-row">
	<label>
	<span>* Card Number</span>
	<input class="card-number" data-quaderno="number"/>
	</label>
	</div>

	<div class="form-row">
	<label>
	<span>* CVC</span>
	<input class="card-cvc" data-quaderno="cvc" type="password"/>
	</label>
	</div>

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

	<button type="submit">Pay Now</button>
	</form>

	<script type="text/javascript">
	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" data-quaderno="cardToken" />').val(token));

	// create the charge in Stripe via Quaderno and submit
	Quaderno.createCharge({
	success: function(status, response){
	// response contains the message and the Stripe customer id
	$form.append($('<input type="hidden" name="transactionDetails" data-quaderno="transactionDetails" />').val(response.details));
	// and re-submit the form
	$form.get(0).submit();
	},
	error: function(status, response){
	$form.find('.payment-errors').text(response.message);
	$form.find('button').prop('disabled', false);
	}
	});

	}
	};

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

	// This identifies your website in the createToken call below
	Stripe.setPublishableKey($(this).data('gateway-key'));

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

	// Get the card token from Stripe
	Stripe.card.createToken({
	number: $('.card-number').val(),
	cvc: $('.card-cvc').val(),
	exp_month: $('.card-expiry-month').val(),
	exp_year: $('.card-expiry-year').val()
	}, stripeResponseHandler);

	// Prevent the form from submitting with the default action
	return false;
	});
	});
	</script>
	</body>
	</html>