Skip to content

Instantly share code, notes, and snippets.

@polimorfico

polimorfico/quaderno-subscriptions-for-stripe.html

Last active January 30, 2018 17:37
Show Gist options
  • Save polimorfico/f833ac9a5ab30b6bd4dd to your computer and use it in GitHub Desktop.
Save polimorfico/f833ac9a5ab30b6bd4dd to your computer and use it in GitHub Desktop.
Download ZIP
Create a Stripe subscription with Quaderno.js
Raw
quaderno-subscriptions-for-stripe.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quaderno.js for Stripe 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.stripe.com/v2/"></script>
<script type="text/javascript" src="https://js.quaderno.io/v2/"></script>
</head>
<body>
<h1>Create a Subscription to Awesome Plan</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="stripe"
data-key="YOUR_PUBLISHABLE_KEY"
data-plan="YOUR_PLAN_ID"
data-amount="1000"
data-taxes="excluded">
<input type="hidden" data-quaderno="quantity" value=1 />
<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">Create Subscription</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.createSubscription({
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment