Skip to content

P
patronage
Commit 8aa47106 authored by Aral Balkan's avatar Aral Balkan
Browse files
Options

Integrate existing funding form; implement one-time & recurring flows

parent 9040d572
Hide whitespace changes
Inline Side-by-side
Showing with 491 additions and 26 deletions
fund-us/css/index.css 0 → 100644
View file @ 8aa47106
/*
Funding page styles.
*/
/* Paul Irish’s box-sizing best practices */
/* ======================================= */
html
{
box-sizing: border-box;
}
*, *:before, *:after
{
box-sizing: inherit;
}
/* ======================================= */
/* TEMP */
#labs-alert
{
border: 10px solid red;
padding: 10px;
margin-top: 10px;
}
/*
Extending the main class to add centering.
Also, including the site footer styles.
This should probably be in the global stylesheet.
TODO: Laura, can you please take a look?
*/
.main
{
padding-left: 15px;
padding-right: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 730px) {
.main
{
padding-left: 0;
padding-right: 0;
}
}
/*body
{
font-family: 'Avenir Next', Avenir, sans-serif;
color: #4d4d4d;
}
*/
.progressIndicator
{
width: 16px;
height: 16px;
display: inline-block;
margin-bottom: -2px;
margin-right: 6px;
vertical-align: center;
opacity: 1.0;
transition: opacity 0.33s;
}
#progressIndicator
{
text-align: center;
}
#thankYouMessage
{
opacity: 0.0;
transition: opacity 0.33s;
}
.displayNone
{
display: none;
}
#indieLogoForStripe
{
width: 64px;
height: 64px;
display: block;
margin-left: auto;
margin-right: auto;
}
fieldset
{
border: 0;
padding: 0;
margin: 0;
}
input[name="donationAmount"]
{
width: 0;
height: 0;
}
#donationForm, #progressIndicator, #thankYouMessage, #errorMessage
{
margin-left: auto;
margin-right: auto;
max-width: 530px;
margin-top: -48px;
}
#errorMessage
{
margin-top: -70px;
/* Make up for the lack of margin between the error message and the donation form. */
margin-bottom: 90px;
}
.donationForm
{
padding: 10px;
width: 300px;
overflow: hidden;
/*
Using explicitly set max-height to transition as transition height from auto
to a value does not work. Because that’s not what you’d want to do 99% of the
time when you collapse an element. *walks away grumbling* :)
*/
max-height: 338px;
transition: max-height 0.33s, padding-bottom 0.33s;
}
@media only screen and (min-width: 380px) {
.donationForm {
padding: 10px;
width: 358px;
}
}
#errorMessage
{
max-height: 0;
overflow: hidden;
padding-bottom: 0;
transition: max-height 0.33s;
}
#serverError, #recurringDonationNote
{
font-weight: 600;
}
.noHeight
{
max-height: 0px;
padding-bottom: 0px;
}
label
{
display: inline-block;
border: 1px solid #999;
border-radius: 6px;
}
.donationTypeButtonLabel
{
width: 48%;
height: 30px;
line-height: 30px;
text-align: center;
margin-bottom: 12px;
font-size: 14px;
}
/* only add right margin to first button
(creating central gutter) */
.donationTypeButtonLabel:nth-of-type(1)
{
margin-right: 5px;
}
.donationTierButtonLabel
{
clear: none;
cursor: pointer;
display: block;
float: left;
width: 62px;
height: 85px;
line-height: 85px;
margin-bottom: 10px;
margin-right: 10px;
font-size: 21px;
text-align: center;
}
@media only screen and (min-width: 380px) {
.donationTierButtonLabel
{
font-size: 24px;
width: 76px;
}
}
/* remove right margin from last button on each row
(creating gutters between buttons) */
.donationTierButtonLabel:nth-of-type(4n)
{
margin-right: 0;
}
.donationTierButtonLabel > input
{
max-width: 60px;
font-size: 16px;
text-align: center;
}
input[name="donationAmount"]:checked + label
{
background-color: #eee;
}
#otherDonationLabel
{
font-size: 16px;
padding-top: 5px;
line-height: 30px;
}
#otherDonationLabel > input
{
margin-left: 3px;
margin-right: 3px;
width: 54px;
/* ensure styles are consistent with that of other input types */
background: #fff;
border: 1px solid #AFAFAF;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #4d4d4d;
display: block;
font-family: "Avenir Next", Avenir, 'Helvetica Neue', Helvetica, sans-serif;
height: 30px;
line-height: 30px;
padding: 0;
-webkit-appearance: none;
}
@media only screen and (min-width: 380px) {
#otherDonationLabel > input
{
margin-left: 7px;
margin-right: 7px;
width: 60px;
}
}
#donateButton
{
font-size: 16px;
margin-top: 16px;
margin-bottom: 10px;
margin-right: 0;
width: 99%;
height: 50px;
}
@media only screen and (min-width: 380px) {
#donateButton
{
font-size: 21px;
}
}
.donation-currency {
color: #7d7d7d;
display: block;
font-style: italic;
text-align: center;
}
/* Accessibly hide elements, as per http://webaim.org/techniques/css/invisiblecontent/ */
.hidden
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
fund-us/index.html
View file @ 8aa47106
<!DOCTYPE html>
<html lang="en">
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Stripe client test</title>
<style>
html {
......@@ -11,30 +10,52 @@
background-color: white;
}
</style>
<link rel='stylesheet' href='css/index.css'>
</head>
<body>
<h1>Fund us</h1>
<button id='checkout'>€100/month patronage</button>
<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('pk_test_mLQRpGuO7qq3XMfSgwmt4n8U00FSZOIY1h')
document.querySelector('#checkout').addEventListener('click', (event) => {
stripe.redirectToCheckout({
items: [
{plan: 'plan_FSsO2vwva5oEOP', quantity: 100}
],
successUrl: 'https://aral.hypha.dev/patronage/?id={CHECKOUT_SESSION_ID}',
cancelUrl: 'https://aral.hypha.dev/fund-us/cancel',
}).then(function (result) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `result.error.message`.
alert(result.error.message)
})
})
</script>
<!-- Error message -->
<div id='errorMessage' class='displayNone'>
<h2>Oops!</h2>
<p>Sorry, we have not been able to process your donation.</p>
<p id='serverError' class='displayNone'></p>
<p>We’d appreciate it if you could try again.</p>
<p><small>If you’re having trouble donating, please contact us by email <a href='mailto:hello@ind.ie'>hello@ind.ie</a> or on Twitter: <a href='https://twitter.com/indie'>@indie</a>.</small></p>
</div>
<!-- Donation form -->
<div id='donationForm' class='donationForm'>
<fieldset>
<legend class='hidden'>Type of donation</legend>
<label class='donationTypeButtonLabel' for='oneTimeDonation'><input type='radio' name='donationType' value='oneTime' id='oneTimeDonation' checked> One time</label>
<label class='donationTypeButtonLabel' for='monthlyDonation'><input type='radio' name='donationType' value='monthly' id='monthlyDonation'> Monthly</label>
</fieldset>
<fieldset>
<legend class='hidden'>Amount of donation</legend>
<input type='radio' name='donationAmount' value='5' class='hidden' id='tier1'><label class='donationTierButtonLabel' for='tier1'>€5</label>
<input type='radio' name='donationAmount' value='10' class='hidden' id='tier2'><label class='donationTierButtonLabel' for='tier2'>€10</label>
<input type='radio' name='donationAmount' value='20' class='hidden' id='tier3'><label class='donationTierButtonLabel' for='tier3'>€20</label>
<input type='radio' name='donationAmount' value='25' class='hidden' id='tier4'><label class='donationTierButtonLabel' for='tier4'>€25</label>
<input type='radio' name='donationAmount' value='50' class='hidden' id='tier5'><label class='donationTierButtonLabel' for='tier5'>€50</label>
<input type='radio' name='donationAmount' value='100' class='hidden' id='tier6'><label class='donationTierButtonLabel' for='tier6'>€100</label>
<input type='radio' name='donationAmount' value='250' class='hidden' id='tier7'><label class='donationTierButtonLabel' for='tier7'>€250</label>
<!-- Unfortunately can’t use an input type='number' here because the events are not fired consistently across major browsers. -->
<input type='radio' name='donationAmount' value='0' class='hidden' id='tier8'><label class='donationTierButtonLabel' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='text' title='Custom donation amount'></input></label>
</fieldset>
<button id='donateButton' disabled>Donate by credit/debit card</button>
<small class='donation-currency'>Donations are in <a href='https://transferwise.com/gb/currency-converter/currencies/eur-euro'>Euros</a></small>
</div> <!-- end of donation form -->
<script src='https://js.stripe.com/v3/'></script>
<script src='js/index.js'></script>
</body>
</html>
\ No newline at end of file
fund-us/js/index.js 0 → 100644
View file @ 8aa47106
const stripe = Stripe('pk_test_mLQRpGuO7qq3XMfSgwmt4n8U00FSZOIY1h')
NodeList.prototype.forEach = Array.prototype.forEach
function isOtherDonationAmountValid () {
var isValid = Number(document.getElementById('otherDonationAmount').value) > 0
return isValid
}
// Submit form on Enter.
document.addEventListener('keypress', function(e){
if (e.keyCode == 13){
// Enter pressed, submit.
document.getElementById('donateButton').click()
}
})
// When a valid custom donation amount value is entered, enable the donation button.
document.querySelectorAll('input[name="donationAmount"]').forEach(function(element){
element.addEventListener('change', function(e){
var donateButtonDisabled = false
if (e.target.getAttribute('id') == 'tier8'){
// If it’s a custom amount, we’ll enable the donation button
// once the person has entered a valid amount in the other donation amount text field.
donateButtonDisabled = !isOtherDonationAmountValid()
// Focus the other donation amount text field to save the person another click.
document.getElementById('otherDonationAmount').focus()
}
document.getElementById('donateButton').disabled = donateButtonDisabled
})
})
// Validation: other donation amount.
document.getElementById('otherDonationAmount').addEventListener('focus', function(e){
// Make sure that the other donation amount radio button is selected.
// (e.g., if the person moved to the text field via a screenreader, it may not have been.)
document.getElementById('tier8').checked = true
})
document.getElementById('otherDonationAmount').addEventListener('input', function(e){
// Set the state of the donation button based on whether a valid amount has been entered.
document.getElementById('donateButton').disabled = !isOtherDonationAmountValid()
})
// Returns the donation amount from the form.
function getDonationAmount () {
var selectedDonationAmount = Number(document.querySelector('input[name="donationAmount"]:checked').value)
// If the person has not chosen a donation amount, check if they entered a custom amount.
if (selectedDonationAmount == 0)
{
selectedDonationAmount = Number(document.getElementById('otherDonationAmount').value) * 100
console.log('Donation amount: ' + selectedDonationAmount)
}
return selectedDonationAmount
}
// There’s been an error.
function showError (error) {
var serverErrorDetails = document.getElementById('serverError');
serverErrorDetails.innerHTML = response.body.error;
serverErrorDetails.classList.remove('displayNone');
var errorMessage = document.getElementById('errorMessage');
errorMessage.classList.remove('displayNone');
}
// Donate button: submits the form.
document.getElementById('donateButton').addEventListener('click', function(e) {
e.preventDefault()
const host = `https://${window.location.hostname}`
// Get the details we need for the server call.
var selectedDonationType = document.querySelector('input[name="donationType"]:checked').value
console.log("Selected donation type: " + selectedDonationType)
var isDonationRecurring = (selectedDonationType == 'monthly')
var donationAmount = getDonationAmount()
console.log("Donation amount >>>> " + donationAmount)
console.log(`Is donation recurring? ${isDonationRecurring}`)
const stripeRedirect = isDonationRecurring ? stripe.redirectToCheckout({
//
// Patronage.
//
items: [
{plan: 'plan_FSsO2vwva5oEOP', quantity: donationAmount}
],
successUrl: `${host}/patronage/?id={CHECKOUT_SESSION_ID}`,
cancelUrl: `${host}/fund-us/cancel`,
}) : stripe.redirectToCheckout({
//
// Donation.
//
items: [
{sku: 'sku_FVm0elVvrMW0sX', quantity: donationAmount}
],
successUrl: `${host}/fund-us/thank-you`,
cancelUrl: `${host}/fund-us/cancel`,
})
stripeRedirect.then(function (result) {
if (result.error) {
showError(result.error.message)
}
})
})
fund-us/thank-you/index.html 0 → 100644
View file @ 8aa47106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Thank you for your one-time donation!</title>
<style>
html {
color: black;
background-color: white;
}
</style>
</head>
<body>
<h1>Thank you for your one-time donation!</h1>
</body>
</html>
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

Like this? Fund us! Your patronage helps keep us independent and going.