{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkout-form", "title": "Checkout Form", "description": "A one-page checkout — contact, delivery address, payment method and an order summary whose delivery, tax and payment fee are derived from the form in the same render, in integer minor units, so the lines always add up to the button and the money can never lag the address.", "dependencies": [ "zod", "lucide-react" ], "registryDependencies": [ "utils", "https://ui.zyeon.ai/r/credit-card-form.json" ], "files": [ { "path": "src/registry/blocks/checkout-form.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, CircleAlert, CircleCheck, CreditCard, FileText, LoaderCircle, Wallet } from \"lucide-react\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n type CardBrandId,\n detectCardBrand,\n isLuhnValid,\n} from \"@/components/ui/credit-card-form\"\n\n/* -------------------------------------------------------------------------- */\n/* Money */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Every amount in this block is an **integer in the currency's minor unit** — cents for USD,\n * yen for JPY, fils for KWD. Two reasons, and both of them are the difference between a\n * checkout and an incident:\n *\n * 1. `subtotal + shipping + fee + tax − discount === total` has to hold *exactly*. In floats it\n * does not: `19.99 * 3` is `59.96999999999999`, and a summary that adds up to a cent less\n * than the button says is a chargeback.\n * 2. The number of decimals is a property of the currency, not of the layout. JPY has none, KWD\n * has three. `toFixed(2)` invents `¥1,234.00`, which is wrong in a way nobody notices until a\n * Japanese customer sees it.\n *\n * So: integers everywhere, and `Intl.NumberFormat` decides how many digits to print.\n */\nexport type MinorUnits = number\n\n/** Non-finite input would poison every downstream sum and print \"$NaN\". Zero is the safe floor. */\nconst safeMinor = (value: number): MinorUnits => (Number.isFinite(value) ? Math.round(value) : 0)\n\n/** Quantities are whole units and never negative — a negative one would flip a line's sign. */\nconst safeQuantity = (value: number) => (Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0)\n\n/**\n * A formatter for `currency`, plus the divisor that turns minor units into what it wants.\n * The divisor is asked of `Intl` (`maximumFractionDigits` resolves to 2 for USD, 0 for JPY,\n * 3 for KWD) rather than hard-coded to 100 — that hard-coded 100 is the classic JPY bug.\n *\n * A currency code or locale tag `Intl` rejects throws a `RangeError`; caught here, because a\n * typo in a data feed must not blank the whole checkout. The fallback prints the code itself,\n * so the number is never shown without saying what it is.\n */\nfunction buildMoneyFormatter(locale: string, currency: string): (amount: MinorUnits) => string {\n let format: Intl.NumberFormat\n let carriesSymbol = true\n try {\n format = new Intl.NumberFormat(locale, { currency, style: \"currency\" })\n } catch {\n carriesSymbol = false\n try {\n format = new Intl.NumberFormat(locale, { maximumFractionDigits: 2, minimumFractionDigits: 2 })\n } catch {\n format = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 2, minimumFractionDigits: 2 })\n }\n }\n const divisor = 10 ** (format.resolvedOptions().maximumFractionDigits ?? 2)\n return (amount: MinorUnits) => {\n // `amount === 0 ? 0 : amount` normalises -0, so a zero line prints \"$0.00\", never \"-$0.00\".\n const text = format.format((amount === 0 ? 0 : amount) / divisor)\n return carriesSymbol ? text : `${currency} ${text}`\n }\n}\n\n/** Basis points of a minor-unit base, rounded half-up — the rounding every tax authority uses. */\nconst applyBps = (base: MinorUnits, bps: number): MinorUnits =>\n Number.isFinite(bps) ? Math.round((base * Math.max(0, bps)) / 10000) : 0\n\n/* -------------------------------------------------------------------------- */\n/* Cart */\n/* -------------------------------------------------------------------------- */\n\nexport interface CheckoutLineItem {\n id: string\n name: string\n /** Second line under the name: \"Size M · Ocean blue\". */\n variant?: string\n /** Whole units. Fractions and negatives are clamped away before anything is multiplied. */\n quantity: number\n /** Price of one unit, in minor units of the cart currency. */\n unitAmount: MinorUnits\n}\n\nexport interface CheckoutDiscount {\n /** Shown next to the label: \"SPRING10\". */\n code?: string\n label: string\n /**\n * A **positive** amount that gets subtracted. It is clamped to the subtotal, so the discount\n * the summary prints is always the discount the total actually removed — a promo worth more\n * than the basket cannot make the two disagree.\n */\n amount: MinorUnits\n}\n\nexport interface CheckoutCart {\n /** ISO 4217. Decides the decimal places of every amount below — see `MinorUnits`. */\n currency: string\n items: readonly CheckoutLineItem[]\n discount?: CheckoutDiscount\n}\n\n/* -------------------------------------------------------------------------- */\n/* Countries: address shape, tax and shipping in one row */\n/* -------------------------------------------------------------------------- */\n\nexport type CheckoutAddressField = \"line1\" | \"line2\" | \"city\" | \"region\" | \"postalCode\"\n\nexport interface CheckoutRegionRule {\n /** The country's own word: State / Province / Prefecture. */\n label: string\n /** Omit for a free-text field. */\n options?: readonly { value: string; label: string }[]\n required: boolean\n}\n\nexport interface CheckoutPostalRule {\n label: string\n /** Placeholder, and quoted in the \"enter a valid …\" message. */\n example: string\n /** Tested against the trimmed, upper-cased input, so it must tolerate optional spacing. */\n pattern: RegExp\n inputMode?: \"text\" | \"numeric\"\n maxLength: number\n}\n\nexport interface CheckoutTaxRule {\n /** Row label: \"Sales tax\", \"VAT\", \"GST\". */\n label: string\n /** Basis points: 875 = 8.75%. */\n rateBps: number\n /** Overrides `rateBps` for a region value — this is what makes the state picker move the total. */\n regionBps?: Readonly>\n /**\n * `\"all\"` (VAT/GST countries) taxes goods **and** delivery and fees; `\"goods\"` (US, CA) taxes\n * the merchandise only. Getting this backwards is a few cents per order that never reconcile.\n */\n taxable: \"goods\" | \"all\"\n}\n\nexport interface CheckoutShippingRule {\n /** Row label: \"Standard delivery\". */\n label: string\n /** Flat rate, in minor units of the **cart currency** — see the note on `CHECKOUT_COUNTRIES`. */\n flat: MinorUnits\n /** Free delivery once the discounted merchandise total reaches this. Omit for never. */\n freeOver?: MinorUnits\n /**\n * Carrier surcharge for hard-to-reach postcodes, matched against the trimmed, upper-cased,\n * space-stripped code. It survives the free-delivery threshold, because the carrier still bills\n * it — which is exactly why the postcode, not just the country, has to move the summary.\n */\n remote?: { label: string; pattern: RegExp; amount: MinorUnits }\n}\n\nexport interface CheckoutCountry {\n /** ISO 3166-1 alpha-2. */\n code: string\n name: string\n /** The address rows this country writes, in the order it writes them. */\n order: readonly CheckoutAddressField[]\n line1Label: string\n line2Label: string\n cityLabel: string\n /** Absent = this country has no administrative area (GB, DE). The row is not rendered. */\n region?: CheckoutRegionRule\n postalCode: CheckoutPostalRule\n tax: CheckoutTaxRule\n shipping: CheckoutShippingRule\n}\n\n/** `\"CA:California,NY:New York\"` → options. An entry with no colon uses its text as its value. */\nfunction regionOptions(spec: string): { value: string; label: string }[] {\n return spec.split(\",\").map(entry => {\n const at = entry.indexOf(\":\")\n return at === -1\n ? { value: entry, label: entry }\n : { value: entry.slice(0, at), label: entry.slice(at + 1) }\n })\n}\n\n/**\n * Six countries, chosen so the rules that actually differ are all represented: a state picker\n * with per-state tax (US), a province picker with per-province tax (CA), no administrative area\n * at all (GB, DE), the postcode written before the city (DE), and a big-endian address whose code\n * comes first (JP).\n *\n * **The money in here is illustrative.** Rates are national/state averages, not rooftop-accurate\n * jurisdictions, and the shipping figures are written in 2-decimal minor units (cents). Trim the\n * list to where you ship, replace the numbers with your carrier's, and hand real tax to a tax\n * engine through the `quote` prop — a checkout that guesses tax is a checkout that under-collects.\n * A cart in a 0-decimal currency (JPY) needs its own table: 800 means ¥800 there, not ¥8.00.\n */\nexport const CHECKOUT_COUNTRIES: readonly CheckoutCountry[] = [\n {\n code: \"US\",\n name: \"United States\",\n order: [\"line1\", \"line2\", \"city\", \"region\", \"postalCode\"],\n line1Label: \"Street address\",\n line2Label: \"Apartment, suite, unit (optional)\",\n cityLabel: \"City\",\n region: {\n label: \"State\",\n required: true,\n options: regionOptions(\n \"AL:Alabama,AK:Alaska,AZ:Arizona,AR:Arkansas,CA:California,CO:Colorado,CT:Connecticut,DE:Delaware,DC:District of Columbia,FL:Florida,GA:Georgia,HI:Hawaii,ID:Idaho,IL:Illinois,IN:Indiana,IA:Iowa,KS:Kansas,KY:Kentucky,LA:Louisiana,ME:Maine,MD:Maryland,MA:Massachusetts,MI:Michigan,MN:Minnesota,MS:Mississippi,MO:Missouri,MT:Montana,NE:Nebraska,NV:Nevada,NH:New Hampshire,NJ:New Jersey,NM:New Mexico,NY:New York,NC:North Carolina,ND:North Dakota,OH:Ohio,OK:Oklahoma,OR:Oregon,PA:Pennsylvania,RI:Rhode Island,SC:South Carolina,SD:South Dakota,TN:Tennessee,TX:Texas,UT:Utah,VT:Vermont,VA:Virginia,WA:Washington,WV:West Virginia,WI:Wisconsin,WY:Wyoming\",\n ),\n },\n postalCode: {\n label: \"ZIP code\",\n example: \"94107\",\n pattern: /^\\d{5}(-?\\d{4})?$/,\n inputMode: \"numeric\",\n maxLength: 10,\n },\n tax: {\n label: \"Sales tax\",\n rateBps: 600,\n // Five states levy none; the rest are combined state + average local rates.\n regionBps: {\n AK: 0,\n CA: 875,\n DE: 0,\n FL: 700,\n IL: 875,\n MT: 0,\n NH: 0,\n NY: 800,\n OR: 0,\n TX: 825,\n WA: 1025,\n },\n taxable: \"goods\",\n },\n shipping: {\n label: \"Standard delivery\",\n flat: 795,\n freeOver: 7500,\n // Alaska, Hawaii and the Pacific territories: every carrier bills these separately.\n remote: { label: \"Remote area surcharge\", pattern: /^(99|96[789])/, amount: 1400 },\n },\n },\n {\n code: \"CA\",\n name: \"Canada\",\n order: [\"line1\", \"line2\", \"city\", \"region\", \"postalCode\"],\n line1Label: \"Street address\",\n line2Label: \"Apartment, suite, unit (optional)\",\n cityLabel: \"City\",\n region: {\n label: \"Province\",\n required: true,\n options: regionOptions(\n \"AB:Alberta,BC:British Columbia,MB:Manitoba,NB:New Brunswick,NL:Newfoundland and Labrador,NS:Nova Scotia,NT:Northwest Territories,NU:Nunavut,ON:Ontario,PE:Prince Edward Island,QC:Quebec,SK:Saskatchewan,YT:Yukon\",\n ),\n },\n postalCode: {\n label: \"Postal code\",\n example: \"K1A 0B1\",\n pattern: /^[ABCEGHJ-NPRSTVXY]\\d[ABCEGHJ-NPRSTV-Z] ?\\d[ABCEGHJ-NPRSTV-Z]\\d$/,\n maxLength: 7,\n },\n tax: {\n label: \"GST / HST\",\n rateBps: 500,\n regionBps: { BC: 1200, MB: 1200, NB: 1500, NL: 1500, NS: 1400, ON: 1300, PE: 1500, QC: 1498, SK: 1100 },\n taxable: \"goods\",\n },\n shipping: {\n label: \"Standard delivery\",\n flat: 1295,\n freeOver: 10000,\n // The three territories: postal codes there start X or Y.\n remote: { label: \"Northern surcharge\", pattern: /^[XY]/, amount: 2500 },\n },\n },\n {\n code: \"GB\",\n name: \"United Kingdom\",\n // No administrative area: a UK address is street → town → postcode, and the postcode is\n // precise enough that asking for a county would be asking for something nobody writes.\n order: [\"line1\", \"line2\", \"city\", \"postalCode\"],\n line1Label: \"Address line 1\",\n line2Label: \"Address line 2 (optional)\",\n cityLabel: \"Town / City\",\n postalCode: {\n label: \"Postcode\",\n example: \"SW1A 1AA\",\n pattern: /^[A-Z]{1,2}\\d[A-Z\\d]? ?\\d[A-Z]{2}$/,\n maxLength: 8,\n },\n tax: { label: \"VAT\", rateBps: 2000, taxable: \"all\" },\n shipping: {\n label: \"Standard delivery\",\n flat: 599,\n freeOver: 5000,\n remote: { label: \"Highlands & Islands surcharge\", pattern: /^(IV|KW|HS|ZE|AB3[0-9])/, amount: 1200 },\n },\n },\n {\n code: \"DE\",\n name: \"Germany\",\n // \"10115 Berlin\" — the code is written before the city, so it is entered before it too.\n order: [\"line1\", \"line2\", \"postalCode\", \"city\"],\n line1Label: \"Street and house number\",\n line2Label: \"Address supplement (optional)\",\n cityLabel: \"City\",\n postalCode: {\n label: \"Postcode (PLZ)\",\n example: \"10115\",\n pattern: /^\\d{5}$/,\n inputMode: \"numeric\",\n maxLength: 5,\n },\n tax: { label: \"MwSt.\", rateBps: 1900, taxable: \"all\" },\n shipping: { label: \"Standard delivery\", flat: 495, freeOver: 5000 },\n },\n {\n code: \"JP\",\n name: \"Japan\",\n // Japanese addresses run large → small, and the 〒 code is written first.\n order: [\"postalCode\", \"region\", \"city\", \"line1\", \"line2\"],\n line1Label: \"Address (chome, banchi, go)\",\n line2Label: \"Building, room number (optional)\",\n cityLabel: \"City / Ward / Town\",\n region: {\n label: \"Prefecture\",\n required: true,\n options: regionOptions(\n \"Hokkaido,Aomori,Iwate,Miyagi,Akita,Yamagata,Fukushima,Ibaraki,Tochigi,Gunma,Saitama,Chiba,Tokyo,Kanagawa,Niigata,Toyama,Ishikawa,Fukui,Yamanashi,Nagano,Gifu,Shizuoka,Aichi,Mie,Shiga,Kyoto,Osaka,Hyogo,Nara,Wakayama,Tottori,Shimane,Okayama,Hiroshima,Yamaguchi,Tokushima,Kagawa,Ehime,Kochi,Fukuoka,Saga,Nagasaki,Kumamoto,Oita,Miyazaki,Kagoshima,Okinawa\",\n ),\n },\n postalCode: {\n label: \"Postal code\",\n example: \"150-0002\",\n pattern: /^\\d{3}-?\\d{4}$/,\n inputMode: \"numeric\",\n maxLength: 8,\n },\n tax: { label: \"Consumption tax\", rateBps: 1000, taxable: \"all\" },\n shipping: {\n label: \"Standard delivery\",\n flat: 800,\n freeOver: 10000,\n // Okinawa and the outer islands: 900–909.\n remote: { label: \"Island surcharge\", pattern: /^90/, amount: 1200 },\n },\n },\n {\n code: \"AU\",\n name: \"Australia\",\n order: [\"line1\", \"line2\", \"city\", \"region\", \"postalCode\"],\n line1Label: \"Street address\",\n line2Label: \"Unit, level (optional)\",\n cityLabel: \"Suburb\",\n region: {\n label: \"State / Territory\",\n required: true,\n options: regionOptions(\n \"ACT:Australian Capital Territory,NSW:New South Wales,NT:Northern Territory,QLD:Queensland,SA:South Australia,TAS:Tasmania,VIC:Victoria,WA:Western Australia\",\n ),\n },\n postalCode: {\n label: \"Postcode\",\n example: \"3000\",\n pattern: /^\\d{4}$/,\n inputMode: \"numeric\",\n maxLength: 4,\n },\n tax: { label: \"GST\", rateBps: 1000, taxable: \"all\" },\n shipping: {\n label: \"Standard delivery\",\n flat: 1195,\n freeOver: 12000,\n // NT and remote WA.\n remote: { label: \"Remote area surcharge\", pattern: /^0[89]/, amount: 1800 },\n },\n },\n]\n\n/**\n * Shape used for a code the table does not list — a value restored from a database after someone\n * trimmed the list, or one set programmatically. Deliberately permissive so an unknown\n * destination degrades into a usable form instead of an unsubmittable one, and deliberately\n * charges nothing: guessing a foreign tax rate is worse than saying it is confirmed later.\n */\nexport const GENERIC_CHECKOUT_COUNTRY: Omit = {\n order: [\"line1\", \"line2\", \"city\", \"region\", \"postalCode\"],\n line1Label: \"Address line 1\",\n line2Label: \"Address line 2 (optional)\",\n cityLabel: \"City\",\n region: { label: \"State / Province / Region\", required: false },\n postalCode: {\n label: \"Postal code\",\n example: \"10115\",\n pattern: /^[A-Z0-9][A-Z0-9 -]{1,11}$/,\n maxLength: 12,\n },\n tax: { label: \"Tax\", rateBps: 0, taxable: \"goods\" },\n shipping: { label: \"Delivery\", flat: 0 },\n}\n\n/** The rule for `code`, or a generic one carrying that code so the form still works. */\nexport function resolveCheckoutCountry(\n code: string,\n countries: readonly CheckoutCountry[] = CHECKOUT_COUNTRIES,\n): CheckoutCountry {\n const found = countries.find(country => country.code === code)\n if (found !== undefined) return found\n return { ...GENERIC_CHECKOUT_COUNTRY, code, name: code === \"\" ? \"Elsewhere\" : code }\n}\n\n/** Upper-cased, separators stripped — the shape both postal patterns and surcharges compare against. */\nconst compactPostal = (raw: string) => raw.replace(/[\\s-]/g, \"\").toUpperCase()\n\n/* -------------------------------------------------------------------------- */\n/* Payment methods */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The three that need genuinely different fields — a card takes a PAN, a wallet takes nothing\n * because the wallet sheet collects it, and an invoice takes who to bill. Anything that only\n * changes a logo is a variant of one of these, not a fourth id.\n */\nexport type CheckoutPaymentMethodId = \"card\" | \"wallet\" | \"invoice\"\n\nexport interface CheckoutPaymentMethod {\n id: CheckoutPaymentMethodId\n label: string\n /** One line under the label, in the picker. */\n description: string\n /** Basis points of the discounted merchandise total. 250 = 2.5%. Omit or 0 for no fee. */\n feeBps?: number\n /** Row label for the fee in the summary. Required if `feeBps` is set. */\n feeLabel?: string\n /** Overrides the pay button's label — a wallet does not \"pay\" here, it hands off. */\n submitLabel?: string\n}\n\nexport const CHECKOUT_PAYMENT_METHODS: readonly CheckoutPaymentMethod[] = [\n {\n id: \"card\",\n label: \"Card\",\n description: \"Visa, Mastercard, Amex and the rest.\",\n },\n {\n id: \"wallet\",\n label: \"Wallet\",\n description: \"Confirm in your wallet sheet — nothing to type here.\",\n submitLabel: \"Continue to wallet\",\n },\n {\n id: \"invoice\",\n label: \"Pay by invoice\",\n description: \"Net 30 for registered businesses.\",\n feeBps: 250,\n feeLabel: \"Invoicing fee (2.5%)\",\n },\n]\n\nconst METHOD_ICONS: Record> = {\n card: CreditCard,\n invoice: FileText,\n wallet: Wallet,\n}\n\n/* -------------------------------------------------------------------------- */\n/* Values, totals, payload */\n/* -------------------------------------------------------------------------- */\n\nexport interface CheckoutFormValues {\n email: string\n country: string\n name: string\n line1: string\n line2: string\n city: string\n region: string\n postalCode: string\n method: CheckoutPaymentMethodId\n /** PAN digits only — the field owns the grouping, so no spaces ever live in the value. */\n cardNumber: string\n /** MMYY digits (\"0930\"); rendered as MM/YY. */\n cardExpiry: string\n cardCvc: string\n cardName: string\n company: string\n taxId: string\n}\n\nexport type CheckoutField = Exclude\n\n/** What the built-in quote produces. `total` is deliberately absent — see `CheckoutTotals`. */\nexport interface CheckoutQuoteParts {\n subtotal: MinorUnits\n shipping: MinorUnits\n /** Row label for delivery; the built-in quote appends the surcharge when one applies. */\n shippingLabel: string\n /** Payment-method fee. 0 for card and wallet. */\n fee: MinorUnits\n feeLabel?: string\n tax: MinorUnits\n taxLabel: string\n /** Positive amount that gets subtracted, already clamped to the subtotal. */\n discount: MinorUnits\n discountLabel?: string\n}\n\n/**\n * What the summary renders. `total` is **computed here from the parts, always** — a quote can\n * never hand back a total that disagrees with the lines above it, because it does not get to\n * supply one. That makes `subtotal + shipping + fee + tax − discount === total` structural\n * rather than something to remember to assert.\n */\nexport interface CheckoutTotals extends CheckoutQuoteParts {\n currency: string\n total: MinorUnits\n}\n\nexport interface CheckoutQuoteInput {\n cart: CheckoutCart\n /** The resolved rule for the country now selected — generic when the table does not list it. */\n country: CheckoutCountry\n countryCode: string\n region: string\n postalCode: string\n method: CheckoutPaymentMethod\n /** Sum of the line totals, already clamped. */\n subtotal: MinorUnits\n /** Clamped to the subtotal. */\n discount: MinorUnits\n /** Units in the basket — the sum of the clamped quantities, not the number of line entries. */\n itemCount: number\n}\n\nexport type CheckoutQuoteFn = (input: CheckoutQuoteInput) => CheckoutQuoteParts\n\n/**\n * Tax and delivery from the country table. Pure and synchronous **on purpose**: the summary is\n * derived from the form state during render, so the new country and the new tax land in one\n * commit and there is no frame in which the address has moved and the money has not.\n *\n * Quoting against a real tax/rates service is asynchronous, and that is where the tear comes\n * back. The fix is not to await inside this function — it is to keep the answer keyed by the\n * address it was computed for, and render \"Calculated at the next step\" (never a stale number)\n * whenever the key does not match the address on screen. See the Prompt for the shape.\n */\nexport const defaultCheckoutQuote: CheckoutQuoteFn = input => {\n const { country, discount, itemCount, method, postalCode, region, subtotal } = input\n const net = Math.max(0, subtotal - discount)\n const feeLabel = method.feeLabel\n const fee = itemCount === 0 ? 0 : applyBps(net, method.feeBps ?? 0)\n\n const { shipping: rule, tax } = country\n const compact = compactPostal(postalCode)\n const surcharge =\n rule.remote !== undefined && compact !== \"\" && rule.remote.pattern.test(compact) ? rule.remote.amount : 0\n const free = rule.freeOver !== undefined && net >= rule.freeOver\n // The surcharge survives the free-delivery threshold: the carrier still bills it, so hiding it\n // would mean eating it on every order to Alaska.\n const shipping = itemCount === 0 ? 0 : (free ? 0 : rule.flat) + surcharge\n const shippingLabel =\n surcharge > 0 && rule.remote !== undefined ? `${rule.label} + ${rule.remote.label}` : rule.label\n\n const rateBps = tax.regionBps?.[region] ?? tax.rateBps\n const base = tax.taxable === \"all\" ? net + shipping + fee : net\n\n return {\n discount,\n fee,\n feeLabel,\n shipping,\n shippingLabel,\n subtotal,\n tax: applyBps(base, rateBps),\n taxLabel: tax.label,\n }\n}\n\nexport interface CheckoutAddress {\n country: string\n name: string\n line1: string\n line2?: string\n city: string\n /** Absent when the country has no administrative area. */\n region?: string\n postalCode: string\n}\n\nexport type CheckoutPaymentDetails =\n | {\n method: \"card\"\n /**\n * PAN digits. Never log this, never POST it to your own servers — see the security note on\n * the component. It is here so a browser-side tokenizer can reach it, and nowhere else.\n */\n number: string\n /** The only part of the number that is safe to store, show or send. */\n last4: string\n brand: CardBrandId\n /** 1–12. */\n expiryMonth: number\n /** Four digits, expanded from the two typed ones. */\n expiryYear: number\n cvc: string\n name: string\n }\n | { method: \"wallet\" }\n | { method: \"invoice\"; company: string; taxId: string }\n\nexport interface CheckoutPayload {\n email: string\n shippingAddress: CheckoutAddress\n payment: CheckoutPaymentDetails\n /** The same numbers the summary printed, so the server can compare before it charges. */\n totals: CheckoutTotals\n}\n\n/* -------------------------------------------------------------------------- */\n/* Validation (zod only) */\n/* -------------------------------------------------------------------------- */\n\n/** MMYY → a four-digit year in the reference century. 01/05 stays 2005, not 2105. */\nconst expandYear = (twoDigit: number, reference: Date) =>\n Math.floor(reference.getFullYear() / 100) * 100 + twoDigit\n\n/**\n * The whole rule set, rebuilt whenever the country or the payment method changes — because both\n * of them change what \"valid\" means. The form carries `noValidate`, so the browser never runs a\n * competing rule set; `type=\"email\"` survives only for the phone keyboard (the native rule\n * accepts `a@b`, which every mail provider bounces).\n *\n * Exported so a server route can run the identical check on the payload it receives.\n */\nexport function buildCheckoutSchema(options: {\n country: CheckoutCountry\n method: CheckoutPaymentMethodId\n /** Reference \"today\" for the expiry rule. Read at parse time, never during render. */\n now?: Date\n}) {\n const { country, method, now } = options\n const line1Label = country.line1Label\n const cityLabel = country.cityLabel\n\n return z\n .object({\n email: z\n .string()\n .trim()\n .min(1, \"Enter the address the receipt should go to.\")\n .pipe(z.email(\"That doesn't look like an email address.\")),\n country: z.string().trim().min(1, \"Choose where this order ships.\"),\n name: z.string().trim().min(1, \"Tell the carrier who to deliver to.\"),\n line1: z.string().trim().min(1, `${line1Label} is required.`),\n line2: z.string(),\n city: z.string().trim().min(1, `${cityLabel} is required.`),\n region: z.string(),\n postalCode: z.string(),\n method: z.enum([\"card\", \"wallet\", \"invoice\"]),\n cardNumber: z.string(),\n cardExpiry: z.string(),\n cardCvc: z.string(),\n cardName: z.string(),\n company: z.string(),\n taxId: z.string(),\n })\n .superRefine((values, ctx) => {\n // Every branch below guards its own inputs. Refinements all run — a failure in one does\n // not stop the next — so a branch that assumed a well-formed value would throw out of\n // `safeParse` instead of returning an error object, and the caller would get nothing.\n const region = typeof values.region === \"string\" ? values.region.trim() : \"\"\n const postal = typeof values.postalCode === \"string\" ? values.postalCode.trim() : \"\"\n\n const regionRule = country.region\n if (regionRule !== undefined && regionRule.required && region === \"\") {\n ctx.addIssue({ code: \"custom\", message: `${regionRule.label} is required.`, path: [\"region\"] })\n }\n\n const postalRule = country.postalCode\n if (postal === \"\") {\n ctx.addIssue({ code: \"custom\", message: `${postalRule.label} is required.`, path: [\"postalCode\"] })\n } else if (!postalRule.pattern.test(postal.toUpperCase())) {\n ctx.addIssue({\n code: \"custom\",\n message: `Enter a valid ${postalRule.label} — for example ${postalRule.example}.`,\n path: [\"postalCode\"],\n })\n }\n\n if (method === \"card\") {\n const digits = typeof values.cardNumber === \"string\" ? values.cardNumber : \"\"\n const brand = detectCardBrand(digits)\n if (digits === \"\") {\n ctx.addIssue({ code: \"custom\", message: \"Card number is required.\", path: [\"cardNumber\"] })\n } else if (!brand.lengths.includes(digits.length)) {\n ctx.addIssue({ code: \"custom\", message: \"Card number is incomplete.\", path: [\"cardNumber\"] })\n } else if (!isLuhnValid(digits)) {\n ctx.addIssue({ code: \"custom\", message: \"Card number is invalid — check for a typo.\", path: [\"cardNumber\"] })\n }\n\n const expiry = typeof values.cardExpiry === \"string\" ? values.cardExpiry : \"\"\n if (expiry === \"\") {\n ctx.addIssue({ code: \"custom\", message: \"Expiry date is required.\", path: [\"cardExpiry\"] })\n } else if (expiry.length < 4) {\n ctx.addIssue({ code: \"custom\", message: \"Expiry date is incomplete.\", path: [\"cardExpiry\"] })\n } else {\n const month = Number(expiry.slice(0, 2))\n if (!(month >= 1 && month <= 12)) {\n ctx.addIssue({ code: \"custom\", message: \"Expiry month must be 01–12.\", path: [\"cardExpiry\"] })\n } else {\n // Read here, inside the parse, so render stays free of `new Date()`.\n const reference = now ?? new Date()\n const year = expandYear(Number(expiry.slice(2, 4)), reference)\n const referenceYear = reference.getFullYear()\n const referenceMonth = reference.getMonth() + 1\n // A card is good through the end of its month, so only a strictly earlier one expired.\n if (year < referenceYear || (year === referenceYear && month < referenceMonth)) {\n ctx.addIssue({ code: \"custom\", message: \"This card has expired.\", path: [\"cardExpiry\"] })\n }\n }\n }\n\n const cvc = typeof values.cardCvc === \"string\" ? values.cardCvc : \"\"\n if (cvc === \"\") {\n ctx.addIssue({ code: \"custom\", message: `${brand.cvcLabel} is required.`, path: [\"cardCvc\"] })\n } else if (!brand.cvcLengths.includes(cvc.length)) {\n ctx.addIssue({\n code: \"custom\",\n message: `${brand.cvcLabel} must be ${brand.cvcLengths.join(\" or \")} digits.`,\n path: [\"cardCvc\"],\n })\n }\n\n if (typeof values.cardName !== \"string\" || values.cardName.trim() === \"\") {\n ctx.addIssue({ code: \"custom\", message: \"Enter the name printed on the card.\", path: [\"cardName\"] })\n }\n }\n\n if (method === \"invoice\") {\n if (typeof values.company !== \"string\" || values.company.trim() === \"\") {\n ctx.addIssue({ code: \"custom\", message: \"Invoices need a company to bill.\", path: [\"company\"] })\n }\n const taxId = typeof values.taxId === \"string\" ? values.taxId.trim() : \"\"\n if (taxId === \"\") {\n ctx.addIssue({ code: \"custom\", message: \"VAT / Tax ID is required for invoicing.\", path: [\"taxId\"] })\n } else if (taxId.replace(/[\\s-]/g, \"\").length < 6) {\n ctx.addIssue({ code: \"custom\", message: \"That VAT / Tax ID looks too short.\", path: [\"taxId\"] })\n }\n }\n })\n}\n\n/* -------------------------------------------------------------------------- */\n/* Digit fields: grouping and caret */\n/* -------------------------------------------------------------------------- */\n\ntype DigitField = \"cardNumber\" | \"cardExpiry\" | \"cardCvc\"\n\nconst isDigitChar = (char: string | undefined) => char !== undefined && char >= \"0\" && char <= \"9\"\n\nconst countDigits = (text: string) => {\n let count = 0\n for (const char of text) if (isDigitChar(char)) count++\n return count\n}\n\n/** Space-separated groups; whatever is left after the last group becomes one trailing group. */\nfunction groupDigits(digits: string, groups: readonly number[]): string {\n const parts: string[] = []\n let index = 0\n for (const size of groups) {\n if (index >= digits.length) break\n parts.push(digits.slice(index, index + size))\n index += size\n }\n if (index < digits.length) parts.push(digits.slice(index))\n return parts.join(\" \")\n}\n\n/**\n * Display index just after the `n`-th digit. \"How many digits are behind the caret\" is the only\n * caret coordinate that survives regrouping — without it, editing the middle of a card number\n * flings the cursor to the end on every keystroke. (Same technique as `credit-card-form`, which\n * cannot be reused directly here because it renders its own `
` element.)\n */\nfunction caretAfterDigits(display: string, n: number): number {\n let caret = 0\n if (n > 0) {\n caret = display.length\n let seen = 0\n for (let i = 0; i < display.length; i++) {\n if (!isDigitChar(display[i])) continue\n seen++\n if (seen === n) {\n caret = i + 1\n break\n }\n }\n }\n // A caret parked in front of a trailing separator belongs after it, or the next keystroke reads\n // as being typed behind the slash. Only steps over separators with no digit left after them.\n while (caret < display.length && !isDigitChar(display[caret]) && countDigits(display.slice(caret)) === 0) caret++\n return caret\n}\n\n/**\n * MMYY, normalised while it is typed: a lone 2–9 can only be a one-digit month, so it is padded\n * (\"5\" → \"05\") and the year always starts at index 2. Nothing is ever dropped — this re-reads the\n * whole digit stream on every edit, deletions included, so a rule that discarded a digit would\n * fire on digits the user never typed.\n */\nfunction normalizeExpiryDigits(input: string): string {\n let out = \"\"\n for (const char of input) {\n if (!isDigitChar(char)) continue\n if (out.length === 0) {\n out = char > \"1\" ? `0${char}` : char\n continue\n }\n if (out.length >= 4) break\n out += char\n }\n return out\n}\n\nconst formatExpiry = (digits: string) => (digits.length < 2 ? digits : `${digits.slice(0, 2)}/${digits.slice(2, 4)}`)\n\n/* -------------------------------------------------------------------------- */\n/* Copy */\n/* -------------------------------------------------------------------------- */\n\n/** Every user-visible string that is not a country rule or a zod message. The i18n surface. */\nexport const CHECKOUT_MESSAGES = {\n contactHeading: \"Contact\",\n contactNote: \"The receipt and delivery updates go to this address.\",\n emailLabel: \"Email\",\n emailPlaceholder: \"you@example.com\",\n shippingHeading: \"Delivery address\",\n countryLabel: \"Country / Region\",\n nameLabel: \"Full name\",\n namePlaceholder: \"Alex Morgan\",\n selectPlaceholder: (label: string) => `Select ${label.toLowerCase()}`,\n paymentHeading: \"Payment\",\n cardNumberLabel: \"Card number\",\n cardExpiryLabel: \"Expiry date\",\n cardNameLabel: \"Name on card\",\n companyLabel: \"Company name\",\n taxIdLabel: \"VAT / Tax ID\",\n walletNote:\n \"Nothing to fill in here. Pressing the button opens your wallet sheet, and the order is placed once you confirm there.\",\n invoiceNote: \"We email the invoice the moment the order ships. Payment is due 30 days after that.\",\n summaryHeading: \"Order summary\",\n emptyCart: \"There is nothing in this order yet.\",\n emptyCartHint: \"Add something to the basket and the totals will appear here.\",\n subtotalLabel: \"Subtotal\",\n totalLabel: \"Total\",\n freeBadge: \"Free\",\n quantityLabel: (quantity: number) => `Qty ${quantity}`,\n estimateNote: \"Delivery and tax are estimated from the address above and confirmed when the order is placed.\",\n payLabel: \"Pay\",\n pendingLabel: \"Processing…\",\n successTitle: \"Payment authorised\",\n successBody: \"Hang tight — we're taking you to your confirmation.\",\n failureFallback: \"We couldn't take that payment. Nothing you typed was lost — check the details and try again.\",\n emptyCartFailure: \"This order is empty, so there is nothing to pay for yet.\",\n securityNote: \"Card details are used in your browser only.\",\n}\n\nexport type CheckoutMessages = typeof CHECKOUT_MESSAGES\n\n/**\n * Attach field errors to a rejection so the form can put them on the right rows and move focus\n * to the first of them. Duck-typed on read, so an error crossing a bundle boundary still works.\n */\nexport function checkoutSubmitError(\n message: string,\n fieldErrors?: Partial>,\n): Error & { fieldErrors?: Partial> } {\n const error: Error & { fieldErrors?: Partial> } = new Error(message)\n if (fieldErrors !== undefined) error.fieldErrors = fieldErrors\n return error\n}\n\nfunction fieldErrorsOf(error: unknown): Partial> | undefined {\n if (typeof error !== \"object\" || error === null) return undefined\n const candidate = (error as { fieldErrors?: unknown }).fieldErrors\n if (typeof candidate !== \"object\" || candidate === null) return undefined\n const out: Partial> = {}\n for (const [key, message] of Object.entries(candidate as Record)) {\n if (typeof message === \"string\" && message !== \"\") out[key as CheckoutField] = message\n }\n return Object.keys(out).length === 0 ? undefined : out\n}\n\n/** A rejection that is not an `Error` still has to become a sentence a human can read. */\nfunction rejectionText(error: unknown, fallback: string): string {\n if (error instanceof Error && error.message !== \"\") return error.message\n if (typeof error === \"string\" && error !== \"\") return error\n return fallback\n}\n\n/* -------------------------------------------------------------------------- */\n/* Styling primitives */\n/* -------------------------------------------------------------------------- */\n\nconst CONTROL_CLASS = cn(\n \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 text-sm text-foreground shadow-xs\",\n \"outline-none transition-colors motion-reduce:transition-none placeholder:text-muted-foreground\",\n \"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\",\n)\n\n/**\n * A native `\n \n \n )}\n \n )\n }\n case \"postalCode\":\n return (\n \n {textInput(\"postalCode\", postalCodeRef, \"shipping postal-code\", {\n inputMode: country.postalCode.inputMode,\n maxLength: country.postalCode.maxLength,\n placeholder: country.postalCode.example,\n })}\n \n )\n }\n }\n\n const summaryRows: React.ReactNode[] = [\n ,\n ,\n ]\n if (totals.fee > 0) {\n summaryRows.push(\n ,\n )\n }\n summaryRows.push()\n if (totals.discount > 0) {\n summaryRows.push(\n ,\n )\n }\n\n const payLabel = method.submitLabel ?? `${copy.payLabel} ${money(totals.total)}`\n\n return (\n \n
\n
\n {/* Contact ------------------------------------------------------ */}\n
\n

