Store Checkout

Code

<StoreCheckout  lines={cart.lines}  currency="USD"  shippingMethods={methods}  savedAddresses={addresses}  paymentPolicy={{ card: true, cod: { maxTotal: 500000, countries: ["EG"], fee: 2500 }, wallet: { balance } }}  onPlaceOrder={async (draft) => api.placeOrder(draft)}/>

Storefront · beta

Live examples and controls: Store Checkout in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/store-checkout.json

Checkout for physical goods on one page in four sections that open in turn: contact (guest or signed in), delivery address, shipping method with arrival dates plus gift options and notes, and payment. The summary sits beside the form and folds behind a bar on phones. Placing the order shows a loading state, a failure with retry, then the confirmation. Address rules per country and the checkout state machine are pure modules with tests.

When to useCopy Anchor Link

• A storefront that ships parcels.

When not to useCopy Anchor Link

• Bookings, tickets or subscriptions: use checkout-steps or booking.

ImportCopy Anchor Link

import { StoreCheckout, StoreOrderConfirmation, StoreAddressForm } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<StoreCheckout
  lines={cart.lines}
  currency="USD"
  shippingMethods={methods}
  savedAddresses={addresses}
  paymentPolicy={{ card: true, cod: { maxTotal: 500000, countries: ["EG"], fee: 2500 }, wallet: { balance } }}
  onPlaceOrder={async (draft) => api.placeOrder(draft)}
/>

AnatomyCopy Anchor Link

StoreCheckout           data-slot="store-checkout"           the page with its sections and place-order button
StoreAddressForm        data-slot="store-address-form"       fields that change with the country
StoreOrderSummary       data-slot="store-order-summary"      lines and totals, collapsible on mobile
StoreOrderConfirmation  data-slot="store-order-confirmation" the page after the order

APICopy Anchor Link

Read the exported prop types in store-checkout.tsx. In short:

• StoreCheckout: lines, currency, shippingMethods, savedAddresses, countries, account and onSignIn, paymentPolicy, localMethods with onLocalSubmit, discount, taxBps, giftWrapFee, weekend, onPlaceOrder(draft), onPlaced, labels. onPlaceOrder resolves { orderNumber }, or { error } (or rejects) to show the failure and let the shopper retry. The draft carries the normalised data, totals and, for card, the card fields: send them to your payment provider and never log them.
• Card fields use the PaymentMethodForm of checkout-steps; manual methods use LocalPayments.
• Pure modules: address-rules (validateStoreAddress, countryRule, normalizePostalCode, formatPhoneE164) and checkout-machine (checkoutReduce, validateSection, paymentAvailability, checkoutSummary, etaWindow, buildOrder).

ExamplesCopy Anchor Link

ArabicCopy Anchor Link

<NasaqProvider locale="ar"><StoreCheckout lines={lines} currency="USD" shippingMethods={methods} onPlaceOrder={place} /></NasaqProvider>

AccessibilityCopy Anchor Link

• Each section is a labelled region; when one opens, focus moves to its heading. Errors sit next to their field and are linked to it.
• The summary toggle on small screens has aria-expanded. The confirmation heading takes focus on arrival.

RTL & i18nCopy Anchor Link

Built-in English and Arabic and a labels prop. Emails, phone numbers, postal codes, card numbers and order numbers stay left to right. Address previews join city, region and postal code with the Arabic comma in Arabic (storeAddressLines(address, "، ")). When the shopper is signed in, the contact tab reads "My account" (accountTab) instead of "Sign in".

Styling & tokensCopy Anchor Link

Card, surface, border and status tokens; logical classes only. Target the data-slot values above.

Do / Don'tCopy Anchor Link

• Do validate the address and recompute totals on your server.
• Do never store card fields; pass them to the provider.
• Don't offer cash on delivery above your limit; the policy turns it off with a reason.

RelatedCopy Anchor Link

• store-cart, checkout-steps, local-payments

LabCopy Anchor Link

Storybook: Components / Commerce / Store Checkout, Pages / Store / Checkout, Pages / Store / Order Placed.