From 3627586a9bef255be7f7885ce2fbb0f338fe19f1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 17:37:31 +0000
Subject: [PATCH 1/3] =?UTF-8?q?Donate:=20add=20=C2=A3250/=C2=A3500=20prese?=
 =?UTF-8?q?ts;=20reframe=20major-gifts=20copy?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extend the amount ladder with £250 and £500 (cheap to process as
  monthly Direct Debit, and makes larger regular gifts one-click)
- Reword 'other ways to give' to cover bank transfer and large one-off
  gifts rather than a blanket 'above £500', which would have
  contradicted the new £500 button
---
 site/donate/index.html | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/site/donate/index.html b/site/donate/index.html
index 0502aee..e545506 100644
--- a/site/donate/index.html
+++ b/site/donate/index.html
@@ -166,6 +166,8 @@ <h1>Let's press pause on unsafe AI together</h1>
                     <button type="button" class="amount-option" data-amount="25">£25</button>
                     <button type="button" class="amount-option" data-amount="50">£50</button>
                     <button type="button" class="amount-option" data-amount="100">£100</button>
+                    <button type="button" class="amount-option" data-amount="250">£250</button>
+                    <button type="button" class="amount-option" data-amount="500">£500</button>
                     <button type="button" class="amount-option amount-other" data-amount="other">Other</button>
                   </div>
                   <div class="amount-custom" hidden>
@@ -214,16 +216,18 @@ <h1>Let's press pause on unsafe AI together</h1>
               <p class="eyebrow">Other ways to give</p>
               <h2>Major gifts &amp; bank transfer</h2>
               <p class="section-lede">
-                If you're considering a larger gift, prefer to give by bank
-                transfer, or represent a foundation, please get in touch.
+                Prefer to give by bank transfer, making a large one-off gift, or
+                giving on behalf of a foundation? Get in touch and we'll help
+                directly — and say a proper thank-you.
               </p>
               <div class="other-ways-cards">
                 <article class="feature-card">
-                  <h3>Bank transfer &amp; major donors</h3>
+                  <h3>Bank transfer &amp; major gifts</h3>
                   <p>
-                    For UK bank transfers (Faster Payments / BACS) and gifts
-                    above £500, please email us so we can share account
-                    details directly.
+                    For UK bank transfers (Faster Payments / BACS) or larger
+                    one-off donations, email us and we'll share account details
+                    directly. (Regular gifts of any size are easy above — Direct
+                    Debit keeps our fees low.)
                   </p>
                   <a
                     class="inline-link"

From 92dccf512c8f510f9d13f2911f9d25ced2277732 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 2 Jun 2026 11:17:55 +0000
Subject: [PATCH 2/3] Donate: wire form to Stripe Payment Links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Monthly preset buttons each redirect to their amount's Stripe link
  (£3, £5, £10, £25, £50, £100, £250, £500)
- One-off (any amount) redirects to the 'customer chooses price' link
  where the donor confirms the amount on Stripe's secure page
- Hide the 'Other' amount when Monthly is selected (Payment Links are
  fixed for recurring); snap back to the £5 preset if 'Other' was
  active when switching to Monthly
- Drop the stubbed alert / TODO comments
---
 site/donate/donate.js | 113 +++++++++++++++++++++---------------------
 1 file changed, 57 insertions(+), 56 deletions(-)

diff --git a/site/donate/donate.js b/site/donate/donate.js
index 1ed8010..e11ac1e 100644
--- a/site/donate/donate.js
+++ b/site/donate/donate.js
@@ -2,29 +2,36 @@
 //
 // Handles the interactive bits of the donation form:
 //   - Frequency + payment method picker (Monthly · DD / One-off · Card)
-//   - Suggested-amount selection
-//   - "Other" -> custom amount input
+//   - Suggested-amount selection (presets only for Monthly; "Other" shown for One-off)
+//   - "Other" -> custom amount input (One-off only — Stripe sets the amount there)
 //   - Dynamic CTA label ("Donate £5 a month" / "Donate £5")
