credit-cards-inputs
v1.1.9
Published
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 fu
Downloads
101
Readme
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.
Table of Contents
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:
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:
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:
voidExample
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:
voidExample
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.