Dowiedz się, jak ogólnie działa interfejs Payment Request API.
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