Ödeme yöntemi ayarlama

Web Ödemeleri kullanılarak yapılan bir ödeme işlemi, ödeme uygulamanızın bulunmasıyla başlar. Ödeme yöntemi ayarlamayı ve ödeme uygulamanızı satıcıların ve müşterilerin ödeme yapması için hazır hale getirmeyi öğrenin.

Payment Request API ile kullanılabilmesi için ödeme uygulamasının bir ödeme yöntemi tanımlayıcısıyla ilişkilendirilmesi gerekir. Bir ödeme uygulamasıyla entegrasyon sağlamak isteyen satıcılar, bunu tarayıcıya belirtmek için ödeme yöntemi kimliğini kullanır. Bu makalede, ödeme uygulaması keşfinin işleyiş şekli ve ödeme uygulamanızı bir tarayıcı tarafından doğru şekilde keşfedilip çağrılacak şekilde nasıl yapılandırılacağı ele alınmaktadır.

Web Ödemeleri kavramı veya bir ödeme işleminin ödeme uygulamaları üzerinden nasıl gerçekleştiği konusunda yeniyseniz öncelikle aşağıdaki makaleleri okuyun:

Tarayıcı desteği

Web Ödemeleri birkaç farklı teknolojiden oluşur ve destek durumu tarayıcıya göre değişir.

Chromium Safari Firefox
Masaüstü Android Masaüstü Mobil Masaüstü/Mobil
Ödeme İsteği API'si
Ödeme İşleyici API'si
iOS/Android ödeme uygulaması ✔* ✔*

Tarayıcı, bir ödeme uygulamasını nasıl keşfeder?

Her ödeme uygulaması aşağıdakileri sağlamalıdır:

  • URL tabanlı ödeme yöntemi tanımlayıcısı
  • Ödeme yöntemi manifesti (ödeme yöntemi tanımlayıcısının üçüncü tarafça sağlandığı durumlar hariç)
  • Web uygulaması manifesti
Şema: Tarayıcı, ödeme uygulamasını URL tabanlı ödeme yöntemi tanımlayıcısından nasıl keşfeder?

Keşif süreci, satıcı bir işlem başlattığında başlar:

  1. Tarayıcı, ödeme yöntemi tanımlayıcı URL'sine bir istek gönderir ve ödeme yöntemi manifestini getirir.
  2. Tarayıcı, ödeme yöntemi manifestinden web uygulaması manifest URL'sini belirler ve web uygulaması manifestini getirir.
  3. OS ödeme uygulamasının mı yoksa web tabanlı ödeme uygulamasının mı web uygulaması manifestinden başlatılacağını tarayıcı belirler.

Sonraki bölümlerde, tarayıcıların bu ödeme yöntemini bulabilmesi için kendi ödeme yönteminizi nasıl ayarlayacağınız ayrıntılı olarak açıklanmaktadır.

1. adım: Ödeme yöntemi tanımlayıcısını sağlayın

Ödeme yöntemi tanımlayıcısı, URL tabanlı bir dizedir. Örneğin, Google Pay'in tanımlayıcısı https://google.com/pay şeklindedir. Ödeme uygulaması geliştiricileri, üzerinde kontrol sahibi oldukları ve rastgele içerik sunabildikleri sürece herhangi bir URL'yi ödeme yöntemi tanımlayıcısı olarak seçebilirler. Bu makalede, ödeme yöntemi tanımlayıcısı olarak https://bobbucks.dev/pay alanını kullanacağız.

Satıcılar ödeme yöntemi tanımlayıcısını nasıl kullanır?

PaymentRequest nesnesi, bir satıcının kabul ettiği ödeme uygulamalarını tanımlayan bir ödeme yöntemi tanımlayıcıları listesiyle oluşturulur. Ödeme yöntemi tanımlayıcıları, supportedMethods mülkü için bir değer olarak ayarlanır. Örneğin:

[merchant] ödeme istiyor:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

2. Adım: Ödeme yöntemi manifestini yayınlayın

Ödeme yöntemi manifesti, bu ödeme yöntemini hangi ödeme uygulamasının kullanabileceğini tanımlayan bir JSON dosyasıdır.

Ödeme yöntemi manifestini sağlayın

Satıcı ödeme işlemi başlattığında tarayıcı, ödeme yöntemi tanımlayıcı URL'sine bir HTTP GET isteği gönderir. Sunucu, ödeme yöntemi manifest gövdesiyle yanıt verir.

Ödeme yöntemi manifestinde default_applications ve supported_origins olmak üzere iki alan bulunur.

