#55 - feat: generic checkout page — dynamic products + custom form fields + Stripe - forgejo_admin/westside-landing

forgejo_admin commented

2026-03-20 07:42:23 +00:00

Owner

Type

Feature

Lineage

plan-wkq → Phase 11 → girls jersey order → generic checkout system

Repo

forgejo_admin/westside-app

User Story

As a parent
I want to select a product, fill in required details, and pay via Stripe
So that I can order jerseys (and future products) without emailing back and forth

Context

The basketball-api now has a generic checkout system (issue #127) with products table, orders table, and dynamic custom_fields. This frontend consumes those endpoints:

GET /checkout/products?category=jersey — fetches product cards
POST /checkout/create-session?token=... — creates Stripe session with custom_data
Tokenized parent links (?token=...&category=jersey)

File Targets

Files the agent should modify or create:

src/routes/checkout/+page.svelte — main checkout page with dynamic product cards + form fields
src/routes/checkout/success/+page.svelte — order confirmation page
src/routes/checkout/cancel/+page.svelte — payment cancelled with retry link

Files the agent should NOT touch:

src/routes/jersey/ — legacy page, keep for backwards compat

Acceptance Criteria

When I visit /checkout?token=...&category=jersey, I see 3 jersey product cards
When I select a product, custom form fields appear (jersey number, top size, shorts size)
When I submit with missing required fields, I see a validation error
When I submit a paid product, I'm redirected to Stripe Checkout
When I submit an opt-out product, I'm redirected to success page
When I visit without a token, I see "Invalid Link" error

Test Expectations

Manual: full flow with test token
Run command: npm run build

Constraints

Match existing Westside dark theme (red/black brand colors)
No Keycloak auth needed — token-based access like jersey page
Reuse API_BASE from $lib/api.js

Checklist

PR opened
Build passes
No unrelated changes

Westside Basketball — project
basketball-api #127 — backend this consumes

### Type Feature ### Lineage `plan-wkq` → Phase 11 → girls jersey order → generic checkout system ### Repo `forgejo_admin/westside-app` ### User Story As a parent I want to select a product, fill in required details, and pay via Stripe So that I can order jerseys (and future products) without emailing back and forth ### Context The basketball-api now has a generic checkout system (issue #127) with products table, orders table, and dynamic custom_fields. This frontend consumes those endpoints: - `GET /checkout/products?category=jersey` — fetches product cards - `POST /checkout/create-session?token=...` — creates Stripe session with custom_data - Tokenized parent links (`?token=...&category=jersey`) ### File Targets Files the agent should modify or create: - `src/routes/checkout/+page.svelte` — main checkout page with dynamic product cards + form fields - `src/routes/checkout/success/+page.svelte` — order confirmation page - `src/routes/checkout/cancel/+page.svelte` — payment cancelled with retry link Files the agent should NOT touch: - `src/routes/jersey/` — legacy page, keep for backwards compat ### Acceptance Criteria - [ ] When I visit `/checkout?token=...&category=jersey`, I see 3 jersey product cards - [ ] When I select a product, custom form fields appear (jersey number, top size, shorts size) - [ ] When I submit with missing required fields, I see a validation error - [ ] When I submit a paid product, I'm redirected to Stripe Checkout - [ ] When I submit an opt-out product, I'm redirected to success page - [ ] When I visit without a token, I see "Invalid Link" error ### Test Expectations - [ ] Manual: full flow with test token - Run command: `npm run build` ### Constraints - Match existing Westside dark theme (red/black brand colors) - No Keycloak auth needed — token-based access like jersey page - Reuse `API_BASE` from `$lib/api.js` ### Checklist - [ ] PR opened - [ ] Build passes - [ ] No unrelated changes ### Related - `Westside Basketball` — project - basketball-api #127 — backend this consumes