Lebensdauer einer Zahlungstransaktion

Hier erfahren Sie, wie Händler Zahlungs-Apps einbinden und wie Zahlungstransaktionen funktionieren mit der Payment Request API.

Eiji Kitamura

Milica Mihajlija

Web Payments APIs sind spezielle Zahlungsfunktionen, die in den Browser integriert sind. zum ersten Mal. Über Web Payments, Integration von Händlern in Zahlungs-Apps wird einfacher, während die Nutzererfahrung optimiert und sicherer wird.

Weitere Informationen zu den Vorteilen von Webzahlungen finden Sie unter Empowering Zahlungs-Apps mit Webzahlungen.

In diesem Artikel werden Sie durch eine Zahlungstransaktion auf der Website eines Händlers geführt. wird erläutert, wie die Integration von Zahlungs-Apps funktioniert.

Der Prozess umfasst sechs Schritte:

1. Der Händler veranlasst eine Zahlungstransaktion.
2. Der Händler zeigt eine Zahlungsschaltfläche.

3. Der Kunde drückt auf die Zahlungsschaltfläche.

   

4. Der Browser startet die Zahlungs-App.

   

5. Wenn der Kunde Angaben ändert (z. B. Versandoptionen oder Adresse) aktualisiert, aktualisiert der Händler die Transaktionsdetails entsprechend.

   

6. Nachdem der Kunde den Kauf bestätigt hat, validiert der Händler die Zahlung und schließt die Transaktion ab.

   

Schritt 1: Der Händler initiiert eine Zahlungstransaktion

Wenn sich ein Kunde entschließt, etwas zu kaufen, veranlasst der Händler die Zahlung Transaktion durch Erstellen einer PaymentRequest -Objekt enthält. Dieses Objekt enthält wichtige Informationen zur Transaktion:

• Akzeptierte Zahlungsmethoden und die dazugehörigen Daten zur Abwicklung der Transaktion
• Details wie der Gesamtpreis (erforderlich) und Informationen zu den Artikeln.
• Optionen, mit denen Händler Versandinformationen wie Versandinformationen anfordern können Adresse und eine Versandoption.
• Außerdem können sie die Rechnungsadresse, den Namen, die E-Mail-Adresse und Telefonnummer.
• Die Händler können auch optional Versandkosten Typ (shipping, delivery oder pickup) in PaymentRequest. Die Zahlungs-App kann dies als Hinweis verwenden, um die richtigen Labels auf der Benutzeroberfläche anzuzeigen.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

Transaktions-ID hinzufügen

Bei einigen Zahlungs-Handlern muss der Händler möglicherweise die Transaktions-ID angeben. die sie im Voraus als Teil der Transaktionsinformationen ausgegeben haben. A Die typische Integration beinhaltet die Kommunikation zwischen dem auf den Server des Zahlungs-Handlers, um den Gesamtpreis zu reservieren. So wird verhindert, Kunden davon ab, den Preis zu manipulieren und den Händler mit einem Validierung am Ende der Transaktion.

Der Händler kann eine Transaktions-ID als Teil des PaymentMethodData data-Eigenschaft des Objekts.

Wenn die Transaktionsinformationen vorliegen, führt der Browser eine Erkennung durch in PaymentRequest angegebene Zahlungs-Apps basierend auf der Zahlung Methodenkennungen. So kann der Browser die Zahlungs-App ermitteln, wird eingeführt, sobald der Händler bereit ist, mit der Transaktion fortzufahren.

Ausführliche Informationen zur Funktionsweise des Erkennungsprozesses finden Sie unter Einrichten eines Zahlung .

Schritt 2: Der Händler zeigt eine Zahlungsschaltfläche an

Händler können viele Zahlungsmethoden unterstützen, sollten aber nur die Zahlung anzeigen Schaltflächen für diejenigen, die die Kundschaft tatsächlich verwenden kann. Eine Zahlungsschaltfläche wird angezeigt unbrauchbar ist, ist eine schlechte User Experience. Wenn ein Händler vorhersagen kann, Die im Objekt PaymentRequest angegebene Zahlungsmethode funktioniert nicht mit kann eine Fallback-Lösung angeboten werden oder die Schaltfläche wird gar nicht angezeigt.

