Dowiedz się, jak działa Payment Request API.
Payment Request API
Gdy klient spróbuje kupić coś w Twojej witrynie, musi ona poprosić go o podanie danych karty i opcjonalnie innych informacji, np. o preferencjach dostawy. Możesz to łatwo i szybko zrobić za pomocą interfejsu Payment Request API (PR API).
Podstawowa struktura
Utworzenie obiektu PaymentRequest
wymaga 2 parametrów: metod płatności i szczegółów płatności. Trzeci parametr opcje płatności jest opcjonalny. Podstawowe żądanie może wyglądać tak:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Przyjrzyjmy się, jak każdy parametr jest zbudowany i używany.
Formy płatności
Pierwszy parametr, paymentMethods, to lista obsługiwanych form płatności w zmiennej tablicy. Każdy element w 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 zawartości supportedMethods
i projektu dostawcy aplikacji płatniczej.
Obie te dane powinny zostać podane przez dostawcę aplikacji płatniczej.
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
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żną od klienta. Ten parametr może też opcjonalnie wyświetlać listę zakupionych produktów.
W przykładzie poniżej widoczna jest opcjonalna lista kupionych produktów (w tym przypadku tylko jeden produkt) oraz wymagana łączna kwota należności. W obu przypadkach jednostka waluty jest określana przy każdej indywidualnej 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
Przed wywołaniem procedury płatności sprzedawca może sprawdzić, czy użytkownik i środowisko są gotowe do dokonania płatności.
Wywołanie canMakePayment()
sprawdza, czy przeglądarka obsługuje co najmniej jedną formę płatności podaną 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 funkcji PaymentRequest.canMakePayment() w MDN
Metoda show()
Po ustawieniu dwóch parametrów i utworzeniu obiektu request
, jak pokazano 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 dostawcy aplikacji płatniczej. Gdy klient zgodzi się na dokonanie płatności, do sprzedawcy przekazywany jest obiekt JSON zawierający wszystkie informacje wymagane do przelania pieniędzy. Następnie sprzedawca może przesłać ją do dostawcy usług płatniczych, aby zrealizować płatność.
Na koniec możesz zamknąć interfejs prośby o płatność, przechodząc proces za pomocą response.complete('success')
lub response.complete('fail')
, w zależności od wyniku zwracanego przez dostawcę usług płatniczych.
Następny
Dowiedz się więcej o płatnościach internetowych.