TWFY specific donate page #1777

ajparsons · 2024-03-12T16:59:54Z

This is a work-in-progress PR to add an internal donate page to TWFY.

Basically it's a new markdown-based page to dump some twfy specific language and intergrade a donate box.

I am experimenting with just using stripe's donation links/boxes to speed up time to deploy.

We're basically wanting to test a theory we're losing people by making people go through mySociety.org. If people use these links - we can justify spending a bit more time on a stripe integration that moves the form into the site.

The downside is less customisability. Need to check if the gift-aid approach is compliant or if we'd just want to leave that out while we're testing the approach.

The content of the page itself we can update in this google doc for the moment: https://docs.google.com/document/d/1q_uuD44yG_80SVUVRyBrREHzBwSaPs75f9eu_QJDk1k/edit

ajparsons · 2024-03-12T21:00:46Z

Questions:

Is there an intermediate rubbish approach here? I'm trying to tone down my expectations in the interest of "lets test the basic problem" (oh no the two titles don't perfectly align, the javascript delay looks bad) but is there an approach gives us a bit more control that's also not going to eat more than an hour to do/review?
Need to check the gift aid approach with Jill - I can't get the disclaimer in we have on the main site and this runs into the first name problem we're looking at elsewhere. I think we might just need to give up gift aid for the purposes of testing if this is worthwhile.
How does this show up in the stripe database? It's not going to have the utm categories we use to assign things to theyworkforyou in our tracking - so might need some special casing based on the stripe product + the contact opt-in might be different.

ajparsons · 2024-03-13T10:35:39Z

Simplified approach dumping the fancy box:

@zarino: would probably be worth a quick opinion from you at this point in the spirit of "does this pass an uglyness/easyness balance test?"

zarino · 2024-03-13T10:54:01Z

@ajparsons Looks fine to me! Tricky things, donation prompts – you want them to be in-your-face enough that people notice them, but tidy enough that people don’t feel like they‘re about to be scammed. This one toes that line pretty well 👍

One thing I’d check is how it looks on narow screens – do the buttons wrap nicely, etc.

ajparsons · 2024-03-13T10:56:22Z

Yeah that seems mostly ok:

dracos · 2024-03-13T12:04:08Z

www/includes/easyparliament/templates/html/_stripe_donate.php

+<img role="presentation" src="/images/payment/amex-b933c9009eeaf8cfd07e789c549b8c57.svg" alt="amex" id="amex">
+<img role="presentation" src="/images/payment/mastercard-86e9a2b929496a34918767093c470935.svg" alt="mastercard" id="mastercard">
+<img role="presentation" src="/images/payment/visa-fb36094822f73d7bc581f6c0bad1c201.svg" alt="visa" id="visa">
+<img role="presentation" src="/images/payment/google_pay-ca6cc2f4ee364c7966f8fabf064849fe.svg" alt="GOOGLE_PAY" id="GOOGLE_PAY">


Seems odd to have this and not apple pay when stripe supports both? Do we really want to show card mechanisms here?

I'm not that invested in it - it's simpler without - was just experimenting replicating what the stripe box had done previously.

Only thing is being clear what it does take so people don't need to click through to the main page but also... it's fine if they do that.

dracos · 2024-03-13T12:07:05Z

Re gift aid - what's the issue here? Happy to chat about it.

ajparsons · 2024-03-13T12:25:46Z

@dracos: Several potential gift aid issues:

We're talking in this ticket about a change in requirements to need a full first name rather than initial. Our solution there is to add forms to our site to feed it through. Could capture name twice in custom fields in this case. https://github.com/mysociety/supporters/issues/25
Less customisable space in the very basic stripe template available to include a version of:

I am a UK tax payer and understand that if I pay less Income Tax and/or Capital Gains Tax than the amount of Gift Aid claimed on all my donations in that tax year, it is my responsibility to pay any difference. I will let mySociety know of any changes to my tax status, including changes to my name or address, or if I need to cancel this agreement.

Which @jaquarone has confirmed we need to be tell HMRC we've told people.

I'm trying using a custom field to capture the info in stripe:

(know about the typo)

Possibly can try squeezing it in on the confirmation page? Open to other ideas. There's a "stop doing the simple thing and do a proper integration with our own form" somewhere around this point - especially where if it ends up being slightly harder to access in stripe backend.

dracos · 2024-03-13T12:56:05Z

I dunno about the "simple thing" but given TWFY/mysociety.org are both PHP, copying the existing Stripe code from .org would probably Just Work? It's all self-contained, nothing to do with wordpress or anything like that :) And would then definitely pass through the data in the same way if that's a concern.

ajparsons · 2024-03-13T13:26:32Z

Yeah, the API itself I'm not worried about (as you say just copy the main site, and my understanding is it's a fairly nice one anyway) - it's more having dealing with the formatting for a relatively mini version of the form is getting beyond the "let's just have some easy buttons" that I sold myself on.

