Page: Payment Settings
Code: SPAY Route:
/settings/payments Access: Authenticated Priority: P1 Test Script: scripts/page-tests/test-SPAY.sh Components: src/components/settings/StripeConnectSettings.tsx Purpose
Allow creators and Student-Teachers to manage their Stripe Connect accounts for receiving payments.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
|---|---|---|
| SETT | "Payments" menu item | From main settings page |
| CDSH | "Set up payments" prompt | When Stripe not connected |
| TDSH | "Set up payments" prompt | When Stripe not connected |
Outgoing (users navigate to)
| Target | Trigger | Notes |
|---|---|---|
| (Stripe) | "Connect with Stripe" button | Opens Stripe Connect onboarding |
| (Stripe Dashboard) | "Open Stripe Dashboard" button | Opens Stripe Express dashboard |
| SETT | Breadcrumb navigation | Return to settings |
Data Requirements
| Entity | Fields Used | Purpose |
|---|---|---|
| users | stripe_account_id, stripe_account_status | Check Stripe Connect status |
Sections
Header
- • Page title: "Payment Settings"
- • Description of purpose
Stripe Connect Status
- • Connection status indicator
- • "Connect with Stripe" button (if not connected)
- • "Open Dashboard" button (if connected)
- • Account status display (pending, active, restricted)
How Payments Work
- • Step 1: Student pays through Stripe
- • Step 2: Automatic 85/15 or 70/15 split
- • Step 3: Transfer to connected account
User Stories Fulfilled
- • US-C023
- • US-ST031
States & Variations
| State | Description |
|---|---|
| Loading | Skeleton animation while checking status |
| Error | Red border, error message, Retry button |
| Not Connected | Purple Stripe icon, Connect with Stripe button |
| Pending | Yellow hourglass, warning box, Complete Setup button |
| Active | Green checkmark, View Dashboard button |
| Restricted | Red warning, Update Information button |
Mobile Considerations
- • Full-width buttons on mobile
- • Info section remains readable
Error Handling
| Error | Display |
|---|---|
| Failed to check status | "Unable to check payment status" with retry |
| Failed to create connect link | "Unable to start Stripe setup" with retry |
Analytics Events
| Event | Trigger | Data |
|---|---|---|
page_view | Page load | stripe_status |
stripe_connect_click | Connect button clicked | - |
stripe_dashboard_click | Dashboard button clicked | - |
Notes
- • For Creators and Student-Teachers to receive payments
- • Uses Stripe Connect Express accounts
- • Shows onboarding status and dashboard access
- • Payment split: 85% Creator / 70% S-T, 15% Platform
Features
Stripe Connect Status
- ✓ Connection status indicator [US-C023]
- ✓ Connect account button [US-C023]
- ✓ Dashboard link [US-C023]
- ✓ Payout status indicators (Charges enabled, Payouts enabled, Details submitted) [US-ST031]
Interactive Elements
Buttons: 5/5 active
Links: 3/3 active
Buttons
| Element | Component | Action | Status |
|---|---|---|---|
| Retry | StripeConnectSettings | fetchStatus() - Refetch status | active |
| Connect with Stripe | StripeConnectSettings | handleConnect() - POST to /api/stripe/connect, redirect to Stripe | active |
| Complete Setup | StripeConnectSettings | handleGetLink('onboarding') - Redirect to Stripe onboarding | active |
| View Dashboard | StripeConnectSettings | handleGetLink('dashboard') - Redirect to Stripe dashboard | active |
| Update Information | StripeConnectSettings | handleGetLink('onboarding') - Redirect to fix issues | active |
Links
Navigation
| Element | Target | Status |
|---|---|---|
| Settings breadcrumb | /settings | active |
| Stripe onboarding | External (Stripe) | active |
| Stripe dashboard | External (Stripe) | active |
Target Pages Status
| Target | Page Code | Status |
|---|---|---|
/settings | SETT | PageSpecView |
Verification Notes
Verified: 2026-01-07 Consolidated: 2026-01-08
Verified Components
- ✓
src/components/settings/StripeConnectSettings.tsx
Screenshots
- 📷
SPAY-2026-01-07-pending.png- Pending state with 3 requirements - 📷
SPAY-2026-01-07-active.png- Active state with all checkmarks green
Notes
- • All 6 component states properly implemented
- • Both "pending" and "active" states visually verified
- • Analytics tracking deferred (not blocking)
Test Coverage
Component ✓
Page ○
SSR ○
API 3/3
✓ Ready
Script:
scripts/page-tests/test-SPAY.sh Page Test:
tests/pages/settings/payments.test.tsx ○ Component Test:
tests/components/settings/StripeConnectSettings.test.tsx ✓ API Tests
| Endpoint | Test File | Status |
|---|---|---|
GET /api/stripe/connect-status | tests/api/stripe/connect-status.test.ts | ✓ tested |
POST /api/stripe/connect | tests/api/stripe/connect.test.ts | ✓ tested |
GET /api/stripe/connect-link | tests/api/stripe/connect-link.test.ts | ✓ tested |
Discrepancies (Spec vs Implementation)
As of 2026-01-08
Planned but Not Implemented
| Feature | Original Spec | Status | Priority |
|---|---|---|---|
| Analytics events | 3 events (page_view, stripe_connect_click, stripe_dashboard_click) | Not implemented | Low |
Payment Settings
Manage how you receive payments for your courses and teaching sessions
Stripe Connect
How Payments Work
1
When a student enrolls in your course, they pay through Stripe Checkout.
2
PeerLoop automatically splits the payment: you receive 85% as the creator (or 70% as a Student-Teacher), and PeerLoop keeps 15%.
3
Funds are transferred to your connected Stripe account, typically within 2 business days.