Zahlungsmethode einrichten

Eine Zahlungstransaktion mit Webzahlungen beginnt mit der Entdeckung Ihrer Zahlungs-App. Hier erfahren Sie, wie Sie eine Zahlungsmethode einrichten und Ihre Zahlungs-App für Händler und Kunden zur Zahlung bereitstellen.

Eiji Kitamura

Damit eine Zahlungs-App mit der Payment Request API verwendet werden kann, muss sie mit einer Zahlungsmethoden-ID verknüpft sein. Händler, die eine Zahlungs-App einbinden möchten, geben dies dem Browser über die Zahlungsmethoden-ID an. In diesem Artikel erfahren Sie, wie die Erkennung von Zahlungs-Apps funktioniert und wie Sie Ihre Zahlungs-App so konfigurieren, dass sie von einem Browser richtig erkannt und aufgerufen wird.

Wenn Sie mit dem Konzept von Webzahlungen oder der Funktionsweise einer Zahlungstransaktion über Zahlungs-Apps nicht vertraut sind, lesen Sie zuerst die folgenden Artikel:

• Unterstützung von Zahlungs-Apps mit Webzahlungen
• Ablauf einer Zahlungstransaktion

Unterstützte Browser

Web Payments besteht aus mehreren verschiedenen Technologien und der Supportstatus hängt vom Browser ab.

So erkennt ein Browser eine Zahlungs-App

Jede Zahlungs-App muss Folgendes bieten:

• URL-basierte Zahlungsmethoden-ID
• Manifest der Zahlungsmethode (es sei denn, die ID der Zahlungsmethode lautet von einem Drittanbieter bereitgestellt)
• Manifest der Webanwendung

Der Discovery-Prozess beginnt, wenn ein Händler eine Transaktion initiiert:

1. Der Browser sendet eine Anfrage an die Zahlungsmethode. Identifier-URL und ruft die Zahlungsmethode Manifestdatei.
2. Der Browser bestimmt, welche Web-App Manifest--URL aus dem Manifest der Zahlungsmethode und ruft das Manifest der Web-App ab.
3. Der Browser bestimmt, ob die Zahlungs-App des Betriebssystems oder die webbasierte Zahlungs-App aus dem Manifest der Webanwendung gestartet wird.

In den nächsten Abschnitten wird ausführlich erläutert, wie Sie Ihre eigene Zahlungsmethode einrichten, damit Browser sie finden können.

Schritt 1: Zahlungsmittel-ID angeben

Ein Zahlungsmethoden-ID ist ein URL-basierter String. Die Kennung für Google Pay lautet beispielsweise https://google.com/pay. Entwickler von Zahlungs-Apps können jede URL als Zahlungsmethode auswählen Methoden-ID, sofern sie Kontrolle darüber haben und willkürlich Inhalte. In diesem Artikel verwenden wir https://bobbucks.dev/pay als Zahlungsmittel-ID.

So verwenden Händler die Zahlungsmethoden-ID

Ein PaymentRequest-Objekt enthält eine Liste von Zahlungsmethoden-IDs, die die Zahlungs-Apps angeben, die ein Händler akzeptiert. Kennungen für Zahlungsmethoden sind als Wert festgelegt für das Attribut supportedMethods. Beispiel:

[merchant] fordert Zahlung an:

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

Schritt 2: Manifest für Zahlungsmethoden senden

Ein Manifest für die Zahlungsmethode ist ein JSON-Datei, in der definiert wird, welche Zahlungs-App diese Zahlungsmethode verwenden kann.

Manifest für Zahlungsmethoden bereitstellen

Wenn ein Händler eine Zahlungstransaktion initiiert, sendet der Browser eine HTTP- GET-Anfrage an die URL der Zahlungsmethoden-ID. Der Server antwortet mit dem Manifest-Textkörper der Zahlungsmethode.

Das Manifest einer Zahlungsmethode hat zwei Felder: default_applications und supported_origins.

Die Manifestdatei einer Zahlungsmethode sollte so aussehen:

[Zahlungs-Handler] /payment-manifest.json:

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

Wenn der Browser das Feld default_applications liest, findet er eine Liste von Links zu Web-App-Manifesten unterstützter Zahlungs-Apps.

Optional können Sie den Browser so weiterleiten, dass das Manifest der Zahlungsmethode an einem anderen Ort gefunden wird

Die URL der ID der Zahlungsmethode kann optional mit einem Link-Header antworten. die auf eine andere URL verweist, unter der der Browser die Zahlungsmethode abrufen kann. Manifests. Das ist nützlich, wenn ein Manifest für Zahlungsmethoden auf einem anderen Server gehostet wird oder die Zahlungs-App von einem Drittanbieter bereitgestellt wird.

Konfigurieren Sie den Zahlungsmethodenserver so, dass er mit einer HTTP-Link-Header mit dem rel="payment-method-manifest"-Attribut und der URL des Manifests für Zahlungsmethoden antwortet.

Wenn sich das Manifest beispielsweise unter https://bobbucks.dev/payment-manifest.json befindet, enthält der Antwortheader Folgendes:

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

Die URL kann ein voll qualifizierter Domainname oder ein relativer Pfad sein. Sehen Sie sich https://bobbucks.dev/pay/ an, um ein Beispiel für Netzwerkverkehr zu sehen. Sie können auch einen curl-Befehl verwenden:

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

Schritt 3: Web-App-Manifest bereitstellen

