Kartla ödeme

Projene ekle

Komut yalnızca modülü kurar; sayfa senin kararın. Seçimlerine göre prompt ve sayfa kodu hazırlanır.

ViraStack Start projeme checkout-card modülünü ekle.

1. Proje kökünde `npx virastack add checkout-card` komutunu çalıştır. Bu komut yalnızca `src/features/checkout-card` klasörünü ve paketleri kurar, sayfa oluşturmaz. Çakışma hatası alırsan hiçbir dosyayı silme, durumu bana bildir.
2. Projenin Next.js kullandığını `package.json` ve klasör yapısından doğrula. Uyuşmuyorsa dur ve bana sor.
3. `src/app/checkout-card/page.tsx` dosyasını aşağıdaki kodla oluştur. Dosya zaten varsa üzerine yazma, `CheckoutCard` bileşenini var olan sayfaya ekle.

```tsx
import { CheckoutCard } from "@/features/checkout-card/components/CheckoutCard"

export default function Page() {
  return (
    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-6 sm:px-6">
      <CheckoutCard />
    </main>
  )
}
```

4. API adresimi verdiysem adresi Next.js'te `NEXT_PUBLIC_API_URL`, TanStack Start'ta `VITE_API_URL` değişkenine yaz. Yanıt biçimi farklıysa `src/features/checkout-card` içinde gereken yerleri uyarla.
5. Projenin paket yöneticisiyle `typecheck`, `test` ve `lint:ci` script'lerini çalıştır, sonucu bildir.

Modülde neler var?

• Ekranda yalnızca seçili kart görünür; Değiştir düğmesi kayıtlı kartları popup'ta listeler. Kayıtlı kart düzenlenmez, yeni kart eklenir. Başlangıçtaki kartlar iyzico sandbox test kartlarının son dört hanesini kullanır.
• Kart formu React Hook Form, Zod ve shadcn/ui kullanır. ViraStack Mask kart üzerindeki adı biçimlendirir, kart numarasını Luhn ile doğrular, son kullanma tarihinin geçmediğini kontrol eder; CVV kart ağına göre 3 ya da 4 hane olur.
• Kart numarası ve CVV network'e çıkmaz. tokenizeCard tarayıcıda dummy token üretir; istek yalnızca token, marka, son dört hane, son kullanma ay ve yılı ile kart üzerindeki adı taşır; alan adları iyzico Kart Saklama modelinden gelir. Seçimi Zustand tutar, useCheckoutCard hook'u siparişe hazır veriyi döndürür.
• Testlerde Vitest, Testing Library ve MSW kullanılır; 2 test dosyası hazır gelir.

Projene neler iner?

Yukarıdaki seçimlerine göre npx virastack add checkout-card şu dosyaları projene ekler.

Sayfa oluşturulmaz; modülü yukarıdaki adımlarla kendi sayfana eklersin.

Nasıl kullanırsın?

Ödeme sağlayıcına geçiş

tokenize-card.ts içinde ödeme sağlayıcının SDK'sını çağır. API adresini .env.local dosyasında Next.js'te NEXT_PUBLIC_API_URL, TanStack Start'ta VITE_API_URL değerine, kart yolunu CARDS_PATH değerine yaz. get-cards.api.ts şimdilik dummy kartları döndürür, onu isteğe çevir; save-card.api.ts dosyasını kendi API'ne göre değiştir. Kart numarasını ve CVV'yi sunucuna gönderme.

Kod artık senin

Modül projene kopyalanır, bir pakete bağlı kalmazsın. İstediğin gibi değiştirirsin; istemezsen npx virastack remove checkout-card ile kaldırırsın.

Aynı alandaki modüller

• Teslimat ve fatura adresi

  Seçili adres ekranda görünür; adres listeleme, ekleme ve düzenleme popup'ta yapılır. Teslimat ve fatura adresi ayrı seçilebilir.