Payment Request API'nin işleyiş şekli

Ödeme İsteği API'sinin genel işleyiş şeklini öğrenin.

Eiji Kitamura

Ö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.