Jak dostosować internetową aplikację płatniczą do płatności w internecie i zapewnić klientom lepsze wrażenia.
Gdy aplikacja płatnicza działająca w przeglądarce otrzyma żądanie płatności i zainicjuje transakcję płatniczą, skrypt service worker będzie działać jako centrum komunikacji między sprzedawcą a aplikacją płatniczą. W tym poście wyjaśniamy, jak aplikacja płatnicza może przekazywać sprzedawcy informacje o formie płatności, adresie dostawy lub dane kontaktowe za pomocą skryptu service worker.
Poinformuj sprzedawcę
Ważne jest, aby poinformować sprzedawcę o tych zmianach.
Zmiana formy płatności
Aplikacje płatnicze mogą obsługiwać wiele instrumentów płatniczych z różnymi formami płatności.
| Klient | Forma płatności | Instrument płatniczy |
|---|---|---|
| A | Wydawca karty kredytowej 1 | ****1234 |
| Wydawca karty kredytowej 1 | ****4242 |
|
| Bank X | ******123 |
|
| B | Wydawca karty kredytowej 2 | ****5678 |
| Bank X | ******456 |
Na przykład w tabeli powyżej portfel internetowy klienta A ma zarejestrowane 2 karty kredytowe i 1 konto bankowe. W tym przypadku aplikacja obsługuje 3 instrumenty płatnicze (****1234, ****4242, ******123) i 2 formy płatności (Wydawca karty kredytowej 1 i Bank X). W przypadku transakcji płatniczej aplikacja płatnicza może pozwolić klientowi wybrać jeden z instrumentów płatniczych i użyć go do zapłaty sprzedawcy.
Aplikacja płatnicza może poinformować sprzedawcę o formie płatności wybranej przez klienta, zanim wyśle pełną odpowiedź dotyczącą płatności. Jest to przydatne, gdy sprzedawca chce na przykład przeprowadzić kampanię rabatową dotyczącą konkretnej marki formy płatności.
Dzięki internetowemu interfejsowi Payment Handler API aplikacja płatnicza może wysłać do sprzedawcy zdarzenie „zmiana formy płatności” za pomocą skryptu service worker, aby powiadomić o nowym identyfikatorze formy płatności. Skrypt service worker powinien wywołać funkcję PaymentRequestEvent.changePaymentMethod() z informacjami o nowej formie płatności.
Aplikacje płatnicze mogą przekazywać obiekt methodDetails jako opcjonalny drugi argument dla PaymentRequestEvent.changePaymentMethod(). Ten obiekt może zawierać dowolne dane formy płatności wymagane przez sprzedawcę do przetworzenia zdarzenia zmiany.
[payment handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_METHOD_CHANGED':
const newMethod = e.data.paymentMethod;
const newDetails = e.data.methodDetails;
// Redact or check that no sensitive information is passed in
// `newDetails`.
// Notify the merchant of the payment method change
details =
await payment_request_event.changePaymentMethod(newMethod, newDetails);
…
Gdy sprzedawca otrzyma zdarzenie paymentmethodchange z interfejsu Payment Request API, może zaktualizować dane do płatności i odpowiedzieć obiektem PaymentDetailsUpdate.
[merchant]
request.addEventListener('paymentmethodchange', e => {
if (e.methodName === 'another-pay') {
// Apply $10 discount for example.
const discount = {
label: 'special discount',
amount: {
currency: 'USD',
// The value being string complies the spec
value: '-10.00'
}
};
let total = 0;
details.displayItems.push(discount);
for (let item of details.displayItems) {
total += parseFloat(item.amount.value);
}
// Convert the number back to string
details.total.amount.value = total.toString();
}
// Pass a promise to `updateWith()` and send updated payment details
e.updateWith(details);
});
Gdy sprzedawca odpowie, obietnica zwrócona przez PaymentRequestEvent.changePaymentMethod() zostanie rozwiązana za pomocą obiektu PaymentRequestDetailsUpdate.
[payment handler] service-worker.js
…
// Notify the merchant of the payment method change
details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Użyj obiektu, aby zaktualizować interfejs we frontendzie. Zobacz Zaktualizowanie danych do płatności.
Zmiana adresu dostawy
Aplikacje płatnicze mogą podawać sprzedawcy adres dostawy klienta w ramach transakcji płatniczej.
Jest to przydatne dla sprzedawców, ponieważ mogą oni zlecić zbieranie adresów aplikacjom płatniczym. Ponieważ dane adresowe będą podawane w standardowym formacie danych, sprzedawca może oczekiwać, że adresy dostawy będą miały spójną strukturę.
Dodatkowo klienci mogą zarejestrować swoje dane adresowe w preferowanej aplikacji płatniczej i używać ich u różnych sprzedawców.
Aplikacje płatnicze mogą udostępniać interfejs do edytowania adresu dostawy lub wybierania wcześniej zarejestrowanych informacji o adresie klienta w transakcji płatniczej. Gdy adres dostawy zostanie tymczasowo określony, aplikacja płatnicza może poinformować sprzedawcę o zredagowanych danych adresowych. Daje to sprzedawcom wiele korzyści:
- Sprzedawca może określić, czy klient spełnia ograniczenia regionalne dotyczące wysyłki produktu (np. tylko na terenie kraju).
- Sprzedawca może zmienić listę opcji dostawy w zależności od regionu adresu dostawy (np. dostawa międzynarodowa standardowa lub ekspresowa).
- Sprzedawca może zastosować nowy koszt dostawy na podstawie adresu i zaktualizować łączną cenę.
Dzięki internetowemu interfejsowi Payment Handler API aplikacja płatnicza może wysłać do sprzedawcy zdarzenie „zmiana adresu dostawy” z skryptu service worker, aby powiadomić o nowym adresie dostawy. Skrypt service worker powinien wywołać metodę PaymentRequestEvent.changeShippingAddress() z nowym obiektem adresu.
[payment handler] service-worker.js
...
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_ADDRESS_CHANGED':
const newAddress = e.data.shippingAddress;
details =
await payment_request_event.changeShippingAddress(newAddress);
…
Słowo kluczowe: Redacted address. W takim przypadku podanie sprzedawcy pełnego adresu dostawy nie jest konieczne i może naruszać prywatność klientów. Sprzedawca otrzymuje tylko te części adresu, które są mu potrzebne do określenia kosztu dostawy. Przeglądarka wyczyści pola organization, phone, recipient, addressLine z adresu podanego przez aplikację płatniczą, zanim wywoła zdarzenie shippingaddresschange w modelu DOM sprzedawcy.
Sprzedawca otrzyma zdarzenie shippingaddresschange z interfejsu Payment Request API, dzięki czemu będzie mógł odpowiedzieć, podając zaktualizowany PaymentDetailsUpdate.
[merchant]
request.addEventListener('shippingaddresschange', e => {
// Read the updated shipping address and update the request.
const addr = request.shippingAddress;
const details = getPaymentDetailsFromShippingAddress(addr);
// `updateWith()` sends back updated payment details
e.updateWith(details);
});
Gdy sprzedawca odpowie, zwrócona obietnica PaymentRequestEvent.changeShippingAddress() zostanie rozwiązana za pomocą obiektu PaymentRequestDetailsUpdate.
[payment handler] service-worker.js
…
// Notify the merchant of the shipping address change
details = await payment_request_event.changeShippingAddress(newAddress);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Użyj obiektu, aby zaktualizować interfejs we frontendzie. Zobacz Zaktualizowanie danych do płatności.
Poinformuj sprzedawcę o zmianie opcji dostawy
Opcje dostawy to metody dostawy, których sprzedawcy używają do wysyłania zakupionych produktów do klienta. Typowe opcje dostawy:
- Bezpłatna dostawa
- Dostawa ekspresowa
- wysyłka za granicę
- Przesyłka międzynarodowa premium
Każda z nich wiąże się z innymi kosztami. Zwykle szybsze metody i opcje są droższe.
Sprzedawcy korzystający z interfejsu Payment Request API mogą przekazać ten wybór aplikacji płatniczej. Aplikacja płatnicza może wykorzystać te informacje do utworzenia interfejsu i umożliwienia klientowi wyboru opcji dostawy.
Lista opcji dostawy określona w interfejsie Payment Request API sprzedawcy jest przekazywana do skryptu service worker aplikacji płatniczej jako właściwość PaymentRequestEvent.
[merchant]
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay',
data: { transactionId: '****' }
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
shippingOptions: [{
id: 'standard',
label: 'Standard',
amount: { value: '0.00', currency: 'USD' },
selected: true
}, {
id: 'express',
label: 'Express',
amount: { value: '5.00', currency: 'USD' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, { requestShipping: true });
Aplikacja płatnicza może poinformować sprzedawcę, którą opcję dostawy wybrał klient. Jest to ważne zarówno dla sprzedawcy, jak i klienta, ponieważ zmiana opcji dostawy powoduje też zmianę łącznej ceny. Sprzedawca musi zostać poinformowany o najnowszej cenie, aby później zweryfikować płatność, a klient również musi wiedzieć o zmianie.
Dzięki interfejsowi Payment Handler API aplikacja płatnicza może wysłać do sprzedawcy zdarzenie „zmiana opcji dostawy” z skryptu service worker. Skrypt service worker powinien wywołać metodę PaymentRequestEvent.changeShippingOption() z nowym identyfikatorem opcji dostawy.
[payment handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_OPTION_CHANGED':
const newOption = e.data.shippingOptionId;
details =
await payment_request_event.changeShippingOption(newOption);
…
Sprzedawca otrzyma zdarzenie shippingoptionchange z interfejsu Payment Request API. Sprzedawca powinien użyć tych informacji, aby zaktualizować łączną cenę, a następnie odpowiedzieć, podając zaktualizowany obiekt PaymentDetailsUpdate.
[merchant]
request.addEventListener('shippingoptionchange', e => {
// selected shipping option
const shippingOption = request.shippingOption;
const newTotal = {
currency: 'USD',
label: 'Total due',
value: calculateNewTotal(shippingOption),
};
// `updateWith()` sends back updated payment details
e.updateWith({ total: newTotal });
});
Gdy sprzedawca odpowie, obietnica zwrócona przez PaymentRequestEvent.changeShippingOption() zostanie rozwiązana za pomocą obiektu PaymentRequestDetailsUpdate.
[payment handler] service-worker.js
…
// Notify the merchant of the shipping option change
details = await payment_request_event.changeShippingOption(newOption);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Użyj obiektu, aby zaktualizować interfejs we frontendzie. Zobacz Zaktualizowanie danych do płatności.
odzwierciedlać zaktualizowane dane do płatności,
Gdy sprzedawca zakończy aktualizowanie danych karty, obietnice zwrócone przez .changePaymentMethod(), .changeShippingAddress() i .changeShippingOption() zostaną rozwiązane za pomocą wspólnego obiektu PaymentRequestDetailsUpdate. Moduł obsługi płatności może użyć wyniku, aby odzwierciedlić zaktualizowaną łączną cenę i opcje dostawy w interfejsie.
Sprzedawcy mogą zwracać błędy z kilku powodów:
- Forma płatności nie jest akceptowana.
- Adres dostawy znajduje się poza obsługiwanymi regionami.
- Adres dostawy zawiera nieprawidłowe informacje.
- Opcja dostawy nie jest dostępna dla podanego adresu dostawy lub z innego powodu.
Aby odzwierciedlić stan błędu, użyj tych właściwości:
error: zrozumiały dla człowieka ciąg znaków błędu. To najlepszy ciąg znaków do wyświetlenia klientom.shippingAddressErrors: obiektAddressErrorszawierający szczegółowy ciąg znaków błędu dla każdej właściwości adresu. Jest to przydatne, jeśli chcesz otworzyć formularz, który umożliwia klientowi edytowanie adresu, i musisz skierować go bezpośrednio do nieprawidłowych pól.paymentMethodErrors: obiekt błędu dotyczący formy płatności. Możesz poprosić sprzedawców o podanie błędu strukturalnego, ale autorzy specyfikacji Web Payments zalecają, aby był to prosty ciąg znaków.