Zahlungsmethode einrichten

Eine Zahlungsabwicklung mit Web Payments beginnt mit der Erkennung Ihrer Zahlungs-App. Hier erfahren Sie, wie Sie eine Zahlungsmethode einrichten und Ihre Zahlungs-App für Händler und Kunden vorbereiten, damit Zahlungen möglich sind.

Eiji Kitamura

Veröffentlicht: 27. September 2017, zuletzt aktualisiert: 1. Juli 2025

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, verwenden die Zahlungsmethoden-ID, um dies dem Browser mitzuteilen. In diesem Artikel wird beschrieben, wie die Ermittlung von Zahlungs-Apps funktioniert und wie Sie Ihre Zahlungs-App so konfigurieren, dass sie von einem Browser richtig ermittelt und aufgerufen wird.

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

• Zahlungs-Apps mit Web Payments stärken
• Phasen einer Zahlungstransaktion

Unterstützte Browser

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

	Chrom		Safari		Firefox
	Computer	Android	Computer	Mobilgeräte	Computer/Mobilgeräte
Payment Request API	✔	✔	✔	✔
Webbasierte Payment Handler API	✔	✔
iOS-/Android-Zahlungs-App	✔	✔	✔*	✔*

Hinweis : *Safari unterstützt Apple Pay, aber keine Zahlungs-Apps von Drittanbietern.

Wie ein Browser eine Zahlungs-App erkennt

Jede Zahlungs-App muss Folgendes bieten:

• URL-basierte Kennung der Zahlungsmethode
• Zahlungsmethodenmanifest (außer wenn die Zahlungsmethoden-ID von einem Drittanbieter bereitgestellt wird)
• Web-App-Manifest

Der Erkennungsprozess beginnt, wenn ein Händler eine Transaktion initiiert:

1. Der Browser sendet eine Anfrage an die URL des Zahlungsmethoden-Identifiers und ruft das Zahlungsmethodenmanifest ab.
2. Der Browser ermittelt die URL des Web-App-Manifests aus dem Zahlungsartenmanifest und ruft das Web-App-Manifest ab.
3. Der Browser bestimmt anhand des Web-App-Manifests, ob die Zahlungs-App des Betriebssystems oder die webbasierte Zahlungs-App gestartet werden soll.

In den nächsten Abschnitten wird im Detail erläutert, wie Sie Ihre eigene Zahlungsmethode einrichten, damit Browser sie erkennen können.

Schritt 1: Zahlungsmethoden-ID angeben

Eine Zahlungsmethoden-ID ist ein URL-basierter String. Die Kennung von Google Pay ist beispielsweise https://google.com/pay. Zahlungs-App-Entwickler können eine beliebige URL als Zahlungsmethoden-ID auswählen, sofern sie die Kontrolle darüber haben und beliebige Inhalte und HTTP-Header bereitstellen können. In diesem Artikel verwenden wir https://bobbucks.dev/pay als Kennung für die Zahlungsmethode.

Hinweis : Zahlungs-Apps können auch Zahlungsmethoden von Drittanbietern unterstützen.

So verwenden Händler die Zahlungsmethoden-ID

Ein PaymentRequest-Objekt wird mit einer Liste von Zahlungsmethoden-IDs erstellt, die die Zahlungs-Apps angibt, die ein Händler akzeptiert. Zahlungsmethoden-IDs werden als Wert für das Attribut supportedMethods festgelegt. Beispiel:

[merchant] requests payment ([merchant] fordert Zahlung an):

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

Schritt 2: Manifest der Zahlungsmethode bereitstellen

Ein Zahlungsmethodenmanifest ist eine JSON-Datei, in der definiert wird, welche Zahlungs-App diese Zahlungsmethode verwenden kann.

Manifest für die Zahlungsmethode bereitstellen

