Payment Request API'nin genel işleyiş şeklini öğrenin.
Ödeme İsteği API'si
Bir müşteri web sitenizden ürün satın almaya çalıştığında sitenin, müşteriden ödeme bilgilerini ve isteğe bağlı olarak gönderim tercihi gibi diğer bilgileri paylaşmasını istemesi gerekir. Bunu Payment Request API'yi (PR API) kullanarak kolay ve hızlı bir şekilde yapabilirsiniz.
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. Temel bir istek şu şekilde oluşturulabilir:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Her bir parametrenin nasıl oluşturulduğuna ve kullanıldığına bakalım.
Ödeme yöntemleri
İlk parametre olan paymentMethods, bir dizi değişkeninde desteklenen ödeme yöntemlerinin listesidir. Dizideki her öğe iki bileşenden oluşur: supportedMethods
ve isteğe bağlı olarak data
.
supportedMethods
için satıcının https://bobbucks.dev/pay
gibi bir ödeme yöntemi tanımlayıcısı belirtmesi gerekir. data
öğesinin varlığı ve içeriği, supportedMethods
öğesinin içeriğine 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 sağlanmalıdır.
// 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, nesne olarak iletilir ve işlemle ilgili ödeme ayrıntılarını belirtir. Müşteriden alınması gereken toplam tutarı belirten zorunlu total
değerini içerir. Bu parametre, isteğe bağlı olarak satın alınan öğeleri de listeleyebilir.
Aşağıdaki örnekte, isteğe bağlı olarak satın alınan öğeler listesi (bu örnekte yalnızca bir öğe) ve ödenmesi gereken toplam tutar 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ılıp kullanılamayacağını kontrol etme
Chrome, PaymentRequest
nesnesi oluşturulurken kullanıcının ve ortamın ödeme yapmaya hazır olup olmadığını kontrol eder.
Kullanıcının ve ortamın ödeme yapmaya hazır olup olmadığını kontrol etmek için ödeme prosedürünü başlatmadan önce canMakePayment()
numaralı telefonu arayın. Tarayıcı, nesnede belirtilen en az bir ödeme yöntemini destekliyorsa canMakePayment()
çağrısı true
döndürür.
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'deki PaymentRequest.canMakePayment() hakkında daha fazla bilgi edinin.
show()
yöntemi
İki parametreyi ayarladıktan ve yukarıda gösterildiği gibi request
nesnesini 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, para aktarmak için gereken tüm bilgileri içeren bir JSON nesnesi satıcıya iletilir. Satıcı daha sonra ödemeyi işlemek için bu token'i 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 Ödemeleri hakkında daha fazla bilgi edinin.