feat: payment success/cancel pages for Stripe redirect #54

Merged

forgejo_admin merged 1 commit from 53-feat-payment-success-cancel-pages-on-reg into main

2026-03-19 01:49:42 +00:00

forgejo_admin commented

2026-03-19 01:45:18 +00:00

Owner

Summary

Handle ?payment=success and ?payment=cancelled query params on the registration page so users see a clear confirmation or cancellation message after Stripe checkout redirects back, instead of the raw registration form.

Changes

src/routes/register/+page.svelte — Added $page store import and $derived reactive variable to detect payment query param. Wrapped existing form/confirmation in a three-way conditional: success view, cancelled view, or normal form. Success view reuses existing .confirmation-icon, .next-steps, and .dues-note styles. Cancelled view shows a clear message with "Try Again" and "Back to Home" actions.
src/app.css — Added .payment-result, .payment-cancelled-icon, and .payment-result-actions styles. Cancelled icon uses yellow theme (matching the existing warning palette). Layout is centered, max-width 480px, mobile-friendly.

Test Plan

Visit /register — normal registration form displays as before (no regression)
Visit /register?payment=success — shows "Payment Received!" confirmation with next steps and "Back to Home" link
Visit /register?payment=cancelled — shows "Payment Cancelled" message with "Try Again" (links to /register) and "Back to Home" buttons
Verify mobile layout at 375px — payment result pages should be centered and readable
Full npm run build passes with static adapter

Review Checklist

No server-side code added (static SPA)
Uses Svelte 5 $derived rune (not legacy $:)
Existing form and confirmation flow unchanged
Styles match existing color scheme (green for success, yellow for cancelled)
Build passes cleanly

Closes #53

## Summary Handle `?payment=success` and `?payment=cancelled` query params on the registration page so users see a clear confirmation or cancellation message after Stripe checkout redirects back, instead of the raw registration form. ## Changes - **`src/routes/register/+page.svelte`** — Added `$page` store import and `$derived` reactive variable to detect `payment` query param. Wrapped existing form/confirmation in a three-way conditional: success view, cancelled view, or normal form. Success view reuses existing `.confirmation-icon`, `.next-steps`, and `.dues-note` styles. Cancelled view shows a clear message with "Try Again" and "Back to Home" actions. - **`src/app.css`** — Added `.payment-result`, `.payment-cancelled-icon`, and `.payment-result-actions` styles. Cancelled icon uses yellow theme (matching the existing warning palette). Layout is centered, max-width 480px, mobile-friendly. ## Test Plan - Visit `/register` — normal registration form displays as before (no regression) - Visit `/register?payment=success` — shows "Payment Received!" confirmation with next steps and "Back to Home" link - Visit `/register?payment=cancelled` — shows "Payment Cancelled" message with "Try Again" (links to `/register`) and "Back to Home" buttons - Verify mobile layout at 375px — payment result pages should be centered and readable - Full `npm run build` passes with static adapter ## Review Checklist - [x] No server-side code added (static SPA) - [x] Uses Svelte 5 `$derived` rune (not legacy `$:`) - [x] Existing form and confirmation flow unchanged - [x] Styles match existing color scheme (green for success, yellow for cancelled) - [x] Build passes cleanly ## Related - Closes #53

forgejo_admin added 1 commit

2026-03-19 01:45:18 +00:00

feat: payment success/cancel pages for Stripe redirect (#53 ) 469f2ba3b4

Handle ?payment=success and ?payment=cancelled query params on the
registration page. When Stripe redirects back after checkout, users see
a clear confirmation or cancellation message instead of the raw form.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-19 01:45:56 +00:00

Author

Owner

PR Review — #54

Scope check

Changes match issue #53 exactly: two files modified, 91 additions, 0 deletions. No scope creep.

Findings

Svelte 5 correctness — $derived($page.url.searchParams.get('payment')) is correct rune syntax, consistent with the rest of the file using $state and $derived. No legacy $: syntax.

Static SPA compliance — No server-side code. $page from $app/stores works with the static adapter.

Template structure — Three-way conditional (success / cancelled / else-form) is clean. Both {/if} closers are present and correctly paired.

Style reuse — Success view reuses existing .confirmation-icon, .confirmation-title, .confirmation-subtitle, .next-steps, .dues-note classes from app.css. No style duplication.

CSS quality — New styles use existing custom properties (--color-yellow-bg, --color-yellow-border, --color-yellow). Green for success (via existing .confirmation-icon), yellow for cancelled. Centered layout with max-width: 480px.

"Try Again" flow — Cancelled page links to /register (clean URL, no query params), which resets to the empty form. The copy "Your registration is saved" is accurate because the API persists the registration before returning the Stripe redirect_url (lines 126-148 in the original file).

No regressions — Existing form and confirmation flow are untouched, just wrapped in {:else}. Progress bar and header correctly hidden on success/cancelled views.

Build — npm run build passes cleanly with static adapter.

Nits

None.

VERDICT: APPROVE — Clean, minimal implementation. Correct Svelte 5 patterns, reuses existing styles, no regressions.

## PR Review — #54 ### Scope check Changes match issue #53 exactly: two files modified, 91 additions, 0 deletions. No scope creep. ### Findings **Svelte 5 correctness** — `$derived($page.url.searchParams.get('payment'))` is correct rune syntax, consistent with the rest of the file using `$state` and `$derived`. No legacy `$:` syntax. **Static SPA compliance** — No server-side code. `$page` from `$app/stores` works with the static adapter. **Template structure** — Three-way conditional (success / cancelled / else-form) is clean. Both `{/if}` closers are present and correctly paired. **Style reuse** — Success view reuses existing `.confirmation-icon`, `.confirmation-title`, `.confirmation-subtitle`, `.next-steps`, `.dues-note` classes from app.css. No style duplication. **CSS quality** — New styles use existing custom properties (`--color-yellow-bg`, `--color-yellow-border`, `--color-yellow`). Green for success (via existing `.confirmation-icon`), yellow for cancelled. Centered layout with `max-width: 480px`. **"Try Again" flow** — Cancelled page links to `/register` (clean URL, no query params), which resets to the empty form. The copy "Your registration is saved" is accurate because the API persists the registration before returning the Stripe `redirect_url` (lines 126-148 in the original file). **No regressions** — Existing form and confirmation flow are untouched, just wrapped in `{:else}`. Progress bar and header correctly hidden on success/cancelled views. **Build** — `npm run build` passes cleanly with static adapter. ### Nits None. --- **VERDICT: APPROVE** — Clean, minimal implementation. Correct Svelte 5 patterns, reuses existing styles, no regressions.