Credit Card

The CreditCard component displays a visual representation of a credit card, showing the brand, expiry date, and last four digits of the card number.

Preview

Usage

import { CreditCard } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <CreditCard 
      brand='Visa' 
      expires='12/24' 
      last_four='1234' 
    />
  );
}

Props

Prop	Description	Required	Value
brand	card provider name	required	string
expires	card expiry date	required	string
last_four	last four digits of card number	required	string

Notes

• The brand prop specifies the card provider name.

• The expires prop specifies the expiry date of the card.

• The last_four prop specifies the last four digits of the card number.