Payment Request API'ye genel bakış

Eiji Kitamura

Bir müşteri web sitenizden bir ürün satın almaya çalıştığında, sitede müşteriden ödeme bilgilerini ve isteğe bağlı olarak kargo tercihi gibi diğer bilgileri sağlaması istenmelidir. Bu işlemi Ödeme İsteği API'si (PR API) ile hızlı bir şekilde gerçekleştirebilirsiniz.

Temel ödeme yapısı

PaymentRequest nesnesi oluşturmak için iki parametre gerekir: payment methods ve payment details. 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ğunu ve kullanıldığını inceleyin.

Ö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ısı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şlemle ilgili ödeme ayrıntılarını belirtir. Müşteriden ödenmesi gereken toplam tutarı belirten zorunlu değer total içerir. Bu parametre, satın alınan öğeleri isteğe bağlı olarak da listeleyebilir.

Aşağıdaki örnekte, isteğe bağlı olarak satın alınan öğeler listesi (bu durumda 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ılabilir olup olmadığı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ü çağırmadan önce canMakePayment() işlevini çağırın. Tarayıcı, nesnede belirtilen ödeme yöntemlerinden en az birini destekliyorsa Calling canMakePayment(), 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 edinin.

show() yöntemi

İki parametreyi ayarlayıp request nesnesini oluşturduktan sonra, ödeme uygulaması kullanıcı arayüzünü gösteren 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ı daha sonra ödemeyi işlemek için bunu PSP'ye gönderebilir.

Son olarak, PSP'nin döndürdüğü sonuca bağlı olarak response.complete('success') veya response.complete('fail') ile işlemi tamamlayarak ödeme isteği kullanıcı arayüzünü kapatabilirsiniz.

Sıradaki

Web ödemeleri hakkında daha fazla bilgi edinin.