Skip to content

Instantly share code, notes, and snippets.

@polimorfico

polimorfico/quaderno-charges-for-stripe.html

Last active June 19, 2017 10:11
Show Gist options
  • Save polimorfico/4ae012f1255d4a00d226 to your computer and use it in GitHub Desktop.
Save polimorfico/4ae012f1255d4a00d226 to your computer and use it in GitHub Desktop.
Download ZIP
Create a Stripe charge with Quaderno.js
Raw
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>
<form action="" method="POST" id="payment-form"
data-gateway="stripe"
data-key="YOUR_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>
@paulbarker
Copy link

Thanks for providing this - it saved me a considerable amount of time.
I did come across 1 problem, though - I had to change line 183 to:

Stripe.setPublishableKey($("#payment-form").attr("data-key"));

otherwise it throws an error when stripe.js can't see the publishable key.

@molinto
Copy link

molinto commented Jun 24, 2015

@paulbarker: Shouldn't need to update line 183. Line 22 is wrong though

https://gist.github.com/molinto/428581dc614b58db81fc

@pabletecodes
Copy link

pabletecodes commented Feb 13, 2017 •
edited
Loading

@polimorfico I noticed that the data-gateway-key attribute in the form element of this example is missing. It's referenced in line 185:

Stripe.setPublishableKey($(this).data('gateway-key'));

I'm following this guide and there's no mention to this mysterious "gateway key" either. It took me a while to figure it out, so perhaps it's worth clarifying this in the example and the guides IMO.Thanks!

@xxswingxx
Copy link

xxswingxx commented Jun 19, 2017 •
edited
Loading

The data-gateway-key is automatically retrieved by the script. You don't need (also you shouldn't) set it by yourself. By the way, data-key shouldn't be used as the Stripe publishable token as @paulbaker commented here.

  • data-key: The Quaderno public key. You need to set it manually.
  • data-gateway-key: The payment gateway publishable key. Quaderno.js automatically retrieves this key for you and will set it on the form, and it's the one you should be using for card tokenization.

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