Zahlungsmethode einrichten

Eine Zahlungstransaktion über Web Payments beginnt mit der Erkennung Ihrer Zahlungs-App. Zahlungsmethode einrichten und Zahlungs-App herunterladen für Händler und Kunden bereit, Zahlungen auszuführen.

Eiji Kitamura

Zur Verwendung mit der Payment Request API muss eine Zahlungs-App mit einer ID der Zahlungsmethode. Händler, die eine Zahlungs-App einbinden möchten wird dem Browser die ID der Zahlungsmethode angezeigt. Dieses erfahren Sie, wie die App-Erkennung funktioniert und wie Sie Ihre Zahlungs-App korrekt erkannt und von einem Browser aufgerufen werden kann.

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

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

Unterstützte Browser

Web Payments umfasst verschiedene Technologien und die Unterstützung, hängt vom Browser ab.

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

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

So erkennt ein Browser eine Zahlungs-App

Jede Zahlungs-App muss Folgendes bieten:

• URL-basierte Kennung für die Zahlungsmethode
• Manifest der Zahlungsmethode (es sei denn, die ID der Zahlungsmethode lautet von einem Drittanbieter bereitgestellt)
• Web-App-Manifest

Der Erkennungsprozess 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 das webbasierte Zahlungs-App aus dem Web-App-Manifest.

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

Schritt 1: ID der Zahlungsmethode angeben

Eine Zahlungsmethode Kennung ist eine URL-basierte Zeichenfolge. Die Google Pay-ID 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 beliebig viele Inhalte. In diesem Artikel https://bobbucks.dev/pay als Zahlungsmethode Kennung.

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 erstellt. Kennzeichnungen zur Identifizierung von Zahlungen Apps, die ein Händler akzeptiert Kennungen für Zahlungsmethoden sind als Wert festgelegt für das Attribut supportedMethods. Beispiel:

[Händler] fordert eine Zahlung an:

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

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

Schritt 2: Manifest der Zahlungsmethode bereitstellen

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

Manifest der Zahlungsmethode angeben

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

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

Felder des Manifests der Zahlungsmethode

Property-Name	Beschreibung
default_applications (erforderlich)	Ein Array von URLs, die auf Web-App-Manifeste verweisen, in denen die Zahlung erfolgt und Apps gehostet werden. (Die URL kann eine relative URL sein.) Dieses Array wird erwartet um auf das Entwicklungsmanifest, das Produktionsmanifest usw. zu verweisen.
supported_origins	Ein Array von URLs, die auf Ursprünge verweisen, die möglicherweise Drittanbieter hosten Zahlungs-Apps mit derselben Zahlungsmethode. Beachten Sie, dass eine Zahlung Methode kann von mehreren Zahlungs-Apps implementiert werden.

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 Links zu Web-App-Manifesten der unterstützten Zahlungs-Apps.

Hinweis : Chrome unterstützt ab Chrome 83 nur noch eine einzige Standard-Zahlungs-App pro Zahlungsmethode.

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. Dies ist nützlich, wenn das Manifest einer Zahlungsmethode auf einem anderen oder wenn die Zahlungs-App von einem Drittanbieter bereitgestellt wird.

Konfiguriere den Server für die Zahlungsmethode so, dass er mit einem HTTP-Header Link mit das Attribut rel="payment-method-manifest" und die Zahlungsmethode Manifest-URL.

Wenn sich das Manifest beispielsweise unter https://bobbucks.dev/payment-manifest.json befindet, würde der Antwortheader Folgendes enthalten:

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

Bei der URL kann es sich um einen voll qualifizierten Domainnamen oder einen relativen Pfad handeln. Untersuchen https://bobbucks.dev/pay/ für Netzwerkverkehr, um ein Beispiel zu sehen. Sie können einen curl-Befehl hinzu:

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

Hinweis : Weitere Informationen zur Vorgehensweise bei Zahlungsmethoden finden Sie in der W3C-Dokumentation.

Schritt 3: Web-App-Manifest bereitstellen

Ein Web-App-Manifest ist zur Definition einer Web-App, wie der Name schon sagt. Es ist eine weitverbreitete Manifestdatei zum Definieren einer progressiven Web-App (PWA).

Ein typisches Web-App-Manifest würde so aussehen:

