React Credit Cards Library

A modern, lightweight React library for displaying credit card components with flip animations, automatic issuer recognition, and a premium visual design.

Features

• Premium Visuals: Includes a stunning "dark mode" with rich gradients and metallic chip effects.
• Responsive: Fully responsive with customizable size constraints.
• Flip Animation: Smooth 3D flip animation to show the CVC on the back.
• Issuer Detection: Automatically detects and displays logos for major card issuers.
• TypeScript: Built with modern TypeScript 5 for robust type safety.
• Zero CSS Import: All styles are inline/JS-based, so no need to import extra CSS files.

Installation

Install the library using npm:

npm install react-credit-cards-library

Usage

Here's a modern example of how to use the CreditCard component:

import { useState } from "react";
import { CreditCard, type Focused } from "react-credit-cards-library";

const App = () => {
  const [cardData, setCardData] = useState({
    number: "",
    name: "",
    expiry: "",
    cvc: "",
    focus: "" as Focused,
  });

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
      <CreditCard
        number={cardData.number}
        name={cardData.name}
        expiry={cardData.expiry}
        cvc={cardData.cvc}
        focus={cardData.focus}
        richColors={true} // Enable the premium dark gradient look
      />

      <form>
        <input
          type="text"
          name="number"
          placeholder="Card Number"
          value={cardData.number}
          onChange={(e) => setCardData({ ...cardData, number: e.target.value })}
          onFocus={() => setCardData({ ...cardData, focus: "number" })}
        />
        <input
          type="text"
          name="name"
          placeholder="Name"
          value={cardData.name}
          onChange={(e) => setCardData({ ...cardData, name: e.target.value })}
          onFocus={() => setCardData({ ...cardData, focus: "name" })}
        />
        <input
          type="text"
          name="expiry"
          placeholder="MM/YY"
          value={cardData.expiry}
          onChange={(e) => setCardData({ ...cardData, expiry: e.target.value })}
          onFocus={() => setCardData({ ...cardData, focus: "expiry" })}
        />
        <input
          type="text"
          name="cvc"
          placeholder="CVC"
          value={cardData.cvc}
          onChange={(e) => setCardData({ ...cardData, cvc: e.target.value })}
          onFocus={() => setCardData({ ...cardData, focus: "cvc" })}
        />
      </form>
    </div>
  );
};

export default App;

Props

The CreditCard component accepts the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | number | string | Required | The credit card number. | | name | string | Required | The cardholder's name. | | expiry | string | Required | The expiry date (e.g. "12/25"). | | cvc | string | Required | The CVC/CVV code. | | focus | Focused | Required | The field currently focused ("number", "name", "expiry", "cvc", or ""). | | richColors | boolean | false | Enables the premium dark gradient theme. | | locale | "en" \| "pt-BR" \| "es" | "en" | Language for static text ("VALID THRU"). | | cardSizes | CardSizes | See below | Custom dimensions for the card. |

CardSizes Type

Use the cardSizes prop to override default dimensions:

interface CardSizes {
  width?: string;     // Default: "320px"
  height?: string;    // Default: "180px"
  maxWidth?: string;  // Default: "100%"
  maxHeight?: string; // Default: undefined
}

Supported Issuers

The library automatically detects the following card brands:

• Visa
• Mastercard
• American Express (Amex)
• Diners Club
• Discover
• JCB
• Elo
• Alelo
• Sodexo
• VR
• Ticket (Restaurante/Alimentação)

Development

To develop and build the library locally:

1. Clone the repository:

   git clone https://github.com/pedrovs3/react-credit-card-library.git
   cd react-credit-cards-library

2. Install dependencies:

   npm install

3. Build the library:

   npm run build

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any bugs, improvements, or new features.

Author

Pedro Silva

• GitHub
• LinkedIn