sunscope/STRIPE_SETUP.md

SunScope Extra — Stripe Subscription Setup

Step-by-step guide to wiring up the £2/month paywall

SunScope is a static site with no backend server, so this guide uses Stripe Payment Links — a no-code/no-server approach where Stripe hosts the checkout page for you. You get a URL, you paste it into the app. Done.

---

STEP 1 — Create a Stripe account

1. Go to https://stripe.com and sign up (free).
2. Complete the identity verification (required before going live).
3. You'll land in the Stripe Dashboard. Make sure you're in Test mode first (toggle in the top-left) — you can do the whole setup in test mode and flip to live when ready.

---

STEP 2 — Create the £2/month product

1. In the Stripe Dashboard sidebar, go to Product catalogue → + Add product.
2. Fill in:
   • Name: SunScope Extra
   • Description: Full 14-day forecast, specialist profiles, custom columns
   • Pricing model: Recurring
   • Price: £2.00
   • Billing period: Monthly
3. Click Save product.

---

STEP 3 — Create a Payment Link

This is the URL you'll drop into the app — Stripe hosts the whole checkout, card capture, and subscription management for you.

1. In the product you just created, click Create payment link.
2. Settings to check:
   • Quantity: 1 (fixed)
   • Collect customer email: Yes (you'll need this to verify subscribers)
   • Allow promotion codes: Up to you (handy for early adopters)
   • After payment: set the redirect URL to https://sunscope.net/?pro=1 (we'll use this query param to activate Pro — see Step 5)
3. Click Create link.
4. Copy the URL — it looks like: https://buy.stripe.com/test_xxxxxxxxxxxxxxxx

---

STEP 4 — Update the upsell card in app.js

Open assets/js/app.js. Find line ~913 and line ~923. You need to change two things:

4a — Update the pricing line (line ~913)

Find this:

£2 / month  ·  launching soon

Change it to:

£2 / month  ·  cancel any time

4b — Replace the mailto: button with the Stripe link (line ~923)

Find this block (starts around line 923):

href=${`mailto:fraxle@yahoo.co.uk?subject=${encodeURIComponent('SunScope Extra — notify me at launch')}&body=${encodeURIComponent('Hi — please let me know when SunScope Extra launches. (Triggered by ' + dayLong + ')')}`}

Replace the entire href= value with your Stripe Payment Link:

href="https://buy.stripe.com/YOUR_ACTUAL_LINK_HERE"

Also change the button label on line ~938 from:

Notify me at launch

To:

Subscribe — £2/month

And add target="_blank" rel="noopener noreferrer" so it opens in a new tab (the user stays on the forecast page):

<a
  href="https://buy.stripe.com/YOUR_ACTUAL_LINK_HERE"
  target="_blank"
  rel="noopener noreferrer"
  style=${{ ...existing styles... }}
>
  Subscribe — £2/month
</a>

---

STEP 5 — Activate Pro after payment (simple URL param method)

When Stripe redirects back to https://sunscope.net/?pro=1 after a successful payment, the app needs to detect that and set isPro = true.

Open assets/js/app.js and find the isPro state (line ~116):

const [isPro, setIsPro] = useState(false);

Replace that single line with:

const [isPro, setIsPro] = useState(() => {
  // Check URL param first (just returned from Stripe checkout)
  const params = new URLSearchParams(window.location.search);
  if (params.get('pro') === '1') {
    localStorage.setItem('sunscope_pro', '1');
    // Clean the URL so the param doesn't stay visible
    window.history.replaceState({}, '', window.location.pathname);
    return true;
  }
  // Check localStorage (returning Pro subscriber)
  return localStorage.getItem('sunscope_pro') === '1';
});

That's it. After subscribing, the user lands back on the site as Pro, and localStorage remembers them on future visits.

Important caveat: This is a trust-based system — it stores Pro status in the user's browser. Anyone who knows the trick can set localStorage.setItem('sunscope_pro','1') in their console. For a £2/month product with a small audience this is probably fine. When you want proper enforcement, see Step 6.

---

STEP 6 — (Optional) Proper server-side verification

When you're ready to properly enforce subscriptions (no console tricks):

1. Stripe Customer Portal — enable it in the Stripe Dashboard so subscribers can manage/cancel their own subscriptions.
2. Webhook → backend — Stripe fires a checkout.session.completed event when someone subscribes. You'd need a tiny serverless function (Cloudflare Worker, Vercel Edge Function, or Netlify Function) to:
   • Receive the webhook
   • Store the subscriber's email + Stripe customer ID in a small DB (or even Airtable/Supabase free tier)
   • Issue a signed token (JWT) back to the browser
3. Replace localStorage with checking that JWT against your backend on page load.

This is a future step — the localStorage approach is perfectly fine for launch.

---

STEP 7 — Go live

When you're happy with testing:

1. In Stripe Dashboard, flip the Test mode toggle to Live mode.
2. Repeat Steps 2–3 in live mode to get a live Payment Link URL.
3. Replace the test URL in app.js with the live URL.
4. Deploy.

---

Quick reference — files changed

File	What changed
assets/js/app.js line ~116	isPro state reads from localStorage + URL param
assets/js/app.js line ~913	Pricing copy: "cancel any time"
assets/js/app.js line ~923	href → Stripe Payment Link URL
assets/js/app.js line ~938	Button label → "Subscribe — £2/month"