feat: add Stripe checkout page demo with multiple payment methods

[sean-brydon]

Summary

Adds a checkout page demo at /checkout showcasing a Stripe-style checkout form with multiple payment methods:

• Card tab: Contact information, card details (with number formatting), and billing address
• Wallet tab: Express checkout with Apple Pay and Google Pay buttons
• SEPA tab: European bank transfer with IBAN input and mandate acceptance text

Uses coss/ui components including Card, CardHeader, CardPanel, Tabs, Form, Field, Input, Select, Button, Badge, Separator, and Spinner. Includes an Order Summary sidebar with line items, tax calculation, and security badge.

Updates since last revision

• Removed /checkout-stripe variant per user request - keeping only the original tabbed checkout page
• Reverted the particle component (p-form-3) - sticking with full page demo only

Review & Testing Checklist for Human

• Test /checkout page: Run bun run dev --filter=ui and navigate to /ui/checkout. Verify all three payment tabs (Card, Wallet, SEPA) display and switch correctly.
• Test form interactions: Enter values in card number, expiry, CVC, and IBAN fields to verify formatting works (card number groups by 4, expiry adds slash, IBAN uppercases and groups).
• Test responsive layout: Resize browser to verify the two-column layout stacks vertically on mobile.

Recommended test plan:

1. Run bun run dev --filter=ui
2. Navigate to /ui/checkout
3. Click through each tab (Card, Wallet, SEPA) and verify forms render
4. Test input formatting on card fields
5. Click Pay button to verify loading state and alert

Notes

This is a UI mockup only - payment handlers show alerts after a simulated delay rather than integrating with actual Stripe APIs. The component is intended as a starting point/example for building checkout flows.

Devin session: https://app.devin.ai/sessions/aeea8179c5b7482a912ae787ed12ab96
Requested by: @sean-brydon

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
coss-com	Ready	Preview, Comment	Jan 16, 2026 10:40am
coss-com-ui	Ready	Preview, Comment	Jan 16, 2026 10:40am

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
coss-examples-calcom	Ignored	Preview	Jan 16, 2026 10:40am
coss-com-origin	Skipped		Jan 16, 2026 10:40am