react-svg-credit-card-payment-icons/dist/index.d.ts

React components library with 6 styles, 80 icons, TypeScript support, and a variety of types and formats for easy integration into React applications.

import * as React from 'react';
import { SVGProps, JSX } from 'react';

declare const SvgAlipay$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgAmex$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCodeFront$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCode$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiners$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiscover$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgElo$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgGeneric$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHiper$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHipercard$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgJcb$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMaestro$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMastercard$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMir$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgPaypal$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgUnionpay$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgVisa$5: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare namespace FlatComponents {
  export { SvgAlipay$5 as Alipay, SvgAmex$5 as Americanexpress, SvgAmex$5 as Amex, SvgCode$5 as Code, SvgCodeFront$5 as CodeFront, SvgDiners$5 as Diners, SvgDiscover$5 as Discover, SvgElo$5 as Elo, SvgGeneric$5 as Generic, SvgHiper$5 as Hiper, SvgHipercard$5 as Hipercard, SvgJcb$5 as Jcb, SvgMaestro$5 as Maestro, SvgMastercard$5 as Mastercard, SvgMir$5 as Mir, SvgPaypal$5 as Paypal, SvgUnionpay$5 as Unionpay, SvgVisa$5 as Visa };
}

declare const SvgAlipay$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgAmex$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCodeFront$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCode$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiners$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiscover$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgElo$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgGeneric$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHiper$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHipercard$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgJcb$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMaestro$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMastercard$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMir$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgPaypal$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgUnionpay$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgVisa$4: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare namespace FlatRoundedComponents {
  export { SvgAlipay$4 as Alipay, SvgAmex$4 as Americanexpress, SvgAmex$4 as Amex, SvgCode$4 as Code, SvgCodeFront$4 as CodeFront, SvgDiners$4 as Diners, SvgDiscover$4 as Discover, SvgElo$4 as Elo, SvgGeneric$4 as Generic, SvgHiper$4 as Hiper, SvgHipercard$4 as Hipercard, SvgJcb$4 as Jcb, SvgMaestro$4 as Maestro, SvgMastercard$4 as Mastercard, SvgMir$4 as Mir, SvgPaypal$4 as Paypal, SvgUnionpay$4 as Unionpay, SvgVisa$4 as Visa };
}

declare const SvgAlipay$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgAmex$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCode$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCodeFront$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiners$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiscover$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgElo$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgGeneric$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHiper$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHipercard$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgJcb$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMaestro$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMastercard$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMir$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgPaypal$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgUnionpay$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgVisa$3: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare namespace LogoComponents {
  export { SvgAlipay$3 as Alipay, SvgAmex$3 as Americanexpress, SvgAmex$3 as Amex, SvgCode$3 as Code, SvgCodeFront$3 as CodeFront, SvgDiners$3 as Diners, SvgDiscover$3 as Discover, SvgElo$3 as Elo, SvgGeneric$3 as Generic, SvgHiper$3 as Hiper, SvgHipercard$3 as Hipercard, SvgJcb$3 as Jcb, SvgMaestro$3 as Maestro, SvgMastercard$3 as Mastercard, SvgMir$3 as Mir, SvgPaypal$3 as Paypal, SvgUnionpay$3 as Unionpay, SvgVisa$3 as Visa };
}

declare const SvgAlipay$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgAmex$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCode$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCodeFront$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiners$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiscover$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgElo$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHiper$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHipercard$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgGeneric$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgJcb$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMaestro$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMastercard$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMir$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgPaypal$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgUnionpay$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgVisa$2: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare namespace LogoBorderComponents {
  export { SvgAlipay$2 as Alipay, SvgAmex$2 as Americanexpress, SvgAmex$2 as Amex, SvgCode$2 as Code, SvgCodeFront$2 as CodeFront, SvgDiners$2 as Diners, SvgDiscover$2 as Discover, SvgElo$2 as Elo, SvgGeneric$2 as Generic, SvgHiper$2 as Hiper, SvgHipercard$2 as Hipercard, SvgJcb$2 as Jcb, SvgMaestro$2 as Maestro, SvgMastercard$2 as Mastercard, SvgMir$2 as Mir, SvgPaypal$2 as Paypal, SvgUnionpay$2 as Unionpay, SvgVisa$2 as Visa };
}

