Payment Request API'nin işleyiş şekli

Payment Request API'nin 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 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.