Mit einer PaymentRequest-Instanz kann ein Händler abfragen, ob ein Kunde der verfügbaren Zahlungs-App.

Hat der Kunde die Zahlungs-App verfügbar?

Die canMakePayment() PaymentRequest gibt true zurück, wenn eine Zahlungs-App auf der an das Gerät des Kunden. „Verfügbar“ bedeutet, dass eine Zahlungs-App, Zahlungsmethode erkannt wird und die plattformspezifische Zahlungs-App installiert ist. ist die webbasierte Bezahl-App jetzt registriert.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

Schritt 3: Der Kunde drückt auf die Zahlungsschaltfläche.

Wenn der Kunde auf die Zahlungsschaltfläche drückt, ruft der Händler die show() der PaymentRequest-Instanz, die sofort den Start von Benutzeroberfläche für Zahlungen.

Wird der endgültige Gesamtpreis dynamisch festgelegt (z. B. abgerufen aus einem Server), kann der Händler die Einführung der Benutzeroberfläche für Zahlungen verschieben, bis der Gesamtbetrag bekannt sind.

Einführung der Benutzeroberfläche für Zahlungen aufschieben

Sehen Sie sich eine Demo zum Aufschieben der Zahlung an: benutzeroberfläche, bis der endgültige Gesamtpreis bestimmt.

Zum Verschieben der Zahlungs-UI übergibt der Händler ein Promise an die show()-Methode. Der Browser zeigt eine Ladeanzeige an, bis das Versprechen aufgelöst wird und der Transaktion kann beginnen.

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

Wenn für show() kein Promise als Argument angegeben ist, gibt der Browser die Benutzeroberfläche für Zahlungen sofort zu starten.

Hinweis : Wenn der Zahlungs-Handler beim Festlegen des Gesamtpreises eine Transaktions-ID zurückgeben soll, kann die ID als Teil des Promise-Ergebnisses weitergegeben werden.

Schritt 4: Browser startet die Zahlungs-App

