Webbasierte Zahlungs-App registrieren

Informationen zum Konfigurieren einer webbasierten Zahlungs-App während der Registrierung

Eiji Kitamura

Webbasierte Zahlungs-Apps sind progressive Web-Apps (PWAs) und werden auf Dienstarbeitern ausgeführt. Der Dienst-Worker in einer Zahlungs-App spielt eine wichtige Rolle, da er Zahlungsanfragen von einem Händler erfasst, die Zahlungs-App startet und die Kommunikation mit dem Händler vermittelt.

Wenn Sie eine webbasierte Zahlungs-App konfigurieren möchten, müssen Sie verfügbare Zahlungsmethoden und einen Dienst-Worker registrieren. Sie können Ihre webbasierte Zahlungs-App deklarativ mit einem Web-App-Manifest konfigurieren.

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ät
Payment Request API ✔ ✔ ✔ ✔
Payment Handler API ✔ ✔
iOS-/Android-Zahlungs-App ✔ ✔ ✔* ✔*

Zahlungs-App mit einem Webanwendungsmanifest konfigurieren

Wenn Sie Ihre webbasierte Zahlungs-App deklarativ konfigurieren möchten, stellen Sie ein Web-App-Manifest bereit.

Die folgenden Properties im Manifest der Webanwendung sind für webbasierte Zahlungs-Apps relevant:

  • name
  • icons
  • serviceworker
    • src
    • scope
    • use_cache

Sehen Sie sich den Hilfeartikel Zahlungsmethode einrichten an, um sicherzustellen, dass das Manifest Ihrer Zahlungsmethode richtig auf das Manifest Ihrer Webanwendung verweist.

Service Worker Just-in-Time (JIT) registrieren

Für die JIT-Registrierung muss nur das Manifest der Webanwendung bereitgestellt werden. Es ist keine zusätzliche Programmierung erforderlich. Wenn Sie das Manifest Ihrer Webanwendung bereits konfiguriert und ordnungsgemäß bereitgestellt haben, sind Sie fertig. Der Browser übernimmt den Rest.

Fehlerbehebung bei einer webbasierten Zahlungs-App

Wenn Sie ein webbasiertes Frontend für eine Zahlungs-App entwickeln, wechseln Sie wahrscheinlich zwischen dem Händlerkontext und dem Kontext der Zahlungs-App. Die folgenden Tipps zur Fehlerbehebung erleichtern die Entwicklung in Chrome.

Entwicklung auf einem lokalen Server

Welchen Server verwenden Sie für die Entwicklung? Viele Entwickler verwenden den Localhost oder eine unternehmensinterne Serverumgebung. Das kann schwierig sein, da leistungsstarke Funktionen im Browser in der Regel eine sichere Umgebung (HTTPS) und ein gültiges Zertifikat erfordern. Die Payment Request API und die Payment Handler API sind keine Ausnahme. Lokale Hosts oder unternehmensinterne Server haben in der Regel kein gültiges Zertifikat.

Die gute Nachricht ist, dass einige Browser, einschließlich Chrome, Zertifikate für http://localhost standardmäßig ausnehmen. Auch in Chrome können Sie die Zertifizierungsanforderung ausschließen, indem Sie eine Chrome-Instanz starten. Wenn Sie die Anforderung beispielsweise von http://*.corp.company.com ausnehmen möchten, verwenden Sie die folgenden Flags:

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Windows

chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Weitere Informationen zum Ausführen von Chrome mit einem Laufzeitflag finden Sie unter Chromium mit Flags ausführen.

Portweiterleitung für einen lokalen Server

Sie können den lokalen Webserver mit den Chrome-Entwicklertools an ein Android-Gerät weiterleiten und die Funktionsweise in einem mobilen Browser testen. Weitere Informationen dazu finden Sie unter Auf lokale Server zugreifen.

Website in Android Chrome über die Entwicklertools auf dem Computer remote debuggen

Sie können Android Chrome auch in den Desktop-Entwicklertools debuggen. Weitere Informationen finden Sie unter Erste Schritte mit dem Remote-Debugging von Android-Geräten.

Ereignisprotokollierung für Zahlungsabwickler

In den DevTools können Payment Handler API-Ereignisse angezeigt werden, um die lokale Entwicklung zu vereinfachen. Öffnen Sie DevTools im Händlerkontext und gehen Sie im Bereich Anwendung zum Abschnitt „Zahlungsabwickler“. Aktivieren Sie die Option „Ereignisse aus anderen Domains anzeigen“ und klicken Sie auf die Schaltfläche „Aufzeichnen“, um Ereignisse aufzuzeichnen, die an den Service Worker gesendet werden, der für die Zahlungen zuständig ist.

Screenshot der Ereignisprotokollierung des Zahlungsabwicklers
Ereignisprotokollierung des Zahlungsabwicklers.

Nächste Schritte

Im nächsten Schritt erfahren Sie, wie der Dienst-Worker eine Zahlungstransaktion zur Laufzeit orchestrieren kann.