creactid-card v1.1.3

creactid-card

creactid-card is an easy-to-use credit card component for your projects. Supports 12 credit cards and provides a different design for each one.

Supported Credit Cards

• Visa
• Mastercard
• American Express
• Diners Club
• Discover
• JCB
• UnionPay
• Maestro
• Elo
• Mir
• Hiper
• Hipercard

Demo Gif

CodeSandbox Example

Installation

npm install creactid-card

Usage

import { CreditCard } from 'creactid-card';
import { useState } from 'react';

export default function CreditCardExample() {
  const [cardInfo, setCardInfo] = useState({
    cardNumber: '',
    cardholderName: '',
    expYear: '',
    expMonth: '',
    cvv: '',
    focus: '',
    placeholder: '',
  });

  const handleFocus = (event) => {
    setCardInfo((prev) => ({
      ...prev,
      focus: event.target.name,
    }));
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setCardInfo((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  return (
    <div>
      <form>
        <label>Card Number</label>
        <input
          name="cardNumber"
          onChange={handleChange}
          onFocus={handleFocus}
          placeholder="Ex: 55.. ...."
        />
      </form>
      // All form elements
      <CreditCard
        cardNumber={cardInfo.cardNumber}
        cardholderName={cardInfo.cardholderName}
        placeholder={cardInfo.placeholder}
        expYear={cardInfo.expYear}
        expMonth={cardInfo.expMonth}
        cvv={cardInfo.cvv}
        focus={cardInfo.focus}
      />
    </div>
  );
}

Properties

Note: For the back of credit card to be visible, focus prop must be "cvv".