Jak skonfigurować formę płatności

Transakcja płatnicza w Google Payments rozpoczyna się w momencie wykrycia aplikacji płatniczej. Dowiedz się, jak skonfigurować formę płatności i przygotować aplikację płatniczą dla sprzedawców i klientów do dokonywania płatności.

Eiji Kitamura

Aby korzystać z interfejsu Payment Request API, aplikacja płatnicza musi być powiązana z identyfikatorem formy płatności. Sprzedawcy, którzy chcą przeprowadzić integrację z aplikacją płatniczą, będą korzystać z identyfikatora formy płatności, aby wskazać to przeglądarce. Z tego artykułu dowiesz się, jak działa wykrywanie aplikacji płatniczych oraz jak skonfigurować taką aplikację, aby była prawidłowo wykrywana i wywoływana przez przeglądarkę.

Jeśli dopiero zaczynasz korzystać z płatności internetowych lub tego, jak przebiega transakcja płatnicza w aplikacjach płatniczych, przeczytaj najpierw te artykuły:

• Udostępnianie aplikacji płatniczych przy użyciu płatności internetowych
• Proces płatności

Obsługiwane przeglądarki

Płatności internetowe obejmują kilka różnych technologii, a stan obsługi zależy od przeglądarki.

	Chromium		Safari		Firefox
	Komputer	Android	Komputer	Urządzenia mobilne	Komputer/Urządzenie mobilne
Payment Request API	✔	✔	✔	✔
Interfejs Payment Handler API	✔	✔
Aplikacja płatnicza na iOS/Androida	✔	✔	✔*	✔*

Uwaga: *Safari obsługuje Apple Pay, ale nie obsługuje aplikacji płatniczych innych firm.

Jak przeglądarka znajduje aplikację płatniczą

Każda aplikacja płatnicza musi spełniać te wymagania:

• 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 jest podawany przez firmę zewnętrzną)
• Plik manifestu aplikacji internetowej

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

1. Przeglądarka wysyła żądanie na adres URL z identyfikatorem formy płatności i pobiera plik manifestu formy płatności.
2. Przeglądarka określa URL pliku manifestu aplikacji internetowej w pliku manifestu formy płatności i pobiera plik manifestu aplikacji internetowej.
3. Przeglądarka określa, czy uruchomić aplikację płatniczą systemu operacyjnego czy internetową aplikację płatniczą z pliku manifestu aplikacji internetowej.

W następnych sekcjach dowiesz się, jak skonfigurować własną formę płatności, aby przeglądarki mogły ją znaleźć.

Krok 1. Podaj identyfikator formy płatności

Identyfikator formy płatności to ciąg znaków oparty na adresie URL. Na przykład identyfikator Google Pay to https://google.com/pay. Deweloperzy aplikacji płatniczych mogą wybrać dowolny adres URL jako identyfikator formy płatności, pod warunkiem że mają nad nim kontrolę i mogą wyświetlać dowolne treści. W tym artykule użyjemy https://bobbucks.dev/pay jako identyfikatora formy płatności.

Uwaga: aplikacje do wykonywania płatności obsługują też formy płatności innych firm.

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

Obiekt PaymentRequest powstaje z listą identyfikatorów form płatności identyfikujących aplikacje płatnicze, które sprzedawca postanawia zaakceptować. Identyfikatory form płatności są ustawione jako wartość 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' }
  }
});

Uwaga: w przypadku identyfikatora formy płatności w Chrome można w tej samej witrynie ustawić przekierowania maksymalnie 3 razy.

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 korzystać z tej formy płatności.

Prześlij plik manifestu formy płatności

Gdy sprzedawca zainicjuje transakcję płatności, przeglądarka wysyła żądanie HTTP GET na adres URL z identyfikatorem formy płatności. W odpowiedzi serwer przesyła treść pliku manifestu formy płatności.

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

Pola pliku manifestu formy płatności

nazwa usługi,	Opis
default_applications (wymagane)	Tablica adresów URL wskazujących pliki manifestu aplikacji internetowej, w których hostowane są aplikacje do płatności. (Adres URL może być względny). Ta tablica ma odwoływać się do pliku manifestu programistycznego, pliku manifestu produkcyjnego itp.
supported_origins	Tablica adresów URL wskazujących źródła, które mogą hostować zewnętrzne aplikacje płatnicze wykorzystujące tę samą formę płatności. Pamiętaj, że formę płatności może wdrożyć wiele aplikacji do 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ę linków do plików manifestu aplikacji internetowych obsługiwanych aplikacji płatniczych.

Uwaga: od Chrome 83 Chrome obsługuje tylko jedną domyślną aplikację płatniczą na pojedynczą formę płatności.

Opcjonalnie przekierować przeglądarkę do znalezienia pliku manifestu formy płatności w innej lokalizacji

Adres URL identyfikatora formy płatności może opcjonalnie odpowiedzieć nagłówkiem Link wskazującym 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 na innym serwerze lub gdy aplikacja płatnicza jest obsługiwana przez firmę zewnętrzną.

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

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

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

Adres URL może być w pełni kwalifikowaną nazwą domeny lub ścieżką względną. Sprawdź https://bobbucks.dev/pay/ pod kątem ruchu sieciowego, aby zobaczyć przykład. Możesz też użyć polecenia curl:

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

Uwaga: więcej informacji o metodach płatności znajdziesz w dokumentacji organizacji W3C.

Krok 3. Udostępnij plik manifestu aplikacji internetowej

Plik manifestu aplikacji internetowej służy do definiowania aplikacji internetowej zgodnie z jej nazwą. Jest to powszechnie używany plik manifestu do definiowania progresywnej aplikacji internetowej (PWA).

