Jak skonfigurować formę płatności

Transakcja płatnicza w Google Payments rozpoczyna się w momencie wykrycia płatniczą. Dowiedz się, jak skonfigurować formę płatności i pobrać aplikację płatniczą aby umożliwić sprzedawcom i klientom dokonywanie płatności.

Aby można było używać aplikacji do płatności z interfejsem Payment Request API, musi ona być powiązana z identyfikatorem formy płatności. Sprzedawcy, którzy chcą przeprowadzić integrację z aplikacją płatniczą użyje identyfikatora formy płatności, aby wskazać to przeglądarce. Ten Wyjaśniamy, jak działa odkrywanie aplikacji do płatności i jak skonfigurować aby przeglądarka mogła wykryć i wywołać aplikację płatniczą.

Jeśli dopiero poznajesz koncepcję płatności internetowych lub sposób dokonywania transakcji za pomocą aplikacji płatniczych, najpierw przeczytaj te artykuły:

Obsługa przeglądarek

Płatności internetowe obejmują kilka różnych elementów technologii zależy od przeglądarki.

Chromium Safari Firefox
Komputer Android Komputer Urządzenia mobilne Komputer/Urządzenie mobilne
Interfejs Payment Request API
Interfejs API modułu do obsługi płatności
Aplikacja płatnicza na iOS/Androida ✔* ✔*

Jak przeglądarka znajduje aplikację płatniczą

Każda aplikacja do płatności musi zawierać:

  • Identyfikator formy płatności oparty na adresie URL
  • Plik manifestu formy płatności (z wyjątkiem sytuacji, gdy identyfikator formy płatności to udostępnione przez inną firmę)
  • Manifest aplikacji internetowej
Diagram: jak przeglądarka znajduje aplikację płatniczą na podstawie identyfikatora formy płatności opartego na adresie URL

Proces odkrywania rozpoczyna się, gdy sprzedawca zainicjuje transakcję:

  1. Przeglądarka wysyła żądanie do formy płatności identyfikator i pobrania formy płatności pliku manifestu.
  2. Przeglądarka wybiera aplikację internetową manifestu pliku manifestu formy płatności i pobiera plik manifestu aplikacji internetowej.
  3. Przeglądarka decyduje, czy uruchomić aplikację płatniczą systemu operacyjnego czy internetowa aplikacja płatnicza z manifestu aplikacji internetowej.

W kolejnych sekcjach znajdziesz szczegółowe instrukcje konfigurowania własnej formy płatności, aby przeglądarki mogły ją wykryć.

Krok 1. Podaj identyfikator formy płatności

Identyfikator formy płatności to ciąg znaków na podstawie adresu URL. Identyfikator Google Pay to na przykład https://google.com/pay. Deweloperzy aplikacji płatniczych mogą wybrać dowolny adres URL jako formę płatności o ile mają nad nim kontrolę i mogą obsługiwać treści. W tym artykule użyjemy identyfikatora formy płatności https://bobbucks.dev/pay.

Jak sprzedawcy używają identyfikatora formy płatności

Obiekt PaymentRequest jest tworzony z listą form płatności identyfikatory służące do identyfikacji płatności, które akceptuje sprzedawcy. Identyfikatory form płatności są ustawiane jako wartości właściwości supportedMethods. Na przykład:

[sprzedawca] prosi o płatność:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Krok 2. Udostępnij plik manifestu formy płatności

Plik manifestu formy płatności to Plik JSON określający, która aplikacja płatnicza może użyć tej formy płatności.

Prześlij plik manifestu formy płatności

Gdy sprzedawca inicjuje płatność, przeglądarka wysyła żądanie HTTP GET na adres URL identyfikatora formy płatności. Serwer odpowiada, podając formę płatności. treść pliku manifestu.

Plik manifestu formy płatności zawiera 2 pola: default_applications oraz supported_origins

.
Nazwa usługi Opis
default_applications (wymagane) Tablica adresów URL, które wskazują na pliki manifestu aplikacji internetowych, w których hostowane są aplikacje do płatności. (adres URL może być względny). Ta tablica jest oczekiwana , aby odwołać się do pliku manifestu programistycznego, pliku manifestu produkcyjnego itp.
supported_origins Tablica adresów URL, które wskazują na źródła, w których mogą znajdować się aplikacje płatniczej innych firm implementujące tę samą formę płatności. Pamiętaj, że forma płatności może być implementowana przez wiele aplikacji do płatności.
Pola pliku manifestu formy płatności