Mülk adı Açıklama
default_applications (zorunlu) Ödeme uygulamalarının barındırıldığı web uygulaması manifest'lerine işaret eden bir URL dizisi. (URL bir akraba olabilir). Bu dizinin, geliştirme manifesti, üretim manifesti ve benzeri öğelere referans vermesi beklenir.
supported_origins Aynı ödeme yöntemini kullanan üçüncü taraf ödeme uygulamalarını barındırabilecek kaynaklara işaret eden bir dizi URL. Bir ödeme yönteminin, birden fazla ödeme uygulaması tarafından kullanılabileceğini unutmayın.
Ödeme yöntemi manifest alanları

Ödeme yöntemi manifest dosyası şu şekilde görünmelidir:

[ödeme işleyici] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

Tarayıcı default_applications alanını okuduğunda, desteklenen ödeme uygulamalarının web uygulaması manifest'lerine yönlendiren bağlantıların bir listesini bulur.

İsteğe bağlı olarak, ödeme yöntemi manifestini başka bir konumda bulmak için tarayıcıyı yönlendirin.

Ödeme yöntemi tanımlayıcı URL'si, isteğe bağlı olarak tarayıcının ödeme yöntemi manifestini getirebileceği başka bir URL'ye işaret eden bir Link başlığıyla yanıt verebilir. Bu, ödeme yöntemi manifesti farklı bir sunucuda barındırıldığında veya ödeme uygulaması bir üçüncü tarafça sunulduğunda yararlı olur.

Tarayıcı, ödeme uygulamasını yönlendirme içeren URL tabanlı bir ödeme yöntemi tanımlayıcısından nasıl keşfeder?

Ödeme yöntemi sunucusunu, rel="payment-method-manifest" özelliği ve ödeme yöntemi manifest URL'sine sahip bir HTTP Link başlığıyla yanıt verecek şekilde yapılandırın.

Örneğin, manifest https://bobbucks.dev/payment-manifest.json adresindeyse yanıt başlığı şunları içerir:

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

URL, tam bir alan adı veya göreli bir yol olabilir. Bir örnek görmek için https://bobbucks.dev/pay/ ağ trafiğini inceleyin. curl komutu da kullanabilirsiniz:

curl --include https://bobbucks.dev/pay

3. Adım: Web uygulaması manifesti yayınlayın

Web uygulaması manifesti, adından da anlaşılacağı gibi bir web uygulamasını tanımlamak için kullanılır. Progresif Web Uygulaması (PWA) tanımlamak için yaygın olarak kullanılan bir manifest dosyasıdır.

Tipik web uygulaması manifesti şöyle görünür:

[ödeme işleyici] /manifest.json:

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

Web uygulaması manifest dosyasında açıklanan bilgiler, ödeme uygulamasının Ödeme İsteği kullanıcı arayüzünde nasıl görüneceğini tanımlamak için de kullanılır.

Mülk adı Açıklama
name (zorunlu) Ödeme uygulaması adı olarak kullanılır.
icons (zorunlu) Ödeme uygulaması simgesi olarak kullanılır. Bu simgeler yalnızca Chrome tarafından kullanılır. Ödeme aracının bir parçası olarak belirtmediğiniz takdirde diğer tarayıcılar, bunları yedek simge olarak kullanabilir.
serviceworker Web tabanlı ödeme uygulaması olarak çalışan hizmet çalışanının algılanması için kullanılır.
serviceworker.src Hizmet çalışanı komut dosyasının indirileceği URL.
serviceworker.scope Bir hizmet çalışanının kayıt kapsamını tanımlayan URL'yi temsil eden bir dize.
serviceworker.use_cache Hizmet çalışanı komut dosyasının indirileceği URL.
related_applications İşletim sistemi tarafından sağlanan ödeme uygulaması olarak çalışan uygulamayı algılamak için kullanılır. Daha ayrıntılı bilgiyi Android ödeme uygulamaları geliştirici kılavuzunda bulabilirsiniz.
prefer_related_applications Hem işletim sistemi tarafından sağlanan bir ödeme uygulaması hem de web tabanlı bir ödeme uygulaması mevcut olduğunda hangi ödeme uygulamasının başlatılacağını belirlemek için kullanılır.
Önemli web uygulaması manifest alanları
Simge içeren ödeme uygulaması.
Ödeme uygulaması etiketi ve simgesi.

Web uygulaması manifest'inin name mülkü, ödeme uygulaması adı olarak, icons mülkü ise ödeme uygulaması simgesi olarak kullanılır.

Chrome hangi ödeme uygulamasının başlatılacağını nasıl belirler?

Platforma özel ödeme uygulamasını kullanıma sunuyoruz

