Kart Numarası

card hazır ayarı kredi kartı numaralarını biçimlendirir. Visa, Mastercard, American Express, Troy ve diğerleri dahil olmak üzere tüm standart kredi kartlarını destekler.

Otomatik olarak:

Luhn algoritmasını kullanarak numarayı doğrular.
American Express kartlarını (34 veya 37 ile başlayan) algılar ve 4-6-5 formatına (9999 999999 99999) geçer.
Kart logolarını görüntülemek için kullanabileceğiniz kart türünü (Visa, Mastercard, Amex, Troy vb.) algılar.

Ham Değer

Görünen Değer


import { useViraMask } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
 
const form = useForm();
const { cardNumber } = useViraMask({
  form,
  schema: { cardNumber: 'card' },
});
 
<input {...cardNumber} />

Özelleştirme

Kart Türü Algılama

Kart türünü algılamak ve ilgili logoyu görüntülemek için onCardTypeChange geri aramasını kullanabilirsiniz. Desteklenen türler şunlardır: 'visa' | 'mastercard' | 'amex' | 'troy' | 'unknown'.

Not: Bu özellik, yaygın BIN (Banka Kimlik Numarası) aralıklarına dayalı temel bir algılama mekanizması kullanır. Tüm yeni kart serilerini veya belirli banka aralıklarını (örn. tüm Troy varyasyonları) kapsamayabilir. Kesin doğrulama için Ödeme Ağ Geçidi API yanıtlarınıza güvenin.

Tespit Edilen Tür unknown


import { useState } from 'react';
import { useViraMask } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
 
export function CardTypeDemo() {
  const [cardType, setCardType] = useState('unknown');
  const form = useForm();
  
const { cardNumber } = useViraMask({
  form,
  schema: {
    cardNumber: {
      preset: 'card',
      onCardTypeChange: (type) => setCardType(type),
    },
  },
});
 
return (
  <div>
    <label>Kart Numarası</label>
    <div className="relative">
      <input {...cardNumber} />
      <span className="absolute right-2 top-2 text-sm font-bold">
        {cardType !== 'unknown' && cardType}
      </span>
    </div>
  </div>
);
}

Doğrulamayı Devre Dışı Bırak

Varsayılan Luhn algoritması doğrulamasını devre dışı bırakmak isterseniz (örn. test amacıyla veya doğrulamayı sunucuda işlemek için), validate: false olarak ayarlayabilirsiniz.

Ham Değer

Görünen Değer


import { useViraMask } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
 
const form = useForm();
const { cardNumber } = useViraMask({
  form,
  schema: {
    cardNumber: {
      preset: 'card',
      validate: false, // Luhn doğrulamasını devre dışı bırakır
    },
  },
});
 
<input {...cardNumber} />

Özel Doğrulayıcı

Kendi doğrulayıcı işlevinizi sağlayabilirsiniz. Örneğin, Luhn algoritmasını kullanmaya devam ederken yalnızca Visa kartlarını (4 ile başlayan) kabul etmek için:

Ham Değer

Görünen Değer


import { useViraMask, validateLuhn } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
 
const form = useForm();
const { cardNumber } = useViraMask({
  form,
  schema: {
    cardNumber: {
      preset: 'card',
      validator: (value) => {
        // Özel kural: 4 ile başlamalıdır (Visa)
        if (!value.startsWith('4')) return false;
        
        // İsteğe bağlı: Standart Luhn kontrolünü de çalıştırın
        return validateLuhn(value);
      },
    },
  },
});
 
<input {...cardNumber} />
{form.formState.errors.cardNumber && <span>Geçersiz Visa Kartı</span>}