Wenn ein Händler eine Zahlungstransaktion initiiert, sendet der Browser eine HTTP-HEAD-Anfrage an die URL des Zahlungsmethodenbezeichners. Die URL des Zahlungsmethoden-Bezeichners antwortet mit einem Link-HTTP-Header, der auf die URL verweist, unter der der Browser das Zahlungsmethodenmanifest abrufen kann.

Hinweis : Weiterleitungen sind in Chrome für eine Zahlungsmethoden-ID innerhalb derselben Website bis zu dreimal zulässig.

Konfigurieren Sie den Zahlungsmethodenserver so, dass er mit einem HTTP-Link-Header mit dem Attribut rel="payment-method-manifest" und der URL des Zahlungsmethodenmanifests antwortet. Wenn sich das Manifest beispielsweise unter https://bobbucks.dev/pay/payment-manifest.json befindet, würde der Antwortheader Folgendes enthalten:

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

Die URL kann ein voll qualifizierter Domainname oder ein relativer Pfad sein. Ein Beispiel finden Sie unter https://bobbucks.dev/pay. Sie können auch einen curl-Befehl verwenden:

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

Hinweis : Weitere Informationen zu Zahlungsmethoden in der W3C-Dokumentation

Der Browser sendet als Nächstes eine HTTP-GET-Anfrage an die URL des Zahlungsmethodenmanifests. Der Server antwortet mit dem Manifesttext der Zahlungsmethode.

Hinweis :Die Anfrage wird nicht unbedingt an die Kennung der Zahlungsmethode gesendet. Das hängt von der Kombination aus Kennung und Browser ab. Chrome sendet beispielsweise keine Anfrage für https://play.google.com/billing und in einigen Fällen auch nicht für https://google.com/pay.

Ein Zahlungsmethodenmanifest hat zwei Felder: default_applications und supported_origins.

Manifestfelder für Zahlungsmethoden

Property-Name	Beschreibung
default_applications (erforderlich)	Ein Array von URLs, die auf Web-App-Manifeste verweisen, in denen die Zahlungs-Apps gehostet werden. Die URL kann relativ sein. Dieses Array sollte auf das Entwicklungsmanifest, das Produktionsmanifest usw. verweisen.
supported_origins	Ein Array von URLs, die auf Ursprünge verweisen, auf denen möglicherweise Drittanbieter-Zahlungs-Apps mit derselben Zahlungsmethode gehostet werden. Eine Zahlungsmethode kann von mehreren Zahlungs-Apps implementiert werden.

Eine Manifestdatei für Zahlungsmethoden sollte so aussehen:

[Zahlungsabwickler] /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 mit Links zu Web-App-Manifesten unterstützter Zahlungs-Apps.

Hinweis : Chrome unterstützt nur eine Standard-Zahlungs-App pro Zahlungsmethode.

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:

[Zahlungsabwickler] /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 Web-App-Manifest beschriebenen Informationen werden auch verwendet, um festzulegen, wie eine Zahlungs-App in der Benutzeroberfläche für Zahlungsanfragen angezeigt wird.

Wichtige Felder im Web-App-Manifest

Property-Name	Beschreibung
name (erforderlich)	Wird als Name der Zahlungs-App verwendet.
icons (erforderlich)	Wird als Symbol für die Zahlungs-App verwendet. Diese Symbole werden nur in Chrome verwendet. Andere Browser verwenden sie möglicherweise als Fallback-Symbole, wenn Sie sie nicht als Teil des Zahlungsmittels angeben.
serviceworker	Wird verwendet, um den Service Worker zu erkennen, der als webbasierte Zahlungs-App ausgeführt wird.
serviceworker.src	Die URL, von der das Service Worker-Script heruntergeladen werden soll.
serviceworker.scope	Ein String, der eine URL darstellt, die den Registrierungsbereich eines Service Workers definiert.
serviceworker.use_cache	Die URL, von der das Service Worker-Script heruntergeladen werden soll.
related_applications	Wird verwendet, um die App zu erkennen, die als vom Betriebssystem bereitgestellte Zahlungs-App fungiert. Weitere Informationen finden Sie im Entwicklerleitfaden für Android-Zahlungs-Apps.
prefer_related_applications	Wird verwendet, um zu bestimmen, welche Zahlungs-App gestartet werden soll, wenn sowohl eine vom Betriebssystem bereitgestellte Zahlungs-App als auch eine webbasierte Zahlungs-App verfügbar sind.

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

