Jak działa Payment Request API

Poznaj ogólne informacje o tym, jak działa interfejs Payment Request API.

Eiji Kitamura

Interfejs Payment Request API

Gdy klient próbuje dokonać zakupu w Twojej witrynie, musi on podać dane do płatności oraz opcjonalnie inne informacje, takie jak preferencje dotyczące dostawy. Możesz to zrobić szybko i łatwo za pomocą interfejsu Payment Request API (PR API).

Struktura podstawowa

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

const request = new PaymentRequest(paymentMethods, paymentDetails);

Zobaczmy, jak każdy parametr jest tworzony i używany.

Formy płatności

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

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

Oba te elementy informacji powinien podać dostawca aplikacji do płatności.

// 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ę do zapłaty przez klienta. Ten parametr może też opcjonalnie zawierać listę zakupionych produktów.

W przykładzie poniżej widoczna jest lista opcjonalnych zakupionych produktów (w tym przypadku tylko jeden) oraz wymagana łączna kwota do zapłaty. W obu przypadkach waluta jest określona w przypadku 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' }
  }
};

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

Podczas tworzenia obiektu PaymentRequest Chrome sprawdza, czy użytkownik i ś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 funkcję canMakePayment(). Wywołanie canMakePayment() zwraca true, jeśli przeglądarka obsługuje co najmniej jedną 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
});

Dowiedz się więcej o metodzie PaymentRequest.canMakePayment() w MDN.

Metoda show()

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

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

Wygląd interfejsu aplikacji do płatności zależy całkowicie od dostawcy aplikacji. Gdy klient wyrazi zgodę na dokonanie płatności, do sprzedawcy zostanie przekazany obiekt JSON zawierający wszystkie wymagane informacje do przeniesienia pieniędzy. Następnie sprzedawca może wysłać go do PSP w celu przetworzenia płatności.

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

Następny krok

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