SDK aufseiten der Anwendung integrieren

Nach der Installation und Initialisierung des SDK:

1. Initialisieren Sie das Zahlungsportal, indem Sie die Zahlungsmethoden-ID und die Weiterleitungs-URL angeben:
   • Die Methode headlessCheckout.form.init gibt ein Objekt zurück, das für die weitere Interaktion mit dem Zahlungsportal verwendet wird.
   • Die Weiterleitungs-URL dient dazu, den Nutzer weiterzuleiten, z. B. nach Abschluss der “3-D Secure”-Prüfung.

await headlessCheckout.form.init({
  paymentMethodId: ID,
  returnUrl: 'returnUrl',
});

2. Fügen Sie dem HTML-Markup des Zahlungsportals die folgenden Komponenten hinzu:
   • Zwingend erforderliche Komponenten:
     • psdk-legal – zur Anzeige von Informationen über Rechtsdokumente.
     • psdk-total – zur Anzeige des insgesamt zu zahlenden Kaufbetrags.
   • Zahlunsgmasken-Komponenten. Sie können entweder die integrierte Komponente psdk-payment-form verwenden oder die Zahlungsportal-Elemente manuell mithilfe gebrauchsfertiger Komponenten erstellen.
   • Die Kaufen-Schaltfläche-Komponente: psdk-submit-button.

<psdk-legal></psdk-legal>
<psdk-total></psdk-total>


<psdk-payment-form></psdk-payment-form>
<psdk-submit-button text="Pay"></psdk-submit-button>

3. Fügen Sie die Verarbeitung des Ereignisses check_status für die Zahlungsstatusänderung hinzu.

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'check_status': {
      showStatus = true;
    }
  }
});

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

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