JavaScript Payment Request API Ile Kredi Kartı Ödemeleri | Devnot

Internet üzerinden yaptığımız alışverişlerde çoğumuz kredi kartı bilgilerimizi girerek ödeme yapıyoruz. Yazılım geliştiriciler de bu ekranların oluşturulması ve servis bağlantılarının güvenli şekilde yapılması konusunda çalışıyorlar. Peki online ödeme ekranlarında kredi kartı bilgilerinin girildiği alanlar nasıl olmalıdır, belirli standartları olmalı mıdır? Dilerseniz farklı örneklere göz atarak sonrasında asıl konumuz olan JavaScript Payment Request API’e geçiş yapalım.

Aşağıda apple.com’daki ödeme formu bulunuyor:

apple.com’daki ödeme ekranı

Apple’ın kredi kartı numarasının girilmesi için bir text input alanı, güvenlik kodu, ay ve yıl alanlarından oluşmakta. Şimdi ise aşağıdaki n11’deki ödeme ekranına bakalım:

n11.com’daki ödeme ekranı

Kredi kartı numarası apple.com’un aksine 4 parçaya ayrılmış. Kartın üzerindeki isim alanı ve opsiyonel 3D kullanma seçenekleri var.

İnternet Vergi Dairesi sitesinde yer alan ödeme formunda ise kredi kartı alanının doldurulması için tuşları rastgele karıştırılmış sanal klavye kullanılıyor. Aşağıda bu ekranı görebilirsiniz:

İnternet vergi dairesi ödeme ekranı – Rastgele tuşların yer aldığı sanal klavyede kart numarası girmek oldukça meşakatli olmakta.

Görüldüğü gibi 3 ayrı ekranın sadece tasarımı değil, input alanlarının dizilişi, bölümlenmesi ve içerik giriş kısımları bile birbirinden oldukça farklı. Ödeme ekranları için birçok farklı tasarım oluşturmak mümkünken W3 çalışanları aralarında tartışıp ortak bir ödeme sisteminin oluşturulması ve tarayıcı içerisinde her yerde aynı şekilde yapılması için bir standardın oluşturulmasına karar veriyorlar.

Payment Request API Nedir?

Payment Request API, internet üzerinden gerçekleştirilen satın alım formlarının yerine geçecek bir W3 standardıdır. Satın alım süreçlerinde kullanıcının iş akışını geliştirir, daha tutarlı kullanıcı deneyimi sağlar ve satıcıların farklı ödeme metodlarını kolayca entegre etmelerinin önünü açmış olur.

Payment Request API herhangi bir satıcı baz alınarak tasarlanmadığı için, belirli bir ödeme sisteminin kullanılmasını gerektirmemektedir. Yeni bir ödeme metodu olmadığı gibi, ödemenin aktarılmasını sağlayacak olan aracılar (örn: bankalar) ile doğrudan entegre olarak çalışmamaktadır. Bunun aksine, kullanıcının ödeme ve adres bilgilerinin satıcıya iletilmesinde aracı bir rol oynamaktadır.

Temel amaçlarını sıralayacak olursak:

• İnternet tarayıcısının; satıcılar, müşteriler ve ödeme metodları arasında bir arabuluculuk yapmasını sağlamak,
• Ödeme akışının mümkün olduğunca standart bir hale getirilmesini sağlamak,
• Farklı ödeme yöntemlerinin eksiksiz bir şekilde desteğini gerçekleştirmek,
• Herhangi bir tarayıcı, cihaz ve platformda ödeme işleminin gerçekleştirilmesini sağlamaktır.

Ödeme Sürecinin Akışı Nasıl Sağlanır?

Payment isteği iş akışı – Kaynak: developers.google.com

