Billing address can match shipping without re-entry
Why it matters
Most shoppers pay with a card registered to the same address they're shipping to. Making them type the exact same seven fields twice is pure friction with no payoff. A default-checked "Same as shipping" toggle collapses the billing section to a single checkbox for the common case while preserving separate-address entry for the minority that needs it. Missing this pattern adds roughly thirty seconds of typing and a fresh set of typo opportunities on every checkout.
Severity rationale
Low because the defect only affects shoppers with matching addresses, but it adds friction on the majority path.
Remediation
Add a default-checked "Same as shipping" toggle in src/components/CheckoutAddresses.tsx. When checked, copy shipping values into billing state and hide the billing fields. When unchecked, render the full billing form.
const [sameAsShipping, setSameAsShipping] = useState(true)
<input type="checkbox" checked={sameAsShipping} onChange={e => { setSameAsShipping(e.target.checked); if (e.target.checked) setBillingAddress(shippingAddress) }} />
{!sameAsShipping && <BillingForm value={billingAddress} onChange={setBillingAddress} />}
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Cart & Checkout UX Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from ecommerce-cart-ux·automated