Credit Card

x-bladewind::credit-card is a flippable credit card input. The front holds the card number, cardholder name, and expiry; a small round button on the card's right edge flips it to the back to enter the security code. The network name is detected live from the number as it is typed, and capped and grouped the way that network actually formats its numbers, four digits at a time for most networks, four-six-five for American Express.

This component is not form-associated on purpose. Card data is sensitive and normally belongs with a payment provider's own tokenization SDK, not a plain form submission. Read the current value with window.yourCardName.value, or set on_change to a JavaScript function called with the same value whenever it changes.

<x-bladewind::credit-card cardholder_name="Jane T. Doe"></x-bladewind::credit-card>

Flipping To The CVC

Click the round button on the card's edge to flip to the back and enter the security code. The same button flips back, and so does the Escape key while flipped.

<x-bladewind::credit-card flipped="true"></x-bladewind::credit-card>

Pre-Filling Fields

number, cardholder_name, expiry_month, expiry_year, and cvc are all plain attributes. number accepts either raw digits or a masked saved-card value such as •••• •••• •••• 4242, preserved as-is for an edit screen rather than reformatted.

<x-bladewind::credit-card
    cardholder_name="Jane T. Doe"
    number="4242424242424242"
    expiry_month="07"
    expiry_year="28">
</x-bladewind::credit-card>

Forcing A Network

Leave brand unset to auto-detect from the number. Set it explicitly to override, for example a saved card where the network is already known but the full number is not shown.

<x-bladewind::credit-card brand="visa" number="•••• •••• •••• 4242"></x-bladewind::credit-card>

Theming

Set color to any colour in the palette to change the gradient.

<x-bladewind::credit-card color="green"></x-bladewind::credit-card>

Set variant="outline" for a bare card silhouette instead of the full-colour gradient face.

<x-bladewind::credit-card variant="outline" cardholder_name="Jane T. Doe"></x-bladewind::credit-card>

Inline Card Information

Set variant="inline" for the compact layout: card number on one row, expiry and CVC on the next, with no cardholder name field or flip animation.

<x-bladewind::credit-card variant="inline"></x-bladewind::credit-card>

Validation

With required="true", window.yourCardName.validate() checks that every field is complete: a full-length number for the detected network, a non-blank name, a non-expired month/year, and a full-length security code. Add show_error_inline="true" and error_message to show a message beneath the card when it fails.

<x-bladewind::credit-card
    name="checkout_card"
    required="true"
    show_error_inline="true"
    error_message="Complete the card details to continue">
</x-bladewind::credit-card>

<script>
    payButton.addEventListener('click', () => {
        if (!window.checkout_card.validate()) return;
        // proceed
    });
</script>

Full List Of Attributes

JavaScript API

Each card creates a BladewindCreditCard instance assigned to a variable named after the component's name, so it can be read or called directly from your own scripts. If you set name yourself, use only letters, numbers, and underscores, since hyphens are not valid in a JavaScript identifier. The auto-generated default already does this for you.

checkout_card.value;
checkout_card.validate();
checkout_card.toggleFlip();
checkout_card.isFlipped();

Credit Card with all attributes defined

<x-bladewind::credit-card
name="checkout_card"
cardholder_name="Jane T. Doe"
number="4242424242424242"
expiry_month="07"
expiry_year="28"
cvc="123"
brand="visa"
color="green"
variant="gradient"
flipped="false"
disabled="false"
readonly="false"
required="true"
error_message="Complete the card details to continue"
show_error_inline="true"
on_change="onCardChange"
class="ml-2" />