İçeriğe Geç

PayTR iFrame V2 Ödeme Alanında Mobil Görünüm Sorunları

PayTR iFrame V2 ödeme formunda kesilen alanları, yükseklik değişimini, tema uyumunu ve mobil klavye açıldığında oluşan sorunları değerlendirin.

Yazar: Sorun ve ÇözümPlatforma ÖzelÖdeme ve GüvenlikE-Ticaret
AdPix tarafından hazırlanan açıklayıcı şema.

Ödeme Alanının Sayfaya Yerleşmesi

PayTR iFrame V2, mağazanın ödeme sayfası içinde farklı bir arayüz olarak görüntülenir. Yeni sürüm seçimi token isteğindeki iframe_v2 alanıyla yapılır; görünümün yükseklik uyumu için dokümandaki güncel iframeResizer sürümünün kullanılması gerekir. Eski scriptin kalması geçişin eksik olmasına yol açabilir.

Bu değerlendirmede inceleme yalnızca kart alanının ilk açılışını kapsamaz. Hata mesajı geldiğinde, taksit seçenekleri değiştiğinde ve müşteri başka bir ödeme adımına geçtiğinde formun boyutu da gözlemlenir. İlk ekranda boşluk bırakmayan bir yükseklik, sonraki adımda düğmelerin kesilmesine neden olabilir.

Sabit Yüksekliğin Oluşturduğu Sorun

Mağaza temasındaki kapsayıcı alan sabit ve küçük tutulduğunda iframe içeriği tam görünmeyebilir. İçerideki formun doğru yüklenmesi bu dış sınırlamayı ortadan kaldırmaz. Benzer biçimde taşmayı gizleyen bir stil, hata açıklamasını müşterinin göremediği alana taşıyabilir.

Örneğin kart bilgisi geçersiz olduğunda yeni bir uyarı satırı oluşur. Ödeme düğmesi bu satırın altında kalıyorsa kullanıcı işlemin neden durduğunu anlayamayabilir. AdPix’in önerisi kapsayıcı alanı, boyutlandırma scriptini ve formun farklı durumlarını birlikte incelemektir. Sorun iframe içinde gibi görünse bile asıl neden mağazanın ödeme sayfasındaki CSS olabilir.

Mobil Klavye ve Kaydırma

Telefon klavyesi açıldığında kullanılabilir ekran yüksekliği azalır. Sabit alt çubuk, canlı destek düğmesi veya çerez bildirimi de aynı alanı kapatabilir. Bu nedenle masaüstünde sorunsuz görünen ödeme formunun telefonda ayrıca incelenmesi gerekir.

Kontrolde müşteri kart alanına dokunur, bir sonraki alana geçer ve klavyeyi kapatır. Ekran bu sırada beklenmedik biçimde yukarı sıçrıyor mu, düğme erişilebilir mi ve sayfa içinde iki farklı kaydırma alanı mı oluşuyor soruları yanıtlanır. Yatay taşma da gözlemlenir. Değerlendirmede müşterinin ödeme adımını tamamlayabilmesi, yalnızca formun ekran görüntüsünde güzel görünmesinden daha belirleyicidir.

Tema Uyumu ve Okunabilirlik

V2 için karanlık görünüm seçeneği iframe_v2_dark parametresiyle sunulur. Mağaza temasıyla görsel uyum sağlanırken alanların sınırı, yardımcı açıklamalar ve hata mesajlarının okunabilirliği korunmalıdır. Sadece sayfa arka planını koyulaştırmak bütün ödeme bileşenini uyumlu hâle getirmez.

AdPix’in önerisi açık ve koyu görünümde odaklanan alanı, pasif düğmeyi ve hatalı giriş durumunu ayrı incelemektir. Müşteri hangi alanı düzelteceğini kolayca anlayabilmelidir. Renk değişikliği ödeme sonucunun mantığını da değiştirmemelidir. Tasarım düzenlemesi sonrasında başarılı ve başarısız senaryoların davranışı aynı açıklıkla takip edilir; müşteri belirsiz bir ekranda bırakılmaz.

PayTR Ödeme Alanındaki Alternatif Yöntemler

Örnek görünümde alternatif ödeme yöntemleri aynı form içinde listelenir. Yöntem listesi uzadıkça alanın yüksekliği ve kaydırma davranışı değişebilir. Mağazanın mobil düzeninde alt seçeneklerin kesilmediği ve seçimin okunabilir kaldığı ayrıca kontrol edilir.

Yüklenme Sorununu Ayırma

Boş görünen ödeme alanında görsel yerleşim sorunu ile token alınamaması birbirinden ayrılır. Geçerli ödeme oturumu oluşmamışsa iframe boyutunu artırmak sorunu çözmez. Önce istek sonucu, ardından formun yüklenmesi ve son olarak yerleşim incelenir.

Örnek kontrolde ağ hatası yaşayan müşteriye sınırsız dönen yükleme simgesi gösterilmez. İşletmenin arayüzü, işlem sonucunu bilmeden yeniden tahsilat başlatmaya yönlendirmeyecek şekilde tasarlanır. Teknik kayıtlar ödeme oturumunu siparişle ilişkilendirir. Görünüm düzeltmesi, gerçek işlem durumunu koruyan anlaşılır hata ve yeniden deneme davranışıyla birlikte değerlendirilir.

Bu Yazıdaki Terimler 1 Kavram

Kısa açıklamaları burada okuyabilir, ayrıntılar için sözlüğe geçebilirsiniz.

CSS
CSS (Cascading Style Sheets), web sayfalarının tarayıcıda nasıl görüneceğini, yani renk, yazı tipi, boşluk ve yerleşim gibi özelliklerini belirleyen bildirimsel bir stil dilidir.

Bu Konuda Nasıl Destek Oluyoruz?

AdPix’in bu alandaki hizmet kapsamını ve çalışma sürecini inceleyin.

İlgili Platformlarda Keşfedin

PayTR