CreditCardField

Summary

Payment input that combines four fields (number, name, expiry, CVV) into one cohesive component. Includes an interactive 3D-style card preview that flips when focusing the CVV field and validates numbers using the Luhn algorithm.


Class	`Bjanczak\FilamentFlexFields\Filament\Forms\Components\CreditCardField`
State type	`array` — `{number, name, expiry, cvv}`
Model cast	`'payment_method' => 'array'`
FieldType	`credit-card`
Playground	`credit-card` slug in Flex Fields playground
Default variant	`midnight`

Basic usage

Standard payment form

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\CreditCardField;

CreditCardField::make('card_details')
    ->label('Payment Method')
    ->required();

Custom labels and variant

CreditCardField::make('card_details')
    ->variant('ocean')
    ->numberLabel('Numer karty')
    ->nameLabel('Imię i nazwisko')
    ->expiryLabel('Data ważności')
    ->cvvLabel('Kod CVV');

State & validation

Stored value

The field stores an array of card details. Note that for security, you should usually only store the number (masked), name, and expiry in your database, while sending the full details to your payment processor.

// Dehydrated state for storage
[
    'number' => '4111111111111111',
    'name' => 'John Doe',
    'expiry' => '12/28',
]

Built-in Validation

CreditCardField performs several automatic checks:

Luhn Check: Validates the card number checksum.
Expiry Date: Ensures the card is not expired and the format is MM/YY.
CVV Format: Validates 3 or 4 digit numeric codes.
Required Fields: If required(), all four sub-fields must be filled.

Visual Customization

Variants

Choose from four built-in card themes:

Variant	Colors
`midnight`	Deep dark / black (default)
`ocean`	Blue gradient
`sunset`	Orange / red gradient
`slate`	Neutral gray

CreditCardField::make('card')->variant('sunset');

Input Variants

Change the style of the text inputs below the card:

primary: Standard bordered inputs.
secondary: Subtle background-only inputs.
flat: Minimalist underline style.

CreditCardField::make('card')->inputVariant('flat');

Configuration API

All methods accept Closure unless noted.

Method	Type	Default	Description
`variant(string\|Closure $variant)`	Setup	`'midnight'`	Card theme: `midnight`, `ocean`, `sunset`, `slate`
`inputVariant(string\|Closure $var)`	Setup	`'primary'`	Input style: `primary`, `secondary`, `flat`
`flipOnCvvFocus(bool\|Closure $cond)`	Setup	`true`	Flip card to back when CVV is focused
`numberLabel(string\|Closure $label)`	Setup	(trans)	Card number field label
`nameLabel(string\|Closure $label)`	Setup	(trans)	Cardholder name field label
`expiryLabel(string\|Closure $label)`	Setup	(trans)	Expiry date field label
`cvvLabel(string\|Closure $label)`	Setup	(trans)	CVV field label
`mark(string\|Closure $mark)`	Setup	`'CARD'`	Text shown on the card preview
`size(string\|Closure $size)`	Setup	`'md'`	`sm`, `md`, `lg`
`rounding(string\|Closure $round)`	Setup	config	Border radius token
`focusOutline(bool\|Closure $cond)`	Setup	`true`	Show focus rings on inputs

Real-world examples

Checkout Page Section

Section::make('Payment Information')
    ->description('We support Visa, Mastercard, and American Express.')
    ->schema([
        CreditCardField::make('payment_details')
            ->variant('midnight')
            ->inputVariant('primary')
            ->required(),
            
        Placeholder::make('security_note')
            ->content('Your payment information is encrypted and never stored on our servers.'),
    ]);

Playground

/admin/flex-fields-playground/credit-card See Playground for setup.

Component	When to use instead
FlexTextInput	Single masked input for card number only
SelectField	Selecting from saved payment methods
AddressAutocomplete	Billing address collection

PCI & Media Capture OS

CreditCardField integrates with Media Ingress for enterprise PCI posture.

Env	Default	Purpose
`FLEX_FIELDS_PCI_NEVER_STORE_PAN`	`true`	Dehydrate never writes raw PAN — only `token` + `last4` when tokenizer is registered
`FLEX_FIELDS_PCI_REQUIRE_TOKENIZATION`	`false`	When `true`, validation fails unless host registers `MediaCaptureOs::registerTokenizeCreditCardCallback()`

Host wiring:

use Bjanczak\FilamentFlexFields\Support\Media\MediaCaptureOs;

MediaCaptureOs::registerTokenizeCreditCardCallback(
    fn (string $pan): ?string => app(PaymentGateway::class)->tokenize($pan),
);

CVV is never persisted in dehydrated state. For public/embed flows, pair with a hosted tokenizer (Stripe Elements, etc.) — PAN exists in Livewire session only until dehydrate.

CSS classes (reference)

Class	Role
`fff-credit-card-field`	Root wrapper
`fff-credit-card-field__preview`	The 3D card container
`fff-credit-card-field__card-front`	Front side of card
`fff-credit-card-field__card-back`	Back side of card
`fff-credit-card-field__inputs`	Grid of text inputs
`fff-credit-card-field--{variant}`	Theme variant class
`fff-credit-card-field--input-{variant}`	Input style variant class

Getting Started

Guides & Resources

Text & Input

Number & Range

Choice & Selection

Date & Time

Media, Color & Location

Rating & Tables

Actions & Enterprise

Layout & Display (Schemas)

Summary

Basic usage

Standard payment form

Custom labels and variant

State & validation

Stored value

Built-in Validation

Visual Customization

Variants

Input Variants

Configuration API

Real-world examples

Checkout Page Section

Playground

PCI & Media Capture OS

CSS classes (reference)

​Summary

​Basic usage

​Standard payment form

​Custom labels and variant

​State & validation

​Stored value

​Built-in Validation

​Visual Customization

​Variants

​Input Variants

​Configuration API

​Real-world examples

​Checkout Page Section

​Playground

​Related components

​PCI & Media Capture OS

​CSS classes (reference)

Summary

Basic usage

Standard payment form

Custom labels and variant

State & validation

Stored value

Built-in Validation

Visual Customization

Variants

Input Variants

Configuration API

Real-world examples

Checkout Page Section

Playground

Related components

PCI & Media Capture OS

CSS classes (reference)