Ödeme yöntemi ayarlama

Web Payments kullanılarak yapılan bir ödeme işlemi, ödeme uygulaması. Ödeme yöntemi ayarlamayı ve ödeme uygulamanızı almayı öğrenin ödeme yapmaya hazır olduğundan emin olmanız gerekir.

Ödeme İsteği API'si ile kullanılabilmesi için bir ödeme uygulamasının ödeme yöntemi tanımlayıcısı. Bir ödeme uygulamasıyla entegrasyon yapmak isteyen satıcılar, bunu tarayıcıya belirtmek için ödeme yöntemi tanımlayıcısını kullanır. Bu makalede, ödeme uygulaması keşfinin işleyiş şekli ve ödeme uygulamanızın bir tarayıcı tarafından düzgün şekilde keşfedilip çağrılması için nasıl yapılandırılacağı ele alınmaktadır.

Web Ödemeleri kavramını veya bir ödeme işleminin işleyiş şeklini yeni öğrendiyseniz kullanıyorsanız önce aşağıdaki makaleleri okuyun:

Tarayıcı desteği

Web ödemeleri birkaç farklı teknolojiden oluşur ve destek durumu tarayıcıya bağlıdır.

Chromium Safari Firefox
Masaüstü Yapay Zeka 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ğlananlar)
  • Web uygulaması manifesti
Şema: Tarayıcının, URL tabanlı bir ödeme yöntemi tanımlayıcısından ödeme uygulamasını keşfetme şekli

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

  1. Tarayıcı, ödeme yöntemine bir istek gönderir tanımlayıcı URL'si ve getirmeleri ödeme yöntemi manifesto'da bulabilirsiniz.
  2. Tarayıcı, web uygulamasını manifest URL'sini ödeme yöntemi manifestini gönderir ve web uygulaması manifestini getirir.
  3. Tarayıcı, web uygulaması manifest'inden OS ödeme uygulamasının mı yoksa web tabanlı ödeme uygulamasının mı başlatılacağını belirler.

Aşağıdaki bölümlerde, tarayıcıların keşfedebilmesi 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ı URL tabanlı bir dizedir. Örneğin, Google Pay'in tanımlayıcısı https://google.com/pay'tür. Ödeme uygulaması geliştiricileri, üzerinde kontrol sahibi oldukları ve istedikleri içeriği sunabildikleri sürece ödeme yöntemi tanımlayıcısı olarak herhangi bir URL seçebilir. Bu makalede, Ödeme yöntemi olarak https://bobbucks.dev/pay kullanır.

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

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

[merchant] ödeme isteğinde bulunur:

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ı bir HTTP Ödeme yöntemi kimliği URL'sine GET isteği. Sunucu, ödeme yöntemiyle yanıt verir manifest gövdesini inceleyin.

Ödeme yöntemi manifest dosyasında 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ı manifestlerini gösteren bir URL dizisi. (URL bir akraba olabilir). Bu dizinin geliştirme manifestini, üretim manifestini vb. referans göstermesi beklenir.
supported_origins Üçüncü taraf barındırabilecek kaynaklara işaret eden URL dizisi aynı ödeme yöntemini uygulayan ödeme uygulamaları. Ödemenin yöntemi birden fazla ödeme uygulaması tarafından uygulanabilir.
Ö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 aşağıdaki web uygulaması manifestlerinin bağlantıları ödeme uygulamaları.

İ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ısı URL'si isteğe bağlı olarak, tarayıcının ödeme yöntemi manifestini alabileceği başka bir URL'yi işaret eden bir Link başlığıyla yanıt verebilir. Bu, ödeme yöntemi manifesti farklı bir sunucu olduğunda veya ödeme uygulaması bir üçüncü taraf tarafından sunulduğundan gelir.

Tarayıcıların, yönlendirme içeren URL tabanlı bir ödeme yöntemi tanımlayıcısından ödeme uygulamasını keşfetme şekli

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

