Home›Formatters›Everyday›Credit Card Number Formatter

Credit Card Number Formatter

Everyday

Format raw card numbers into XXXX XXXX XXXX XXXX with masking options. Supports Visa, Mastercard, Amex, and Diners — in-browser, no data uploaded anywhere.

Reviewed by the thecalcu.com team · Last updated July 31, 2026

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.

Why Use a Credit Card Number Formatter?

Payment card numbers appear in raw digit form in test data, CSV exports, and legacy database columns. Manually inserting spaces at the correct positions, position 4, 8, 12 for a standard card; position 4 and 10 for Amex, across a set of test numbers is error-prone and inconsistent.

Developer use case: A front-end engineer building a checkout UI needs 15 realistic-looking formatted test card numbers for a Figma mockup. Rather than hand-spacing each one, they paste the raw test numbers, select the mask, and copy formatted output directly into the design file.

QA use case: A test engineer documenting card-payment test cases needs formatted and masked card numbers in a test report, full number for the developer, last-4 only for the test evidence screenshot. The formatter produces both outputs by changing the masking dropdown.

Who Should Use This Formatter?

Front-end and mobile developers building payment forms or checkout flows who need formatted test card numbers for UI states (empty, filled, error, success). Published test numbers from Stripe, Razorpay, and PayU are in raw form, paste them, format them, copy them into code or designs.

UX designers creating card payment mockups in Figma, Sketch, or Adobe XD who need realistically formatted card numbers with appropriate masking. The last-4 masking option (#### #### #### 1234) matches the display standard used on receipts and account statements.

Technical writers documenting payment integrations who need card number examples with correct grouping for API docs, tutorials, and integration guides. The Number Formatter handles other numeric display needs.

QA and compliance teams preparing test evidence or audit documents where full card numbers cannot appear, the first-6-last-4 or full-mask options produce compliant display strings.

Indian fintech developers building products for RuPay, Visa, or Mastercard acceptance who need to display formatted card numbers in transaction confirmations, statements, or customer-facing dashboards.

What Insights Does the Credit Card Number Formatter Give You?

Auto-detect feedback: The formatter identifies Amex (4-6-5) and Diners (4-6-4) cards from their prefixes, applying the correct grouping automatically. A 15-digit number starting with 37 correctly produces XXXX XXXXXX XXXXX, while a 16-digit Visa produces XXXX XXXX XXXX XXXX.

Masking options and their uses:

  • Show all digits: Full display for developer testing and documentation where no real data is involved.
  • Show last 4 only (#### #### #### 1234): Standard receipt and account statement format, confirms which card was charged without revealing the account number.
  • Show first 6 and last 4 (411111 ###### 1234): Preserves the BIN for issuer identification while masking the account number, used in dispute and chargeback processes.
  • Mask all digits (#### #### #### ####): Fully anonymised placeholder for UI mockups where no digits should be visible.

How to use this Card Number calculator

  1. Paste card numbers into the "Card Number(s)" textarea, one per line. Input may be raw digits, hyphen-separated, or space-separated.
  2. 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.
  3. 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.
  4. 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.
  5. Click the copy button to copy all formatted card numbers to your clipboard.
  6. 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.
Show formula & methodology ↓Show less ↑

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

What is a Credit Card Number Formatter?
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.
What is the standard credit card number format?
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.
What does the masking option do?
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.
What is BIN (Bank Identification Number)?
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.
How does the auto-detect work?
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.
Can I format multiple card numbers at once?
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.
Is it safe to use this tool with real card numbers?
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.
Does this formatter validate the card number?
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/).
How do I use the Credit Card Number Formatter?
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.
What card networks does this formatter support?
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.
What is the difference between a Credit Card Number Formatter and Validator?
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
format credit card numbercard number formattermask credit card numberXXXX XXXX XXXX XXXX formattercredit card display format