[Zahlungs-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 in einem Web-App-Manifest beschriebenen Informationen werden auch verwendet, um zu definieren, wie ein Zahlungs-App wird in der Benutzeroberfläche der Zahlungsanforderung angezeigt.

Wichtige Felder im Manifest für Web-Apps

Property-Name	Beschreibung
name (erforderlich)	Wird als Name der Zahlungs-App verwendet.
icons (erforderlich)	Wird als Symbol der Zahlungs-App verwendet. Diese Symbole werden nur in Chrome verwendet. Anderes Browser können sie als Fallback-Symbole verwenden, wenn Sie sie nicht als Teil des Zahlungsmittels.
serviceworker	Wird verwendet, um den Service Worker zu erkennen, der als webbasierte Zahlung ausgeführt wird
serviceworker.src	Die URL, von der das Service Worker-Skript heruntergeladen werden soll.
serviceworker.scope	Ein String, der eine URL darstellt, mit der die Registrierungsbereich.
serviceworker.use_cache	Die URL, von der das Service Worker-Skript heruntergeladen werden soll.
related_applications	Wird verwendet, um die App zu erkennen, die als vom Betriebssystem bereitgestellte Zahlungs-App fungiert. Weitere Informationen finden Sie unter Android Entwicklerleitfaden für 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.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Label und Symbol der Zahlungs-App.

Das Attribut name des Web-App-Manifests wird als Name der Zahlungs-App verwendet, icons Property wird als Symbol für die Zahlungs-App verwendet.

So bestimmt Chrome, welche Zahlungs-App gestartet wird

Einführung der plattformspezifischen Zahlungs-App

Damit Sie die plattformspezifische Zahlungs-App starten können, müssen die folgenden Bedingungen erfüllt sein:

• Das Feld related_applications wird im Manifest der Web-App angegeben und gilt für Folgendes: <ph type="x-smartling-placeholder">
  </ph>
  • 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: <ph type="x-smartling-placeholder">
  </ph>
  • Intent-Filter von 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.

[Zahlungs-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 das Symbol Discovery-Ablauf wird hier beendet. Andernfalls geht es mit dem nächsten Schritt weiter: Einführung der webbasierten Zahlungs-App.

Einführung der webbasierten Zahlungs-App

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

[Zahlungs-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 Methode show() von PaymentRequest aufgerufen wird, wird die Zahlung Die Request API zeigt eine vom Browser bereitgestellte UI mit dem Namen „Benutzeroberfläche für Zahlungsanfragen“ an. Dieses Auf der Benutzeroberfläche können Nutzer eine Zahlungs-App auswählen. Nach dem Drücken der Schaltfläche Weiter wird die ausgewählte Zahlungs-App gestartet.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Die Benutzeroberfläche für Zahlungsanforderungen wird eingeblendet, bevor die Zahlungs-App gestartet wird.

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.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Überspringen Sie die Benutzeroberfläche für die Zahlungsanforderung und starten Sie die Zahlungs-App direkt.

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. durch einen Mausklick.
• Es gibt nur eine einzige Zahlungs-App, die: <ph type="x-smartling-placeholder">
  </ph>
  • Unterstützt die angeforderte Zahlungsart-ID.

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

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

Webbasierte Zahlungs-Apps können ohne den ausdrücklichen vorherigen Besuch des Nutzers gestartet werden. zur Website der Zahlungs-App und zum Registrieren des Service Workers. 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 Benutzeroberfläche für Zahlungsanforderungen angezeigt wird, ist die App registriert. Just-in-Time und die Markteinführung erfolgt, wenn der Nutzer auf Weiter klickt.
• Wenn die Benutzeroberfläche für Zahlungsanforderungen übersprungen wird, wird die Zahlungs-App registriert und direkt eingeführt werden. Start der Benutzeroberfläche für Zahlungsanforderungen überspringen eine Just-in-time registrierte App erfordert eine Nutzergeste, unerwartete Registrierung von ursprungsübergreifenden Service Workern.

Hinweis : Während eine einzelne Zahlungsmethoden-ID mehrere Zahlungs-Apps unterstützen kann, erfolgt die JIT-Registrierung nur, wenn das Manifest der Zahlungsmethode auf eine einzelne Zahlungs-App verweist.

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: Entwicklerleitfaden
• Entwicklerleitfaden für webbasierte Zahlungs-Apps