Gömülü Checkout Formunun Tasarlanması
GÖmülü checkout formunun tasarlanması hakkında bilgi edinin
Checkout sayfanızı oluşturduktan sonra, sol menüde yer alan ayarlar ile sayfanızı özelleştirebilirsiniz.
Ödeme Sayfası Ayarları;
İlk adım olan ödeme yöntemlerinin göründüğü sayfa için ayarları kapsar.
Ödeme Ayarları ;
Ödeme seçeneklerinin tanımlandığı alandır. Projenizde kullanmak istediğiniz ödeme yöntemlerini aktifleştirdikten sonra bu alanda forma eklemeniz gerekmektedir.
Daha detaylı bilgi için aşağıdaki kılavuzu ziyaret edebilirsiniz:
Ödeme Yöntemlerinin YapılandırılmasıKayıt(Registration) Ayarları :
Kullanıcıdan alınacak kayıt bilgisinin tipi burada belirlenir. Bu alan ile ilgili ek iki özellik daha mevcuttur.
Hide E-mail / Phone Number Input if Already Set
Bu ayar aktifse, kullanıcı bilgisi (e-posta veya telefon numarası) form açılırken Zotlo'ya iletildiyse, ilgili alan formda tekrar gösterilmez.
Allow Mail
Bu ayar aktifse, kullanıcı form üzerindeki e-posta veya telefon numarası alanını düzenleyebilir hale gelir.
Bu iki özellik, Kayıt Adımının Atlanması (Register by Pass) senaryosu ile birlikte çalışır.
Kayıt Adımının Atlanması (Register by Pass)
Eğer kendi uygulamanızda kullanıcıdan e-posta, telefon numarası veya UUID v4 formatında benzersiz bir bilgi aldıysanız, bu bilgiyi Zotlo’ya ileterek kullanıcıdan yeniden kayıt bilgisi alınmasını engelleyebilirsiniz.
Zotlo’da kayıt adımını atlamak için kullanıcı bilgisi, checkout link URL’sine subscriberId parametresi olarak eklenmelidir.
Örnek olarak, Checkout linkiniz premium.example.com domaininde yayında ise, kullanıcınızı [email protected] ya da premium.example.com?subscriberId=12124567890 şeklinde yönlendirerek kayıt adımını atlatabilirsiniz.
Eğer UUID v4 formatında bir bilgi gönderirseniz, e-posta alanı zorunlu olarak gösterilir ve kullanıcıdan bu bilgi alınır. Bu, Zotlo'nun son kullanıcı abonelik yönetimi süreçleri için gereklidir.
Mail Gönderme(Mailing) Ayarları:
Satın alma sonrası kullanıcılara e-posta gönderilip gönderilmeyeceğini belirten ayardır.
Tema (Theme) Ayarları
Formun genel renk teması, fontlar ve görsel stili burada ayarlanır. Eğer Tema 3'ü seçerseniz, aşağıdaki ek özelleştirme seçeneklerine sahip olursunuz:
Header Göster (Show Header): Bu ayarı aktif hale getirdiğinizde, formun üst kısmında proje adınız ve ikonunuz görünür hale gelir. Bu, markanızın tanınabilirliğini artırır.
Görsel Göster (Show Image): Ödeme ekranınıza dikkat çekici bir görsel eklemek isterseniz bu ayarı kullanabilirsiniz. Ürününüzü veya hizmetinizi görsel olarak destekleyerek kullanıcıların ilgisini çekin.
Paket Adı Göster (Show Package Name): Bu ayar açık olduğunda, ödeme ekranında satış yapılan paket ismi görünür. Eğer paket tipi bir abonelikse, paketin periyot bilgisi de otomatik olarak eklenir (örneğin, "Aylık Abonelik"). Bu, müşterilere ne satın aldıklarını net bir şekilde gösterir.
Ara Toplam Metni Göster (Show Subtotal Text): Bu ayar aktif edildiğinde, sepete eklenen paketin ara toplam fiyatı gösterilir. Kullanıcılara ödemeleri gereken temel tutarı net bir şekilde sunar.
Bonus/İndirim Metni Göster (Show Bonus/Discount Text): Bu özellik, müşterinize bir bonus sunma veya yapay bir indirim izlenimi verme seçeneği sunar. Bu ayar açıldığında, ara toplam metninin altında ek bir metin ve fiyat alanı belirir.
Burada görünen metni isteğe bağlı olarak düzenleyebilir ve tüm diller için geçerli olmasını sağlayabilirsiniz.
İndirim Oranı (Discount Rate): Eğer kullanıcıya indirim uygulandığı izlenimi vermek isterseniz, "İndirim Oranı" alanından bir oran seçebilirsiniz. Seçilen oran, görüntülenen fiyatı artırır ve ekstra tutar bir "İndirim" olarak görünür. Önemli Not: Kullanıcı yine de yalnızca Toplam alanında gösterilen orijinal paket fiyatını öder; bu bir görsel indirim gösterimidir.
Form Design Ayarları
Form alanlarının yerleşimi, kenar boşlukları, ödeme yöntemi butonlarının karanlık mode uyumluluğu gibi detaylar bu alanda belirlenir.
Başlık (Labels) Ayarları
Form üzerindeki başlıkların görünüp görünmeyeceği ve stil ayarları bu alanda belirlenir.
Onay (Consent) Ayarları
Hukuki düzenlemeler gereği, kullanıcılardan alınacak onay metinlerine bağlı tasarımsal ayarlar bu bölümde yapılandırılır.
Toplam Fiyat (Total Price) Ayarları
Kullanıcıya gösterilecek toplam tutar alanının görünüm detaylarını burada ayarlarsınız. Bu alanın nasıl vurgulanacağı, yazı tipi boyutu ve rengi gibi estetik seçimlerle müşterilerinizin ödeyeceği nihai tutarı net ve anlaşılır bir şekilde sunarsınız.
Buton Tasarımı (Button Design) Ayarları
Formunuzdaki aksiyon butonlarının (örneğin, "Satın Al", "Aboneliği Başlat") tasarımını bu bölümde belirlersiniz. Renkler, şekiller, boyutlar ve hover efektleri gibi görsel detayları özelleştirebilirsiniz. Önemli Not: Bu düzenlemeler, Apple Pay, Google Pay veya PayPal gibi üçüncü taraf ödeme yöntemleri için olan butonları etkilemez, çünkü bu butonlar genellikle kendi markalama kurallarına sahiptir.
Buton Metni (Button Text) Ayarları
Satın alma butonu üzerinde gösterilecek metni bu alanda düzenlersiniz. Zotlo, kullanıcının durumuna göre dinamik olarak değişen metinler seçmenize olanak tanır. Örneğin:
Deneme Aktivasyon Durumu (Trial Activation State): Kullanıcı bir abonelik paketini deneme fiyatı ile satın alıyorsa, bu durum için seçtiğiniz metin görünür.
Diğer durumlar için de farklı metinler belirleyerek kullanıcıya en uygun mesajı iletebilirsiniz.
Alt Bilgi (Footer) Ayarları
Formun alt kısmında yer alan yasal bilgilendirme metinleri, gizlilik politikası ve kullanım şartları gibi linklerin görünüm ayarları bu bölümde yapılır. Bu alan, yasal uyumluluğu sağlamak ve müşterilerinize şeffaf bilgi sunmak için kritik öneme sahiptir.
Ödeme Sonrası Sayfa Ayarları;
Zotlo, müşterilerinizin ödeme işlemini başarıyla tamamladıktan sonraki deneyimini tamamen kontrol etmenizi sağlar. Bu bölümde, kullanıcılarınıza ya Zotlo tarafından barındırılan bir başarılı ödeme sayfası gösterebilir ya da onları doğrudan belirlediğiniz bir URL'ye yönlendirebilirsiniz.
Başarılı Ödeme Sayfası Gösterimi
Eğer ödeme başarılı sayfasını Zotlo üzerinden göstermeyi tercih ederseniz, ilk adım sayfa görünümü için bir tema seçmektir. Zotlo, bu sayfalar için optimize edilmiş çeşitli temalar sunar.
App-to-Web Teması:
Bu tema, genellikle mobil uygulamadan web'e yönlenmiş ve ödeme sonrası tekrar mobil uygulamaya yönlendirilecek kullanıcılar için idealdir. Özellikle uygulama içi satın alımları web üzerinden gerçekleştiren mobil oyunlar veya uygulamalar için kesintisiz bir geçiş sağlar.
Deeplink Yönlendirmesi: Bu temada, kullanıcı yönlendirmesi için deeplink girişi zorunludur. Girilen deeplinkler, kullanıcının işletim sistemine (iOS, Android vb.) göre otomatik olarak gösterilir. Bu sayede, müşteri satın alma sonrası direkt olarak uygulamanızda ilgili içeriğe yönlendirilir.
Otomatik Yönlendirme ayarı: Eğer bu ayar açılırsa, belirlenen süre sonunda kullanıcı butona basmasa bile ilgili deeplinke yönlendirme yapılır.
Bu Temaya Bağlı Ek Ayarlar:
App-to-web teması seçildiğinde, sayfanın görsel ve metinsel öğelerini markanıza göre özelleştirebilirsiniz:
Buton Metni (Button Text): Bu ayar, yönlendirme butonu üzerinde görünecek metni özelleştirmenizi sağlar. Kullanıcının durumuna göre dinamik metinler seçebilirsiniz. Örneğin, deneme aktivasyonu için farklı, genel geri dönüş için ise "Uygulamaya Geri Dön" veya "Oyuna Geri Dön" gibi metinler belirleyebilirsiniz.
Görsel Ayarlar: Metin ve butonların renklerini (normal ve üzerine gelindiğinde), buton kenarlıklarının rengini, kalınlığını ve köşe yuvarlaklığını ayarlayabilirsiniz.
Yukarıdaki özel ayarlara ek olarak, başarılı ödeme sayfasının genel tasarım ayarları(arka plan rengi, çerçeve rengi vb.), ödeme sayfasında yer alan form tasarım ayarları ile aynı çalışır. Bu sayede, tüm ödeme sürecinde tutarlı bir marka kimliği ve kullanıcı deneyimi sağlanmaktadır.
Web-to-App Teması:
Bu tema, genellikle web’te karşılanan kullanıcıları ödeme sonrası bir mobil uygulamaya veya başka bir web sayfasına yönlendirmek için idealdir. Web pazarlama kampanyalarınızdan maksimum dönüşüm elde etmenizi ve kullanıcıları sorunsuz bir şekilde dijital ürününüze yönlendirmenizi sağlar.
Uygulama Mağazası Linkleri Zorunluluğu: Bu temada, kullanıcı yönlendirmesi için uygulama indirme mağaza linklerinin girişi zorunludur. Zotlo paneline girdiğiniz linkler sayesinde, sayfada hangi uygulama mağazası butonlarının (örneğin, App Store, Google Play Store) görüneceğini seçerek sayfanızı özelleştirebilirsiniz.
Generic Link Seçeneği: Eğer tek bir indirme linki ekleyecekseniz veya kullanıcıları doğrudan başka bir web sitesine yönlendirmek istiyorsanız, "Generic Link" kısmına URL ekleyerek genel bir yönlendirme butonu kullanabilirsiniz.
Web-to-App teması seçildiğinde, sayfada yer alan Metin ve butonların renklerini (normal ve üzerine gelindiğinde), buton kenarlıklarının rengini, kalınlığını ve köşe yuvarlaklığını ayarlayabilirsiniz.
Başarılı Ödeme Sonrası Yönlendirme (Redirection)
Zotlo, müşterinizin ödeme işlemi başarıyla tamamlandıktan sonra, kendi başarılı ödeme sayfanızı kullanmanıza veya onları belirlediğiniz bir URL'ye yönlendirmenize olanak tanır. Bu seçenek, özel teşekkür sayfaları, uygulama içi yönlendirmeler veya pazarlama hedefleriniz doğrultusunda farklı sayfaları kullanmak istediğinizde idealdir.
Kullanıcı yönlendirmesi için panel üzerinden bir deeplink ekleyebilir veya Checkout SDK yapılandırırken return_url ekleyebilirsiniz. Bu durumlardaki öncelik sıralaması aşağıdaki gibidir:
Checkout SDK Return URL (En Yüksek Öncelik): Gömülü ödeme formunu web sitenize entegre ederken, Checkout SDK yapılandırması sırasında bir return_url parametresi belirleyebilirsiniz. Eğer bu return_url doluysa, ödeme tamamlandıktan sonra kullanıcı doğrudan bu URL'ye yönlendirilir.
Panelde Belirlenen Deeplink'lere Yönlendirme: Eğer SDK yapılandırmasında return_url belirtilmemişse, Zotlo panelinizdeki Proje Ayarlarına girdiğiniz deeplinkler devreye girer. Bu senaryoda, kullanıcının işletim sistemine (iOS, Android vb.) göre otomatik olarak yönlendirme yapılır.
Geliş URL'ine (Referrer URL) Geri Yönlendirme: Hem SDK'daki return_url parametresi hem de Zotlo panelindeki yönlendirme ayarları boşsa, kullanıcı ödeme işlemine hangi linkten geldiyse (referrer URL) o sayfaya geri yönlendirilir. Bu, varsayılan bir geri dönüş mekanizmasıdır.
Last updated