Cykl życia transakcji płatności

Dowiedz się, jak sprzedawcy integrują aplikacje płatnicze i jak przebiegają transakcje płatnicze Payment Request API.

Eiji Kitamura

Milica Mihajlija

Interfejsy API płatności internetowych to specjalne funkcje płatności wbudowane w przeglądarkę po raz pierwszy. W przypadku płatności internetowych integracja sprzedawcy z aplikacjami płatniczymi staje się prostsze, a wrażenia klientów są łatwiejsze i bezpieczniejsze.

Więcej informacji o zaletach korzystania z Płatności internetowych można znaleźć w sekcji płatności w internecie.

Z tego artykułu dowiesz się, jak zrealizować transakcję płatności na stronie sprzedawcy oraz pomaga zrozumieć, jak działa integracja aplikacji do płatności.

Proces ten składa się z 6 etapów:

1. Sprzedawca inicjuje płatność.
2. Sprzedawca wyświetla przycisk płatności.

3. Klient naciska przycisk płatności.

   

4. Przeglądarka uruchamia aplikację płatniczą.

   

5. Jeśli klient zmieni jakiekolwiek szczegóły (takie jak opcje dostawy lub adres pocztowy), sprzedawca zaktualizuje szczegóły transakcji, uwzględniając tę zmianę.

   

6. Gdy klient potwierdzi zakup, sprzedawca weryfikuje płatność i finalizuje transakcję.

   

Krok 1. Sprzedawca inicjuje transakcję płatniczą

Gdy klient decyduje się na zakup, sprzedawca inicjuje płatność transakcji przez utworzenie PaymentRequest obiektu. Ten obiekt zawiera ważne informacje o transakcji:

• Akceptowane formy płatności i związane z nimi dane potrzebne do przetworzenia transakcji.
• Szczegóły, takie jak łączna cena (wymagane) i informacje o produktach.
• Opcje, w których sprzedawcy mogą prosić o informacje o dostawie, takie jak dostawa adres i opcję dostawy.
• Sprzedawcy mogą też poprosić o adres rozliczeniowy, imię i nazwisko płatnika, adres e-mail numeru telefonu.
• Sprzedawcy mogą też dodać opcjonalną dostawę typu (shipping, delivery lub pickup) w: PaymentRequest. aplikacja płatnicza, może wykorzystać go jako wskazówkę dotyczącą wyświetlania poprawnych etykiet w interfejsie.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  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' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

Po podaniu informacji o transakcji przeglądarka proces płatności za aplikacje określone w PaymentRequest na podstawie płatności identyfikatorów metod. Dzięki temu przeglądarka może określić aplikację płatniczą, uruchamia się, gdy tylko sprzedawca będzie gotowy do sfinalizowania transakcji.

Aby dowiedzieć się, jak działa proces wykrywania, zapoznaj się z artykułem Konfigurowanie płatność .

Krok 2. Sprzedawca wyświetla przycisk płatności

Sprzedawcy mogą obsługiwać wiele form płatności, ale powinni prezentować tylko płatność przyciski i aplikacje, z których klient może korzystać. Wyświetlam przycisk płatności które nie nadają się do użytku. Jeśli sprzedawca może przewidzieć, że forma płatności określona w obiekcie PaymentRequest nie będzie obsługiwana w przypadku może podać rozwiązanie zastępcze lub w ogóle nie wyświetlać tego przycisku.

Za pomocą instancji PaymentRequest sprzedawca może zapytać, czy klient aplikację płatniczą,

Czy klient ma dostępną aplikację płatniczą?

canMakePayment() metoda PaymentRequest zwraca true, jeśli aplikacja płatnicza jest dostępna na urządzeniu klienta. „Dostępny” oznacza, że aplikacja płatnicza, która obsługuje forma płatności zostanie wykryta i zainstalowana aplikacja płatnicza powiązana z daną platformą; internetowa aplikacja płatnicza jest gotowa do zarejestrowanych.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

Krok 3. Klient naciska przycisk płatności

Gdy klient naciska przycisk płatności, sprzedawca wywołuje show() instancji PaymentRequest, która natychmiast uruchamia uruchomienie interfejsu płatności.

Jeśli końcowa łączna cena jest ustalana dynamicznie (np. pobierana z serwer), sprzedawca może odroczyć uruchomienie interfejsu płatności do momentu, nieznane.

Odroczenie uruchomienia interfejsu płatności

Zapoznaj się z demonstracją odroczenia płatności interfejsu użytkownika aż do uzyskania ostatecznej ceny całkowitej. określonych.

Aby odroczyć interfejs płatności, sprzedawca przekazuje obietnicę formy show(). Przeglądarka będzie wyświetlać wskaźnik wczytywania, dopóki obietnica nie zostanie zrealizowana, a komunikat Transakcja jest gotowa do rozpoczęcia.

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

Jeśli jako argument dla funkcji show() nie zostanie podana żadna obietnica, przeglądarka wykona natychmiast uruchom interfejs płatności.

Krok 4. Przeglądarka uruchamia aplikację płatniczą

Przeglądarka może uruchomić odpowiednią dla danej platformy aplikację płatniczą lub internetową. (Aby dowiedzieć się więcej, o tym, jak Chrome określa, którą aplikację płatniczą ).

Sposób tworzenia aplikacji płatniczej w większości zależy od jej dewelopera, zdarzeń wysyłanych przez sprzedawcę i sprzedawcy, a także strukturę danych przekazywane wraz z tymi zdarzeniami, mają charakter ustandaryzowany.

