Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Card Details Dialog for Solid

An Add Payment Method dialog with name, number, expiry, and CVC fields, plus a checkbox to make that card the default.

UI library: Ark UI

Add Payment Method opens Add card details. The fields are cardholder name, card number, expiry, and CVC, plus Set as default payment method. Cancel and Add Card sit at the bottom.

Use it to take a card without leaving the page. Send the numbers through your payment provider, not your server. A longer checkout fits a Sheet. In Solid, Ark UI does not check the card number.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
    <DialogTrigger asChild={props => <Button {...props()} variant="outline">Add Payment Method</Button>} />
    <DialogContent class="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>Add card details</DialogTitle>
        <DialogDescription>
          Enter your card information to add a payment method.
        </DialogDescription>
      </DialogHeader>
      <FieldGroup>
        <Field>
          <FieldLabel>Cardholder name</FieldLabel>
          <Input autocomplete="cc-name" name="card-name" placeholder="John Doe" type="text" />
        </Field>
        <Field>
          <FieldLabel>Card number</FieldLabel>
          <Input autocomplete="cc-number" inputMode="numeric" name="card-number" placeholder="1234 5678 9012 3456" type="text" />
        </Field>
        <div class="grid grid-cols-2 gap-4">
          <Field>
            <FieldLabel>Expiry date</FieldLabel>
            <Input autocomplete="cc-exp" name="card-expiry" placeholder="MM/YY" type="text" />
          </Field>
          <Field>
            <FieldLabel>CVC</FieldLabel>
            <Input autocomplete="cc-csc" inputMode="numeric" name="card-cvc" placeholder="123" type="text" />
          </Field>
        </div>
        <Field orientation="horizontal">
          <Checkbox name="default-method" />
          <FieldLabel class="font-normal">
{/* The rest of the file is under Installation. */}

FAQ

Can I send these card fields to my server?

Don't handle raw card numbers yourself. Use your payment provider's hosted fields or SDK, which return a token you store instead; this layout shows where those fields go.

How do I format the card number?

Group the digits in fours as people type, and detect the brand from the first digits. The inputs already set inputMode="numeric" and autoComplete="cc-number" so phones show a number pad and browsers can fill saved cards.

How do I validate the expiry date?

Check the MM/YY format, a month from 01 to 12 and a date that isn't in the past, and show the error in the field with a FieldError.

Should the CVC be masked?

No, it's short-lived and people need to check what they typed. Keep it visible, with autoComplete="cc-csc".

What does Set as default payment method do?

Nothing on its own: it's a Checkbox with a name, so its value submits with the form. Your handler makes the card the default and unsets the previous one.

Do the buttons close the dialog?

Cancel is a DialogClose, so it does. Add Card doesn't: submit the card, then close the dialog from your handler once it's saved. Pass open and update it in onOpenChange, which receives { open }.

API Reference

Dialog

Sets asChild and props. The rest is on the Dialog page.

Button

Sets props and variant="outline". The rest is on the Button page.

Field

Sets orientation="horizontal". The rest is on the Field page.

Input

Sets autocomplete="cc-name", name="card-name", placeholder="John Doe", type="text", autocomplete="cc-number" and inputMode="numeric". The rest is on the Input page.

Checkbox

Sets name="default-method". The rest is on the Checkbox page.

All 17 dialog examples