Checkout Components Skill
Quick reference for reusable checkout components extracted during the architecture refactor.
Component Locations
src/checkout/components/
├── contact/ # Authentication & user display
├── shipping-address/ # Address selection & display
├── payment/ # Payment method & billing
└── AddressForm/ # Form utilities (existing)
Contact Components
import {
SignInForm, // Email + password + forgot password
SignedInUser, // Logged-in user display with sign out
ResetPasswordForm, // New password form (reset callback)
GuestContact, // Email input + create account checkbox
} from "@/checkout/components/contact";
| Component |
Props |
Use Case |
SignInForm |
initialEmail?, channelSlug, onSuccess, onGuestCheckout |
Sign-in form |
SignedInUser |
user, onSignOut |
Show logged-in user info |
ResetPasswordForm |
onSuccess, onBackToSignIn |
Password reset callback |
GuestContact |
email, onEmailChange, emailError?, onSignInClick |
Guest email entry |
Address Components
import {
AddressSelector, // Radio list for saved addresses
AddressDisplay, // Read-only address card
} from "@/checkout/components/shipping-address";
// Also re-exported from AddressFormFields:
import { AddressFields, FormInput, FormSelect, FieldError } from "@/checkout/components/shipping-address";
| Component |
Props |
Use Case |
AddressSelector |
addresses, selectedAddressId, onSelectAddress, defaultAddressId?, name? |
Pick from saved addresses |
AddressDisplay |
address, title?, onEdit? |
Show address read-only |
AddressFields |
orderedFields, formData, errors, onFieldChange, etc. |
Dynamic country-aware fields |
Payment Components
import {
PaymentMethodSelector, // Card/PayPal/iDEAL tabs
BillingAddressSection, // Same-as-shipping toggle + form
isCardDataValid, // Helper function
type PaymentMethodType, // "card" | "paypal" | "ideal"
type CardData, // { cardNumber, expiry, cvc, nameOnCard }
type BillingAddressData, // { countryCode, formData, selectedAddressId? }
} from "@/checkout/components/payment";
| Component |
Props |
Use Case |
PaymentMethodSelector |
value, onChange, cardData?, onCardDataChange? |
Payment method picker |
BillingAddressSection |
billingAddress?, shippingAddress?, userAddresses?, isShippingRequired?, errors?, onChange |
Billing with same-as-shipping |
Usage Pattern
Steps import and compose these components:
// In InformationStep.tsx
import { SignInForm, SignedInUser, GuestContact } from "@/checkout/components/contact";
import { AddressSelector } from "@/checkout/components/shipping-address";
// Orchestrate based on auth state
{
authenticated ? (
<SignedInUser user={user} />
) : contactSection === "signIn" ? (
<SignInForm />
) : (
<GuestContact email={email} />
);
}
When to Create New Components
Extract into components/ when:
- Used in 2+ places
- Self-contained with clear props interface
- 100+ lines that can be isolated
Keep inline when:
- One-off UI specific to that step
- Tightly coupled to step's state machine
1---2name: checkout-architecture3description: Reference for reusable checkout UI components. Use when working with SignInForm, AddressSelector, PaymentMethodSelector, or composing checkout step views.4---5
6# Checkout Components Skill
7
8Quick reference for reusable checkout components extracted during the architecture refactor.
9
10## Component Locations
11
12```
13src/checkout/components/
14├── contact/ # Authentication & user display
15├── shipping-address/ # Address selection & display
16├── payment/ # Payment method & billing
17└── AddressForm/ # Form utilities (existing)
18```
19
20## Contact Components
21
22```tsx
23import {
24 SignInForm, // Email + password + forgot password
25 SignedInUser, // Logged-in user display with sign out
26 ResetPasswordForm, // New password form (reset callback)
27 GuestContact, // Email input + create account checkbox
28} from "@/checkout/components/contact";
29```
30
31| Component | Props | Use Case |
32| ------------------- | -------------------------------------------------------------- | ------------------------ |
33| `SignInForm` | `initialEmail?`, `channelSlug`, `onSuccess`, `onGuestCheckout` | Sign-in form |
34| `SignedInUser` | `user`, `onSignOut` | Show logged-in user info |
35| `ResetPasswordForm` | `onSuccess`, `onBackToSignIn` | Password reset callback |
36| `GuestContact` | `email`, `onEmailChange`, `emailError?`, `onSignInClick` | Guest email entry |
37
38## Address Components
39
40```tsx
41import {
42 AddressSelector, // Radio list for saved addresses
43 AddressDisplay, // Read-only address card
44} from "@/checkout/components/shipping-address";
45
46// Also re-exported from AddressFormFields:
47import { AddressFields, FormInput, FormSelect, FieldError } from "@/checkout/components/shipping-address";
48```
49
50| Component | Props | Use Case |
51| ----------------- | --------------------------------------------------------------------------------- | ---------------------------- |
52| `AddressSelector` | `addresses`, `selectedAddressId`, `onSelectAddress`, `defaultAddressId?`, `name?` | Pick from saved addresses |
53| `AddressDisplay` | `address`, `title?`, `onEdit?` | Show address read-only |
54| `AddressFields` | `orderedFields`, `formData`, `errors`, `onFieldChange`, etc. | Dynamic country-aware fields |
55
56## Payment Components
57
58```tsx
59import {
60 PaymentMethodSelector, // Card/PayPal/iDEAL tabs
61 BillingAddressSection, // Same-as-shipping toggle + form
62 isCardDataValid, // Helper function
63 type PaymentMethodType, // "card" | "paypal" | "ideal"
64 type CardData, // { cardNumber, expiry, cvc, nameOnCard }
65 type BillingAddressData, // { countryCode, formData, selectedAddressId? }
66} from "@/checkout/components/payment";
67```
68
69| Component | Props | Use Case |
70| ----------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------- |
71| `PaymentMethodSelector` | `value`, `onChange`, `cardData?`, `onCardDataChange?` | Payment method picker |
72| `BillingAddressSection` | `billingAddress?`, `shippingAddress?`, `userAddresses?`, `isShippingRequired?`, `errors?`, `onChange` | Billing with same-as-shipping |
73
74## Usage Pattern
75
76Steps import and compose these components:
77
78```tsx
79// In InformationStep.tsx
80import { SignInForm, SignedInUser, GuestContact } from "@/checkout/components/contact";
81import { AddressSelector } from "@/checkout/components/shipping-address";
82
83// Orchestrate based on auth state
84{
85 authenticated ? (
86 <SignedInUser user={user} onSignOut={handleSignOut} />
87 ) : contactSection === "signIn" ? (
88 <SignInForm onSuccess={handleSignInSuccess} />
89 ) : (
90 <GuestContact email={email} onEmailChange={setEmail} />
91 );
92}
93```
94
95## When to Create New Components
96
97Extract into `components/` when:
98
99- Used in **2+ places**
100- **Self-contained** with clear props interface
101- **100+ lines** that can be isolated
102
103Keep inline when:
104
105- **One-off** UI specific to that step
106- Tightly coupled to step's state machine
majiayu000