Billing

Payment Method variations

Choose a saved card from a radio list or add a new card with a full card-entry form.

2 variations

2 results

Payment method

Choose how you'd like to be billed.

Visa •••• 4242DefaultExpires 08/27Mastercard •••• 8888Expires 11/26

Select method

dark

Pick a saved card from a radio list, mark a default, or add a new payment method.

Add card

Enter your card details to add a new payment method.

Cardholder name

Card number

Expiry

CVC

Set as default payment method

light

A new-card form with cardholder, number, expiry, CVC, and a set-as-default toggle.

Catalog metadata for this block. Install copies the source into your project.

npx cronus-ui add payment-method

Field	Type	Default	Description
`slug`*	`string`	`"payment-method"`	Registry item id. Passed to cronus-ui add.
`name`*	`string`	`"Payment Method"`	Display name shown in the gallery.
`description`*	`string`	`"Choose a saved card from a radio list or add a new card with a full card-entry form."`	Short summary of what the block covers.
`variants`	`{ id: string; name: string; description: string }[]`	`["select", "add-card"]`	Alternate layouts. Install a look with npx cronus-ui add <slug>--<id>. Omitted when the block has a single default.

Every published look for this block.

Id	Name	Description
`select`	Select method	Pick a saved card from a radio list, mark a default, or add a new payment method.
`add-card`	Add card	A new-card form with cardholder, number, expiry, CVC, and a set-as-default toggle.