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} onSignOut={handleSignOut} /> ) : contactSection === "signIn" ? ( <SignInForm onSuccess={handleSignInSuccess} /> ) : ( <GuestContact email={email} onEmailChange={setEmail} /> ); }

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