Credit Card Number Formatter
EverydayFormat raw card numbers into XXXX XXXX XXXX XXXX with masking options. Supports Visa, Mastercard, Amex, and Diners — in-browser, no data uploaded anywhere.
What is a Card Number?
The Credit Card Number Formatter takes raw payment card digit sequences — entered with or without spaces, hyphens, or other separators — and outputs them in the standard grouped display format used on physical cards, receipts, and payment interfaces. It also applies masking to produce partially or fully anonymised display strings for UI mockups, reports, and developer documentation.
The most common format is XXXX XXXX XXXX XXXX — four groups of four digits separated by spaces, used by Visa, Mastercard, Discover, and India's RuPay network. American Express uses a different grouping: XXXX XXXXXX XXXXX (4-6-5), while Diners Club uses XXXX XXXXXX XXXX (4-6-4). The formatter auto-detects Amex and Diners from the leading digits, and defaults to 4-4-4-4 for everything else.
This tool is designed for:
- UI/UX mockups where placeholder card numbers need realistic formatting
- Developer testing with published test card numbers (e.g. 4111111111111111)
- Documentation where formatted card numbers illustrate form field behaviour
- Masking for receipts, transaction logs, and customer-facing displays showing only the last 4 digits
It is not designed for processing real cardholder data in a web tool. For Luhn algorithm validation and card network detection, use the Credit Card Validator.
All formatting is client-side. Your input is never transmitted to any server, stored, or logged. The page works offline once loaded.
How to use this Card Number calculator
- Paste card numbers into the "Card Number(s)" textarea — one per line. Input may be raw digits, hyphen-separated, or space-separated.
- Select the card type — use "Auto-detect" for most cases; override to "American Express" or "Diners Club" if auto-detect is producing the wrong grouping.
- Choose a masking option — "Show all digits" for full display, "Show last 4 only" for receipt-style, "Show first 6 and last 4" for BIN-preserving display, or "Mask all digits" for mockups.
- Review the output in the "Formatted Card Number(s)" panel — valid cards are formatted instantly; invalid inputs (wrong digit count) show an error per line.
- Click the copy button to copy all formatted card numbers to your clipboard.
- Validate with the Credit Card Validator if you also need to confirm Luhn checksum validity — use the Credit Card Validator as a follow-up step.
Formula & Methodology
Auto-detection rules (applied to raw digits before grouping): | Prefix pattern | Network | Format | Typical digit count | |---|---|---|---| |34,37| American Express | 4-6-5 | 15 | |300–305,36,38| Diners Club | 4-6-4 | 14 | | All others | Standard (Visa/MC/Discover/RuPay) | 4-4-4-4 | 16 | Grouping algorithm: - Standard (4-4-4-4): Split every 4 characters:digits.match(/.{1,4}/g)?.join(' ')- Amex (4-6-5): Fixed slices at positions 0–4, 4–10, 10–15 - Diners (4-6-4): Fixed slices at positions 0–4, 4–10, 10–14 Masking algorithm (applied before grouping, operating on raw digits): - last4:'#'.repeat(len - 4) + digits.slice(-4)- first6last4:digits.slice(0, 6) + '#'.repeat(len - 10) + digits.slice(-4)- full:'#'.repeat(len)Before/after example: | Raw Input | Card Type | Mask | Output | |---|---|---|---| |4111111111111111| Auto (Visa) | None |4111 1111 1111 1111| |4111111111111111| Auto (Visa) | Last 4 |#### #### #### 1111| |378282246310005| Auto (Amex) | None |3782 822463 10005| |378282246310005| Auto (Amex) | First 6 + Last 4 |378282 ###### 0005| |5500005555555559| Auto (MC) | First 6 + Last 4 |550000 ###### 5559| For background on the underlying term, see our glossary entry on Credit Card.
Frequently Asked Questions
A Credit Card Number Formatter takes raw payment card digits — with or without separators — and outputs them in a standard grouped format for display purposes. The most common format is XXXX XXXX XXXX XXXX (four groups of four digits, space-separated), used by Visa, Mastercard, and Discover. American Express uses a 4-6-5 grouping (XXXX XXXXXX XXXXX), and Diners Club uses 4-6-4. This formatter is designed for UI mockups, developer testing, and documentation — not for transmitting real cardholder data.
Most cards (Visa, Mastercard, Discover, RuPay) use 16 digits displayed in four groups of four: XXXX XXXX XXXX XXXX. American Express cards have 15 digits displayed as XXXX XXXXXX XXXXX (4-6-5 grouping). Diners Club cards have 14 digits displayed as XXXX XXXXXX XXXX (4-6-4). The formatter auto-detects Amex (starts with 34 or 37) and Diners Club (starts with 300–305, 36, or 38) from the first few digits.
The masking option replaces some or all digits with # characters for display-safe output. 'Show last 4 only' produces #### #### #### 1234 — the most common format shown to cardholders after a purchase. 'Show first 6 and last 4' shows the bank identification number (BIN) and last 4: 411111 ###### 1234. 'Mask all digits' replaces every digit with # for fully anonymised display in mockups or reports.
The BIN (Bank Identification Number), also called the Issuer Identification Number (IIN), is the first 6 to 8 digits of a payment card number. It identifies the card network (Visa, Mastercard, Amex, RuPay), the issuing bank, and the card type (credit, debit, prepaid). The 'Show first 6 and last 4' masking option preserves the BIN, which is useful when you need to identify the card issuer without exposing the full account number.
Auto-detect reads the first two digits to determine the card network. Cards starting with 34 or 37 are American Express (4-6-5 grouping, 15 digits). Cards starting with 300–305, 36, or 38 are Diners Club (4-6-4 grouping, 14 digits). All other cards — Visa (starts with 4), Mastercard (starts with 51–55 or 2221–2720), Discover (starts with 6011 or 65), and RuPay (starts with 60) — use the standard 4-4-4-4 grouping.
Yes — paste one card number per line and all will be formatted simultaneously with the same settings. Each line is processed independently: digits are extracted, the card type is detected (or overridden), the mask is applied, and the groups are inserted. Lines that produce fewer than 12 or more than 19 digits are flagged with an individual error message, leaving the other lines unaffected.
All formatting happens entirely in your browser — no data is sent to any server or stored anywhere. However, best practice is to use test card numbers (published by payment processors for development testing) rather than real cardholder data in any web-based tool. Test numbers like 4111111111111111 (Visa test) and 378282246310005 (Amex test) behave identically to real cards for formatting purposes and carry zero financial risk.
No — this formatter only applies display formatting and masking. It does not run the Luhn algorithm or check whether the number is a legitimately issued card. For Luhn-based validation and network detection with BIN-range checking, use the [Credit Card Validator](/credit-card-validator/).
Paste one or more card numbers into the input area, one per line. Select 'Auto-detect' for card type (or override to Amex or Diners if needed). Choose a masking option — 'Show all digits' for full display, 'Show last 4 only' for receipt-style output, or 'Show first 6 and last 4' for BIN-preserving display. The formatted results appear instantly. Click the copy button to copy all formatted numbers.
The formatter supports Visa, Mastercard, Discover, and RuPay (all use standard 4-4-4-4 grouping for 16-digit cards), American Express (4-6-5 grouping for 15-digit cards), and Diners Club (4-6-4 grouping for 14-digit cards). For any card not matching Amex or Diners detection patterns, the formatter defaults to the standard 4-digit grouping, which is correct for the vast majority of cards.
A formatter applies a display pattern (grouping and masking) to raw digit input without assessing correctness. A validator checks whether the number passes the Luhn algorithm checksum and whether the digit count and prefix match a legitimate card network's issuance rules. Formatting and validation are complementary: format first for display, then validate before accepting the number as input in a payment flow. Use the [Credit Card Validator](/credit-card-validator/) for validation.
Also known as