This required some doing. I'm not completely sure it works, but I
roughly followed the tutorial available at:
https://www.paypal.com/webapps/mpp/get-started/create-recurring-donation-button
with back-reference to this:
https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables/
My main concern with this setup currently is that 'p3' must be set to
'1', which would seem from the documentation to be saying the payment
will recur only once. There is a subtle hint via the tutorial that
setting 'src' to 1 will override 'p3' with whatever is found in 'srt',
but that's not said anywhere explicitly that I can find. So, I'm going
with this and I'll just test it myself with a monthly subscription to
see if it's indefinite (which is the behavior we herein desire).
Finally, note that "amount" is now a class rather than id, since I'm now
using the associated jQuery .on('input') code for both the annual and
monthly amount boxes.
I suspect some supporters are just accepting the default, so by default,
the t-shirt option will be "No", and supporters will have to
affirmatively chose "Yes".
Thanks to previously committed Javascript hack, users with Javascript
capable browsers should avoid seeing the t-shirt sizing options until
they chose "Yes".
Use Javascript to hide the t-shirt size selector when the the user
selects "No" for "Do you want a t-shirt?". Reshow it (and make sure
it's shown by default) for "Yes".
This CSS, which I discovered from extensive research online, should work
to create a bulleted list with the bullets being the heart-shaped
Conservancy logo.
The default amount of $120 appears in the amount field, but the class
"valid" was usually only added when the user changes the amount.
The valid class must be added at the start to ensure someone simply
clicking with the default still can donate.
The donate-sidebar overlaps with text on small screens. This problem is
corrected herein by using @media for 500px screens to remove display of
the sidebar.
This addition to the Javascript and text ensures a clear message to the
user of a Javascript-enabled browser that there is an issue with the
amount. Also, it prevents submission of the form until the amount is
correct.
A user with Javascript disabled can circumvent these validation steps;
however, the worst-case scenario is that they make a donation for less
than $120 that is categorized in Conservancy's internal system as a
Supporter donation, and we'll be adding internal checks to find that.