-//   - On submit: POST to the Cloudflare Worker that creates a Stripe
-//     Checkout Session and redirects the donor there.
-//
-// The Stripe call itself is STUBBED below until the Worker is deployed
-// and the Stripe account exists. Search for TODO(stripe).
+//   - On submit: redirect to the matching Stripe Payment Link
 
 (function () {
   'use strict';
 
   // ── Config ─────────────────────────────────────────────
-  // TODO(stripe): replace with the deployed Cloudflare Worker URL once we
-  // have it (e.g. https://donate-api.pauseai-uk.workers.dev/checkout).
-  const CHECKOUT_ENDPOINT = '/api/create-checkout-session';
+  // Stripe Payment Links. The one-off link is "customer chooses price" —
+  // the donor confirms the amount on Stripe's secure page. The monthly
+  // links are fixed-amount recurring, so each preset routes to its own.
+  const ONE_OFF_URL = 'https://donate.stripe.com/14AaEY7J69wKgTAaSlcbC02';
+  const MONTHLY_URLS = {
+    3:   'https://donate.stripe.com/3cI3cwgfCgZc46O4tXcbC03',
+    5:   'https://donate.stripe.com/3cIdRa7J610ebzg4tXcbC00',
+    10:  'https://donate.stripe.com/cNi3cwd3q24i5aS1hLcbC01',
+    25:  'https://donate.stripe.com/14AcN61kI7oCbzgaSlcbC04',
+    50:  'https://donate.stripe.com/7sYeVebZmcIW8n41hLcbC05',
+    100: 'https://donate.stripe.com/9B6bJ2d3qeR446O9OhcbC06',
+    250: 'https://donate.stripe.com/dRmfZi1kIfV8bzg2lPcbC07',
+    500: 'https://donate.stripe.com/cNi28s5AY5gucDkbWpcbC08',
+  };
   const MIN_AMOUNT = 3; // pounds
 
   // ── State ──────────────────────────────────────────────
   const state = {
-    frequency: 'monthly',      // 'monthly' | 'oneoff'
+    frequency: 'monthly',        // 'monthly' | 'oneoff'
     paymentMethod: 'bacs_debit', // 'bacs_debit' | 'card'
-    amount: 5,                  // pounds; null when "other" is picked with no value
+    amount: 5,                   // pounds; null when "other" is picked with no value
     isCustom: false,
   };
 
@@ -34,13 +41,14 @@
 
   const freqOptions = form.querySelectorAll('.freq-option');
   const amountOptions = form.querySelectorAll('.amount-option');
+  const otherBtn = form.querySelector('.amount-other');
   const customWrap = form.querySelector('.amount-custom');
   const customInput = form.querySelector('#custom-amount');
   const submitBtn = form.querySelector('#donate-submit');
   const ctaLabel = form.querySelector('#donate-cta-label');
   const customSuffix = form.querySelector('.amount-input-wrap [data-freq-suffix]');
 
-  // ── UI updates ─────────────────────────────────────────
+  // ── Helpers ────────────────────────────────────────────
   function updateCtaLabel() {
     const amountText = state.amount && state.amount >= MIN_AMOUNT
       ? '£' + state.amount
@@ -52,6 +60,19 @@
     }
   }
 
+  function setOtherVisible(visible) {
+    if (otherBtn) otherBtn.hidden = !visible;
+  }
+
+  function activatePreset(amount) {
+    const btn = form.querySelector('.amount-option[data-amount="' + amount + '"]');
+    if (!btn) return;
+    amountOptions.forEach((b) => b.classList.toggle('is-active', b === btn));
+    state.amount = amount;
+    state.isCustom = false;
+    customWrap.hidden = true;
+  }
+
   // ── Frequency / method tabs ────────────────────────────
   freqOptions.forEach((btn) => {
     btn.addEventListener('click', () => {
@@ -65,6 +86,14 @@
         b.classList.toggle('is-active', active);
         b.setAttribute('aria-checked', active ? 'true' : 'false');
       });
+      // Monthly has no custom amount (Payment Links are fixed for recurring),
+      // so hide Other and snap back to a preset if it was selected.
+      if (freq === 'monthly') {
+        setOtherVisible(false);
+        if (state.isCustom) activatePreset(5);
+      } else {
+        setOtherVisible(true);
+      }
       updateCtaLabel();
     });
   });
@@ -94,7 +123,7 @@
     updateCtaLabel();
   });
 