Plik manifestu formy płatności powinien wyglądać tak:

[obsługa płatności] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

Gdy przeglądarka odczytuje pole default_applications, znajduje listę linki do plików manifestu aplikacji internetowych obsługiwanych aplikacje płatnicze.

Opcjonalnie przekieruj przeglądarkę do pliku manifestu formy płatności w innym miejscu

Adres URL identyfikatora formy płatności może opcjonalnie zwracać nagłówek Link, który wskazuje inny adres URL, z którego przeglądarka może pobrać plik manifestu formy płatności. Jest to przydatne, gdy plik manifestu formy płatności jest hostowany w innym miejscu lub gdy aplikacja płatnicza jest obsługiwana przez firmę zewnętrzną.

Jak przeglądarka wykrywa aplikację płatniczą na podstawie identyfikatora formy płatności opartego na adresie URL i przekierowań

Skonfiguruj serwer formy płatności, aby odpowiadał nagłówkiem HTTP Link z atrybutem rel="payment-method-manifest" i adresem URL manifestu formy płatności.

Jeśli na przykład plik manifestu znajduje się na https://bobbucks.dev/payment-manifest.json, nagłówek odpowiedzi zawierałby te elementy:

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

Adres URL może być pełną nazwą domeny lub ścieżką względną. Aby zobaczyć przykład, sprawdź https://bobbucks.dev/pay/ w sekcji ruchu sieciowego. Możesz użyć Dodatkowo polecenie curl:

curl --include https://bobbucks.dev/pay

Krok 3. Udostępnij plik manifestu aplikacji internetowej

Jak sama nazwa wskazuje, plik manifestu aplikacji internetowej służy do definiowania aplikacji internetowej. Jest to powszechnie używany plik manifestu, który określa progresywną aplikację internetową (PWA).

Typowy manifest aplikacji internetowej wygląda tak:

[payment handler] /manifest.json:

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

Informacje opisane w pliku manifestu aplikacji internetowej służą też do określenia sposobu wyświetlania aplikacji do płatności w interfejsie żądania płatności.

.
Nazwa usługi Opis
name (wymagane) Używana jako nazwa aplikacji płatniczej.
icons (wymagane) Ikona używana jako ikona aplikacji do płatności. Tych ikon używa tylko Chrome. Inne przeglądarki mogą używać ich jako ikon zapasowych, jeśli nie określisz ich jako części instrumentu płatniczego.
serviceworker Służy do wykrywania skryptu service worker, który działa jako płatność internetowa aplikacji.
serviceworker.src Adres URL, z którego można pobrać skrypt service worker.
serviceworker.scope Ciąg znaków reprezentujący adres URL określający zakres rejestracji service workera.
serviceworker.use_cache Adres URL, z którego można pobrać skrypt usługi.
related_applications Służy do wykrywania aplikacji, która działa jako aplikacja płatnicza dostarczona przez system operacyjny. Więcej informacji znajdziesz w przewodniku dla programistów dotyczącym aplikacji płatniczych na Androida.
prefer_related_applications Służy do określenia, którą aplikację do płatności uruchomić, gdy dostępne są zarówno aplikacja do płatności dostarczana przez system operacyjny, jak i aplikacja do płatności internetowej.
Ważne pola manifestu aplikacji internetowej
Aplikacja płatnicza z ikoną.
Etykieta i ikona aplikacji płatniczej.

Jako nazwa aplikacji płatniczej icons używana jest właściwość name w manifeście aplikacji internetowej jest używana jako ikona aplikacji płatniczej.

Jak Chrome określa, którą aplikację płatniczą uruchomić

Uruchamianie aplikacji płatniczej na danej platformie