Öncelikle ödeme işleminin gerçekleştirilebilmesi için JS tarafında bir PaymentRequest nesnesinin oluşturulması gerekiyor (Payment Request API destekleyen tarayıcılar için bkz: caniuse). Desteklenen ödeme yöntemleri ve ödeme detayları ile ilgili bilgileri constructor’ında parametre olarak alan PaymentRequest nesnesinin show() metodu sayesinde ilişkili ödeme bilgileri tarayıcıya gönderilir. Devamında tarayıcı, satış için kabul edilen ödeme yöntemleri ile kullanıcının cihazındaki yüklemiş olduğu ödeme yöntemleri arasındaki uyumluluğu kontrol eder. Bu bilgiler doğrultusunda tarayıcı, ödeme yöntemini seçen ve işlemin gerçekleştirilmesi için onay veren kullanıcıya ödeme formunu görüntüler. Ödeme metodu, kredi kartı bilgilerinin halihazırda tarayıcı tarafından barındırılması kadar basit olabileceği gibi, sadece bu site için yazılmış üçüncü parti bir uygulamanın ödemeye aracı olması kadar gelişmiş bir yapıya bürünebilir. Kullanıcı ödeme bilgilerinini doldurup Ödebutonuna tıkladığında, ilgili ödeme bilgileri (örn. kredi kartı numarası, kart sahibinin adı, son kullanma tarihi ve CVC) direkt olarak siteye geri gönderilir.

Örnek kod:

