Credit Card

ViraStack Mask’s card preset automatically detects American Express cards. If the number starts with 34 or 37, the mask switches to the 4-6-5 format (9999 999999 99999) and the CVV mask automatically switches to 4 digits. Otherwise, it uses the standard 16-digit format and 3-digit CVV.


import { useViraMask } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
 
const form = useForm();
const { cardNumber, expiry, cvv } = useViraMask({
  form,
  schema: {
    cardNumber: 'card',
    expiry: 'expiry',
    cvv: 'cvv',
  },
});
 
// Card-style layout
<form>
  <div>
    <label>Credit Card Number</label>
    <input {...cardNumber} placeholder="4532 1234 5678 9012" />
  </div>
  <div>
    <div>
      <label>Expiration Date</label>
      <input {...expiry} placeholder="12/26" />
    </div>
    <div>
      <label>CVV</label>
      <input {...cvv} placeholder="123" />
    </div>
  </div>
</form>