# CheckoutFlow
URL: https://remocn.dev/docs/ui/blocks/checkout-flow

A cursor-driven checkout card with a pricing toggle, card input, terms checkbox, and payment confirmation

- Install: `npx shadcn@latest add @remocn/checkout-flow`
- Vibe: clean
- Natural length: state-driven

A composition scene rendered as a real checkout card. The card and its fields blur-in in sequence, then a cursor flips the billing toggle monthly → yearly, types the card number, ticks the terms checkbox, and presses Pay through loading to success — finishing with a success toast. A pure orchestrator: every animated channel comes from a composed primitive's transition hook.

## Installation

```bash
npx shadcn@latest add @remocn/checkout-flow
```

> **Note**
>
> Installing `checkout-flow` automatically installs the shared `remocn-ui` core and all composed primitives via `registryDependencies`: toggle-group, input, checkbox, button, field, blur-in, cursor, and toast. You do not need to install them separately.

## Composed primitives

- **Blur-in** — staggered reveal of the card, header, and each field
- **Toggle-group** — segmented control for plan selection
- **Input** — card number reveal, then a static filled (blur) resting state
- **Checkbox** — terms acceptance with a draw-on checkmark
- **Button** — primary Pay action with hover/press/loading/success states
- **Field** — labeled layout slots for the controls
- **Cursor** — animated pointer with click ripples
- **Toast** — payment confirmation message

## Timeline narrative

The card surface fades in place (frames 0–18), then the header and each field blur-in staggered, all settling by frame 58. At frame 64 the cursor clicks the Yearly segment and the toggle thumb slides to it. At frame 96 the cursor focuses the card-number field, which types in from frame 100 to 140, then settles to its static filled state as the cursor leaves at 150 — the same frame the terms checkbox is clicked and ticks. At frame 180 the cursor presses Pay: hover → press → loading (186) → success (224). The success toast slides in at frame 224 and auto-dismisses at frame 286.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Upgrade your plan"` | Card title shown in the header. |
| `description` | `string` | `"Complete your purchase to unlock every feature."` | Supporting line under the title. |
| `plans` | `{value: string; label: string}[]` | `[{value:"monthly",label:"Monthly"},{value:"yearly",label:"Yearly"}]` | Array of pricing plan options for the toggle-group. The first is the resting selection. |
| `cardLabel` | `string` | `"Card number"` | Label rendered above the card-number input. |
| `cardPlaceholder` | `string` | `"4242 4242 4242 4242"` | Card number value revealed by the typing input. |
| `termsLabel` | `string` | `"I accept the terms and conditions"` | Text shown beside the terms checkbox. |
| `payLabel` | `string` | `"Pay $49"` | Text displayed on the primary Pay button. |
| `toastTitle` | `string` | `"Payment successful"` | Success message shown in the toast. |
| `theme` | `RemocnTheme` | — | Optional theme override (concrete oklch/hex/rgb values). |

## Use when
- Demoing a SaaS payment or upgrade UX end-to-end with cursor navigation and toast confirmation.
- A product video needs a complete purchase journey (plan select → card entry → pay → success) in one scene.
- Showing the full checkout funnel without assembling the individual primitives manually.

## Don't use when
- You only need a payment form without cursor animation — compose `field`, `input`, `button` manually.
- The flow is a multi-step onboarding (not payment) — use `onboarding-stepper-flow` instead.
- You need custom timing control over individual steps — orchestrate the primitives directly.