Payment Request API'nin işleyiş şekli

Ödeme İsteği API'sinin üst düzeyde nasıl çalıştığını öğrenin.

Eiji Kitamura

Ö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ü ödeme seçenekleri parametresi isteğe bağlıdır. Şöyle temel bir istek 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, 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ğ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, bir nesne olarak iletilir ve işlemin ödeme ayrıntılarını belirtir. Müşterinin ödemesi gereken toplam tutarı belirten gerekli 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ı satın alınan öğeler listesi (bu örnekte yalnızca bir öğe), ödenmesi gereken toplam tutarla birlikte 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

Chrome, PaymentRequest nesnesinin oluşturulması sırasında 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ılması true değerini 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'de PaymentRequest.canMakePayment() hakkında daha fazla bilgi

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 satıcıya para aktarmak için gerekli tüm bilgileri içeren bir JSON nesnesi iletilir. Daha sonra satıcı, ödemeyi işleme alması için teklifi PSP'ye gönderebilir.

Son olarak, PSP'nin iade ettiği 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.