💳 react-kredi-karti

Türkiye'deki React geliştiricileri için özel olarak tasarlandı. Mevcut kredi kartı bileşeni paketlerinde Türk bankası desteği, Türkçe etiketler ve yerel banka temaları bulunmuyordu — bu paket o boşluğu dolduruyor.

🤔 Neden Bu Paket?

| | react-credit-cards | react-kredi-karti | |---|---|---| | Banka teması | ❌ Yok | ✅ 15+ Türk bankası | | Dil | 🇬🇧 İngilizce | 🇹🇷 Türkçe | | Hazır form | ❌ Yok | ✅ Banka seçimi dahil | | CSS gereksinimi | Ayrı import gerekir | ✅ Otomatik | | Bakım | ⚠️ Uzun süredir güncellenmedi | ✅ Aktif |

Kullanım Alanları

• 🛒 E-ticaret siteleri — Ödeme sayfasında kart bilgisi girişi
• 🏦 Fintech uygulamaları — Kart ekleme/yönetme ekranları
• 📊 Bankacılık dashboardları — Kullanıcı kartlarını görsel gösterme
• 🔄 Abonelik / SaaS — Ödeme yöntemi ekleme

Kurulum

npm install react-kredi-karti

🚀 En Kolay Kullanım (3 satır)

Kendi formunuzla uğraşmak istemiyorsanız, hazır formu kullanın:

import { CreditCardForm } from 'react-kredi-karti';

function OdemeSayfasi() {
  return (
    <CreditCardForm
      onSubmit={(data) => {
        console.log(data);
        // { cardNumber, holderName, expiryMonth, expiryYear, cvc, bankKey }
      }}
    />
  );
}

Bu kadar. CSS import'u gerekmez, stiller otomatik yüklenir. Banka seçimi, input maskeleme ve kart önizlemesi dahildir.

🎨 Kendi Formunla Kullanım

Kendi formunuzu tasarlayıp, kartı sadece önizleme olarak kullanabilirsiniz:

import { useState } from 'react';
import CreditCard from 'react-kredi-karti';

function OdemeSayfasi() {
  const [kart, setKart] = useState({
    number: '', name: '', expiry: '', cvc: '', focus: '',
  });

  const degistir = (e) => setKart({ ...kart, [e.target.name]: e.target.value });
  const odakla = (e) => setKart({ ...kart, focus: e.target.name });

  return (
    <div>
      <CreditCard
        number={kart.number}
        name={kart.name}
        expiry={kart.expiry}
        cvc={kart.cvc}
        focused={kart.focus}
      />

      <form>
        <input name="number" placeholder="Kart Numarası" onChange={degistir} onFocus={odakla} maxLength={16} />
        <input name="name" placeholder="Ad Soyad" onChange={degistir} onFocus={odakla} />
        <input name="expiry" placeholder="AAYY" onChange={degistir} onFocus={odakla} maxLength={4} />
        <input name="cvc" placeholder="CVC" onChange={degistir} onFocus={odakla} maxLength={3} />
      </form>
    </div>
  );
}

🏦 Banka Teması Kullanımı

import CreditCard, { THEMES } from 'react-kredi-karti';

<CreditCard
  number="5312345678901234"
  name="AHMET YILMAZ"
  expiry="1228"
  cvc="123"
  theme={THEMES.garanti}  // veya: ziraat, akbank, isbank, yapikredi...
/>

Desteklenen bankalar: Ziraat, Garanti BBVA, İş Bankası, Akbank, Yapı Kredi, VakıfBank, Halkbank, QNB Finansbank, DenizBank, HSBC, ING, TEB, Kuveyt Türk, Türkiye Finans, Şekerbank

💰 Ödeme Entegrasyonu (iyzico / PayTR)

Bu paket UI bileşenidir — kart bilgilerini toplar ve güzel görsel sunar. Ödeme işlemi için iyzico, PayTR gibi servislerin backend API'lerini kullanırsınız.

iyzico ile Kullanım

import { CreditCardForm } from 'react-kredi-karti';