Aby uruchomić aplikację płatniczą na danej platformie, trzeba spełnić te warunki:

  • Pole related_applications jest określone w pliku manifestu aplikacji internetowej i:
    • Identyfikator pakietu zainstalowanej aplikacji i podpis są takie same, a minimalna wartość wersja (min_version) w manifeście aplikacji internetowej jest mniejsza lub równa wersję zainstalowanej aplikacji.
  • Pole prefer_related_applications ma wartość true.
  • zainstalowana jest aplikacja płatnicza na daną platformę i ma ona:
    • Filtr intencji: org.chromium.action.PAY.
    • Identyfikator formy płatności określony jako wartość właściwości org.chromium.default_payment_method_name.

Więcej informacji o konfigurowaniu tych aplikacji znajdziesz w przewodniku dla deweloperów.

[obsługa płatności] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

Jeśli przeglądarka ustali, że aplikacja płatnicza określona na platformie jest dostępna, tutaj kończy się proces wykrywania. W przeciwnym razie przejście do kolejnego kroku – uruchomienia internetowej aplikacji płatniczej.

Uruchamianie internetowej aplikacji do obsługi płatności

Internetową aplikację płatniczą należy określić w polu serviceworker manifestu aplikacji internetowej.

[obsługa płatności] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

Przeglądarka uruchamia internetową aplikację do płatności, wysyłając do niej zdarzenie paymentrequest do usługi. Skrypt service worker nie musi być zarejestrowany w lub dalszych działań. Można zarejestrować się w dogodnym momencie

Omówienie specjalnych optymalizacji

Jak przeglądarki mogą pominąć interfejs żądania płatności i uruchomić aplikację do płatności bezpośrednio

W Chrome, gdy wywoływana jest metoda show() klasy PaymentRequest, interfejs API Payment Request wyświetla interfejs użytkownika dostarczony przez przeglądarkę, zwany „interfejsem użytkownika żądania płatności”. To UI umożliwia użytkownikom wybranie aplikacji do płatności. Po naciśnięciu przycisku Dalej w interfejsie prośby o płatność uruchamiana jest wybrana aplikacja do płatności.

Zanim uruchomisz aplikację do płatności, interfejs żądania płatności interweniuje przed uruchomieniem aplikacji do płatności.

Wyświetlanie interfejsu żądania płatności przed uruchomieniem aplikacji płatniczej zwiększa – ile kroków należy wykonać, aby użytkownik zrealizował płatność. Aby zoptymalizować ten proces, przeglądarka może zlecić dostarczenie tych informacji aplikacjom do płatności i uruchomić aplikację do płatności bezpośrednio, bez wyświetlania interfejsu żądania płatności, gdy wywołana zostanie funkcja show().

Pomiń interfejs API płatności i od razu uruchom aplikację płatniczą.

Aby uruchomić aplikację do płatności bezpośrednio, muszą być spełnione te warunki:

  • show() jest wywoływane przez gest użytkownika (np. kliknięcie myszką).
  • Istnieje tylko jedna aplikacja płatnicza, która:
    • Obsługuje żądany identyfikator formy płatności.

Kiedy internetowa aplikacja płatnicza jest rejestrowana w samą porę (JIT)?

Internetowe aplikacje do płatności mogą być uruchamiane bez wyraźnej wcześniejszej wizyty użytkownika do witryny aplikacji płatniczej i zarejestrować skrypt service worker. Pracownik obsługi klienta może zostać zarejestrowany w samym momencie, gdy użytkownik zdecyduje się zapłacić za pomocą internetowej aplikacji do płatności. Czas rejestracji może być różny w 2 sposobach:

  • Jeśli użytkownikowi wyświetla się interfejs żądania płatności, aplikacja jest rejestrowana w samym momencie i uruchamiana, gdy użytkownik kliknie Dalej.
  • Jeśli interfejs żądania płatności zostanie pominięty, aplikacja do płatności zostanie zarejestrowana w samym momencie i uruchomiona bezpośrednio. Pominięcie interfejsu żądania płatności w celu uruchomienia zarejestrowanej w czasie aplikacji wymaga działania użytkownika, co zapobiega nieoczekiwanej rejestracji usług w ramach różnych źródeł.
.

Następne kroki

Teraz, gdy Twoja aplikacja płatnicza jest widoczna, dowiedz się, jak opracować aplikację płatniczą dla konkretnej platformy i aplikację płatniczą internetową.