Instant checkoutPro

A checkout sheet in the thread: order, ship to, delivery, payment and totals with tax, confirmed with one button that names the amount. Processing, declined and paid all happen in place.

Markdown

On this page

ProA coffee order paid in the thread: a work card declined in place, then the sheet folds into a receipt.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/instant-checkout

Usage

tsx

import { InstantCheckout } from "@/components/ui/chatcn/pro/instant-checkout"

<InstantCheckout
  merchant="Torrefação Lume"
  lines={lines}
  address={address}
  shippingOptions={shipping}
  payments={payments}
  taxRate={0.23}
  status={status}
  onConfirm={(order) => pay(order)}
/>

The sheet computes subtotal, delivery and tax (on goods and delivery, rounded to cents) and the pay button always names the total, so nobody pays an amount they did not read. onConfirm receives the chosen delivery and payment ids with the totals; you move status to processing, then declined or done.

Declined keeps every choice, marks the method that failed and says what to do next in declineReason. Done folds the sheet into a receipt with the order number, so the thread keeps a record people can scroll back to. Payment methods take generic labels such as Card ending 4417: no network logos ship with the kit.

Examples

Declined, processing, paid and more

ProDeclined, processing, paid, loading, a long basket and an empty basket.

Props

Prop	Type	Notes
`merchant`	`ReactNode`	Header and receipt
`lines`	`CheckoutLine[]`	`{ id, title, detail?, price, quantity?, image? }`
`address`, `onChangeAddress`	`CheckoutAddress`	`{ name, lines }`
`shippingOptions`	`CheckoutShipping[]`	`{ id, label, eta, price }`, 0 reads Free
`payments`	`CheckoutPayment[]`	`{ id, label, detail?, kind? }`
`shipping`, `defaultShipping`, `onShippingChange`	`string`	Controlled or not
`payment`, `defaultPayment`, `onPaymentChange`	`string`	Controlled or not
`taxRate`, `taxLabel`	`number`, `string`	Default 0 and VAT
`status`	`"ready" \| "loading" \| "processing" \| "declined" \| "done" \| "empty"`	Default `ready`
`declineReason`	`ReactNode`	What failed and how to fix it
`onConfirm`	`(order) => void`	Ids plus subtotal, shipping, tax and total
`orderNumber`, `doneNote`		Receipt content
`visibleLines`	`number`	Lines before the rest fold. Default 3
`currency`, `locale`	`string`	Default EUR, en-GB

Keyboard

Key	Action
`Tab`	Change address, delivery, payment, then Pay
Arrow keys	Move within delivery or payment choices
`Enter`, `Space`	Pay

Accessibility

Delivery and payment are native radio groups with labels, so they work with every screen reader and on touch with 44 px rows.
The decline reason is an alert and the failed method is marked invalid. Processing locks the choices and marks the button busy.
The receipt is a status region, so the payment result is announced once.

Motion

The total rolls when delivery changes. Radios fill in 150 ms.
The receipt enters with a 220 ms fade and a 4 px drop. Reduced motion: no movement.