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>
@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