checkout-architecture
3
总安装量
3
周安装量
#60741
全站排名
安装命令
npx skills add https://github.com/saleor/storefront --skill checkout-architecture
Agent 安装分布
amp
3
gemini-cli
3
github-copilot
3
codex
3
kimi-cli
3
cursor
3
Skill 文档
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