204
A one-page checkout that folds each finished step into a one-line summary: inline validation that clears as you type, delivery choices that re-total the order, a card that flips when you reach the CVC, and a calm confirmation.
akacheckout·payment form·credit card
Run this in any project set up for the shadcn CLI. It copies the Checkout source into your components folder, so the code is yours to change.
npx shadcn@latest add https://devl.dev/r/checkout.jsonImport it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.
import { Checkout } from "@/components/checkout";
export default function Page() {
return <Checkout />;
}A free React screen in the Commerce collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.
Read from the Checkout source. Everything is optional unless it says required.
| Prop | Type | Default |
|---|---|---|
| className | string | — |
| storeName | string | "Hearth Goods" |
| items | CheckoutItem[] | defaultItems |
| shippingOptions | CheckoutShipping[] | defaultShipping |
| taxRate | number | 0.0825 |
| promoCodes | Record<string, number> | { HEARTH10: 0.1 } |
| testCard | string | "4242 4242 4242 4242" |
| onTrackOrder | (orderNo: string) => void | — |