Patterns

Checkout builder card

A draggable payment-method row for the Checkout Builder list. Left: a drag handle + method logo + name + an optional count badge. Right: an enable Switch and an overflow menu. It is a horizontal row (not a stacked card) so methods can be reordered and toggled inline.

Updated Jul 27, 2026 by Juan Pablo Turina

Anatomy

A compact Card row: on the left a DotsSixVertical drag handle, a 24px logo, the method name, and an optional count badge; on the right an enable Switch and a DotsThreeOutline overflow menu. Hover tints the row (bg-muted/40).

CPWP2

1
Drag handle
DotsSixVertical on the far left. Reorders the method within the checkout. Hide it with draggable={false}.
2
Logo + name
24px IconWrapper + the method name (semibold).
3
Count badge
Optional BadgeNumber after the name, e.g. the number of configured variants.
4
Enable switch
Turns the method on or off in the checkout without removing it.
5
Overflow menu
DotsThreeOutline on the far right for per-method actions.

States

Disabled

Switch off. The method is in the list but not active in the checkout.

CPWP

<CheckoutBuilderCard name="CPWP" onMenu={openMenu} />

Enabled

Switch on. The method is active. Add a count badge for methods with multiple variants.

CPWP2

<CheckoutBuilderCard name="CPWP" count={2} defaultEnabled onMenu={openMenu} />

Method-settings list (Edit + Switch)

Pass onEdit + showMenu={false} to swap the overflow menu for an Edit link that opens the method's settings. Add dimWhenDisabled to fade the name of an inactive method. This is the Checkout Builder Payment method settings row.

Credit card

Pix

<CheckoutBuilderCard
  name="Credit card"
  onEdit={openMethodSettings}
  showMenu={false}
  dimWhenDisabled
  defaultEnabled
/>

Import

Copy this import line at the top of the file where you compose this molecule.

A molecule composed of Card + Switch + BadgeNumber + IconWrapper. Render one per method inside a reorderable list.

import { CheckoutBuilderCard } from "@/components/patterns/checkout-builder-card";

Props

Everything else is forwarded to the underlying elements via ...props.

Prop	Type	Default	Description
name	string	'CPWP'	Payment-method name.
logo	ReactNode	demo logo	Method logo (24px IconWrapper). Pass your own brand mark.
count	number	—	Optional count badge after the name (e.g. number of variants).
draggable	boolean	true	Shows the drag handle. Set false for a static row.
defaultEnabled	boolean	false	Initial state of the enable switch.
onEnabledChange	(enabled: boolean) => void	—	Fires when the enable switch toggles.
onEdit	() => void	—	When set, renders an Edit link before the Switch (method-settings list).
editLabel	string	'Edit'	Label of the Edit link.
showMenu	boolean	true	Show the overflow menu after the Switch. Set false for the Edit + Switch shape.
onMenu	() => void	—	Overflow menu handler.
dimWhenDisabled	boolean	false	Fade the name to 50% when the method is off (method-settings parity).
className	string	—	Extra classes merged onto the Card row.

Cross-links to the atoms this molecule composes and sibling patterns.

SwitchThe enable toggle on the right.
CardThe atom this row is built on.
BadgeThe count badge (BadgeNumber).