react-credit-cards-3

React Credit Cards 3 - Community Package

This repository is a hard-fork from the original react-credit-cards package. The main purpose is to update dependencies, make it usable with React 19, and clear installation warnings.

A slick credit card component for React.

Demo - CodeSandbox

Install

npm install --save react-credit-cards-3

Usage

import React, { useState } from 'react';
import Cards from 'react-credit-cards-3';

const PaymentForm = () => {
  const [state, setState] = useState({
    number: '',
    expiry: '',
    cvc: '',
    name: '',
    focus: '',
  });

  const handleInputChange = (evt) => {
    const { name, value } = evt.target;
    setState((prev) => ({ ...prev, [name]: value }));
  };

  const handleInputFocus = (evt) => {
    setState((prev) => ({ ...prev, focus: evt.target.name }));
  };

  return (
    <div>
      <Cards
        number={state.number}
        expiry={state.expiry}
        cvc={state.cvc}
        name={state.name}
        focused={state.focus}
      />
      <form>
        <input
          type="number"
          name="number"
          placeholder="Card Number"
          value={state.number}
          onChange={handleInputChange}
          onFocus={handleInputFocus}
        />
        ...
      </form>
    </div>
  );
};

export default PaymentForm;

If you are using SASS, import the CSS react-credit-cards-3/dist/lib/styles.scss

Or you can import the CSS: import 'react-credit-cards-3/dist/es/styles-compiled.css';

Features

• Supports all credit card issuers available in credit-card-type plus Dankort, Laser, and Visa Electron.

Props

• name {string}: Name on card. *
• number {string|number}: Card number. *
• expiry {string|number}: Card expiry date. 10/20 or 012017 *
• cvc {string|number}: Card CVC/CVV. *
• focused {string}: Focused card field. name|number|expiry|cvc
• locale {object}: Localization text (e.g. { valid: 'valid thru' }).
• placeholders {object}: Placeholder text (e.g. { name: 'YOUR NAME HERE' }).
• preview {bool}: To show scrambled data (e.g. **** 4567).
• issuer {string}: Set the issuer for preview mode (e.g. visa|mastercard|...)
• acceptedCards {array}: Limit accepted cards (e.g. ['visa', 'mastercard'])
• callback {func}: Callback for card number changes with { issuer, maxLength }, { isValid }

• Required fields

Development

1. Clone this repo and link it to your global node_modules:

git clone https://github.com/RijoKsd/react-credit-cards-3.git
cd react-credit-cards-3
npm install
npm link

2. Download the demo source from CodeSandbox.
3. Unzip it to your desired directory.
4. Install dependencies:

cd react-credit-cards-demo
npm install
npm link react-credit-cards-3

5. In the react-credit-cards-3 directory, start the watcher:

npm run watch

6. In the react-credit-cards-demo directory, start the demo app:

npm start

7. 🎉 Done! The demo app will run at http://localhost:3000/. Your changes will reflect automatically.

Contributing

Please read CONTRIBUTING.md for contribution guidelines.

LICENSE

This project is licensed under the MIT License.

Maintained with ❤️ by Rijo Sebastian.