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 kupić coś w Twojej witrynie, musi o to poprosić podanie przez klienta danych karty oraz, opcjonalnie, innych informacji takich jak preferencje dostawy. Możesz to łatwo i szybko osiągnąć za pomocą Payment Request API (PR API).

Podstawowa struktura

Złożenie obiektu PaymentRequest wymaga dwóch parametrów: payment i szczegóły płatności. Oprócz tego trzeci parametr payment options jest opcjonalna. 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 form płatności obsługiwanych w zmienną tablicową. Każdy element tablicy składa się z 2 komponentów: supportedMethods oraz opcjonalnie data.

W przypadku supportedMethods sprzedawca musi określić formę płatności Identyfikator na przykład https://bobbucks.dev/pay. Istotność i zawartość kategorii data zależą od tych czynników: treść supportedMethods i projekt 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 wymaganą wartość total, która określa łączną kwotę należności od klienta. Ten parametr może też opcjonalnie wyświetlić listę zakupionych produktów.

W przykładzie poniżej opcjonalna lista kupionych produktów (tylko jeden produkt, w tym przypadku) oraz wymagana łączna kwota należności. W obu przypadkach waluta jest określana dla każdej pojedynczej ilości.

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

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

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

Aby sprawdzić, czy użytkownik i środowisko są gotowe do dokonania płatności, zadzwoń pod numer canMakePayment() przed wywołaniem procedury płatności. Łączę canMakePayment() zwraca wartość true, jeśli przeglądarka obsługuje co najmniej 1 płatność określonych 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 obu parametrów i utworzeniu obiektu request zgodnie z przykładem możesz wywołać metodę show(), która wyświetla użytkownika aplikacji płatniczej za pomocą prostego interfejsu online.

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 aplikacji płatniczej dostawcy usług. Gdy klient zgodzi się na dokonanie płatności, przesyłany jest obiekt JSON. sprzedawcy, który zawiera wszystkie informacje wymagane do przelania pieniędzy. Sprzedawca może przesłać ją do PSP w celu przetworzenia płatności.

Możesz też zamknąć interfejs żądania płatności, wykonując proces response.complete('success') lub response.complete('fail'), w zależności od w wyniku zwracania danych przez dostawcę usług płatniczych.

Następny krok

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