Beautiful credit card
components for React

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

function PaymentForm() {
  const [card, setCard] = useState({
    number: "", name: "", expiry: "", cvc: "",
  });
  const [focus, setFocus] = useState<Focused>("");

  return (
    <>
      <CreditCard
        number={card.number}
        name={card.name}
        expiry={card.expiry}
        cvc={card.cvc}
        focus={focus}
        richColors
      />

      <input
        name="number"
        placeholder="Card Number"
        value={card.number}
        onChange={(e) => setCard({ ...card, number: e.target.value })}
        onFocus={() => setFocus("number")}
      />
      {/* ...more inputs for name, expiry, cvc */}
    </>
  );
}