💳 Ödeme Sayfası Tasarım Draft'ları

Minimal header/footer, fiyat ve ödeme odaklı, otomatik iframe height

📅 13 Aralık 2025 🎯 Tenant: ixtif.com
1

Ultra Minimal

Önerilen

Sadece logo, fiyat ve iframe. Dikkat dağıtıcı hiçbir şey yok.

İXTİF
Toplam Tutar
1.250,00 ₺

PayTR Güvenli Ödeme Formu

Otomatik yükseklik (iframe resize)

256-bit SSL 3D Secure

✅ Avantajlar:

  • • Maksimum odak ödemeye
  • • Hızlı yükleme
  • • Mobilde mükemmel
  • • Dikkat dağıtmaz
2

Güven Odaklı (Dark Theme)

Koyu tema, güvenlik badge'leri, profesyonel görünüm.

İXTİF

Güvenli Ödeme

Ödenecek Tutar
1.250,00 ₺

PayTR Güvenli Ödeme Formu

SSL Şifreleme
3D Secure
Banka Onaylı

⚡ Avantajlar:

  • • Profesyonel ve güvenilir
  • • Dark mode destekli
  • • Güvenlik vurgusu

⚠️ Dezavantajlar:

  • • PayTR iframe'i light theme - kontrast olabilir
3

Clean Modern (Sipariş Özeti)

Sol tarafta sipariş özeti, sağda ödeme formu. Desktop'ta 2 kolon.

İXTİF
Sepete Dön

Sipariş Özeti

Elektrikli Forklift EF-2000

Adet: 1

1.150,00 ₺

Ara Toplam 1.150,00 ₺
Kargo 100,00 ₺
Toplam 1.250,00 ₺

Ödeme Bilgileri

PayTR Güvenli Ödeme

256-bit SSL 3D Secure 7/24 Destek

✅ Avantajlar:

  • • Sipariş detayı görünür (güven artırır)
  • • Desktop'ta kullanışlı
  • • Sepete dön linki var

⚠️ Dezavantajlar:

  • • Mobilde tek kolon olur
  • • Daha fazla bilgi = dikkat dağılabilir

📊 Karşılaştırma

Özellik 1. Ultra Minimal 2. Güven (Dark) 3. Sipariş Özeti
Minimal Header ✅ ✅ ✅
Fiyat Görünür ✅ ✅ ✅
Ödeme Odaklı ⭐⭐⭐ ⭐⭐ ⭐⭐
Mobil Uyumluluk ⭐⭐⭐ ⭐⭐⭐ ⭐⭐
Güven Verici ⭐⭐ ⭐⭐⭐ ⭐⭐⭐
Dikkat Dağıtma Yok Az Orta

💡 Önerim

Draft 1 (Ultra Minimal) öneririm. Sebepleri:

  • ✅ Ödeme sayfasının tek amacı: Ödemeyi tamamlamak
  • ✅ Dikkat dağıtacak hiçbir şey yok
  • ✅ Mobilde mükemmel çalışır
  • ✅ PayTR iframe zaten tüm formu içeriyor
  • ✅ Hızlı yükleme, minimal kod

Sipariş özeti checkout sayfasında zaten görüldü. Ödeme sayfasında tekrar göstermeye gerek yok.

🔧 Teknik Notlar

Auto Iframe Height

PayTR iframe'i postMessage ile yükseklik bildirir. JavaScript listener ekleyerek iframe yüksekliğini otomatik ayarlayacağız.

Responsive

Tüm tasarımlar Tailwind ile responsive. Mobilde tek kolon, desktop'ta gerekli genişlik.

Logo

Header'daki logo helper fonksiyonu ile çekilecek. Şimdilik placeholder icon.

Layout

Standalone layout kullanılacak (themes.ixtif.layouts.minimal veya app layout ile minimal sections).