React Credit Cards Library

A React library for displaying credit card components with flip animations, issuer recognition, and customizable appearance.

Installation

Install the library using npm:

npm install react-credit-cards-library

Usage

Here's an example of how to use the CreditCard component in your project:

import React from "react";
import { CreditCard } from "react-credit-cards-library";

const App: React.FC = () => {
  const [cardData, setCardData] = React.useState<{
    number: string;
    name?: string;
    expiry: string;
    cvc: string;
    focus: "" | "number" | "name" | "expiry" | "cvc";
  }>({
    number: "",
    name: undefined,
    expiry: "",
    cvc: "",
    focus: "",
  });

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "1rem",
        height: "100vh",
      }}
    >
      <CreditCard
        number={cardData.number}
        name={cardData.name || ""}
        expiry={cardData.expiry}
        cvc={cardData.cvc}
        focus={cardData.focus}
      />

      <div>
        <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 Expiry"
          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" })}
        />

        <button onClick={() => setCardData({ ...cardData, focus: "" })}>
          Focus None
        </button>
      </div>
    </div>
  );
};

export default App;

Props

The CreditCard component accepts the following props:

Prop	Type	Description
`number`	`string`	Credit card number
`name`	`string`	Cardholder's name
`expiry`	`string`	Expiry date
`cvc`	`string`	CVC code
`focus`	`string`	Field to focus on (`number`, `name`, `expiry`, `cvc`)
`richColors`	`boolean`	Use rich colors for card background
`cardSizes`	`CardSize`	Card size configuration
`locale`	`pt-BR`, `en`, `es`	Locale for formatting the expiry date label

The CardSize type is defined as follows:

type CardSize = {
  width: string;
  height: string;
};

Development

To develop and build the library locally:

Clone the repository:

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

Install dependencies:
```
npm install
```
Build the library:
```
npm run build
```

Screenshots

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