Just to copy an comment from Jill in here: "make the subscription option £5 a month rather than £10 a year". Ideally if anyone clicked the lighter option it's part of the case for coming back and doing a form that gives a few options.

ajparsons · 2024-03-15T16:43:31Z

Okay, just did the whole thing - copying the mysociety.org stripe form over:

I'll tidy up the commits and do a proper PR next week but to flag things I'm hmm about:

A bit of donate page specific JS in the main javascript file. Could move it to a separate file and have some special casing to display it in the footer but this didn't feel like a lot extra.
The CSS approach was to copy over the css from mysociety.org and then find all the scss components that required. This feels like a bit of a mess - but also it works and I don't think should have harmful effects elsewhere.

Note to self: Change the default utm site bit so we're tracking any uses of this form are TWFY.

ajparsons · 2024-03-18T10:43:49Z

Ok! So this is ready for review. A support us page with a stripe donate form.

Broadly - I have imported the mysociety.org form and stylings, making some adjustments.

This includes some updates to the form from https://github.com/mysociety/orgsites/pull/1354 and some extra discoveries while doing this (such as better handling for subscriptions) that I'm going to move back into that in a second.

I've assumed the existing stripe credentials can be used - but now need to include reCAPTCHA credentials.

Recording.2024-03-18.at.10.40.50.AM.mp4

ajparsons · 2024-03-18T12:12:04Z

Fixup is just applying Zarino's comments from the other PR here https://github.com/mysociety/orgsites/pull/1354#pullrequestreview-1942708519

ajparsons · 2024-03-19T09:56:19Z

Note that this probably needs to have separate stripe credentials to the existing ones (API goes to SocietyWorks account). Not a big change so not going to make it until other reviews are in.

zarino

@ajparsons I’ve added a fixup commit that simplifies the styling, markup, and JavaScript. You might want to check it still does all the things you need it to do.

ajparsons · 2024-03-19T19:28:48Z

That's great, thanks!

I've changed one thing where the error message wasn't being wrapped by your new wrapper. I think the error is a bit less ERROR ERROR now - but still noticeable.

dracos

Only small things :)

dracos · 2024-03-28T17:09:45Z

markdown/support-us-failed.md

@@ -0,0 +1,5 @@
+# Something went wrong with your donation
+
+If you’d like to carry on with your donation, [click here](/support-us/) to start again.


