summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLukas Fleischer <lfleischer@calcurse.org>2019-06-07 00:50:18 -0400
committerLukas Fleischer <lfleischer@calcurse.org>2019-06-12 13:00:10 -0400
commit5cfba001e706b368821ccdba5755e9cbe596b236 (patch)
tree25ba779702346502e730a1d341e925ce0622ba5e
parent7ef4c91021570673aa96fe158481ed80d13c5b2c (diff)
downloadcalcurse.org-5cfba001e706b368821ccdba5755e9cbe596b236.tar.gz
calcurse.org-5cfba001e706b368821ccdba5755e9cbe596b236.zip
Update donation form to new Stripe Checkout version
Signed-off-by: Lukas Fleischer <lfleischer@calcurse.org>
-rw-r--r--css/style.css79
-rw-r--r--devel/index.html2
-rw-r--r--donate/canceled/index.html41
-rw-r--r--donate/index.html139
-rw-r--r--donate/success/index.html39
-rw-r--r--downloads/index.html2
-rw-r--r--index.html4
-rw-r--r--support/index.html2
8 files changed, 219 insertions, 89 deletions
diff --git a/css/style.css b/css/style.css
index a005e8e..085ae07 100644
--- a/css/style.css
+++ b/css/style.css
@@ -51,6 +51,17 @@ body {
text-decoration:none;
}
+.heart {
+ color:#c23;
+ opacity:.75;
+ margin-right:3px;
+}
+
+.current .heart {
+ opacity:1;
+ color:#47a;
+}
+
#contents {
max-width:800px;
color:#444;
@@ -221,30 +232,57 @@ dt {
text-align:right;
}
-ul.donate {
+ul.donate-list {
font:normal normal normal 100% Lato,Arial,sans-serif;
- margin:5px;
- padding:5px;
+ line-height:1;
+ margin:30px 5px;
+ padding:15px 10px 10px 15px;
list-style:none;
+ display:inline-flex;
+ flex-direction:row;
+ flex-wrap:wrap;
+ justify-content:center;
+ align-items:center;
+ border-radius:10px;
+ -webkit-box-shadow: 0 .15rem 0.75rem 0 rgba(58,59,69,.25) !important;
+ box-shadow: 0 .15rem 0.75rem 0 rgba(58,59,69,.25) !important;
}
-ul.donate li {
+ul.donate-list li {
display:inline-block;
+ margin:0 5px 5px 0;
}
-ul.donate li a {
- display:inline-block;
+
+@media (min-width: 640px) {
+ ul.donate-list li.sp {
+ margin-right:20px;
+ }
+}
+
+.donate-box, ul.donate-list li a {
+ display:flex;
color:#666;
background-color:#eee;
border:1px solid #ccc;
border-left:5px solid #ccc;
border-radius:3pt;
- padding:1ex 1.5ex;
- margin:0 3px 3px 0;
cursor:hand;
+ height:55px;
+ padding:0 2ex;
+ flex-direction:column;
+ justify-content:center;
+}
+
+ul.donate li a {
+ font-size:13pt;
+}
+
+.donate-box {
+ flex-grow:3;
}
-ul.donate li a:hover {
+ul.donate-list li a:hover {
color:white;
font-weight:bold;
text-decoration:none;
@@ -254,18 +292,27 @@ ul.donate li a:hover {
border-radius:3pt;
}
-ul.donate li input {
+ul.donate-list li input {
display:inline-block;
- padding:1ex 1ex;
margin:0 1ex 0 0;
- width:60px;
+ padding:3px;
+ width:100px;
}
-ul.donate li select {
+ul.donate-list li select {
display:inline-block;
- padding:1ex 1ex;
- margin:0 1ex 0 0;
- width:60px;
+ margin:0;
+ padding:3px;
+ width:100px;
+}
+
+#donate-custom {
+ display:none;
+}
+
+.donate-currency {
+ font-size:30pt;
+ margin:0 10px;
}
img {
diff --git a/devel/index.html b/devel/index.html
index a85f286..952938b 100644
--- a/devel/index.html
+++ b/devel/index.html
@@ -23,7 +23,7 @@
<li><a href="/downloads">Downloads</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/devel" class="current">Development</a></li>
- <li><a href="/donate">Donate</a></li>
+ <li><a href="/donate"><span class="heart">&#x2764</span> Donate</a></li>
</ul>
<p style="clear:both;"></p>
</div>
diff --git a/donate/canceled/index.html b/donate/canceled/index.html
new file mode 100644
index 0000000..8c06d59
--- /dev/null
+++ b/donate/canceled/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>calcurse: a text-based calendar and scheduling application</title>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+ <meta http-equiv="Content-Style-Type" content="text/css" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
+ <script type="text/javascript" src="/js/lightbox.js"></script>
+
+ <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+ <link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
+ <link rel="stylesheet" type="text/css" href="/css/lightbox.css" media="screen" />
+ </head>
+
+ <body>
+ <div id="header" class="typeface-js">
+ <a href="/"><img src="/images/logo.png" alt="calcurse" /></a>
+ <ul>
+ <li><a href="/">About</a></li>
+ <li><a href="/downloads">Downloads</a></li>
+ <li><a href="/support">Support</a></li>
+ <li><a href="/devel">Development</a></li>
+ <li><a href="/donate" class="current"><span class="heart">&#x2764</span> Donate</a></li>
+ </ul>
+ <p style="clear:both;"></p>
+ </div>
+ <div id="contents">
+<h1>Donate</h1>
+<h2>Whoops, something went wrong!</h2>
+<p class="error">There has been an error, and you have not been charged.</p>
+<p class="error">Please <a href="/donate/">try again</a> or send an email to <tt>&lt;donations at calcurse dot org&gt;</tt>.</p>
+ </div>
+ <div id="footer">
+ Copyright &copy; 2012-2018 <a href="/support/#devs">calcurse Development Team</a>.
+ Licensed under the terms of the BSD License.
+ </div>
+ </body>
+</html>
diff --git a/donate/index.html b/donate/index.html
index 71f77c7..ced2271 100644
--- a/donate/index.html
+++ b/donate/index.html
@@ -9,8 +9,7 @@
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
- <script type="text/javascript" src="https://checkout.stripe.com/checkout.js"></script>
- <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=6LdGJp4UAAAAAOSO_ptuZSe-ZBRDZ0UUl47IulUu"></script>
+ <script src="https://js.stripe.com/v3/"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
@@ -25,18 +24,41 @@
<li><a href="/downloads">Downloads</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/devel">Development</a></li>
- <li><a href="/donate" class="current">Donate</a></li>
+ <li><a href="/donate" class="current"><span class="heart">&#x2764</span> Donate</a></li>
</ul>
<p style="clear:both;"></p>
</div>
<div id="contents">
-<h1>Donations</h1>
+<h1>Donate</h1>
+<div style="text-align:center;">
+ <ul class="donate-list">
+ <li><a href="javascript:openHandler(10, 'eur')">10&euro;</a></li>
+ <li><a href="javascript:openHandler(20, 'eur')">20&euro;</a></li>
+ <li><a href="javascript:openHandler(50, 'eur')">50&euro;</a></li>
+ <li class="sp"><a href="javascript:openHandler(100, 'eur')">100&euro;</a></li>
+ <li><a href="javascript:openHandler(10, 'usd')">$10</a></li>
+ <li><a href="javascript:openHandler(20, 'usd')">$20</a></li>
+ <li><a href="javascript:openHandler(50, 'usd')">$50</a></li>
+ <li class="sp"><a href="javascript:openHandler(100, 'usd')">$100</a></li>
+ <li><a href="javascript:customHandler('eur')">Custom</a></li>
+ </ul>
+ <ul class="donate-list" id="donate-custom">
+ <li class="sp"><a href="javascript:closeCustomHandler()" style="font-size:30px; padding:0 20px;">&#x2B05;</a></li>
+ <li>
+ <div class="donate-box">
+ <div>
+ <input name="donate-amount" type="number" min="5" value="50" />&nbsp;<select name="donate-currency"><option value="eur">&euro;</option><option value="usd">USD</option></select>
+ </div>
+ </div>
+ </li>
+ <li><a href="javascript:openHandler(0)">Donate</a></li>
+ </ul>
+ <div id="donate-status"></div>
+</div>
<p>
There are different ways to support calcurse development. If you are a
programmer, one of the best ways to contribute is to <a href="/devel">submit
patches</a> fixing bugs, adding features or improving overall code quality.
-</p>
-<p>
We are also extremely grateful for donations which help us continue
developing calcurse as open source software and are used to cover recurring
costs, such as for our servers.
@@ -46,83 +68,64 @@
payments. The Stripe Checkout payment form requires a modern browser with
JavaScript support. If you would like to make a donation but do not want to
use Stripe, feel free to contact us at <tt>&lt;donations at calcurse dot
- org&gt;</tt>. This email address can also be used if you have any questions
+ org&gt;</tt>. Please also use this email address if you have any questions
regarding the donation process.
</p>
-<p>
- Use one of the following links to donate...
-</p>
-<ul class="donate">
- <li><a href="javascript:openHandler(10, 'eur')">10&euro;</a></li>
- <li><a href="javascript:openHandler(20, 'eur')">20&euro;</a></li>
- <li><a href="javascript:openHandler(50, 'eur')">50&euro;</a></li>
- <li><a href="javascript:openHandler(100, 'eur')">100&euro;</a></li>
- <li><a href="javascript:openHandler(10, 'usd')">$10</a></li>
- <li><a href="javascript:openHandler(20, 'usd')">$20</a></li>
- <li><a href="javascript:openHandler(50, 'usd')">$50</a></li>
- <li><a href="javascript:openHandler(100, 'usd')">$100</a></li>
- <li id="donate-custom"><a href="javascript:customHandler()">Custom</a></li>
-</ul>
-<div id="donate-status"></div>
<script>
-var amount = 0;
-var handler = StripeCheckout.configure({
- image: 'https://calcurse.org/images/logo-emblem.png',
- key: (location.search == '?test') ? 'pk_test_zNePe3wvpZ65O3nEeFq4QL2j' : 'pk_live_g0aFHViGhTkfSSCFmDCr5UI8',
- locale: 'auto',
- token: function(token) {
- grecaptcha.ready(function() {
- grecaptcha.execute('6LdGJp4UAAAAAOSO_ptuZSe-ZBRDZ0UUl47IulUu', {"action": "process_payment"}).then(function(recaptcha) {
- $.ajax({
- type: "POST",
- url: "/stripe",
- data: {
- "token": token.id,
- "email": token.email,
- "amount": amount,
- "currency": token.currency,
- "recaptcha": recaptcha,
- "test": (location.search == '?test'),
- },
- success: function(data) {
- if (data.success) {
- $("#donate-status").html('<h2>Thank you for your donation!</h2>');
- } else {
- $("#donate-status").html('<h2>Whoops, something went wrong!</h2><p class="error">There has been an error, and you have not been charged. Please try again or send an email to <tt>&lt;donations at calcurse dot org&gt;</tt>.');
- $("#donate-status h2").text(data.message);
- }
- },
- error: function(jqXHR, msg, err) {
- $("#donate-status").html('<h2>Whoops, something went wrong!</h2><p class="error">There has been an error, and you have not been charged. Please try again or send an email to <tt>&lt;donations at calcurse dot org&gt;</tt>.');
- $("#donate-status h2").text(msg + ", " + err);
- }
- });
- });
- });
- }
-});
-
function openHandler(val, currency) {
+ var key, sku, quantity = 1;
+
if (val == 0) {
val = Number($("input[name=donate-amount]").val());
val = Math.max(val, 5);
$("input[name=donate-amount]").val(val);
currency = $("select[name=donate-currency]").val();
+ }
+ amount = val | 0;
+
+ if (location.search == '?test') {
+ key = 'pk_test_zNePe3wvpZ65O3nEeFq4QL2j';
+ if (amount == 10 && currency == 'eur') { sku = 'sku_FCzblNv0bYaoQI'; }
+ else if (currency == 'eur') { sku = 'sku_FCzhhakpezzfNM'; quantity = amount; }
+ } else {
+ key = 'pk_live_g0aFHViGhTkfSSCFmDCr5UI8';
+ if (amount == 10 && currency == 'eur') { sku = 'sku_FCzFTZCpwz8JIC'; }
+ else if (amount == 20 && currency == 'eur') { sku = 'sku_FCzFJ8F1Rk05zV'; }
+ else if (amount == 50 && currency == 'eur') { sku = 'sku_FCzEbnD8412915'; }
+ else if (amount == 100 && currency == 'eur') { sku = 'sku_FCzGvr7QbVAfT1'; }
+ else if (currency == 'eur') { sku = 'sku_FCzoJb3BhiYq5o'; quantity = amount; }
+ else if (amount == 10 && currency == 'usd') { sku = 'sku_FCzGO4XmG0KR5e'; }
+ else if (amount == 20 && currency == 'usd') { sku = 'sku_FCzGsXx3auV8Wx'; }
+ else if (amount == 50 && currency == 'usd') { sku = 'sku_FCzGqqQ4XTm6H6'; }
+ else if (amount == 100 && currency == 'usd') { sku = 'sku_FCzGnScoElSBYd'; }
+ else if (currency == 'usd') { sku = 'sku_FCzomymP9IL7Sj'; quantity = amount; }
}
- amount = (val * 100) | 0;
- handler.open({
- name: 'Donation',
- description: 'Support calcurse Development',
- currency: currency,
- amount: amount,
- allowRememberMe: false
+
+ var stripe = Stripe(key);
+ stripe.redirectToCheckout({
+ items: [ { sku: sku, quantity: quantity } ],
+ successUrl: 'https://calcurse.org/donate/success/',
+ cancelUrl: 'https://calcurse.org/donate/canceled/',
+ }).then(function (result) {
+ if (result.error) {
+ var displayError = document.getElementById('error-message');
+ displayError.textContent = result.error.message;
+ }
});
}
-function customHandler() {
- $("#donate-custom").html('<input name="donate-amount" type="number" min="5" /> <select name="donate-currency"> <option value="eur">&euro;</option> <option value="usd">USD</option> </select> <a href="javascript:openHandler(0)">Donate</a>');
+function customHandler(currency) {
+ $(".donate-list").hide();
+ $("#donate-custom").css('display', 'inline-flex');
$("input[name=donate-amount]").focus();
+ $("input[name=donate-amount]").select();
+ $("select[name=donate-currency]").val(currency);
+}
+
+function closeCustomHandler() {
+ $(".donate-list").css('display', 'inline-flex');
+ $("#donate-custom").hide();
}
window.addEventListener('popstate', function() {
diff --git a/donate/success/index.html b/donate/success/index.html
new file mode 100644
index 0000000..e70b21d
--- /dev/null
+++ b/donate/success/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>calcurse: a text-based calendar and scheduling application</title>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+ <meta http-equiv="Content-Style-Type" content="text/css" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
+ <script type="text/javascript" src="/js/lightbox.js"></script>
+
+ <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+ <link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
+ <link rel="stylesheet" type="text/css" href="/css/lightbox.css" media="screen" />
+ </head>
+
+ <body>
+ <div id="header" class="typeface-js">
+ <a href="/"><img src="/images/logo.png" alt="calcurse" /></a>
+ <ul>
+ <li><a href="/">About</a></li>
+ <li><a href="/downloads">Downloads</a></li>
+ <li><a href="/support">Support</a></li>
+ <li><a href="/devel">Development</a></li>
+ <li><a href="/donate" class="current"><span class="heart">&#x2764</span> Donate</a></li>
+ </ul>
+ <p style="clear:both;"></p>
+ </div>
+ <div id="contents">
+<h1>Donate</h1>
+<h2>Thank you for your donation!</h2>
+ </div>
+ <div id="footer">
+ Copyright &copy; 2012-2018 <a href="/support/#devs">calcurse Development Team</a>.
+ Licensed under the terms of the BSD License.
+ </div>
+ </body>
+</html>
diff --git a/downloads/index.html b/downloads/index.html
index edd74d4..013d430 100644
--- a/downloads/index.html
+++ b/downloads/index.html
@@ -19,7 +19,7 @@
<li><a href="/downloads" class="current">Downloads</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/devel">Development</a></li>
- <li><a href="/donate">Donate</a></li>
+ <li><a href="/donate"><span class="heart">&#x2764</span> Donate</a></li>
</ul>
<p style="clear:both;"></p>
</div>
diff --git a/index.html b/index.html
index 2c0dcbb..c075b3e 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
<li><a href="/downloads">Downloads</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/devel">Development</a></li>
- <li><a href="/donate">Donate</a></li>
+ <li><a href="/donate"><span class="heart">&#x2764</span> Donate</a></li>
</ul>
<p style="clear:both;"></p>
</div>
@@ -61,7 +61,7 @@
<strong>Love calcurse?</strong> Contribute by <a href="/devel">writing
code</a> or <a href="/donate">make a donation</a> to support the project.
</p>
-<p style="text-align: center; padding: 0.5cm 1.5cm;">
+<p style="text-align: center; padding: 0.5cm 0;">
<img src="/images/demo.gif" alt="Demo">
</p>
diff --git a/support/index.html b/support/index.html
index 7d824eb..ed04564 100644
--- a/support/index.html
+++ b/support/index.html
@@ -19,7 +19,7 @@
<li><a href="/downloads">Downloads</a></li>
<li><a href="/support" class="current">Support</a></li>
<li><a href="/devel">Development</a></li>
- <li><a href="/donate">Donate</a></li>
+ <li><a href="/donate"><span class="heart">&#x2764</span> Donate</a></li>
</ul>
<p style="clear:both;"></p>
</div>