Skip to content

Instantly share code, notes, and snippets.

@polimorfico

polimorfico/quaderno-charges-for-paypal.html

Last active August 29, 2015 14:22
Show Gist options
  • Save polimorfico/a320fe09166e56a8db3a to your computer and use it in GitHub Desktop.
Save polimorfico/a320fe09166e56a8db3a to your computer and use it in GitHub Desktop.
Download ZIP
Create a PayPal charge with Quaderno.js
Raw
quaderno-charges-for-paypal.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quaderno.js for One-Off Charge on PayPal</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 Quaderno lib -->
<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>
<!-- Subscription data is encrypted in the data-charge field -->
<form method="POST" id="payment-form" action="http://your-redirect-url.com"
data-gateway = "paypal"
data-charge= "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjdXJyZW5jeSI6IlVTRCIsImFtb3VudCI6MTAwMCwiaXRlbV9uYW1lIjoiVGVzdCBpdGVtIiwiaXRlbV9udW1iZXIiOiIwMDAwMSIsImlhdCI6MTQyOTEwNDE2OX0.QFSK5w3stcCond7pzDFk46SbQ0v_ia-Z9auI6eUcodk"
data-amount="1000"
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>
<button type="submit">Pay Now</button>
</form>
<script type="text/javascript">
jQuery(function($) {
$('#payment-form').submit(function(e) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Quaderno.createCharge({
error: function(status, message) {
console.log(message);
$form.find('button').prop('disabled', false);
}});
// 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