Card

Credit / debit card number. Type is detected from Visa, Mastercard, Amex, and Troy BINs; the mask switches automatically for Amex.

← All examples·card

Preview

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ card: string }>()
  const { card } = useViraMask({
    form,
    schema: { card: "card" },
  })
 
  const { rawValue, ...inputProps } = card
 
  return <input {...inputProps} placeholder="0000 0000 0000 0000" />
}

Details

Mask: 9999 9999 9999 9999
Preset: "card"
Built-in validator: 'luhn' Produces a form error when an invalid value is entered.
Numbers starting with 34/37 use the Amex mask (4-6-5).
The form value is unmasked raw digits.
Listen for visa / mastercard / amex / troy with onCardTypeChange.

Customization

Listen for card type

Show card type in the UI based on BIN.

{ preset: "card", onCardTypeChange: (type) => console.log(type) }

See useViraMask() for the hook API and custom mask for custom masks.