polimorfico/quaderno-charges-for-braintree.html

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

    <!-- jQuery is used only for this example; it isn't required to use Stripe -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <!-- The required libs -->
    <script type="text/javascript" src="https://js.braintreegateway.com/v2/braintree.js"></script>
    <script type="text/javascript" src="https://js.quaderno.io/v2/"></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>

    <form method="POST" id="payment-form"
      data-gateway="braintree"
      data-charge="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOiIyMDE1LTA0LTI5VDEyOjI0OjMyLjg3MFoiLCJhbW91bnQiOjEyMTAsImRlc2NyaXB0aW9uIjoic2FuZGJveCBpdGVtIn0.9ubrGAZ1ba5EYcWWSA7o_uIVbsKjRl2aSMHfKF1rN0Y"
      data-amount="1200"
      data-taxes="included"
      data-key="pk_test_LNpesCnUBN6Ax__xbmc4">

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

      <fieldset>
        <legend>Billing Address</legend>
        <div class="form-row">
          <label>
            <span>* First 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>Company Name</span>
            <input data-quaderno="company-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 id="quaderno-countries" 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>
      </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">
    // This identifies your website in the createToken call below

      var braintreeResponseHandler = function(err, nonce) {
        var $form = $('#payment-form');

        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="hidden" data-quaderno="cardToken" />').val(nonce));

        // 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" 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);
          // Disable the submit button to prevent repeated clicks
          $form.find('button').prop('disabled', true);

          // This identifies your website in the createToken call below
          client = new braintree.api.Client({clientToken: $form.get(0).getAttribute('data-gateway-key')})

          client.tokenizeCard({
            number: $('.card-number').val(),
            cvv: $('.card-cvc').val(),
            expirationDate: $('.card-expiry-month').val() + '/' + $('.card-expiry-year').val(),
          }, braintreeResponseHandler);

          // 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 Braintree</title>

	<!-- jQuery is used only for this example; it isn't required to use Stripe -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

	<!-- The required libs -->
	<script type="text/javascript" src="https://js.braintreegateway.com/v2/braintree.js"></script>
	<script type="text/javascript" src="https://js.quaderno.io/v2/"></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>

	<form method="POST" id="payment-form"
	data-gateway="braintree"
	data-charge="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOiIyMDE1LTA0LTI5VDEyOjI0OjMyLjg3MFoiLCJhbW91bnQiOjEyMTAsImRlc2NyaXB0aW9uIjoic2FuZGJveCBpdGVtIn0.9ubrGAZ1ba5EYcWWSA7o_uIVbsKjRl2aSMHfKF1rN0Y"
	data-amount="1200"
	data-taxes="included"
	data-key="pk_test_LNpesCnUBN6Ax__xbmc4">

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

	<fieldset>
	<legend>Billing Address</legend>
	<div class="form-row">
	<label>
	<span>* First 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>Company Name</span>
	<input data-quaderno="company-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 id="quaderno-countries" 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>
	</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">
	// This identifies your website in the createToken call below

	var braintreeResponseHandler = function(err, nonce) {
	var $form = $('#payment-form');

	// Insert the token into the form so it gets submitted to the server
	$form.append($('<input type="hidden" data-quaderno="cardToken" />').val(nonce));

	// 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" 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);
	// Disable the submit button to prevent repeated clicks
	$form.find('button').prop('disabled', true);

	// This identifies your website in the createToken call below
	client = new braintree.api.Client({clientToken: $form.get(0).getAttribute('data-gateway-key')})

	client.tokenizeCard({
	number: $('.card-number').val(),
	cvv: $('.card-cvc').val(),
	expirationDate: $('.card-expiry-month').val() + '/' + $('.card-expiry-year').val(),
	}, braintreeResponseHandler);

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