CleenUI · Forms · CreditCardInput

CreditCardInput

Card-number input with brand detection, formatting, and CVC plus expiry sub-fields.

storybook.cleenui.com · forms-creditcardinput--controlled
Open in new window

About CreditCardInput

CreditCardInput is the composite card-entry control: card number, expiry, and CVC fields wired together with the brand-logo flip animation, formatting (e.g. 4–4–4–4 grouping for Visa, 4–6–5 for Amex), and Luhn-check validation.

The component is purely client-side — it never holds card data beyond the React state — so PCI scope stays narrow. Pair with a tokenization callback to hand the captured value directly to your payment processor.

When to use it

  • Subscription signup flows.
  • Saved-payment-method management.
  • One-time checkout for paid services.
  • Updating an existing card on file.

Common props

Prop
Type
Description
value
{number, expiry, cvc}
Controlled value.
onChange
(value) => void
Change handler with formatted parts.
onValid
(brand: string) => void
Fires when Luhn check passes.
acceptedBrands
string[]
Allow-list of card brands.
showBrand
boolean
Display the detected brand logo.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.