Jak działa Payment Request API

Dowiedz się, jak działa Payment Request API.

Payment Request API

Gdy klient spróbuje kupić coś w Twojej witrynie, musi ona poprosić go o podanie danych karty i opcjonalnie innych informacji, np. o preferencjach dostawy. Możesz to łatwo i szybko zrobić za pomocą interfejsu Payment Request API (PR API).

Podstawowa struktura

Utworzenie obiektu PaymentRequest wymaga 2 parametrów: metod płatności i szczegółów płatności. Trzeci parametr opcje płatności jest opcjonalny. Podstawowe żądanie może wyglądać tak:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Przyjrzyjmy się, jak każdy parametr jest zbudowany i używany.

Formy płatności

Pierwszy parametr, paymentMethods, to lista obsługiwanych form płatności w zmiennej tablicy. Każdy element w tablicy składa się z 2 komponentów: supportedMethods i opcjonalnie data.

W przypadku supportedMethods sprzedawca musi określić identyfikator formy płatności, np. https://bobbucks.dev/pay. Istnienie i zawartość data zależy od zawartości supportedMethods i projektu dostawcy aplikacji płatniczej.

Obie te dane powinny zostać podane przez dostawcę aplikacji płatniczej.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

Płatności

Drugi parametr, paymentDetails, jest przekazywany jako obiekt i określa szczegóły płatności za transakcję. Zawiera on wymaganą wartość total, która określa łączną kwotę należną od klienta. Ten parametr może też opcjonalnie wyświetlać listę zakupionych produktów.

W przykładzie poniżej widoczna jest opcjonalna lista kupionych produktów (w tym przypadku tylko jeden produkt) oraz wymagana łączna kwota należności. W obu przypadkach jednostka waluty jest określana przy każdej indywidualnej kwocie.

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' }
  }
};

Sprawdzanie, czy forma płatności jest dostępna

Przed wywołaniem procedury płatności sprzedawca może sprawdzić, czy użytkownik i środowisko są gotowe do dokonania płatności.

Wywołanie canMakePayment() sprawdza, czy przeglądarka obsługuje co najmniej jedną formę płatności podaną w obiekcie.

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
});

Więcej informacji o funkcji PaymentRequest.canMakePayment() w MDN

Metoda show()

Po ustawieniu dwóch parametrów i utworzeniu obiektu request, jak pokazano powyżej, możesz wywołać metodę show(), która wyświetla interfejs użytkownika aplikacji płatniczej.

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

Wygląd interfejsu aplikacji płatniczej zależy wyłącznie od dostawcy aplikacji płatniczej. Gdy klient zgodzi się na dokonanie płatności, do sprzedawcy przekazywany jest obiekt JSON zawierający wszystkie informacje wymagane do przelania pieniędzy. Następnie sprzedawca może przesłać ją do dostawcy usług płatniczych, aby zrealizować płatność.

Na koniec możesz zamknąć interfejs prośby o płatność, przechodząc proces za pomocą response.complete('success') lub response.complete('fail'), w zależności od wyniku zwracanego przez dostawcę usług płatniczych.

Następny

Dowiedz się więcej o płatnościach internetowych.