A lightweight, customizable React component library for rendering credit card forms with dynamic card issuer detection, input formatting, and responsive design. Built with TypeScript for type safety and flexibility.
npm install react-credit-cards-librarybash
npm install react-credit-cards-library
`
Usage
Here's an example of how to use the CreditCard component in your project:
`tsx
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 (
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: "1rem",
height: "100vh",
}}
>
name={cardData.name || ""}
expiry={cardData.expiry}
cvc={cardData.cvc}
focus={cardData.focus}
/>
type="text"
name="number"
placeholder="Card Number"
value={cardData.number}
onChange={(e) => setCardData({ ...cardData, number: e.target.value })}
onFocus={() => setCardData({ ...cardData, focus: "number" })}
/>
type="text"
name="name"
placeholder="Name"
value={cardData.name}
onChange={(e) => setCardData({ ...cardData, name: e.target.value })}
onFocus={() => setCardData({ ...cardData, focus: "name" })}
/>
type="text"
name="expiry"
placeholder="MM/YY Expiry"
value={cardData.expiry}
onChange={(e) => setCardData({ ...cardData, expiry: e.target.value })}
onFocus={() => setCardData({ ...cardData, focus: "expiry" })}
/>
type="text"
name="cvc"
placeholder="CVC"
value={cardData.cvc}
onChange={(e) => setCardData({ ...cardData, cvc: e.target.value })}
onFocus={() => setCardData({ ...cardData, focus: "cvc" })}
/>
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:
`tsx
type CardSize = {
width: string;
height: string;
};
`
Development
To develop and build the library locally:
1. Clone the repository:
`bash
git clone https://github.com/pedrovs3/react-credit-card-library.git
cd react-credit-cards-library
`
2. Install dependencies:
`bash
npm install
`
3. Build the library:
`bash
npm run build
``