Platforma özel ödeme uygulamasını başlatmak için aşağıdaki koşulların karşılanması gerekir:

  • related_applications alanı, web uygulaması manifest dosyasında belirtilir ve:
    • Web uygulaması manifestindeki minimum sürüm (min_version), yüklü uygulamanın sürümünden daha düşük veya bu sürüme eşitken yüklü uygulamanın paket kimliği ve imzası eşleşiyor.
  • prefer_related_applications alanı true.
  • Platforma özel ödeme uygulaması yüklü ve aşağıdaki özelliklere sahip:
    • org.chromium.action.PAY intent filtresi.
    • org.chromium.default_payment_method_name özelliğinin değeri olarak belirtilen ödeme yöntemi tanımlayıcısı.

Bunların nasıl ayarlanacağıyla ilgili daha fazla bilgi için Android ödeme uygulamaları: geliştirici kılavuzunu inceleyin.

[ödeme işleyici] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

Tarayıcı, platforma özel ödeme uygulamasının kullanılabildiğini belirlerse keşif akışı burada sonlandırılır. Aksi takdirde bir sonraki adıma, yani web tabanlı ödeme uygulamasını başlatmaya geçer.

Web tabanlı ödeme uygulamasını kullanıma sunuyoruz

Web tabanlı ödeme uygulaması, web uygulaması manifestinin serviceworker alanında belirtilmelidir.

[ödeme işleyici] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

Tarayıcı, hizmet çalışanına bir paymentrequest etkinliği göndererek web tabanlı ödeme uygulamasını başlatır. Hizmet çalışanının önceden kaydedilmiş olması gerekmez. Tam zamanında kaydedilebilir.

Özel optimizasyonları anlama

Tarayıcılar Ödeme İsteği kullanıcı arayüzünü atlayıp doğrudan bir ödeme uygulamasını nasıl başlatabilir?

Chrome'da PaymentRequest için show() yöntemi çağrıldığında Ödeme İsteği API'si, tarayıcı tarafından sağlanan "Ödeme İsteği Kullanıcı Arayüzü" adlı bir kullanıcı arayüzü görüntüler. Bu kullanıcı arayüzü, kullanıcıların bir ödeme uygulaması seçmesine olanak tanır. Ödeme İsteği Kullanıcı Arayüzünde Devam düğmesine basıldıktan sonra seçilen ödeme uygulaması başlatılır.

Ödeme İsteği kullanıcı arayüzü, ödeme uygulaması kullanıma sunulmadan önce müdahale eder.

Bir ödeme uygulamasını başlatmadan önce Ödeme İsteği kullanıcı arayüzünün gösterilmesi, kullanıcının ödemeyi gerçekleştirmek için gereken adım sayısını artırır. Süreci optimize etmek için tarayıcı, bu bilgilerin sağlanması amacıyla ödeme uygulamalarına yetki verebilir ve show() çağrıldığında Ödeme İsteği kullanıcı arayüzünü göstermeden doğrudan bir ödeme uygulamasını başlatabilir.

Ödeme İsteği kullanıcı arayüzünü atlayın ve ödeme uygulamasını doğrudan başlatın.

Bir ödeme uygulamasını doğrudan başlatmak için aşağıdaki koşulların karşılanması gerekir:

  • show(), kullanıcı hareketiyle (örneğin, fare tıklaması) tetiklenir.
  • Aşağıdaki işlemleri yapan yalnızca bir ödeme uygulaması vardır:
    • İstenen ödeme yöntemi tanımlayıcısını destekler.

Web tabanlı bir ödeme uygulaması ne zaman tam zamanında (JIT) kaydedilir?

Web tabanlı ödeme uygulamaları, kullanıcının açıkça ödeme uygulaması web sitesine gitmeden ve hizmet çalışanını kaydettirmeden başlatılabilir. Kullanıcı, web tabanlı ödeme uygulamasıyla ödeme yapmayı seçtiğinde hizmet çalışanı tam zamanında kaydedilebilir. Kayıt süresi iki farklı şekilde olabilir:

  • Ödeme İsteği kullanıcı arayüzü kullanıcıya gösteriliyorsa uygulama tam zamanında kaydedilir ve kullanıcı Devam'ı tıkladığında başlatılır.
  • Ödeme İsteği kullanıcı arayüzü atlanırsa ödeme uygulaması tam zamanında kaydedilir ve doğrudan başlatılır. Tam zamanında kayıtlı bir uygulamayı başlatmak için Ödeme İsteği kullanıcı arayüzünü atlamak, kaynaklar arası hizmet çalışanlarının beklenmedik şekilde kaydedilmesini önleyen bir kullanıcı hareketi gerektirir.

Sonraki adımlar

Ödeme uygulamanızı bulunabilir hale getirdiğinize göre, platforma özel ödeme uygulaması ve web tabanlı bir ödeme uygulaması geliştirmeyi öğrenebilirsiniz.