Po uruchomieniu aplikacji płatniczej otrzymuje transakcję informacje przekazywane do obiektu PaymentRequest w kroku 1, który zawiera te dane:

• Dane formy płatności
• Łączna cena
• Opcje płatności

Aplikacja płatnicza wykorzystuje informacje o transakcji, aby oznaczyć swój interfejs użytkownika etykietami.

Krok 5. Jak sprzedawca może zaktualizować szczegóły transakcji w zależności od działań klienta

Klienci mają możliwość zmiany szczegółów transakcji, takich jak płatność i opcję dostawy w aplikacji płatniczej. Gdy klient wprowadza zmiany, sprzedawca otrzymuje zdarzenia zmiany i aktualizuje szczegóły transakcji.

Istnieją 4 typy zdarzeń, które sprzedawca może otrzymywać:

• Zdarzenie zmiany formy płatności
• Zdarzenie zmiany adresu dostawy
• Zdarzenie dotyczące zmiany opcji dostawy
• Zdarzenie weryfikacji sprzedawcy

Zdarzenie zmiany formy płatności

Aplikacja płatnicza może obsługiwać wiele form płatności, a sprzedawca może oferować specjalny rabat w zależności od wyboru klienta. Aby uwzględnić ten przypadek użycia, zdarzenie zmiany formy płatności może poinformować sprzedawcę o nowej płatności. Aby można było zaktualizować łączną cenę o rabat i zwrócić go Wróć do aplikacji płatniczej.

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

Zdarzenie zmiany adresu dostawy

Aplikacja płatnicza może opcjonalnie podać adres dostawy klienta. To jest jest wygodne dla klientów, ponieważ nie muszą ręcznie wpisywać żadnych danych za pomocą formularza, z którego użytkownik może zapisać adres dostawy w formie preferowanej formy płatności w aplikacjach, a nie w witrynach różnych sprzedawców.

Jeśli klient zaktualizuje adres dostawy w aplikacji płatniczej po transakcja została zainicjowana, zostanie wysłane zdarzenie 'shippingaddresschange' do sprzedawcy. To zdarzenie pomaga sprzedawcy określić koszt dostawy na podstawie pod nowym adresem, zaktualizuj łączną cenę i zwróć ją do aplikacji płatniczej.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

Jeśli sprzedawca nie może wysłać przesyłki na zaktualizowany adres, może podać komunikat o błędzie przez dodanie parametru błędu do szczegółów transakcji zwróconych do płatniczą.

Zdarzenie dotyczące zmiany opcji dostawy

Sprzedawca może przekazać klientowi wiele opcji dostawy i przekazać wyboru aplikacji płatniczej. Opcje dostawy są wyświetlane w postaci listy ceny i nazwy usług, które klient może wybrać. Na przykład:

• Dostawa standardowa – bezpłatna
• Dostawa ekspresowa – 5 PLN

Gdy klient zaktualizuje opcję dostawy w aplikacji płatniczej, Do sprzedawcy zostanie wysłane zdarzenie 'shippingoptionchange'. Sprzedawca może określ koszt dostawy, zaktualizuj łączną cenę i zwróć płatniczą.

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

Sprzedawca może dynamicznie modyfikować opcje dostawy w zależności od adres dostawy. Jest to przydatne, gdy sprzedawca chce oferować różne zestawy opcji wysyłki dla klientów krajowych i międzynarodowych.

Zdarzenie weryfikacji sprzedawcy

Aby zwiększyć bezpieczeństwo, aplikacja płatnicza może przeprowadzić weryfikację sprzedawcy przed przejdź do procesu płatności. Konstrukcja mechanizmu weryfikacji zależy od aplikacji płatniczej, ale zdarzenie weryfikacji sprzedawcy przekazuje mu informacje adresu URL, za pomocą którego mogą potwierdzić swoją tożsamość.

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

Krok 6. Sprzedawca sprawdza płatność i finalizuje transakcję

Gdy klient autoryzuje płatność, forma płatności show() zwraca obietnicę, która składa się z PaymentResponse Obiekt PaymentResponse zawiera te informacje:

• Szczegóły wyniku płatności
• Adres dostawy
• Opcja dostawy
• Informacje kontaktowe

Na tym etapie w interfejsie przeglądarki może się nadal wyświetlać wskaźnik wczytywania, co oznacza, że transakcja nie została jeszcze ukończona.

Jeśli aplikacja płatnicza zostanie zamknięta z powodu nieudanej płatności lub błędu, obietnica zwrócona przez żądanie show() została odrzucona, a przeglądarka zamyka płatność transakcji.

Przetwarzam i weryfikuję płatność

Obiekt details w PaymentResponse jest zwracanym obiektem danych logowania do płatności w aplikacji płatniczej. Sprzedawca może użyć tych danych logowania, aby przetworzyć lub zweryfikować płatności. Przebieg tego krytycznego procesu zależy od firmy obsługującej płatności.

Kończenie lub ponawianie transakcji

Gdy sprzedawca ustali, czy transakcja się powiodła, czy nie, mogą:

• Wywołaj metodę .complete(), aby dokończyć transakcję i zamknąć wskaźnik wczytywania.
• Pozwól klientowi ponowić próbę, wywołując metodę retry().

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

Dalsze kroki

• Szczegółowe informacje o zadeklarowaniu identyfikatora formy płatności znajdziesz w artykule Konfigurowanie formę płatności.
• Dowiedz się, jak utworzyć aplikację płatniczą dla danej platformy Przewodnik dla deweloperów aplikacji do płatności na Androida.
• Dowiedz się, jak utworzyć internetową aplikację płatniczą w .