E-Wallets mit Weiterleitung wie etwa PayPal, Klarna und Skrill leiten den Nutzer auf die Website des Zahlungssystems weiter, wo der Nutzer die Zahlung autorisieren und bestätigen muss. Danach erfolgt die Weiterleitung zurück zur Website des Anbieters. Diese Methode erhöht die Zahlungssicherheit, da der Anbieter keinen Zugriff auf die Zahlungsdaten des Nutzers hat.

Die folgende Anleitung beschreibt am Beispiel von PayPal, wie man den Headless Checkout konfiguriert und so Zahlungen über E-Wallets mit Weiterleitung entgegennehmen kann.

1. Erstellen Sie eine Zahlungsstatusseite, auf die der Nutzer nach erfolgreicher PayPal-Zahlung weitergeleitet wird, z. B.: https://example.com/return-page.html.

2. Fügen Sie die Komponente psdk-status dem HTML-Markup des Zahlungsportals hinzu, um einen Zahlungsstatus anzuzeigen.

Beispiel:

@if (showStatus) {
  <psdk-status></psdk-status>
}

3. Erstellen Sie eine Seite, auf der die PayPal-Maske angezeigt wird, z. B.: https://example.com/form-page.html.

4. Initialisieren Sie das Zahlungsportal unter Angabe der Zahlungsmethoden-ID und der Statusseiten-URL.

Beispiel:

await headlessCheckout.form.init({
  paymentMethodId: 24, // PayPal payment ID
  returnUrl: 'https://example.com/return-page.html',
});

5. Fügen Sie die Verarbeitung des Ereignisses redirect hinzu, um den Nutzer auf eine externe Seite weiterzuleiten, auf der er die PayPal-Zahlung vornehmen kann. Nach Abschluss des Kaufs wird der Nutzer auf die Zahlungsstatusseite (https://example.com/return-page.html) weitergeleitet.

Beispiel:

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'redirect':
      this.handleRedirectAction(nextAction);
  }
});

private handleRedirectAction(redirectAction: RedirectAction): void {
  const url = this.buildRedirectUrl(redirectAction);
  window.location.href = url; // redirect to PayPal page
}

private buildRedirectUrl(redirectAction: RedirectAction): string {
  const url = new URL(redirectAction.data.redirect.redirectUrl);
  const params = Object.entries(redirectAction.data.redirect.data);
  params.forEach((entry) => {
    const [key, value] = entry;
    url.searchParams.append(key, value);
  });
  return url.toString();
}