Typowy plik manifestu aplikacji internetowej wygląda tak:

[obsługa płatności] /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ślania sposobu wyświetlania aplikacji płatniczej w interfejsie żądania płatności.

Ważne pola manifestu aplikacji internetowej

nazwa usługi,	Opis
name (wymagane)	Używana jako nazwa aplikacji płatniczej.
icons (wymagane)	Używany jako ikona aplikacji płatniczej. Tych ikon używa tylko Chrome. Inne przeglądarki mogą używać ich jako ikon zastępczych, jeśli nie określisz ich jako instrumentu płatniczego.
serviceworker	Służy do wykrywania skryptu service worker, który działa jako internetowa aplikacja płatnicza.
serviceworker.src	Adres URL, z którego można pobrać skrypt service worker.
serviceworker.scope	Ciąg znaków reprezentujący adres URL, który określa zakres rejestracji skryptu service worker.
serviceworker.use_cache	Adres URL, z którego można pobrać skrypt service worker.
related_applications	Służy do wykrywania aplikacji, która działa jako aplikacja płatnicza dostarczana przez system operacyjny. Więcej informacji znajdziesz w przewodniku dla programistów aplikacji do płatności na Androida.
prefer_related_applications	Służy do określania, którą aplikację płatniczą należy uruchomić, gdy dostępna jest zarówno aplikacja płatnicza dostarczona przez system operacyjny, jak i internetowa aplikacja płatnicza.

Etykieta i ikona aplikacji płatniczej.

Jako nazwa aplikacji płatniczej używana jest właściwość name z manifestu aplikacji internetowej, a jako jej ikona – właściwość icons.

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

Wprowadzanie na rynek 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 jej podpis są zgodne, natomiast minimalna wersja (min_version) w pliku manifestu aplikacji internetowej jest niższa od wersji zainstalowanej aplikacji lub jej równa.
• Pole prefer_related_applications zawiera 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 aplikacji do płatności na Androida.

[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, proces jej wykrywania kończy się tutaj. W przeciwnym razie przejdziesz do kolejnego kroku, czyli uruchomienia internetowej aplikacji płatniczej.

Uruchomienie internetowej aplikacji płatniczej

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ę płatniczą, wysyłając zdarzenie paymentrequest do skryptu service worker. Skrypt service worker nie musi być zarejestrowany z wyprzedzeniem. Można zarejestrować się w dogodnym momencie

Omówienie specjalnych optymalizacji

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

Gdy w Chrome zostanie wywołana metoda show() metody PaymentRequest, Payment Request API wyświetla interfejs dostępny w przeglądarce o nazwie „Payment Request UI”. Ten interfejs pozwala użytkownikom wybrać aplikację płatniczą. Po naciśnięciu przycisku Dalej w interfejsie żądania płatności zostaje uruchomiona wybrana aplikacja płatnicza.

Interfejs żądania płatności działa przed uruchomieniem aplikacji płatniczej.

Wyświetlanie interfejsu żądania płatności przed uruchomieniem aplikacji płatniczej zwiększa liczbę kroków, które musi wykonać użytkownik, aby zrealizować płatność. Aby zoptymalizować ten proces, przeglądarka może przekazać realizację tych informacji aplikacjom do wykonywania płatności i bezpośrednio uruchamiać aplikację płatniczą bez wyświetlania interfejsu Payment Request przy wywołaniu funkcji show().

Pomiń interfejs żądania płatności i bezpośrednio uruchom aplikację płatniczą.

Aby bezpośrednio uruchomić aplikację płatniczą, trzeba spełnić te warunki:

• Aplikacja show() jest aktywowana gestem użytkownika (np. kliknięciem myszy).
• Istnieje tylko jedna aplikacja płatnicza, która:
  • Obsługuje żądany identyfikator formy płatności.

Uwaga: obecnie Safari obsługuje tylko płatności Apple Pay, więc zawsze uruchamia aplikację bezpośrednio z pominięciem interfejsu Payment Request.

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 w witrynie aplikacji płatniczej i zarejestrowania skryptu service worker. Mechanizm Service Worker może zostać zarejestrowany dokładnie wtedy, gdy użytkownik zdecyduje się zapłacić za pomocą internetowej aplikacji płatniczej. Istnieją 2 odmiany czasu rejestracji:

• Jeśli użytkownik zobaczy interfejs Payment Request, aplikacja zostanie zarejestrowana dokładnie w chwili i zostanie uruchomiona, gdy użytkownik kliknie Dalej.
• Jeśli pominiesz interfejs Payment Request, aplikacja płatnicza zostanie zarejestrowana w odpowiednim momencie i uruchomiona bezpośrednio. Pominięcie interfejsu Payment Request w celu uruchomienia zarejestrowanej aplikacji dokładnie wtedy, gdy jest to potrzebne, wymaga gestu użytkownika, co zapobiega nieoczekiwanemu rejestrowaniu mechanizmów Service Worker z innych domen.

Uwaga: chociaż pojedynczy identyfikator formy płatności obsługuje wiele aplikacji do płatności, rejestracja JIT ma miejsce tylko wtedy, gdy plik manifestu formy płatności wskazuje na jedną aplikację płatniczą.

Dalsze kroki

Teraz gdy Twoja aplikacja płatnicza jest już widoczna, dowiedz się, jak stworzyć aplikację płatniczą działającą na danej platformie i aplikację płatniczą internetową.

• Aplikacje do płatności na Androida: przewodnik dla deweloperów
• Przewodnik dla programistów internetowych aplikacji do płatności