function OdemeSayfasi({ sepetTutari }) {
  const odemeYap = async (kartBilgileri) => {
    // kartBilgileri: { cardNumber, holderName, expiryMonth, expiryYear, cvc }
    const res = await fetch('/api/iyzico/odeme', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        ...kartBilgileri,
        tutar: sepetTutari,
      }),
    });

    const sonuc = await res.json();
    if (sonuc.status === 'success') {
      window.location.href = '/odeme-basarili';
    }
  };

  return <CreditCardForm onSubmit={odemeYap} />;
}

Backend tarafı (Node.js + iyzico):

// /api/iyzico/odeme  (Express.js örneği)
const Iyzipay = require('iyzipay');

const iyzipay = new Iyzipay({
  apiKey: process.env.IYZICO_API_KEY,
  secretKey: process.env.IYZICO_SECRET_KEY,
  uri: 'https://sandbox-api.iyzipay.com',
});

app.post('/api/iyzico/odeme', (req, res) => {
  const { cardNumber, holderName, expiryMonth, expiryYear, cvc, tutar } = req.body;

  const request = {
    locale: Iyzipay.LOCALE.TR,
    price: tutar,
    paidPrice: tutar,
    currency: Iyzipay.CURRENCY.TRY,
    paymentCard: {
      cardHolderName: holderName,
      cardNumber: cardNumber,
      expireMonth: expiryMonth,
      expireYear: expiryYear,
      cvc: cvc,
    },
    // ... buyer, address, basketItems
  };

  iyzipay.payment.create(request, (err, result) => {
    res.json(result);
  });
});

PayTR ile Kullanım

import { CreditCardForm } from 'react-kredi-karti';

function OdemeSayfasi() {
  const odemeYap = async (kartBilgileri) => {
    const res = await fetch('/api/paytr/odeme', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(kartBilgileri),
    });

    const { token } = await res.json();
    // PayTR iframe ile 3D Secure yönlendirmesi
    window.location.href = `https://www.paytr.com/odeme/guvenli/${token}`;
  };

  return <CreditCardForm onSubmit={odemeYap} />;
}

⚠️ Güvenlik Notu: Kart bilgilerini backend'e HTTPS üzerinden gönderin. PCI DSS uyumluluğu gerektiren projelerde iyzico/PayTR'nin kendi SDK veya iframe çözümlerini tercih edin. Bu durumda <CreditCard /> bileşenini yalnızca görsel önizleme olarak kullanabilirsiniz.

API Referansı

<CreditCard /> Props

| Prop | Tip | Açıklama | |---|---|---| | number | string | Kart numarası | | name | string | Kart üzerindeki isim | | expiry | string | Son kullanma tarihi (AAYY veya AA/YY) | | cvc | string | Güvenlik kodu | | focused | string | Odaklanılan alan: number, name, expiry, cvc | | theme | object | Banka teması (opsiyonel) |

<CreditCardForm /> Props

| Prop | Tip | Açıklama | |---|---|---| | onSubmit | (data) => void | Form gönderildiğinde çağrılır | | onCancel | () => void | İptal butonuna tıklandığında çağrılır (opsiyonel) | | texts | object | Form etiketlerini özelleştirme (opsiyonel) |

{
  header: 'Ödeme Bilgileri',
  step: 'Ödeme',
  stepNumber: '5',
  bankSelectLabel: 'Banka Seçimi',
  holderNameLabel: 'Kart Üzerindeki İsim',
  cardNumberLabel: 'Kart Numarası',
  expiryDateLabel: 'Son Kullanma Tarihi',
  cvcLabel: 'CVC',
  cancelButton: 'İptal',
  submitButton: 'Ödemeyi Tamamla',
  bankDefaultOption: 'Diğer Bankalar / Varsayılan'
}

Tema Anahtarları

ziraat · garanti · isbank · akbank · yapikredi · vakifbank · halkbank
qnb · denizbank · hsbc · ing · teb · kuveyt · turkiyeFinans · sekerbank

react-credit-cards'dan Geçiş

API uyumludur, aynı prop isimleri çalışır — sadece paket adını değiştirin:

- import Cards from 'react-credit-cards';
- import 'react-credit-cards/es/styles-compiled.css';
+ import CreditCard from 'react-kredi-karti';

Lisans

MIT