<button onClick="satinAl()">Satın al</button> <script> const desteklenenOdemeYontemleri = [{ supportedMethods: ['basic-card'] }]; const odemeDetaylari = { total: { label: 'Toplam', amount: { currency: 'TRY', value: 100 } } }; const request = new PaymentRequest(desteklenenOdemeYontemleri, odemeDetaylari); async function satinAl() { // Ödeme ekranını göster ve ilgili ödeme bilgilerinin doldurulmasını bekle const paymentResponse = await request.show(); // Ödemeyi tamamla await paymentResponse.complete(); // Ödeme bilgilerini bankaya ilet console.log(paymentResponse.details); // CC #, ad, güvenlik kodu, son kullanım tarihi vb. } </script>

Çıktısı: PaymentRequest nesnesi, teslimat adresi, müşteri e-postası ve müşteri telefon numarasını döndürecek şekilde genişletilebilir. Bu sayede kullanıcıya tekrar tekrar ödeme ile ilgili çeşitli bilgilerin sorulmasının önüne geçilmiş olur.

Sonuç Olarak

Ödeme işlemleri, alım satım işlemlerinin olmazsa olmazı konumunda ve harcanan her doların 56 cent’i dijital etkileşimlerle sağlanıyor. Buna rağmen kullanıcıların satın aldığı ürünleri sepete attıktan sonra ödeme işleminden vazgeçme oranı ise %69’larda seyrediyor. Bu oran mobilde daha da artıyor. İnternet üzerinden ödeme işlemlerinde Payment Request API kullanılması sayesinde kullanıcının tek bir formda ödeme işleminin hızlıca gerçekleştirilmesi sağlanıyor. Bu standart yaygınlaştığında sepetten vazgeçme oranlarına da önemli ölçüde etki edecek gibi görünüyor.

Bu yazımızda ödeme işlemlerinin kolaylaştırılmasını sağlayan Payment Request API’ye değindik. Eğer sizin de bu konu hakkında soru ve düşünceleriniz varsa aşağıdaki yorum kısmında bizimle paylaşabilirsiniz. Bir başka yazıda görüşmek üzere.



• Etiketler
• JavaScript
• Ödeme İşlemleri
• Payment Request API

JavaScript 15 Nisan 2021

Vuex ile Vue.js State Yönetimi

HTML ve CSS 8 Şubat 2021

Webpack Nedir? Webpack'e Detaylı Bir Bakış

JavaScript 1 Şubat 2021

JavaScript Modül Sistemi (ES Modules) Nedir?



1. 

   Bu bilgiler hangi adrese post ediliyor?

1. 

   Bu bilgilerin network üzerinden herhangi bir adrese gönderimi gerçekleştirilmiyor. Aslında temel olarak Payment API’ın amacı, kullanıcıya bir form doldurtmadan kolayca ödeme bilgilerini almak. Bu nedenle kullanıcının ödeme bilgileri, PaymentRequest API’ı çağıran siteye (yani kendi sitemize) Chrome üzerinden geri döndürülüyor. Burada benim yaptığım şekilde ödeme bilgilerini içeren paymentResponse.details JavaScript nesnesini konsol ekranına yazabileceğiniz gibi, aynı nesnenin bilgilerini kullanarak istediğiniz bir banka API’ı üzerinden tahsilat işlemini gerçekleştirebilirsiniz.

2. 

   Selamlar,

   Eline sağlık. Tane tane çok güzel anlatmışın. Bence burada birçok firma, bankların verdiği apiler ile çalışmayı daha çok tercih edicekdir. Nedeni belli Tamamen güvenlik. Bankanın açtığı bir pencerede kullanıcı bilgileri giriliyor. Satın alma işlemi yapılan portal, ne suya ne sabuna bu kısımda dokunmuyor. Ama bu Payment API ile yanlış anlamadı isem, kullanıcı bilgileri bizde. Bunu iyi saklamak lazım. Ayrıca kullanıcının verilerini girdiği ekran da bizde. Kısaca sorumluluk büyük. Doğal olarak risk maliyeti ve güvenlik malkiyeti de artıyor. Bence basitliğe giderken eldeki güvenlikten olunur ise daha çok sepetten dönen client görebiliriz.

   Hoşçakal. Bora.

1. 

   Bora Hocam merhaba,

   Güzel ve değerli yorumlarınız için çok teşekkür ederim. Payment API’da, autofill özelliği sayesinde kullanıcı parolalarının Google Chrome’a kaydedilebildiği gibi, kredi kartı bilgileri de senkronize bir şekilde Google Chrome üzerinde tutulabiliyor. Kullanıcı tek bir satın alım işleminde kredi kartı bilgilerini girip Chrome’a kaydettiği takdirde ister mobil, ister masaüstü olsun tüm Chrome tarayıcılardan kolayca ödeme işlemi gerçekleştirilebiliyor. Bu noktada aslında sorumluluk geliştiricide değil, kullanıcı ve Google arasında kalmış oluyor.

   Şu an birçok online alışveriş hizmetinde kullanıcı, kendi kredi kartı bilgilerini site üzerinden girdikten sonra ödeme yapma isteği gönderiyor. Devamında kredi kartı numarası ile ilişkili bankanın açtığı web penceresinde, sadece ilgili kredi kartı için kullanıcının telefonuna SMS olarak iletilen 8 haneli tek kullanımlık bir şifre kodu bilgisinin onaylama süreci yer alıyor. N11, HepsiBurada, Trendyol, AliExpress gibi siteler bu şekilde çalışıyor. Bundan daha farklı bir ödeme süreci bilmiyorum ama varsa öğrenmeyi isterim. Belki sitenin anlaştığı sadece bir banka vardır ve bu bankanın ilgili ödeme penceresi açılarak, kullanıcının TC kimlik no gibi özel bir bilgi girmesi ile ödeme işlemini gerçekleştirilir.

   Güvenlik, ödeme işlemlerinde çok önemli bir konu. W3.org’daki PaymentRequest API standardını oluşturan kişilerin, Google’ın, Microsoft’un bu güvenlik konusunu önemli ölçüde ele aldıklarını varsayıyoruz. Chrome ve Edge tarayıcılarında halihazırda production’da aktif olarak çalışan bu mekanizmanın yayına çıkmadan önce defalarca kez test edilmiş olduğunu düşünüyorum. Ama takdiri size bırakıyorum.

   Teşekkür ederim, İyi çalışmalar,

Devnot, Natro sunucularında barındırılmaktadır. 15 Temmuz 2024Programlama

.NET Aspire ile Cloud Native Uygulamalar: Bulutta Uygulama Geliştirme

21 Temmuz 2023Programlama

Basit Bir Örnek Eşliğinde: Reverse Proxy Nedir?

6 Mart 2023Programlama

gRPC Nedir?

27 Haziran 2022Genel

HUAWEI Student Developers (HSD) Nedir?

20 Haziran 2022Yönetim

Behavior Driven Development (BDD) & Cucumber

22 Haziran 2020 Haberler

Online Microservices ve DDD Konferans Notları

30 Mart 2020 Haberler

Yazılım Geliştirici Mentor Programı Başvuruları Başladı

19 Ocak 2020 Haberler

Developer Summit 2020 4 Nisan’da

16 Aralık 2019 Haberler

Machine Learning Day 28 Aralık’ta

2 Ekim 2019 Haberler

Full Stack Yazılım Geliştirici Kampı Başvuruları Başladı

?

• Programlama
• Mimari
• DEVNOT KONFERANSLARI
• Başlangıca dön

© 2014 Devnot