Örneğin, manifest dosyası https://bobbucks.dev/payment-manifest.json adresindeyse yanıt başlığında şunlar yer alır:

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

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

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

3. Adım: Web uygulaması manifesti sunma

Web uygulaması manifest dosyası Adından da anlaşılacağı gibi bir web uygulamasını tanımlamak için kullanılır. Progresif web uygulamalarını (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"
        }
      ]
    }
  ]
}

Bir web uygulaması manifest'inde açıklanan bilgiler, bir Ödeme uygulaması, Ödeme İsteği kullanıcı arayüzünde görüntülenir.

ziyaret edin.
Mülk adı Açıklama
name (zorunlu) Ödeme uygulaması adı olarak kullanılır.
icons (zorunlu) Ödeme uygulaması simgesi olarak kullanılır. Bu simgeleri yalnızca Chrome kullanır; diğer bir simge olarak belirtmezseniz tarayıcılar bunları yedek simge olarak kullanabilir ödeme aracının
serviceworker Web tabanlı ödeme uygulaması olarak çalışan hizmet çalışanını algılamak 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ı gibi çalışan uygulamayı algılamak için kullanılır. Daha fazla bilgiyi Android ödeme uygulamaları geliştirici kılavuzuna göz atın.
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 özgü ödeme uygulamasını başlatma

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:
    • Yüklenen uygulamanın paket kimliği ve imzası eşleşiyor ancak web uygulaması manifest'indeki minimum sürüm (min_version), yüklü uygulamanın sürümünden daha düşük veya bu sürüme eşit.
  • prefer_related_applications alanı true.
  • Platforma özel ödeme uygulaması yüklüyse ve şunları içeriyorsa:
    • org.chromium.action.PAY niyet filtresi.
    • org.chromium.default_payment_method_name mülkünün değeri olarak belirtilen bir ödeme yöntemi tanımlayıcısı.

Android ödeme uygulamaları: geliştirici kılavuzuna göz atın. .

[ö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ıyor. Aksi takdirde, web tabanlı ödeme uygulamasının başlatıldığı bir sonraki adıma geçilir.

Web tabanlı ödeme uygulamasını başlatma

Web tabanlı ödeme uygulaması, web uygulaması manifest'inin serviceworker alanında belirtilmelidir.

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

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

Tarayıcı, hizmet işleyiciye bir paymentrequest etkinlik göndererek web tabanlı ödeme uygulamasını başlatır. Hizmet çalışanının önceden kaydedilmesi 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 İstek API'sinde, "Ödeme İsteği Kullanıcı Arayüzü" adı verilen, tarayıcı tarafından sağlanan bir kullanıcı arayüzü görüntülenir. 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ığında seçilen ödeme uygulaması başlatılır.

Ödeme isteğinde bulunan kullanıcı arayüzü, ödeme uygulaması başlatılmadan önce müdahale eder.

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

Ödeme İsteği kullanıcı arayüzünü atlayıp ö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 koşulları karşılayan 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 önceden açıkça ziyaret etmediği durumlarda başlatılabilir. ve hizmet çalışanının kaydını tutmalısınız. Hizmet çalışanı, kullanıcı web tabanlı ödeme uygulamasıyla ödeme yapmayı seçtiğinde tam zamanında kaydedilebilir. Kayıt zamanlaması için iki varyasyon vardır:

  • Ödeme isteği kullanıcı arayüzü kullanıcıya gösterilirse 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. Ödeme İsteği kullanıcı arayüzünü başlatma adımı atlanıyor "tam zamanında kayıtlı" bir uygulama, kullanıcı hareketi gerektirir. Bu hareket kaynaklar arası hizmet çalışanlarının beklenmeyen şekilde kaydı.

Sonraki Adımlar

Ödeme uygulamanız artık bulunabilir durumda. Platforma özel bir ödeme uygulaması ve web tabanlı bir ödeme uygulaması nasıl geliştireceğinizi öğrenin.