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.
-
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:
-
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)
- 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>- 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";- 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,
});-
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 cardTypestringmatched card type codeNamestringCard 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 invalideRecord<keyof Inputs, boolean>validation status for each input
-
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,
},
});-
Parameters:
Name Type Description typecardTypes | stringcard 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",
},
});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.