Der Browser kann eine plattformspezifische oder eine webbasierte Zahlungs-App starten. (Weitere Informationen wie Chrome bestimmt, welche Zahlungs-App Einführung.

Wie die Zahlungs-App aufgebaut ist, bleibt größtenteils dem Entwickler überlassen. die vom Händler und an den Händler ausgegeben werden, sowie die Struktur der Daten übergeben werden, standardisiert sind.

Wenn die Zahlungs-App gestartet wird, empfängt sie die Transaktion. Informationen an das Objekt PaymentRequest in Schritt 1 übergeben. Dieser Vorgang umfasst Folgendes:

• Daten zur Zahlungsmethode
• Gesamtpreis
• Zahlungsoptionen

Die Zahlungs-App verwendet die Transaktionsinformationen, um ihre Benutzeroberfläche zu kennzeichnen.

Schritt 5: Wie ein Händler die Transaktionsdetails je nach Kundenaktionen aktualisieren kann

Kunden haben die Möglichkeit, die Transaktionsdetails wie die Zahlung zu ändern. Versandart und Versandoption in der Zahlungs-App. Während die Kundschaft Änderungen vornimmt, erhält der Händler die Änderungsereignisse und aktualisiert die Transaktionsdetails.

Es gibt vier Arten von Ereignissen, die ein Händler empfangen kann:

• Änderung der Zahlungsmethode
• Änderung der Versandadresse
• Ereignis zur Änderung der Versandoption
• Händlervalidierungsereignis

Änderung der Zahlungsmethode

Eine Zahlungs-App kann mehrere Zahlungsmethoden unterstützen und ein Händler bietet unter Umständen Folgendes an: einen Sonderrabatt, der je nach Kundenauswahl angeboten wird. Um diesen Anwendungsfall abzudecken, Durch das Änderungsereignis der Zahlungsmethode kann der Händler über die neue Zahlung informiert werden. um den Gesamtpreis mit dem Rabatt zu aktualisieren und diesen zurückzugeben. zurück zur Zahlungs-App.

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

Änderung der Versandadresse

Eine Zahlungs-App kann optional die Versandadresse des Kunden angeben. Dies ist praktisch für Kunden, da diese keine Details manuell eingeben müssen ein Formular ausfüllen und die Versandadresse in der bevorzugten Zahlungsmethode Apps statt auf verschiedenen Händlerwebsites.

Wenn ein Kunde seine Versandadresse in einer Zahlungs-App aktualisiert, nachdem Transaktion eingeleitet wurde, wird ein 'shippingaddresschange'-Ereignis gesendet an den Händler gesendet. Anhand dieses Ereignisses kann der Händler die Versandkosten anhand für die neue Adresse, aktualisieren Sie den Gesamtpreis und senden Sie ihn an die Zahlungs-App zurück.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

Wenn der Händler nicht an die aktualisierte Adresse liefern kann, gibt er eine Fehlermeldung an. durch Hinzufügen eines Fehlerparameters zu den Transaktionsdetails, die an den Zahlungs-App.

Hinweis : Händler erhalten keine , bis die Zahlung autorisiert wurde.

Ereignis zur Änderung der Versandoption

Ein Händler kann dem Kunden mehrere Versandoptionen anbieten und an die Zahlungs-App senden. Die Versandoptionen werden als Liste mit und Servicenamen, aus denen die Kundschaft auswählen kann. Beispiel:

• Standardversand – kostenlos
• Expressversand – 5 EUR

Wenn ein Kunde die Versandoption in einer Zahlungs-App aktualisiert, wird eine 'shippingoptionchange' Ereignis wird an den Händler gesendet. Der Händler kann ermitteln Sie die Versandkosten, aktualisieren Sie den Gesamtpreis und Zahlungs-App.

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

Der Händler kann die Versandoptionen je nach den Versandadresse angeben. Dies ist nützlich, wenn ein Händler verschiedene Versandoptionen für In- und Auslandskunden

Händlervalidierungsereignis

Zur zusätzlichen Sicherheit kann eine Zahlungs-App vor dem Kauf mit dem Zahlungsvorgang fortfahren. Das Design des Validierungsmechanismus die Zahlungs-App, aber das Händlervalidierungsereignis dient dazu, den Händler zu informieren. .

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

Hinweis : Händlervalidierungsereignisse werden nur von Apple Safari unterstützt. In Chromium-basierten Browsern wurde dieses Ereignis seit Mai 2020 nicht implementiert.

Schritt 6: Der Händler validiert die Zahlung und schließt die Transaktion ab

Wenn der Kunde die Zahlung erfolgreich autorisiert, wird die show()-Methode ein Versprechen zurückgegeben, das zu einer PaymentResponse Das PaymentResponse-Objekt enthält die folgenden Informationen:

• Details zum Zahlungsergebnis
• Versandadresse
• Versandoption
• Kontaktdaten

Zu diesem Zeitpunkt wird in der Browser-Benutzeroberfläche möglicherweise immer noch eine Ladeanzeige angezeigt. Das bedeutet, die Transaktion noch nicht abgeschlossen ist.

Wenn die Zahlungs-App aufgrund eines Zahlungsversäumnisses oder -fehlers beendet wird, wird der von show() zurückgegebenes Promise wird abgelehnt und der Browser beendet die Zahlung. Transaktion.

Zahlung verarbeiten und überprüfen

Die details in PaymentResponse ist das Objekt, das für Zahlungsanmeldedaten zurückgegeben wurde. über die Zahlungs-App. Der Händler kann das Ausweisdokument zur Verarbeitung oder Validierung verwenden. der Zahlung. Wie dieser kritische Prozess funktioniert, bleibt dem Zahlungs-Handler überlassen.

Abschließen oder Wiederholen der Transaktion

Nachdem der Händler festgestellt hat, ob die Transaktion erfolgreich war oder fehlgeschlagen ist, Sie haben folgende Möglichkeiten:

• Rufen Sie die Methode .complete() auf, um die Transaktion abzuschließen, und schließen Sie den Ladeanzeige.
• Lass den Kunden es noch einmal versuchen, indem er die Methode retry() aufruft.

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

Nächste Schritte

• Ausführliche Informationen zum Deklarieren der Kennung für eine Zahlungsmethode finden Sie unter Einrichten eines Zahlungsmethode.
• Hier erfahren Sie, wie Sie eine plattformspezifische Zahlungs-App erstellen: Entwicklerleitfaden für Zahlungs-Apps für Android
• Informationen zum Erstellen einer webbasierten Zahlungs-App finden Sie in der Entwicklerwebsite für webbasierte Zahlungs-Apps .