mirror of https://gitlab.com/tildes/tildes.git
Browse Source
Move Stripe donation form to main site (from Docs)
Move Stripe donation form to main site (from Docs)
This was always a bit weird to have on the Docs site, and can be done better here.merge-requests/85/head
Deimos
5 years ago
6 changed files with 94 additions and 13 deletions
-
4tildes/scss/modules/_form.scss
-
28tildes/static/js/behaviors/stripe-donate-form.js
-
2tildes/tildes/routes.py
-
38tildes/tildes/templates/donate_stripe.jinja2
-
18tildes/tildes/templates/donate_stripe_redirect.jinja2
-
17tildes/tildes/views/donate.py
@ -0,0 +1,28 @@ |
|||
// Copyright (c) 2019 Tildes contributors <code@tildes.net>
|
|||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
|
|||
$.onmount("[data-js-stripe-donate-form]", function() { |
|||
$(this).on("submit", function(event) { |
|||
var $amountInput = $(this).find("#amount"); |
|||
var amount = $amountInput.val(); |
|||
|
|||
var $errorDiv = $(this).find(".text-status-message"); |
|||
|
|||
// remove dollar sign and/or comma, then parse into float
|
|||
amount = amount.replace(/[$,]/g, ""); |
|||
amount = parseFloat(amount); |
|||
|
|||
if (isNaN(amount)) { |
|||
$errorDiv.text("Please enter a valid dollar amount."); |
|||
event.preventDefault(); |
|||
return; |
|||
} else if (amount < 1.0) { |
|||
$errorDiv.text("Donation amount must be at least $1."); |
|||
event.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
// set the value in case any of the replacements happened
|
|||
$amountInput.val(amount); |
|||
}); |
|||
}); |
@ -1,18 +1,38 @@ |
|||
{# Copyright (c) 2018 Tildes contributors <code@tildes.net> #} |
|||
{# Copyright (c) 2019 Tildes contributors <code@tildes.net> #} |
|||
{# SPDX-License-Identifier: AGPL-3.0-or-later #} |
|||
|
|||
{% extends 'base_no_sidebar.jinja2' %} |
|||
|
|||
{% block title %}Stripe donation{% endblock %} |
|||
{% block title %}Donate to Tildes{% endblock %} |
|||
|
|||
{% block main_heading %}Credit card donation (via Stripe){% endblock %} |
|||
|
|||
{% block content %} |
|||
<script src="https://js.stripe.com/v3/"></script> |
|||
<p>After submitting this form, you will be redirected to the Stripe site to enter your payment info.</p> |
|||
|
|||
<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 $7.50 USD.</p> |
|||
|
|||
<div class="divider"></div> |
|||
|
|||
<form class="form-narrow" method="post" data-js-stripe-donate-form> |
|||
<input type="hidden" name="csrf_token" value="{{ get_csrf_token() }}"> |
|||
|
|||
<div class="form-group"> |
|||
<label class="form-label" for="amount">Donation amount (must be at least $1)</label> |
|||
|
|||
<p>Redirecting to Stripe...</p> |
|||
<div class="input-group"> |
|||
<span class="input-group-addon">$</span> |
|||
<input class="form-input" id="amount" name="amount" type="text" data-js-auto-focus> |
|||
<select class="form-select" id="currency" name="currency"> |
|||
<option value="CAD" selected>CAD</option> |
|||
<option value="USD">USD</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
|
|||
{# This div will cause the page to redirect to the Stripe Checkout page #} |
|||
<div |
|||
data-js-stripe-checkout="{{ publishable_key }}" |
|||
data-js-stripe-checkout-session="{{ session_id }}" |
|||
></div> |
|||
<div class="form-buttons"> |
|||
<button class="btn btn-primary" type="submit">Donate</button> |
|||
<div class="text-status-message text-error"></div> |
|||
</div> |
|||
</form> |
|||
{% endblock %} |
@ -0,0 +1,18 @@ |
|||
{# Copyright (c) 2018 Tildes contributors <code@tildes.net> #} |
|||
{# SPDX-License-Identifier: AGPL-3.0-or-later #} |
|||
|
|||
{% extends 'base_no_sidebar.jinja2' %} |
|||
|
|||
{% block title %}Stripe donation{% endblock %} |
|||
|
|||
{% block content %} |
|||
<script src="https://js.stripe.com/v3/"></script> |
|||
|
|||
<p>Redirecting to Stripe...</p> |
|||
|
|||
{# This div will cause the page to redirect to the Stripe Checkout page #} |
|||
<div |
|||
data-js-stripe-checkout="{{ publishable_key }}" |
|||
data-js-stripe-checkout-session="{{ session_id }}" |
|||
></div> |
|||
{% endblock %} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue