Photonix BankDebit
4242 4242 4242 4242
Card Holder
Jane Cooper
Expires
12/30
VISA
Visual representation of a credit/debit card.
"use client";
import { PaymentCard } from '@photonix/ultimate';
export default function PaymentCardBasicExample() {
return (
<PaymentCard
bankName="Photonix Bank"
cardType="Debit"
network="visa"
cardNumber="4242424242424242"
cardHolder="Jane Cooper"
expiryDate="12/30"
variant="black"
/>
);
}Prop | Type | Default | Description |
|---|---|---|---|
bankName | string | 'Photonix Bank' | The name of the bank or institution. |
cardType | string | 'Credit' | The type of card (e.g., 'Credit', 'Debit'). |
network | "visa" | "mastercard" | "amex" | "discover" | 'visa' | The card network. |
cardNumber | string | - | The card number (masked or full). Spacing will be applied if not present. |
cardHolder | string | - | The cardholder's name. |
expiryDate | string | - | The expiry date (e.g., '12/25'). |
variant | "black" | "blue" | "default" | "gold" | "platinum" | "gradient-1" | "gradient-2" | "gradient-3" | 'default' | The visual variant of the card. |
background | string | - | Optional custom background style (e.g., image url or specific gradient). |
className | string | - | Additional class name. |