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.
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?](https://web.dev/static/articles/setting-up-a-payment-method/image/diagram-a-browser-disco-ee5623b0facb6.png?authuser=5&hl=tr)
Keşif süreci, satıcı bir işlem başlattığında başlar:
- Tarayıcı, ödeme yöntemi tanımlayıcı URL'sine bir istek gönderir ve ödeme yöntemi manifestini getirir.
- Tarayıcı, ödeme yöntemi manifestinden web uygulaması manifest URL'sini belirler ve web uygulaması manifestini getirir.
- 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 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.
Ö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. |
![Simge içeren ödeme uygulaması.](https://web.dev/static/articles/setting-up-a-payment-method/image/payment-app-an-icon-3150130974ec9.png?authuser=5&hl=tr)
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.
- Web uygulaması manifestindeki minimum sürüm (
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.
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.
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.