So ermittelt Chrome, welche Zahlungs-App gestartet werden soll

Plattformspezifische Zahlungs-App starten

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

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

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

[Zahlungsabwickler] /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 Ermittlungsvorgang hier beendet. Andernfalls wird mit dem nächsten Schritt fortgefahren, nämlich dem Starten der webbasierten Zahlungs-App.

Webbasierte Zahlungs-App starten

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

[Zahlungsabwickler] /manifest.json:

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

Der Browser startet die webbasierte Zahlungs-App, indem er ein paymentrequest-Ereignis an den Service Worker sendet. Der Service Worker muss nicht im Voraus registriert werden. Sie kann just-in-time registriert werden.

Spezielle Optimierungen

Wie Browser die Payment Request-Benutzeroberfläche überspringen und eine Zahlungs-App direkt starten können

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

Die Benutzeroberfläche für Zahlungsanfragen wird vor dem Start der Zahlungs-App angezeigt.

Wenn die Benutzeroberfläche für Zahlungsanfragen vor dem Starten einer Zahlungs-App angezeigt wird, erhöht sich die Anzahl der Schritte, die ein Nutzer für die Ausführung einer Zahlung ausführen muss. Um den Prozess zu optimieren, kann der Browser die Bereitstellung dieser Informationen an Zahlungs-Apps delegieren und eine Zahlungs-App direkt starten, ohne die Benutzeroberfläche für Zahlungsanfragen anzuzeigen, wenn show() aufgerufen wird.

Die Benutzeroberfläche für Zahlungsanfragen wird übersprungen und die Zahlungs-App wird direkt gestartet.

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

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

Hinweis : Safari unterstützt derzeit nur Apple Pay. Daher wird die App immer direkt gestartet und die Benutzeroberfläche für Zahlungsanfragen wird übersprungen.

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

Webbasierte Zahlungs-Apps können gestartet werden, ohne dass der Nutzer die Website der Zahlungs-App zuvor explizit besucht und den Service Worker registriert hat. Der Service Worker kann just-in-time registriert werden, wenn der Nutzer mit der webbasierten Zahlungs-App bezahlen möchte. Es gibt zwei Varianten für den Registrierungszeitpunkt:

• Wenn die Benutzeroberfläche für Zahlungsanfragen dem Nutzer angezeigt wird, wird die App rechtzeitig registriert und gestartet, wenn der Nutzer auf Weiter klickt.
• Wenn die Benutzeroberfläche für die Zahlungsanfrage übersprungen wird, wird die Zahlungs-App just-in-time registriert und direkt gestartet. Wenn Sie die Benutzeroberfläche für Zahlungsanfragen überspringen möchten, um eine Just-in-Time-registrierte App zu starten, ist eine Nutzergeste erforderlich. Dadurch wird eine unerwartete Registrierung von Service Workern für verschiedene Ursprünge verhindert.

Hinweis : Ein einzelner Zahlungsmethoden-Identifier kann zwar mehrere Zahlungs-Apps unterstützen, die JIT-Registrierung erfolgt jedoch nur, wenn das Manifest der Zahlungsmethode auf eine einzelne Zahlungs-App verweist.

Nächste Schritte

Nachdem Sie Ihre Zahlungs-App auffindbar gemacht haben, erfahren Sie hier, wie Sie eine plattformspezifische Zahlungs-App und eine webbasierte Zahlungs-App entwickeln.

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