declare const SvgAlipay$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgAmex$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCodeFront$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCode$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiners$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiscover$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgElo$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgGeneric$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHiper$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHipercard$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgJcb$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMaestro$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMastercard$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMir$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgPaypal$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgUnionpay$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgVisa$1: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare namespace MonoComponents {
  export { SvgAlipay$1 as Alipay, SvgAmex$1 as Amex, SvgCode$1 as Code, SvgCodeFront$1 as CodeFront, SvgDiners$1 as Diners, SvgDiscover$1 as Discover, SvgElo$1 as Elo, SvgGeneric$1 as Generic, SvgHiper$1 as Hiper, SvgHipercard$1 as Hipercard, SvgJcb$1 as Jcb, SvgMaestro$1 as Maestro, SvgMastercard$1 as Mastercard, SvgMir$1 as Mir, SvgPaypal$1 as Paypal, SvgUnionpay$1 as Unionpay, SvgVisa$1 as Visa };
}

declare const SvgAlipay: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgAmex: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCodeFront: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgCode: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiners: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgDiscover: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgElo: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgGeneric: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHiper: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgHipercard: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgJcb: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMaestro: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMastercard: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgMir: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgPaypal: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgUnionpay: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare const SvgVisa: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

declare namespace MonoOutlineComponents {
  export { SvgAlipay as Alipay, SvgAmex as Americanexpress, SvgAmex as Amex, SvgCode as Code, SvgCodeFront as CodeFront, SvgDiners as Diners, SvgDiscover as Discover, SvgElo as Elo, SvgGeneric as Generic, SvgHiper as Hiper, SvgHipercard as Hipercard, SvgJcb as Jcb, SvgMaestro as Maestro, SvgMastercard as Mastercard, SvgMir as Mir, SvgPaypal as Paypal, SvgUnionpay as Unionpay, SvgVisa as Visa };
}

/**
 * Removes all non-digit characters from a card number
 */
declare function sanitizeCardNumber(cardNumber: string): string;
/**
 * Detects the card type based on the card number using IIN patterns
 */
declare function detectCardType(cardNumber: string): PaymentType;
/**
 * Validates a card number using the Luhn algorithm
 */
declare function validateCardNumber(cardNumber: string): boolean;
/**
 * Formats a card number with appropriate spacing for the detected card type
 */
declare function formatCardNumber(cardNumber: string): string;
/**
 * Validates a card number for a specific card type
 */
declare function validateCardForType(cardNumber: string, cardType: PaymentType): boolean;
/**
 * Gets the expected length range for a card type
 */
declare function getCardLengthRange(cardType: PaymentType): {
    min: number;
    max: number;
} | null;
/**
 * Checks if a card number is potentially valid (correct length and passes basic checks)
 */
declare function isCardNumberPotentiallyValid(cardNumber: string): boolean;
/**
 * Gets a masked version of the card number (shows only last 4 digits)
 */
declare function maskCardNumber(cardNumber: string, maskChar?: string): string;

type SVGComponentProps = {
    width?: number;
    height?: number;
};
declare const categoryMappings: {
    flat: typeof FlatComponents;
    flatRounded: typeof FlatRoundedComponents;
    logo: typeof LogoComponents;
    logoBorder: typeof LogoBorderComponents;
    mono: typeof MonoComponents;
    monoOutline: typeof MonoOutlineComponents;
};
type PaymentType = keyof typeof FlatComponents & keyof typeof FlatRoundedComponents & keyof typeof LogoComponents & keyof typeof LogoBorderComponents & keyof typeof MonoComponents & keyof typeof MonoOutlineComponents;
type PaymentCategory = keyof typeof categoryMappings;
type PaymentTypeExtended = PaymentType | 'Generic' | 'Code';
type PaymentIconProps = {
    type: PaymentType;
    format?: PaymentCategory;
} & SVGProps<SVGSVGElement>;
declare function PaymentIcon(props: PaymentIconProps): JSX.Element;

export { PaymentIcon, type PaymentType, type PaymentTypeExtended, type SVGComponentProps, detectCardType, formatCardNumber, getCardLengthRange, isCardNumberPotentiallyValid, maskCardNumber, sanitizeCardNumber, validateCardForType, validateCardNumber };