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 korzystać z interfejsu Payment Request API, aplikacja płatnicza musi być powiązana z Identyfikator 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 nie wiesz, czym są płatności w internecie lub jak działają transakcje płatności w aplikacjach płatniczych, przeczytaj najpierw 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
Payment Request API
Interfejs Payment Handler API
Aplikacja płatnicza na iOS/Androida ✔* ✔*

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 to udostępnione przez inną firmę)
  • Plik manifestu aplikacji internetowej
Schemat: jak przeglądarka wykrywa 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 informacje na temat konfiguracji własnej formy płatności, które przeglądarki mogą wykryć.

Krok 1. Podaj identyfikator formy płatności

formy płatności, identyfikator jest ciągiem opartym na adresie URL. Na przykład identyfikator Google Pay to 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 wykorzystamy https://bobbucks.dev/pay jako formy płatności.

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 dla 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 wskazujących na plik manifestu aplikacji internetowej, gdzie płatność które aplikacje są hostowane. (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 wskazujących źródła, które mogą hostować korzystające z tej samej formy płatności. Pamiętaj, że płatność Ta forma płatności może być zaimplementowana w wielu aplikacjach 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 przekierować przeglądarkę do znalezienia pliku manifestu formy płatności w innej lokalizacji

Adres URL identyfikatora formy płatności może opcjonalnie przesłać nagłówek Link który wskazuje inny adres URL, pod którym przeglądarka może pobrać formę płatności. pliku manifestu. 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 tak, aby odpowiadał nagłówkiem HTTP Link z kodem atrybut rel="payment-method-manifest" i forma płatności pliku manifestu.

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ć w pełni kwalifikowaną nazwą domeny lub ścieżką względną. Sprawdź https://bobbucks.dev/pay/, aby zobaczyć przykład. Możesz użyć Dodatkowo polecenie curl:

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

Krok 3. Udostępnij plik manifestu aplikacji internetowej

Plik manifestu aplikacji internetowej to posłuży do zdefiniowania aplikacji internetowej. Ten plik manifestu jest powszechnie stosowany. aby zdefiniować progresywną aplikację internetową (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 manifeście aplikacji internetowej służą też do określania, aplikacja płatnicza pojawi się w interfejsie żądania płatności.

.
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. inny przeglądarki mogą używać ich jako ikon zastępczych, jeśli nie zostaną oznaczone jako instrument płatniczy.
serviceworker Służy do wykrywania skryptu service worker, który działa jako płatność internetowa .
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 definiuje skrypt service worker zakres rejestracji.
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 udostępniona przez system operacyjny. Więcej informacji: Android przewodnik dla programistów aplikacji płatniczych.
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.
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ć

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 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 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.

Zapoznaj się z artykułem Aplikacje do płatności na Androida: przewodnik 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.

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 paymentrequest do skryptu service worker. 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 bezpośrednio uruchomić aplikację płatniczą

Gdy w Chrome wywoływana jest metoda PaymentRequest z show(), Interfejs API żądań wyświetla dostępny w przeglądarce interfejs o nazwie „Payment Request UI”. Ten Interfejs użytkownika pozwala wybrać aplikację płatniczą. Po naciśnięciu przycisku Continue (Dalej) w interfejsie Payment Request zostanie uruchomiona wybrana aplikacja płatnicza.

Interfejs Payment Request interweniuje przed uruchomieniem aplikacji płatniczej.
.

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 przekazać realizację tych informacji aplikacjom do wykonywania płatności, bezpośrednio uruchamiać aplikację płatniczą bez wyświetlania interfejsu Payment Request Funkcja show() jest wywoływana.

Pomiń interfejs API płatności i od razu 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.
.

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. Usługa można zarejestrować się dokładnie wtedy, gdy użytkownik zdecyduje się zapłacić internetowa aplikacja płatnicza. Istnieją 2 odmiany dla czasu rejestracji:

  • Jeśli użytkownik zobaczy interfejs żądania płatności, oznacza to, że aplikacja jest zarejestrowana. w odpowiednim momencie i uruchamiane, gdy użytkownik kliknie Dalej.
  • Jeśli pominiesz interfejs Payment Request API, zostanie zarejestrowana aplikacja płatnicza. w odpowiednim momencie i udostępnione od razu. Pomijanie interfejsu API płatności przy uruchomieniu w przypadku zarejestrowanych w odpowiednim momencie aplikacji wymaga gestu użytkownika, co uniemożliwia nieoczekiwana rejestracja mechanizmów Service Worker z innych domen.
.

Następne kroki

Teraz gdy Twoja aplikacja płatnicza jest już widoczna, dowiedz się, jak opracować oraz internetową aplikację płatniczą.