-  // ── Submit ─────────────────────────────────────────────
+  // ── Submit → redirect to the matching Stripe Payment Link ─
   function validate() {
     if (!Number.isFinite(state.amount) || state.amount < MIN_AMOUNT) {
       return `Please enter an amount of £${MIN_AMOUNT} or more.`;
@@ -102,7 +131,12 @@
     return null;
   }
 
-  form.addEventListener('submit', async (event) => {
+  function targetUrl() {
+    if (state.frequency === 'oneoff') return ONE_OFF_URL;
+    return MONTHLY_URLS[state.amount] || null;
+  }
+
+  form.addEventListener('submit', (event) => {
     event.preventDefault();
     const err = validate();
     if (err) {
@@ -110,50 +144,17 @@
       if (state.isCustom) customInput.focus();
       return;
     }
-
+    const url = targetUrl();
+    if (!url) {
+      alert('Sorry — that amount is not available right now. Please pick a preset or email hello@pauseai.uk.');
+      return;
+    }
     submitBtn.disabled = true;
-    const previousLabel = submitBtn.innerHTML;
     submitBtn.textContent = 'Redirecting…';
-
-    try {
-      // TODO(stripe): once the Cloudflare Worker is live, this fetch will
-      // create a Checkout Session server-side and return { url } that we
-      // redirect the donor to. Until then we just log what would be sent.
-      const payload = {
-        amount_pounds: state.amount,
-        frequency: state.frequency,        // 'monthly' | 'oneoff'
-        payment_method: state.paymentMethod, // 'bacs_debit' | 'card'
-      };
-      console.log('[donate] would POST to', CHECKOUT_ENDPOINT, payload);
-      alert(
-        'Stripe is not wired up yet. This would create a ' +
-          state.frequency +
-          ' £' +
-          state.amount +
-          ' donation via ' +
-          (state.paymentMethod === 'bacs_debit' ? 'Direct Debit' : 'card / wallet') +
-          '.'
-      );
-
-      // Real implementation (commented until Worker is deployed):
-      //
-      // const res = await fetch(CHECKOUT_ENDPOINT, {
-      //   method: 'POST',
-      //   headers: { 'Content-Type': 'application/json' },
-      //   body: JSON.stringify(payload),
-      // });
-      // if (!res.ok) throw new Error('Checkout session failed');
-      // const { url } = await res.json();
-      // window.location.href = url;
-    } catch (e) {
-      console.error(e);
-      alert('Something went wrong. Please try again or email joseph@pauseai.info.');
-    } finally {
-      submitBtn.disabled = false;
-      submitBtn.innerHTML = previousLabel;
-    }
+    window.location.href = url;
   });
 
-  // Initial render
+  // Initial render — default is Monthly, so hide the "Other" amount.
+  setOtherVisible(false);
   updateCtaLabel();
 })();

From 4d5fa1f7f60ec9746468cf0d818533af79bf73fe Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 2 Jun 2026 11:31:05 +0000
Subject: [PATCH 3/3] Donate: hide amount grid on One-off (donor sets amount on
 Stripe)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The one-off Stripe link is 'customer chooses price', so showing preset
amount buttons on our page would make the donor enter the amount twice.
When One-off is selected, hide the whole amount selector and let the
single CTA ('Donate one-off →') go straight to the Stripe page where
the amount is entered once. Monthly is unchanged.
---
 site/donate/donate.js | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/site/donate/donate.js b/site/donate/donate.js
index e11ac1e..4855af2 100644
--- a/site/donate/donate.js
+++ b/site/donate/donate.js
@@ -41,6 +41,7 @@
 
   const freqOptions = form.querySelectorAll('.freq-option');
   const amountOptions = form.querySelectorAll('.amount-option');
+  const amountSelector = form.querySelector('.amount-selector');
   const otherBtn = form.querySelector('.amount-other');
   const customWrap = form.querySelector('.amount-custom');
   const customInput = form.querySelector('#custom-amount');
@@ -50,16 +51,24 @@
 
   // ── Helpers ────────────────────────────────────────────
   function updateCtaLabel() {
-    const amountText = state.amount && state.amount >= MIN_AMOUNT
-      ? '£' + state.amount
-      : '£…';
-    const tail = state.frequency === 'monthly' ? ' a month' : '';
-    if (ctaLabel) ctaLabel.textContent = 'Donate ' + amountText + tail;
+    if (!ctaLabel) return;
+    if (state.frequency === 'oneoff') {
+      ctaLabel.textContent = 'Donate one-off →';
+    } else {
+      const amountText = state.amount && state.amount >= MIN_AMOUNT
+        ? '£' + state.amount
+        : '£…';
+      ctaLabel.textContent = 'Donate ' + amountText + ' a month';
+    }
     if (customSuffix) {
       customSuffix.textContent = state.frequency === 'monthly' ? 'per month' : 'one-off';
     }
   }
 
+  function setAmountSelectorVisible(visible) {
+    if (amountSelector) amountSelector.hidden = !visible;
+  }
+
   function setOtherVisible(visible) {
     if (otherBtn) otherBtn.hidden = !visible;
   }
@@ -86,13 +95,15 @@
         b.classList.toggle('is-active', active);
         b.setAttribute('aria-checked', active ? 'true' : 'false');
       });
-      // Monthly has no custom amount (Payment Links are fixed for recurring),
-      // so hide Other and snap back to a preset if it was selected.
+      // Monthly: show preset grid (no custom recurring), hide Other.
+      // One-off: hide the grid entirely — the donor picks the amount on
+      // Stripe's "customer chooses price" page.
       if (freq === 'monthly') {
+        setAmountSelectorVisible(true);
         setOtherVisible(false);
         if (state.isCustom) activatePreset(5);
       } else {
-        setOtherVisible(true);
+        setAmountSelectorVisible(false);
       }
       updateCtaLabel();
     });
@@ -125,6 +136,8 @@
 
   // ── Submit → redirect to the matching Stripe Payment Link ─
   function validate() {
+    // One-off: Stripe's "customer chooses price" page enforces the amount.
+    if (state.frequency === 'oneoff') return null;
     if (!Number.isFinite(state.amount) || state.amount < MIN_AMOUNT) {
       return `Please enter an amount of £${MIN_AMOUNT} or more.`;
     }
@@ -154,7 +167,8 @@
     window.location.href = url;
   });
 
-  // Initial render — default is Monthly, so hide the "Other" amount.
+  // Initial render — default is Monthly: show preset grid, hide Other.
+  setAmountSelectorVisible(true);
   setOtherVisible(false);
   updateCtaLabel();
 })();