Ein Web-App-Manifest wird verwendet, um eine Web-App zu definieren. Es ist eine weit verbreitete Manifestdatei, mit der eine progressive Web-App (PWA) definiert wird.

Ein typisches Web-App-Manifest sieht so aus:

[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"
        }
      ]
    }
  ]
}

Die im Manifest einer Webanwendung beschriebenen Informationen werden auch verwendet, um zu definieren, wie eine Zahlungs-App in der Benutzeroberfläche für Zahlungsanfragen angezeigt wird.

Die Eigenschaft name des Web-App-Manifests wird als Name der Zahlungs-App verwendet, die Eigenschaft icons als Symbol der Zahlungs-App.

So ermittelt Chrome, welche Zahlungs-App gestartet werden soll

Einführung der plattformspezifischen Zahlungs-App

Damit die plattformspezifische Zahlungs-App gestartet werden kann, müssen die folgenden Bedingungen erfüllt sein:

• Das Feld related_applications wird im Manifest der Web-App angegeben und:
  • Die Paket-ID und die Signatur der installierten App stimmen überein, während das Minimum Version (min_version) im Web-App-Manifest ist kleiner als oder gleich die Version der installierten Anwendung.
• Das Feld prefer_related_applications ist true.
• Die plattformspezifische Zahlungs-App ist installiert und enthält:
  • Ein Intent-Filter für org.chromium.action.PAY.
  • Eine Kennzeichnung der Zahlungsmethode, die als Wert für das Attribut org.chromium.default_payment_method_name angegeben ist.

Weitere Informationen finden Sie im Entwicklerleitfaden für Zahlungs-Apps für Android. finden Sie weitere Informationen zur Einrichtung.

[payment handler] /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"
  }]
}]

Wenn der Browser festgestellt hat, dass die plattformspezifische Zahlungs-App verfügbar ist, wird der Discovery-Vorgang hier beendet. Andernfalls geht es mit dem nächsten Schritt weiter: Einführung der webbasierten Zahlungs-App.

Webbasierte Zahlungs-App starten

Die webbasierte Zahlungs-App sollte im Feld serviceworker des Manifests der Web-App angegeben werden.

[payment handler] /manifest.json:

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

Der Browser startet die webbasierte Zahlungs-App durch Senden einer paymentrequest an den Service Worker senden. Der Service Worker muss nicht in damit das Projekt voranschreitet. Sie kann genau zum richtigen Zeitpunkt registriert werden.

Informationen zu den speziellen Optimierungen

Wie Browser die Benutzeroberfläche für Zahlungsanforderungen überspringen und eine Zahlungs-App direkt starten können

Wenn in Chrome die show()-Methode von PaymentRequest aufgerufen wird, zeigt die Payment Request API eine vom Browser bereitgestellte Benutzeroberfläche namens „Payment Request UI“ an. Auf dieser Benutzeroberfläche können Nutzer eine Zahlungs-App auswählen. Nachdem sie auf der Benutzeroberfläche für Zahlungsanfragen auf die Schaltfläche Weiter geklickt haben, wird die ausgewählte Zahlungs-App gestartet.

Durch Einblenden der Benutzeroberfläche für Zahlungsanforderungen vor dem Start einer Zahlungs-App Anzahl der Schritte, die ein Nutzer zum Ausführen einer Zahlung benötigt. Zur Optimierung des Prozesses kann der Browser die Ausführung dieser Informationen an Zahlungs-Apps delegieren und eine Zahlungs-App direkt starten, ohne die Benutzeroberfläche für Zahlungsanforderungen anzuzeigen, show() wird aufgerufen.

Damit eine Zahlungs-App direkt gestartet werden kann, müssen die folgenden Bedingungen erfüllt sein:

• show() wird durch eine Nutzergeste ausgelöst (z. B. einen Mausklick).
• Es gibt nur eine einzige Zahlungs-App, die:
  • Unterstützt die angeforderte Zahlungsart-ID.

Wann wird eine webbasierte Zahlungs-App Just-in-Time (JIT) registriert?

Webbasierte Zahlungs-Apps können gestartet werden, ohne dass der Nutzer zuvor die Website der Zahlungs-App besucht und den Dienst-Worker registriert hat. Dienst Mitarbeiter können genau zum richtigen Zeitpunkt registriert werden, wenn der Nutzer sich für die Zahlung mit der webbasierte Bezahl-App. Der Zeitpunkt der Registrierung kann in zweierlei Hinsicht variieren:

• Wenn dem Nutzer die Zahlungsanfrage-Benutzeroberfläche angezeigt wird, wird die App just-in-time registriert und gestartet, wenn der Nutzer auf Weiter klickt.
• Wenn die Benutzeroberfläche für Zahlungsanfragen übersprungen wird, wird die Zahlungs-App just-in-time registriert und direkt gestartet. Um die Benutzeroberfläche für Zahlungsanfragen zu überspringen und eine Just-in-Time-registrierte App zu starten, ist eine Nutzergeste erforderlich. So wird verhindert, dass Service Workers verschiedener Ursprünge unerwartet registriert werden.

Nächste Schritte

Jetzt, da Sie Ihre Zahlungs-App gefunden haben, lernen Sie, wie Sie eine plattformspezifische Zahlungs-App und eine webbasierte Zahlungs-App.

• Android-Zahlungs-Apps: Entwicklerhandbuch
• Entwicklerleitfaden für webbasierte Zahlungs-Apps