Skip to content

Instantly share code, notes, and snippets.

@polimorfico

polimorfico/quaderno-charges-for-braintree.html

Last active July 18, 2016 11:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save polimorfico/08087d65cba760fbf3ba to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save polimorfico/08087d65cba760fbf3ba to your computer and use it in GitHub Desktop.
Download ZIP
Create a Braintree charge with Quaderno.js
Raw
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>
@martinjbaker
Copy link
Copy Markdown

martinjbaker commented Jul 18, 2016

Needs mentions of Stripe in comments changed to Braintree

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment