Omówienie Payment Request API

Eiji Kitamura

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

Podstawowa struktura płatności

Do utworzenia obiektu PaymentRequest wymagane są 2 parametry: metody płatności i szczegóły płatności. Dodatkowo opcjonalny jest trzeci parametr payment options (opcje płatności). Podstawowe żądanie można utworzyć w ten sposób:

const request = new PaymentRequest(paymentMethods, paymentDetails);

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

Formy płatności

Pierwszy parametr, paymentMethods, to lista obsługiwanych form płatności w zmiennej tablicowej. 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żą od zawartości supportedMethods i projektu dostawcy aplikacji do płatności.

Obie te informacje powinny być podane przez dostawcę 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ę kupionych produktów.

W poniższym przykładzie pokazana jest opcjonalna lista zakupionych produktów (w tym przypadku tylko 1 produkt) oraz wymagana łączna kwota do zapłaty. W obu przypadkach jednostka waluty jest podawana przy każdej 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

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

Aby sprawdzić, czy użytkownik i środowisko są gotowi 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 metodzie PaymentRequest.canMakePayment() znajdziesz w MDN

Metoda show()

Po ustawieniu 2 parametrów i utworzeniu obiektu request możesz wywołać metodę show(), która wyświetla interfejs 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 tej aplikacji. Gdy klient zgodzi się na dokonanie płatności, do sprzedawcy zostanie przekazany obiekt JSON zawierający wszystkie informacje wymagane do przelania środków. Sprzedawca może następnie wysłać go do dostawcy usług płatniczych, aby przetworzyć płatność.

Na koniec możesz zamknąć interfejs żądania płatności, kończąc proces za pomocą ikony 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.