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.
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ützte Browser
Web Payments umfasst verschiedene Technologien und die Unterstützung, hängt vom Browser ab.
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
![Diagramm: So erkennt ein Browser die Zahlungs-App über eine URL-basierte Zahlungsmethoden-ID](https://web.developers.google.cn/static/articles/setting-up-a-payment-method/image/diagram-a-browser-disco-ee5623b0facb6.png?authuser=9&hl=de)
Der Erkennungsprozess beginnt, wenn ein Händler eine Transaktion initiiert:
- Der Browser sendet eine Anfrage an die Zahlungsmethode. Identifier-URL und ruft die Zahlungsmethode Manifestdatei.
- Der Browser bestimmt, welche Web-App Manifest--URL aus dem Manifest der Zahlungsmethode und ruft das Manifest der Web-App ab.
- 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.
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' }
}
});
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
.
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.
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
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.
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. |
![Zahlungs-App mit einem Symbol.](https://web.developers.google.cn/static/articles/setting-up-a-payment-method/image/payment-app-an-icon-3150130974ec9.png?authuser=9&hl=de)
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.
- Die Paket-ID und die Signatur der installierten App stimmen überein, während das Minimum
Version (
- Das Feld
prefer_related_applications
isttrue
. - 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.
- Intent-Filter von
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.
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. durch einen Mausklick.- Es gibt nur eine einzige Zahlungs-App, die:
<ph type="x-smartling-placeholder">
- </ph>
- Unterstützt die angeforderte Zahlungsart-ID.
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.
Nächste Schritte
Jetzt, da Sie Ihre Zahlungs-App gefunden haben, lernen Sie, wie Sie eine plattformspezifische Zahlungs-App und eine webbasierte Zahlungs-App.