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.