react-credit-cards-library/dist/index.d.ts

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.

import React from 'react';

type Locale = "en" | "pt-BR" | "es";

interface CreditCardProps {
    number: string;
    name: string;
    expiry: string;
    cvc: string;
    focus: Focused;
    locale?: Locale;
    richColors?: boolean;
    cardSizes?: {
        width?: string;
        height?: string;
        maxWidth?: string;
        maxHeight?: string;
    };
}
declare const _default: React.NamedExoticComponent<CreditCardProps>;

type Issuer = "visa" | "mastercard" | "amex" | "diners" | "elo" | "discover" | "jcb" | "sodexo" | "vr" | "ticket_vr" | "ticket_va" | "alelo" | "Unknown";

/**
 * Formats a credit card number based on the issuer type.
 *
 * @param {string} value - The raw credit card number input.
 * @param {Issuer} issuer - The type of the credit card issuer. (you can use value returned of getCardIssuer function)
 * @returns {string} - The formatted credit card number.
 */
declare const formatCardNumber: (value: string, issuer: Issuer) => string;

/**
 * Identifies the issuer of a credit, debit, or benefit card.
 *
 * @param {string} cardNumber - The credit card number, which may contain spaces or hyphens.
 * @returns {string} - The name of the card issuer (e.g., 'Visa', 'MasterCard', etc.)
 *                     or 'Unknown' if no issuer matches the card number.
 */
declare function getCardIssuer(cardNumber: string): Issuer;

type Focused = "number" | "name" | "expiry" | "cvc" | "";

export { _default as CreditCard, Focused, Issuer, formatCardNumber, getCardIssuer };