credit-cards-inputs

credit-cards-inputs is a vanilla JavaScript lightweight utility designed to handle the validation, formatting, and user-friendly input of credit card information. While primarily built with vanilla JavaScript, this library leverages two other specialized libraries to enhance functionality. It's ideal for enhancing payment forms with automatic card type detection, input masking, real-time validation, and card number formatting.

Key features
Getting started
Basic exmaple & Live demo
- Basic example
- Live demo
API Reference
Supported input types

Key features

Card Type Detection: Automatically detect and display the credit card brand (e.g., Visa, MasterCard, AmEx) based on the entered card number. This is typically done using a specific patterns (see).
Input Formatting: The library formats the card number into groups (e.g., 1234 5678 9012 3456), expiration date as MM/YY, and the CVC/CVV field. It applies real-time input masking to help users enter the data correctly.
Validation:
- CVV/CVC and Card number: done using.
- expDate: done using.
Input Restrictions: Limit the input to numbers only for the credit card field, allow specific characters for expiration dates (/), and restrict the length based on the detected card type.
Styling: Allow customizable styles to seamlessly integrate with different website themes. Provide pre-built styles for error states (e.g., invalid card number)

Getting Started (Using a CDN)

Add the CSS

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/credit-cards-inputs@latest/dist/assets/styles.css"
/>

Add the library script

<script src="https://cdn.jsdelivr.net/npm/credit-cards-inputs@latest/dist/credit-cards-inputs.umd.js"></script>

Getting Started (Using ESM modules)

Install with npm:

  //npm
  npm install credit-cards-inputs

  //yarn
  yarn add credit-cards-inputs

  //pnpm
  pnpm add credit-cards-inputs

Import the CSS:

import "credit-cards-inputs/dist/assets/styles.css";

Import the js:

import { CreditCardsInputs } from "credit-cards-inputs";

Basic example & Live demo

Basic example

Using a CDN

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/credit-cards-inputs@latest/dist/assets/styles.css"
  />
</head>
<body>
  <input type="text" id="cardNumberInput" />
  <input type="text" id="cvvInput" />
  <input type="text" id="expinput" />
</body>
<script src="https://cdn.jsdelivr.net/npm/credit-cards-inputs@latest/dist/credit-cards-inputs.umd.js"></script>
<script>
  const cardNumberInput = document.getElementById("cardNumberInput");

  const cvvInput = document.getElementById("cvvInput");

  const expInput = document.getElementById("expinput");

  const inputs = new CCI.CreditCardsInputs({
    cardNumberInput,
    cvvInput,
    expInput,
  });
</script>

Using ESM modules

import { CreditCardsInputs } from "credit-cards-inputs";
import "credit-cards-inputs/dist/assets/styles.css";

const cardNumberInput = document.getElementById("cardNumberInput");

const cvvInput = document.getElementById("cvvInput");

const expInput = document.getElementById("expinput");

const inputs = new CreditCardsInputs({
  cardNumberInput,
  cvvInput,
  expInput,
});

Live demo:

demo

API Reference

new CreditCardsInputs(inputs: Inputs, options: Options) initialize CreditCardInputs with the following:

Parameters:

Name	Type	Description
`inputs`	`{` `cardNumberInput: HTMLInputElement;` `cvvInput: HTMLInputElement;` `expInput:HTMLInputElement` `}`	inputs to apply masking and validation on
`options`	`{` `customErrors: Record<keyof Inputs, string>;` `customIcons: Record<cardTypes, string>;` `}`	optional custom errors to show if the given card number doesn't match one of the card lengths and custom icon to show for the given card type

Return:

Name	Type	Description
`cardType`	`string`	matched card type
`codeName`	`string`	Card brands provide different nomenclature for their security codes as well as varying lengths see. you can use it as a label for the code input
`invalide`	`Record<keyof Inputs, boolean>`	validation status for each input

addNewCard(config: config) add a new card type with the following:

Parameters:

Name	Type	Description
`config`	`{` `niceType: string;` `type: string;` `patterns: number[];` `gaps: number[];` `lengths: number[];` `code: { name: string; size: number };` `}`	card type configuration see

Return: void
Example

import { addNewCard } from "credit-cards-inputs";

addNewCard({
  niceType: "Fancy card",
  type: "fancy card",
  patterns: [41111],
  gaps: [4, 8, 12],
  lengths: [13, 16, 19],
  code: {
    name: "CVV",
    size: 3,
  },
});

updateCard(type: cardTypes | string, options: Partial<Pick<ReturnType<typeof creditCardType>[number], "type" | "code" | "gaps">>) update the card type with the following:

Parameters:

Name	Type	Description
`type`	`cardTypes \| string`	card type to update
`options`	`{` `type?: string;` `code?: Partial<Pick<ReturnType<typeof creditCardType>[number], "type" \| "code" \| "gaps">>;` `gaps?: number[];` `}`	optional card type options see

Return: void
Example

import { updateCard } from "credit-cards-inputs";

updateCard("visa", {
  code: {
    name: "test",
  },
});

Supported input types

Please note that Text Mask supports input type of text, tel, url, password, and search. Due to a limitation in browser API, other input types, such as email or number, cannot be supported. However, it is normal to let the user enter an email or a number in an input type text combined the appropriate input mask.