Commit 0460d1ae authored by Deimos's avatar Deimos

Update Stripe donation page to use new method

I've switched over to the new version of Stripe Checkout (a hosted page
instead of the old popup version), so this updates the Stripe donation
page to use that method instead. The jQuery file isn't used anywhere
else, so I can delete it now.

This page could (should?) be moved to the main site instead of being on
the Docs one, but it doesn't matter much.
parent 59b1a62e
This diff is collapsed.
......@@ -11,10 +11,7 @@
<p>Note that the donation is in Canadian Dollars (CAD) by default, but you can switch to USD if you prefer. At the moment, $10 CAD is about $8 USD.</p>
<form method="post" action="https://tildes.net/donate_stripe">
<input type="hidden" name="stripe_token" id="stripe_token" value="">
<input type="hidden" name="donator_email" id="donator_email" value="">
<form id="donate-form" method="post" action="https://tildes.net/donate_stripe">
<label for="amount">Donation amount ($):</label>
<input id="amount" name="amount" type="text" placeholder="Amount ($)">
......@@ -23,50 +20,33 @@
<option value="USD">USD</option>
</select>
<button id="donateButton">Donate</button>
<button type="submit">Donate</button>
</form>
<div id="error_explanation"></div>
<div id="error-explanation" class="text-error"></div>
{# TODO: using jquery for this is ridiculously overkill #}
<script src="{{ SITEURL }}/theme/js/jquery-3.1.1.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
key: 'pk_live_DjgErI2jmBhXNxbHVmU6pwM2',
name: 'Tildes',
description: 'One-time donation',
image: '{{ SITEURL }}/theme/images/favicon-144x144.png',
zipCode: true,
panelLabel: 'Donate',
allowRememberMe: false,
token: function(token) {
$('input#stripe_token').val(token.id);
$('input#donator_email').val(token.email);
$('form').submit();
}
});
var donateForm = document.getElementById("donate-form");
var errorDiv = document.getElementById("error-explanation");
$('#donateButton').click(function(event) {
event.preventDefault();
donateForm.addEventListener("submit", function(event) {
amountInput = document.getElementById("amount");
var amount = amountInput.value;
var amount = $('input#amount').val();
amount = amount.replace(/\$/g, '').replace(/\,/g, '')
// remove dollar sign and/or comma, then parse into float
amount = amount.replace(/\$/g, "").replace(/\,/g, "");
amount = parseFloat(amount);
if (isNaN(amount)) {
$('#error_explanation').html('<p>Please enter a valid dollar amount.</p>');
}
else if (amount < 1.00) {
$('#error_explanation').html('<p>Donation amount must be at least $1.</p>');
}
else {
amount = amount * 100; // Needs to be an integer!
handler.open({
currency: $('#currency').val(),
amount: Math.round(amount)
})
errorDiv.innerHTML = "<p>Please enter a valid dollar amount.</p>";
event.preventDefault();
} else if (amount < 1.00) {
errorDiv.innerHTML = "<p>Donation amount must be at least $1.</p>";
event.preventDefault();
}
// set the value in case any of the replacements happened
amountInput.value = amount;
});
</script>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment