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 buna izin vermesi gerekir ödeme bilgilerini ve isteğe bağlı olarak diğer bilgileri sağlaması (ör. kargo tercihi gibi) Bunu hızlı ve kolay bir şekilde başarmak için Payment Request API (PR API).

Temel yapı

PaymentRequest nesnesi oluşturmak için iki parametre gerekir: payment yöntemleri ve ödeme ayrıntılarını görebilirsiniz. Buna ek olarak, üçüncü bir ö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şkenidir. Dizideki her öğe iki bileşenden oluşur: supportedMethods ve isteğe bağlı olarak data.

supportedMethods için satıcının bir Ödeme Yöntemi belirtmesi gerekir Tanımlayıcı (ör. https://bobbucks.dev/pay). data hizmetinin varlığı ve içeriği şuna bağlıdır: supportedMethods ve ödeme uygulaması sağlayıcının tasarımının içeriği.

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ı görüntülemenizi sağlar. total gerekli değerini içeriyor. Bu değer, müşterinin ödeyeceği toplam tutarı belirtir. Bu parametre ayrıca satın alınan öğeleri isteğe bağlı olarak listeleyin.

Aşağıdaki örnekte, isteğe bağlı satın alınan öğeler listesi (bu öğede yalnızca bir öğe, durum) gösterilir. Her iki durumda da para birimi 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, kullanıcının ve ortamın ödeme yapmaya hazır olup olmadığını kontrol eder PaymentRequest nesnesinin inşaatında.

Kullanıcının ve ortamın ödeme yapmaya hazır olup olmadığını kontrol etmek için şu numarayı arayın: Ödeme prosedürünü başlatmadan önce canMakePayment(). Telefon etme Tarayıcı en az bir ödemeyi destekliyorsa canMakePayment(), true değerini döndürür yöntemini çağırın.

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 gösterildiği gibi oluşturduktan sonra üstte, ödeme uygulaması kullanıcısını gösteren show() yöntemini çağırabilirsiniz. kullanır.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

Ödeme uygulaması kullanıcı arayüzünün görünümü tamamen ödeme uygulamasına bağlıdır sağlar. Müşteri ödeme yapmayı kabul ettikten sonra, bir JSON nesnesi iletilir bilgileri içeren bir e-posta alırsınız. Daha sonra satıcı, ödemeyi işleme alması için teklifi PSP'ye gönderebilir.

Son olarak, Şuna bağlı olarak response.complete('success') veya response.complete('fail'): sonuç olarak nitelendirilir.

Sıradaki

Web Ödemeleri hakkında daha fazla bilgi edinin.