Photonix

PaymentCard

Visual representation of a credit/debit card.

Preview

Photonix BankDebit
4242 4242 4242 4242
Card Holder
Jane Cooper
Expires
12/30
VISA
Usage
"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"
        />
    );
}

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