Web Payments kullanan bir ödeme işlemi, ödeme uygulamanızın keşfedilmesiyle başlar. Ödeme yöntemi oluşturmayı ve ödeme uygulamanızı satıcıların ve müşterilerin ödeme yapmasına hazır hale getirmeyi öğrenin.
Yayınlanma tarihi: 27 Eylül 2017, Son güncelleme tarihi: 16 Ekim 2026
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 yapmak isteyen satıcılar, tarayıcıya bunu 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 doğru şekilde keşfedilip çağrılacak şekilde nasıl yapılandırılacağı açıklanmaktadır.
Web Payments'ı kullanmaya yeni başladıysanız önce Web Payments'a genel bakış bölümünü okuyun.
Ödeme uygulaması türleri
Ödeme yöntemi, Android ödeme uygulaması, web tabanlı ödeme uygulaması veya her ikisi tarafından desteklenebilir:
- Android ödeme uygulaması: Chrome'un bir Android intent ile başlattığı yüklü bir uygulama. Chrome, uygulamanın paket adını ve imzalama sertifikasını doğrular.
- Web tabanlı ödeme uygulaması: Chrome'un kalıcı pencerede başlattığı bir hizmet çalışanı. Kullanıcıların herhangi bir şey yüklemesi gerekmez.
Android ödeme uygulamaları, Android'de Chrome'da ve WebView'da kullanılabilir. Web tabanlı ödeme uygulamaları tüm platformlarda Chrome'da kullanılabilir ancak WebView'da kullanılamaz.
Bir ödeme yöntemi için her iki uygulama türü de mevcutsa ve web uygulaması manifestiniz prefer_related_applications değerini true olarak ayarlıyorsa Chrome, web tabanlı ödeme uygulamanızı gizler. Aksi takdirde, kullanıcılar Payment Request kullanıcı arayüzünde her ikisini de görebilir ve aralarında seçim yapabilir.
Tarayıcı desteği
Web Payments, birkaç farklı teknolojiden oluşur ve destek durumu tarayıcıya bağlıdır.
Tarayıcılar ödeme uygulamalarını nasıl keşfeder?
Her ödeme uygulamasının aşağıdakileri sağlaması gerekir:
- URL tabanlı ödeme yöntemi tanımlayıcısı
- Ödeme yöntemi manifesti (ödeme yöntemi tanımlayıcısı üçüncü tarafça sağlandığı durumlar hariç)
- Web uygulaması manifesti
Keşif süreci, satıcı bir işlem başlattığında başlar:
- Tarayıcı, ödeme yöntemi tanımlayıcısı URL'sine bir istek gönderir ve ödeme yöntemi manifestini getirir.
- Tarayıcı, ödeme yöntemi manifestinden web uygulaması manifesti URL'sini belirler ve web uygulaması manifestini getirir.
- Tarayıcı, işletim sistemi ödeme uygulamasını mı yoksa web tabanlı ödeme uygulamasını mı başlatacağını web uygulaması manifestinden belirler.
Sonraki bölümlerde, tarayıcıların ödeme yönteminizi 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ısı, URL tabanlı bir dizedir. Örneğin, Google Pay'in tanımlayıcısı https://google.com/pay şeklindedir. Ödeme uygulaması geliştiricileri, kontrol edebildikleri ve rastgele içerik ile HTTP üstbilgileri sunabildikleri sürece herhangi bir URL'yi ödeme yöntemi tanımlayıcısı olarak seçebilir. Bu makalede, ödeme yöntemi tanımlayıcısı olarak https://bobbucks.dev/pay kullanılacaktı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ının listesiyle oluşturulur. Ödeme yöntemi tanımlayıcıları, supportedMethods özelliğinin değeri olarak ayarlanır. Örneğin:
[merchant] ödeme isteğinde bulundu:
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
2. adım: Ödeme yöntemi manifestini sunun
Ö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ğlama
Satıcı bir ödeme işlemi başlattığında tarayıcı, ödeme yöntemi tanımlayıcı URL'sine bir HTTP HEAD isteği gönderir. Ödeme yöntemi tanımlayıcı URL'si, tarayıcının ödeme yöntemi manifestini getirebileceği URL'yi işaret eden bir Link HTTP üstbilgisiyle yanıt verir.
Ödeme yöntemi sunucusunu, rel="payment-method-manifest" özelliği ve ödeme yöntemi manifesti URL'si ile HTTP Link başlığıyla yanıt verecek şekilde yapılandırın. Örneğin, manifest https://bobbucks.dev/pay/payment-manifest.json adresindeyse yanıt başlığı şunları içerir:
Link: <https://bobbucks.dev/pay/payment-manifest.json>; rel="payment-method-manifest"
URL, tam nitelikli bir alan adı veya göreli yol olabilir. Örnek görmek için ağ trafiğinde https://bobbucks.dev/pay öğesini inceleyin. curl komutunu da kullanabilirsiniz:
curl --include https://bobbucks.dev/pay
Tarayıcı, ödeme yöntemi manifest URL'sine bir HTTP GET isteği gönderir. Sunucu, ödeme yöntemi manifest gövdesiyle yanıt verir.
Ödeme yöntemi manifestinde iki alan bulunur: default_applications ve supported_origins.
| Mülk adı | Açıklama |
|---|---|
default_applications (zorunlu) |
Ödeme uygulamalarının barındırıldığı web uygulaması manifestlerini işaret eden bir URL dizisi. (URL göreli olabilir). Bu dizinin geliştirme manifestine, üretim manifestine vb. referans vermesi beklenir. |
supported_origins |
Aynı ödeme yöntemini uygulayan üçüncü taraf ödeme uygulamalarını barındırabilecek kaynakları işaret eden bir URL dizisi. Bir ödeme yönteminin birden fazla ödeme uygulaması tarafından uygulanabileceğini unutmayın. |
Ödeme yöntemi manifest dosyası şu şekilde görünmelidir:
[payment handler] /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ı manifestlerine giden bağlantıların listesini bulur.
3. adım: Web uygulaması manifesti sunun
Web uygulaması manifesti, adından da anlaşılacağı üzere 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 manifesto dosyasıdır.
Tipik bir web uygulaması manifesti şöyle görünür:
[payment handler] /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
},
"payment": {
"supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
},
"start_url": "/",
"display": "standalone",
"theme_color": "#3f51b5",
"background_color": "#3f51b5",
"prefer_related_applications": true,
"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"
}
]
}
]
}
Chrome, ödeme uygulamasının türüne bağlı olarak farklı alanları okur. Android ödeme uygulaması için Chrome yalnızca related_applications alanını okur. Chrome, web tabanlı bir ödeme uygulaması için name, icons, serviceworker, payment ve prefer_related_applications değerlerini okur.
| 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. Ödeme aracının bir parçası olarak belirtmezseniz diğer tarayıcılar bunları yedek simge olarak kullanabilir. |
serviceworker
|
Yalnızca web tabanlı ödeme uygulamaları. Ödeme uygulaması olarak çalışan hizmet çalışanını tanımlar. |
serviceworker.src |
Hizmet çalışanı komut dosyasının indirileceği URL. |
serviceworker.scope |
Hizmet çalışanının kayıt kapsamını tanımlayan bir URL'yi temsil eden dize. |
serviceworker.use_cache |
Tarayıcının, hizmet çalışanı komut dosyasını getirirken HTTP önbelleğini kullanıp kullanamayacağı. |
payment.supported_delegations |
Yalnızca web tabanlı ödeme uygulamaları. Ödeme uygulamasının sağlayabileceği kargo ve iletişim bilgileri: shippingAddress, payerName, payerEmail veya payerPhone. Android ödeme uygulamaları bunu AndroidManifest.xml içinde bildirir.
|
related_applications
|
Yalnızca Android ödeme uygulamaları. Uygulamayı ve imzalama sertifikasını tanımlar. Android ödeme uygulamaları geliştirici kılavuzunda daha fazla bilgi bulabilirsiniz. |
prefer_related_applications
|
Android ödeme uygulaması yüklendiğinde web tabanlı ödeme uygulamasını gizlemek için true olarak ayarlayın.
|
Web uygulaması manifestinin name özelliği ödeme uygulaması adı, icons özelliği ise ödeme uygulaması simgesi olarak kullanılır.
Chrome, başlatılacak ödeme uygulamasını nasıl belirler?
Platforma özel ödeme uygulamasını başlatma
Platforma özel ödeme uygulamasını başlatmak için aşağıdaki koşulların karşılanması gerekir:
related_applicationsalanı, web uygulaması manifestinde belirtilir ve:- Yüklü uygulamanın paket kimliği ve imzası eşleşirken web uygulaması manifestindeki minimum sürüm (
min_version), yüklü uygulamanın sürümünden küçük veya ona eşit.
- Yüklü uygulamanın paket kimliği ve imzası eşleşirken web uygulaması manifestindeki minimum sürüm (
- Platforma özel ödeme uygulaması yüklü ve şu özelliklere sahip:
org.chromium.intent.action.PAYintent filtresi.org.chromium.default_payment_method_nameözelliğinin değeri olarak belirtilen bir ödeme yöntemi tanımlayıcısı.
Bunların nasıl ayarlanacağı hakkında daha fazla bilgi için Android ödeme uygulamaları: geliştirici kılavuzuna göz atın.
[payment handler] /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"
}]
}]
prefer_related_applications, true ise ve platforma özel ödeme uygulaması kullanılabiliyorsa Chrome, web tabanlı ödeme uygulamasını gizler. Aksi takdirde Chrome, web tabanlı ödeme uygulamasını da arar.
Web tabanlı ödeme uygulamasını başlatma
Web tabanlı ödeme uygulaması, web uygulaması manifestinin serviceworker alanında belirtilmelidir.
[payment handler] /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 kaydedilmesi gerekmez. Tam zamanında kaydedilebilir.
Özel optimizasyonları anlama
Tarayıcılar, Payment Request kullanıcı arayüzünü atlayıp doğrudan bir ödeme uygulamasını nasıl başlatabilir?
Chrome'da, PaymentRequest öğesinin show() yöntemi çağrıldığında Payment Request API, "Ödeme İsteği kullanıcı arayüzü" adlı tarayıcı tarafından sağlanan bir kullanıcı arayüzü gösterir. Bu kullanıcı arayüzü, kullanıcıların bir ödeme uygulaması seçmesine olanak tanır. Payment Request kullanıcı arayüzünde Devam düğmesine basıldıktan sonra seçilen ödeme uygulaması başlatılır.
Ödeme uygulamasını başlatmadan önce Payment Request kullanıcı arayüzünün gösterilmesi, kullanıcının ödeme yapması için gereken adım sayısını artırır. Süreci optimize etmek için tarayıcı, bu bilgilerin yerine getirilmesini ödeme uygulamalarına devredebilir ve show() çağrıldığında Ödeme İsteği kullanıcı arayüzünü göstermeden doğrudan bir ödeme uygulaması başlatabilir.
Bir ödeme uygulamasını doğrudan başlatmak için aşağıdaki koşulların karşılanması gerekir:
show(), bir kullanıcı hareketiyle (ör. fare tıklaması) tetiklenir.- Yalnızca tek bir ödeme uygulaması:
- İstenen ödeme yöntemi tanımlayıcısını destekler.
- Satıcının talep ettiği tüm kargo ve iletişim bilgilerini destekler.
Web tabanlı bir ödeme uygulaması ne zaman tam zamanında (JIT) kaydedilir?
Web tabanlı ödeme uygulamaları, kullanıcının ödeme uygulaması web sitesini önceden ziyaret etmesine ve hizmet çalışanını kaydetmesine gerek kalmadan başlatılabilir. 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:
- Payment Request 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.
- Payment Request UI 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 Payment Request kullanıcı arayüzünü atlamak, kullanıcı hareketi gerektirir. Bu sayede, çapraz kaynak hizmet çalışanlarının beklenmedik şekilde kaydedilmesi önlenir.
Web tabanlı ödeme uygulaması oluşturma
Satıcı show() yöntemini çağırdığında Chrome, hizmet çalışanınıza bir paymentrequest etkinliği gönderir. Ödeme kullanıcı arayüzünüzü göstermek için respondWith() içinde openWindow() yöntemini çağırın, ardından ödeme yanıtıyla çözün.
API'nin tamamı için MDN'deki Web Tabanlı Payment Handler API'ye bakın.