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.

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

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.

1<psdk-legal></psdk-legal>
2<psdk-total></psdk-total>
3
4
5<psdk-payment-form></psdk-payment-form>
6<psdk-submit-button text="Pay"></psdk-submit-button>

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

1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'check_status': {
4      showStatus = true;
5    }
6  }
7});

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

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