Package Exports

react-svg-credit-card-payment-icons
react-svg-credit-card-payment-icons/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-svg-credit-card-payment-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React SVG Card Payment Icons

SVG Credit Card & Payment Icons: 6 Styles, 80 Icons for React ⚛️

A collection of SVG based credit card logo icons. React componnent with Typescript support.

Live Demo

💿 Installation

Install this package:

npm install react-svg-credit-card-payment-icons
# or
yarn add react-svg-credit-card-payment-icons

📦 Usage

import { PaymentIcon } from 'react-svg-credit-card-payment-icons';

....

const App = () => {
  return (
    <PaymentIcon type="visa" format="flatRounded" width={100} />
  );
};

🔧 Card Utilities

As of version 4, the package includes powerful card detection and validation utilities:

import { 
  detectCardType, 
  validateCardNumber, 
  formatCardNumber,
  maskCardNumber,
  isCardNumberPotentiallyValid 
} from 'react-svg-credit-card-payment-icons';

// Detect card type from number
const cardType = detectCardType('4242424242424242'); // Returns 'Visa'

// Validate card number using Luhn algorithm
const isValid = validateCardNumber('4242424242424242'); // Returns true

// Format card number with appropriate spacing
const formatted = formatCardNumber('4242424242424242'); // Returns '4242 4242 4242 4242'

// Mask card number (shows only last 4 digits)
const masked = maskCardNumber('4242424242424242'); // Returns '**** **** **** 4242'

// Check if card number is potentially valid (correct length, etc.)
const isPotentiallyValid = isCardNumberPotentiallyValid('4242424242424242'); // Returns true

Available Utility Functions:

Function	Description	Example
`detectCardType(cardNumber)`	Detects card type from number	`detectCardType('4242...') // 'Visa'`
`validateCardNumber(cardNumber)`	Validates using Luhn algorithm	`validateCardNumber('4242...') // true`
`formatCardNumber(cardNumber)`	Formats with appropriate spacing	`formatCardNumber('4242...') // '4242 4242 4242 4242'`
`maskCardNumber(cardNumber)`	Masks all but last 4 digits	`maskCardNumber('4242...') // '** ** 4242'`
`isCardNumberPotentiallyValid(cardNumber)`	Checks if potentially valid	`isCardNumberPotentiallyValid('4242') // false`
`validateCardForType(cardNumber, type)`	Validates for specific card type	`validateCardForType('4242...', 'Visa') // true`
`getCardLengthRange(cardType)`	Gets min/max length for card type	`getCardLengthRange('Visa') // {min: 13, max: 19}`
`sanitizeCardNumber(cardNumber)`	Removes non-digit characters	`sanitizeCardNumber('4242-4242') // '42424242'`

Complete Example with Card Input:

import React, { useState } from 'react';
import { 
  PaymentIcon, 
  detectCardType, 
  validateCardNumber, 
  formatCardNumber 
} from 'react-svg-credit-card-payment-icons';

function CardInput() {
  const [cardNumber, setCardNumber] = useState('');
  const cardType = detectCardType(cardNumber);
  const isValid = validateCardNumber(cardNumber);

  return (
    <div>
      <input
        type="text"
        value={cardNumber}
        onChange={(e) => setCardNumber(e.target.value)}
        placeholder="Enter card number"
      />
      <PaymentIcon type={cardType} width={40} />
      <div>Type: {cardType}</div>
      <div>Valid: {isValid ? 'Yes' : 'No'}</div>
      <div>Formatted: {formatCardNumber(cardNumber)}</div>
    </div>
  );
}

Types and Formats

Available `types` and their images:

If the type does not exist, the default setting is generic.

Type	Image
`alipay`
`amex`
`diners`
`discover`
`elo`
`hiper`
`hipercard`
`jcb`
`maestro`
`mastercard`
`mir`
`paypal`
`unionpay`
`visa`
`generic`
`code`
`codefront`

Images from aaronfagan/svg-credit-card-payment-icons

Available `formats`:

If the format is not specified, the default setting is flat.

Format	Image
`flat`
`flatRounded`
`logo`
`logoBorder`
`mono`
`monoOutline`

Specify either width or height; there's no requirement to define both. The aspect ratio is preset at 780:500 for SVGs. If neither width nor height is defined, width will default to 40.
The component also allows all the properties (props) of the Svg component, including attributes like style.
If an invalid type is provided, the default setting is generic.

react-svg-credit-card-payment-icons