Ödeme İsteği API'sinin genel işleyiş şeklini öğrenin.
Ödeme İsteği API'si
Bir müşteri web sitenizden ürün satın almaya çalıştığında site, müşteriden ödeme bilgilerini ve isteğe bağlı olarak gönderim tercihi gibi diğer bilgileri sağlamasını istemelidir. Bu işlemi Payment Request API'yi (PR API) kullanarak kolay ve hızlı bir şekilde gerçekleştirebilirsiniz.
Temel yapı
PaymentRequest
nesnesi oluşturmak için iki parametre gerekir: ödeme yöntemleri ve ödeme ayrıntıları. Ayrıca, üçüncü bir ödeme seçenekleri parametresi isteğe bağlıdır. Aşağıdaki gibi temel bir istek oluşturulabilir:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Her bir parametrenin nasıl oluşturulduğunu ve kullanıldığını inceleyelim.
Ödeme yöntemleri
Birinci parametre olan paymentMethods, dizi değişkeninde desteklenen ödeme yöntemlerinin listesidir. Dizideki her öğe, supportedMethods
ve isteğe bağlı olarak data
olmak üzere iki bileşenden oluşur.
supportedMethods
için satıcının https://bobbucks.dev/pay
gibi bir Ödeme Yöntemi Tanımlayıcısı belirtmesi gerekir. data
hizmetinin varlığı ve içeriği, supportedMethods
içeriğinin ve ödeme uygulaması sağlayıcının tasarımına bağlıdır.
Her iki bilgi de ödeme uygulaması sağlayıcısı tarafından verilmelidir.
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
Ödeme ayrıntıları
İkinci parametre olan paymentDetails bir nesne olarak iletilir ve işlemin ödeme ayrıntılarını belirtir. Gerekli olan total
değerini içerir. Bu değer, müşteriden ödenmesi gereken toplam tutarı belirtir. Bu parametre isteğe bağlı olarak
satın alınan öğeleri de listeleyebilir.
Aşağıdaki örnekte, ödenmesi gereken toplam tutar gibi isteğe bağlı satın alınan öğeler listesi (bu örnekte yalnızca bir öğe) gösterilmektedir. Her iki durumda da para birimi, her bir tutarla birlikte belirtilir.
const paymentDetails = {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
};
Ödeme yönteminin kullanılabilir olup olmadığını kontrol etme
Ödeme prosedürünü başlatmadan önce satıcı, kullanıcının ve ortamın ödeme yapmaya hazır olup olmadığını kontrol edebilir.
canMakePayment()
çağrıldığında, tarayıcının nesnede belirtilen en az bir ödeme yöntemini destekleyip desteklemediği kontrol edilir.
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
MDN'de PaymentRequest.canMakePayment() hakkında daha fazla bilgi
show()
yöntemi
İki parametreyi ayarladıktan ve request
nesnesini yukarıda gösterildiği gibi oluşturduktan sonra, ödeme uygulaması kullanıcı arayüzünü görüntüleyen show()
yöntemini çağırabilirsiniz.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
Ödeme uygulaması kullanıcı arayüzünün nasıl görüneceği tamamen ödeme uygulaması sağlayıcısına bağlıdır. Müşteri ödeme yapmayı kabul ettikten sonra satıcıya, para transferi için gerekli tüm bilgileri içeren bir JSON nesnesi iletilir. Satıcı, ödemenin işleme koyulması için kartı PSP'ye gönderebilir.
Son olarak, PSP'nin döndürdüğü sonuca bağlı olarak işlemi response.complete('success')
veya response.complete('fail')
ile tamamlayarak Ödeme İsteği kullanıcı arayüzünü kapatabilirsiniz.
Sıradaki
Web Payments hakkında daha fazla bilgi edinin.