Please don't use click here as link text e.g. https://usability.yale.edu/web-accessibility/articles/links#:~:text=Avoid%20link%20text%20like%20%E2%80%9CClick,experience%20with%20duplicated%20link%20text. - How about, If you'd like to carry on with your donation, [please try again[.

I'll go back and fix the mysociety.org text I copied this form at the same time.

60c67e6 and changed mysociety.org

dracos · 2024-03-28T17:11:57Z

www/includes/easyparliament/templates/html/static/markdown_template.php

@@ -1,7 +1,9 @@
 <div class="full-page static-page toc-page">
    <div class="full-page__row">
        <div class="toc-page__col">
-<div class="toc js-toc"></div>
+<?php if ($show_menu == true) { ?>


This can just be if ($show_menu)

dracos · 2024-03-28T17:12:11Z

www/includes/easyparliament/templates/html/donate/_stripe_donate.php

+      <div id="spinner" class="mysoc-spinner mysoc-spinner--small" role="status">
+          <span class="sr-only">Processing…</span>
+      </div>
+      <p><small>Payment methods avaliable: Card, PayPal, Apple Pay, Google Pay, Direct Debit</small></p>


Misspelling of available

dracos · 2024-03-28T17:14:30Z

classes/Renderer/Markdown.php

+    ob_start();
+    include($path);
+    $var=ob_get_contents(); 
+    ob_end_clean();


You can do these two lines in one with $var = ob_get_clean();

dracos · 2024-03-28T17:20:15Z

www/includes/easyparliament/templates/html/donate/_stripe_donate.php

+
+$default_amounts = array(
+  'monthly' => '10',
+  'annually' => '10',


So a one-off default to 50, but annual default to only 10, and monthly is also 10? Just the jump seemed a bit odd to me.

This is a bit of an experiment seeing if annual is more popular than monthly, but yes, will have another pass on the amounts.

Changed by 0fd154c

dracos · 2024-03-28T17:22:00Z

www/includes/easyparliament/templates/html/donate/_stripe_donate.php

+$default_type = 'annually';
+
+# use the how-often parameter if set, if not default to option at end of line (options are 'monthly', 'annually', or 'one-off')
+$initial_payment_type = isset($_GET['how-often']) ? $_GET['how-often'] : $default_type;


As we now have PHP 7, we have the null coalescing operator now, so this line can be $initial_payment_type = $_GET['how-often'] ?? $default_type;

Changed by 5229a86

dracos · 2024-03-28T17:23:42Z

www/includes/easyparliament/helper-donate.php

+    return htmlspecialchars($text, ENT_QUOTES, "UTF-8");
+}
+
+function get_or_default($name, $default_value = "")


This function isn't needed in PHP7, as above. Also, you didn't use it some places you could :)

Changed by 5229a86

dracos · 2024-03-28T17:27:09Z

www/includes/easyparliament/templates/html/donate/_stripe_donate.php

+        <p class="donate-form__error"><?=$error ?></p>
+      <?php } ?>
+        <noscript>
+            <p class="donate-form__error">Unfortunately, our payment


Could we link directly to a payment page on Stripe here, now that they have them, is that possible?
Don't think there was a way back when we did this originally.

Also this text appears in blue on white? .donate-form__error-wrapper sets the colour to blue for some reason?
This applies to all the errors.

In principle we could put a payment link here, but stripe docs wrap that in a JavaScript button to do some captcha link things I think so don't want to proactively. BUT, will add better reporting to the supporters channel of how many people land here.

Blue fixed, the alert colour gets overridden for reasons I don't follow, and just put the red in again directly: 36a39cc

dracos · 2024-03-28T17:27:17Z

www/includes/easyparliament/templates/html/donate/_stripe_donate.php

+<form class="donate-form" method="post" name="donation_form">
+
+    <div class="donate-form__error-wrapper">
+      <?php if (isset($error) and $error) { ?>


Don't think $error is ever set by anything?

I think a legacy from the older paypal forms, etc that may have refreshed the page rather than using ajax. Removing.

ajparsons · 2024-04-02T12:27:57Z

Fixed made to above comments - one new commit to redirect existing donate links towards the new page (not important we get them all).

struan

👍

- Replace previous link to mySociety - Create new markdown-based internal page

- Copies over approach from mysociety.org - Requires new recapacha keys in config - Create new stub pages for thanks/failed in twfy.

dracos reviewed Mar 13, 2024

View reviewed changes

ajparsons force-pushed the donate-page branch 2 times, most recently from 036d119 to 8df21db Compare March 15, 2024 16:36

ajparsons force-pushed the donate-page branch 3 times, most recently from 69cd664 to 09d0804 Compare March 18, 2024 10:10

ajparsons marked this pull request as ready for review March 18, 2024 10:28

ajparsons force-pushed the donate-page branch from 09d0804 to b7e3a51 Compare March 18, 2024 10:29

ajparsons requested review from zarino and dracos March 18, 2024 10:44

zarino approved these changes Mar 19, 2024

View reviewed changes

dracos reviewed Mar 28, 2024

View reviewed changes

ajparsons force-pushed the donate-page branch 4 times, most recently from 10da724 to 1788a5c Compare April 2, 2024 11:57

ajparsons requested a review from struan April 2, 2024 12:27

struan approved these changes Apr 2, 2024

View reviewed changes

ajparsons added 4 commits April 2, 2024 16:11

Add 'support us' page

23f70ab

- Replace previous link to mySociety - Create new markdown-based internal page

Make top-bar donate button red

777062d

Make side menu in markdown page optional

9a341b5

Add stripe donate form

3312da6

- Copies over approach from mysociety.org - Requires new recapacha keys in config - Create new stub pages for thanks/failed in twfy.

ajparsons force-pushed the donate-page branch from 36a39cc to 9bfc2c7 Compare April 2, 2024 15:11

Improve donation flows to new page

f05e4d8

ajparsons force-pushed the donate-page branch from 9bfc2c7 to f05e4d8 Compare April 2, 2024 15:57

ajparsons merged commit 7c2064a into master Apr 3, 2024
6 checks passed

		@@ -0,0 +1,5 @@
		# Something went wrong with your donation

		If you’d like to carry on with your donation, [click here](/support-us/) to start again.

TWFY specific donate page #1777

TWFY specific donate page #1777

Conversation

ajparsons commented Mar 12, 2024

ajparsons commented Mar 12, 2024

ajparsons commented Mar 13, 2024

zarino commented Mar 13, 2024

ajparsons commented Mar 13, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dracos commented Mar 13, 2024 • edited Loading

ajparsons commented Mar 13, 2024

dracos commented Mar 13, 2024

ajparsons commented Mar 13, 2024 • edited Loading

ajparsons commented Mar 15, 2024 • edited Loading

ajparsons commented Mar 18, 2024

ajparsons commented Mar 18, 2024

ajparsons commented Mar 19, 2024

zarino left a comment • edited Loading

Choose a reason for hiding this comment

ajparsons commented Mar 19, 2024

dracos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dracos Mar 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ajparsons commented Apr 2, 2024

struan left a comment

Choose a reason for hiding this comment

dracos commented Mar 13, 2024 •

edited

Loading

ajparsons commented Mar 13, 2024 •

edited

Loading

ajparsons commented Mar 15, 2024 •

edited

Loading

zarino left a comment •

edited

Loading

dracos Mar 28, 2024 •

edited

Loading