Photonix

PaymentCard

Visual representation of a credit/debit card.

Preview

Photonix BankCredit
•••• 4242
Card Holder
JANE DOE
Expires
12/25
VISA
Usage
import { PaymentCard } from '@photonix/ultimate';

<PaymentCard 
  bankName="Bank"
  cardNumber="•••• 1234"
  cardHolder="Name"
  expiryDate="01/24"
/>

Component API

PaymentCard

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.

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System