Skip to content

Instantly share code, notes, and snippets.

@polimorfico

polimorfico/quaderno-subscriptions-for-braintree.html

Last active August 29, 2015 14:22
Show Gist options
  • Save polimorfico/cea3e81227ab13f9dfbb to your computer and use it in GitHub Desktop.
Save polimorfico/cea3e81227ab13f9dfbb to your computer and use it in GitHub Desktop.
Download ZIP
Create a Braintree Subscription with Quaderno.js
Raw
quaderno-subscriptions-for-braintree.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quaderno.js for Braintree Subscriptions</title>
<!-- 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>
<!-- 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 subscription to Awesome Plan with Braintree</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-plan="awesome"
data-amount="1200"
data-taxes="excluded"
data-key="pk_test_LNpesCnUBN6Ax__xbmc4">
<input type="hidden" value="1" data-quaderno="quantity">
<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 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">Create Susbcription</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.createSubscription({
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment