A react-credit-cards alternative for React 19

Use it in Next.js

app/pay/checkout.tsx

"use client";
import { useRef } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements, CardNumberElement, CardExpiryElement, CardCvcElement, useStripe, useElements } from "@stripe/react-stripe-js";
import CardCheckout from "@/components/CardCheckout";

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
const style = { base: { color: "#F4F2FF", fontSize: "18px" } };

function CardForm({ clientSecret, amount }: { clientSecret: string; amount: number }) {
  const stripe = useStripe();
  const elements = useElements();
  // what Stripe reported for each field (react-credit-cards needed this from your own inputs)
  const done = useRef({ number: false, expiry: false, cvc: false }).current;

  return (
    <CardCheckout
      amount={amount}
      currency="USD"
      renderCardFields={(slot) => {
        const track = (k: keyof typeof done) => (e: { complete: boolean; brand?: string }) => {
          done[k] = e.complete;
          slot.onChange({ complete: done.number && done.expiry && done.cvc, ...(e.brand ? { brand: e.brand } : {}) });
        };
        return (
          <div className="grid gap-[15px]">
            <label className={slot.labelClassName}>Card number</label>
            <div className={slot.fieldClassName}><CardNumberElement options={{ style }} onChange={track("number")} /></div>
            <label className={slot.labelClassName}>Expiry</label>
            <div className={slot.fieldClassName}><CardExpiryElement options={{ style }} onChange={track("expiry")} /></div>
            <label className={slot.labelClassName}>CVC</label>
            <div className={slot.fieldClassName}>
              {/* the old focused="cvc" prop: the card flips while this field has focus */}
              <CardCvcElement
                options={{ style }}
                onChange={track("cvc")}
                onFocus={() => slot.onChange({ focus: "cvc" })}
                onBlur={() => slot.onChange({ focus: null })}
              />
            </div>
          </div>
        );
      }}
      onConfirm={async ({ name }) => {
        if (!stripe || !elements) throw new Error("Stripe hasn't loaded yet.");
        const card = elements.getElement(CardNumberElement);
        if (!card) throw new Error("Card field missing.");
        const { error } = await stripe.confirmCardPayment(clientSecret, { payment_method: { card, billing_details: { name } } });
        if (error) throw error; // Pay comes back and the buyer can try again
      }}
    />
  );
}

export default function Checkout({ clientSecret, amount }: { clientSecret: string; amount: number }) {
  return (
    <Elements stripe={stripePromise} options={{ clientSecret }}>
      <CardForm clientSecret={clientSecret} amount={amount} />
    </Elements>
  );
}