{copy.contactHeading}

\n

{copy.contactNote}

\n \n {textInput(\"email\", emailRef, \"email\", {\n inputMode: \"email\",\n placeholder: copy.emailPlaceholder,\n type: \"email\",\n })}\n \n
\n\n {/* Delivery address --------------------------------------------- */}\n
\n

{copy.shippingHeading}

\n
\n \n
\n setCountry(event.currentTarget.value)}\n ref={countryRef}\n value={values.country}\n >\n {/* A code the table does not list stays visible instead of rendering blank. */}\n {countries.some(entry => entry.code === values.country) ? null : (\n \n )}\n {countries.map(entry => (\n \n ))}\n \n \n
\n \n\n \n {textInput(\"name\", nameRef, \"shipping name\", { placeholder: copy.namePlaceholder })}\n \n\n {addressOrder.map(field => renderAddressField(field))}\n
\n
\n\n {/* Payment ------------------------------------------------------ */}\n
\n

{copy.paymentHeading}

\n
\n {copy.paymentHeading}\n
\n {methodList.map(entry => {\n const Icon = METHOD_ICONS[entry.id]\n const active = entry.id === method.id\n return (\n \n setMethod(entry.id)}\n type=\"radio\"\n value={entry.id}\n />\n \n \n {entry.label}\n \n {entry.description}\n \n \n \n )\n })}\n
\n
\n\n {method.id === \"card\" && (\n
\n \n
\n handleDigitChange(\"cardNumber\", event)}\n onKeyDown={event => handleDigitKeyDown(\"cardNumber\", event)}\n placeholder=\"1234 1234 1234 1234\"\n ref={cardNumberRef}\n spellCheck={false}\n value={cardNumberDisplay}\n />\n {/* A wordmark, not a logo: the networks license their marks, and a text badge\n themes for free. Decorative — the brand reaches assistive tech through the\n live region at the foot of the form, which carries no digits. */}\n \n {brand.wordmark === \"\" ? (\n \n ) : (\n \n {brand.wordmark}\n \n )}\n \n
\n \n\n \n handleDigitChange(\"cardExpiry\", event)}\n onKeyDown={event => handleDigitKeyDown(\"cardExpiry\", event)}\n placeholder=\"MM/YY\"\n ref={cardExpiryRef}\n spellCheck={false}\n value={formatExpiry(values.cardExpiry)}\n />\n \n\n \n handleDigitChange(\"cardCvc\", event)}\n onKeyDown={event => handleDigitKeyDown(\"cardCvc\", event)}\n // The security code is the one value that must never arrive from somewhere\n // else: pasting it means it was stored somewhere it may not be, and a paste\n // into a mistyped field leaves it in the clipboard history either way.\n // Autofill from the browser's own card store still works — that is not a paste.\n onPaste={event => event.preventDefault()}\n placeholder={\"1234\".slice(0, cvcHintLength)}\n ref={cardCvcRef}\n spellCheck={false}\n value={values.cardCvc}\n />\n \n\n \n {textInput(\"cardName\", cardNameRef, \"cc-name\", { placeholder: copy.namePlaceholder })}\n \n
\n )}\n\n {method.id === \"wallet\" && (\n

\n {copy.walletNote}\n

\n )}\n\n {method.id === \"invoice\" && (\n
\n

\n {copy.invoiceNote}\n

\n \n {textInput(\"company\", companyRef, \"organization\", { placeholder: \"Northwind Traders\" })}\n \n \n {textInput(\"taxId\", taxIdRef, \"off\", { placeholder: \"GB123456789\" })}\n \n
\n )}\n
\n
\n\n {/* Summary ---------------------------------------------------------- */}\n \n

\n {copy.summaryHeading}\n

\n\n {cartEmpty ? (\n
\n

{copy.emptyCart}

\n

{copy.emptyCartHint}

\n
\n ) : (\n
    \n {lines.map(({ item, lineTotal, quantity, unitAmount }) => (\n
  • \n \n {item.name}\n {item.variant !== undefined && (\n {item.variant}\n )}\n \n {copy.quantityLabel(quantity)}\n {quantity > 1 ? ` · ${money(unitAmount)} each` : \"\"}\n \n \n {money(lineTotal)}\n
    • \n ))}\n
\n )}\n\n
\n {summaryRows}\n \n
\n\n

{copy.estimateNote}

\n\n {failure !== null && (\n \n \n {failure}\n
\n )}\n\n {status === \"success\" ? (\n \n \n \n {copy.successTitle}\n {copy.successBody}\n \n \n ) : (\n with the pending state announced from nowhere. The real guard is the ref\n // read at the top of the handler, which no number of presses can get past.\n aria-busy={busy || undefined}\n aria-describedby={failure !== null ? failureId : undefined}\n aria-disabled={busy || disabled || cartEmpty || undefined}\n className={cn(\n \"inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-xs\",\n \"outline-none transition-colors motion-reduce:transition-none hover:bg-primary/90\",\n \"focus-visible:ring-3 focus-visible:ring-ring/50\",\n (busy || disabled || cartEmpty) && \"cursor-not-allowed opacity-60 hover:bg-primary\",\n )}\n ref={submitRef}\n type=\"submit\"\n >\n {busy && }\n {busy ? copy.pendingLabel : payLabel}\n \n )}\n\n

{copy.securityNote}

\n \n \n\n {/* One polite region for the whole form. The card wordmark is decorative, so this is how the\n detected brand reaches a screen reader — by name and code length only. No digits are\n ever put here, or anywhere else outside the number field itself. */}\n \n {method.id === \"card\" && brand.id !== \"unknown\" ? `${brand.label}, ${brand.cvcLabel} ${cvcHintLength} digits` : \"\"}\n \n \n )\n})\n\nexport default CheckoutForm\n", "type": "registry:block" } ], "type": "registry:block" }