Payment Card Form
NewPro
A card that fills in as you type and flips to its back for the CVC, with number and expiry formatting and brand detection. Display only: real payments must go through your payment provider's hosted fields.
Customize
Test card
Layout
Hide middle digits
Show the back
#ff784f
When to use it
- Checkout prototypes and product demos, with no card data collected
- Showing a saved card's brand and last four digits in account settings
- A card preview beside your provider's hosted fields on a live checkout
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 664
Installation
Payment Card Form is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy payment-card-form.tsx into components/ui and run npm install motion.
Usage
import { PaymentCardForm } from "@/components/ui/payment-card-form";
// Display only. Never send card numbers to your own server: take real
// payments through your provider's hosted fields (Stripe Elements, Adyen,
// Braintree). This form is for demos, prototypes and previews.
<PaymentCardForm
name="card"
onChange={(value, { brand, complete }) => setPreview({ brand, complete })}
/>Props
13 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | CardValue | — | Controlled fields: number, holder, expiry and cvc. Leave it out to let the form manage itself. |
| defaultValue | Partial<CardValue> | — | Starting fields when uncontrolled. |
| onChange | (value, meta) => void | — | Called on every edit. meta holds brand, last4 and complete. |
| layout | "stacked" | "split" | "stacked" | Card over the fields, or side by side from the md breakpoint. |
| flipped | boolean | — | Forces a side of the card. By default it flips while the CVC field has focus. |
| maskNumber | boolean | false | Hides the middle digits on the card while the number isn't being edited. |
| color | string | "#ff784f" | Card glow while no brand is detected, and the focus color of the fields. |
| label | string | "Card details" | Accessible name of the group. |
| disabled | boolean | false | Blocks input and leaves the hidden fields out of form data. |
| required | boolean | — | Native required attribute on every field. |
| name | string | — | Prefix for hidden fields: <name>Brand, <name>Last4, <name>Expiry and <name>Holder. The full number and the CVC have no name and are never submitted. |
| id | string | — | Base id for the fields. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion