Jak działa Payment Request API

Dowiedz się, jak ogólnie działa interfejs Payment Request API.

Eiji Kitamura

Payment Request API

Gdy klient chce coś kupić w Twojej witrynie, musi poprosić go o podanie danych do płatności i, opcjonalnie, innych informacji, takich jak preferencje dostawy. Możesz to łatwo i szybko zrobić za pomocą interfejsu Payment Request API (PR API).

Podstawowa struktura

Skonstruowanie obiektu PaymentRequest wymaga 2 parametrów: metod płatności i szczegółów płatności. Dodatkowy trzeci parametr payment options (opcje płatności) jest opcjonalny. Podstawowe żądanie można utworzyć w ten sposób:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Przyjrzyjmy się tworzeniu i wykorzystywaniu poszczególnych parametrów.

Formy płatności

Pierwszy parametr, paymentMethods, to lista obsługiwanych form płatności w zmiennej tablicy. Każdy element 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 treści supportedMethods i projektu dostawcy aplikacji płatniczej.

Oba te informacje powinien podać dostawca aplikacji płatniczej.

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

Dane do 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żności od klienta. Ten parametr może też opcjonalnie zawierać listę zakupionych produktów.

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

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

Podczas tworzenia obiektu PaymentRequest Chrome sprawdza, czy użytkownik i jego środowisko są gotowe do dokonania płatności.

Aby sprawdzić, czy użytkownik i środowisko są gotowe do dokonania płatności, przed wywołaniem procedury płatności wywołaj canMakePayment(). Wywołanie canMakePayment() zwraca true, jeśli przeglądarka obsługuje co najmniej 1 formę płatności określoną 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 PaymentRequest.canMakePayment() w MDN

Metoda show()

Po ustawieniu tych 2 parametrów i utworzeniu obiektu request w sposób pokazany 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 jej dostawcy. Gdy klient wyrazi zgodę na dokonanie płatności, do sprzedawcy jest przekazywany obiekt JSON zawierający wszystkie informacje wymagane do przelewu. Sprzedawca może przesłać ją do PSP w celu przetworzenia płatności.

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

Następny krok

Więcej informacji o płatnościach w internecie