Bankkarten

Wenn Sie die Bezahlung mittels Bankkarte ermöglichen möchten, folgen Sie einfach diesem grundlegenden Einrichtungsleitfaden.

Zusätzliche Eingabe von Nutzerdaten

Fügen Sie einen Container für die Zahlungsmaske hinzu.

Beispiel:

Copy

Full screen

Small screen

<div id="form-container"></div>

Fügen Sie die Verarbeitung des Ereignisses show_fields für die Anzeige der neuen Felder hinzu.

Beispiel:

Copy

Full screen

Small screen

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

Erstellen Sie die im Zahlungsportal anzuzeigenden Felder für die Eingabe der zusätzlichen Daten, z. B. den Namen des Karteninhabers oder die Rechnungsadresse.

Beispiel:

Copy

Full screen

Small screen

private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
  this.form.fields = nextAction.data.fields;
  this.updateForm(this.form);
}

private updateForm(form: Form): void {
  const visibleFields = form.fields.filter((field) => {
    return field.isVisible === '1';
  });

  const controls = visibleFields.map((field) => {
    if (field.type === 'select') {
      return this.getSelectControl(field);
    }

    if (field.type === 'check') {
      return this.getCheckboxControl(field);
    }

    if (field.type === 'text') {
      if (field.name === 'card_number') {
        return this.getCardNumberControl(field);
      }

      if (field.name === 'phone') {
        return this.getPhoneControl(field);
      }

      return this.getTextControl(field);
    }

    return null;
  });

  this.renderForm(controls);
}

private getSelectControl(field: Field): HTMLElement {
  const control = new SelectComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCheckboxControl(field: Field): HTMLElement {
  const control = new CheckboxComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCardNumberControl(field: Field): HTMLElement {
  const control = new CardNumberComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('icon', 'true');
  return control;
}

private getPhoneControl(field: Field): HTMLElement {
  const control = new PhoneComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('showFlags', 'true');
  return control;
}

private getTextControl(field: Field): HTMLElement {
  const control = new TextComponent();
  control.setAttribute('name', field.name);
  return control;
}

private renderForm(controls: Array<HTMLElement | null>): void {
  const formContainer = document.querySelector('#form-container');
  formContainer.nativeElement.innerHTML = '';

  controls.forEach((control) => {
    if (!control) return;
    formContainer.nativeElement.append(control);
  });
}

"3-D Secure"-Prüfung

Erstellen Sie eine Zahlungsstatusseite, auf die der Nutzer nach erfolgreicher “3-D Secure”-Prüfung weitergeleitet wird, z. B.: https://example.com/return-page.html.
Fügen Sie die Komponente psdk-status dem HTML-Markup des Zahlungsportals hinzu, um einen Zahlungsstatus anzuzeigen.

Beispiel:

Copy

Full screen

Small screen

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

Erstellen Sie eine Seite, auf der das Zahlungsportal angezeigt wird, z. B.: https://example.com/form-page.html.
Initialisieren Sie das Zahlungsportal unter Angabe der Zahlungsmethoden-ID und der Statusseiten-URL.

Beispiel:

Copy

Full screen

Small screen

await headlessCheckout.form.init({
  paymentMethodId: 1380, // Bank card payment ID
  returnUrl: 'http://example.com/return-page.html',
});

Fügen Sie die Verarbeitung des Ereignisses redirect hinzu, um den Nutzer für die “3-D Secure”-Prüfung auf eine externe Seite weiterzuleiten. Nach erfolgreicher Prüfung wird der Nutzer auf die Zahlungsstatusseite (https://example.com/return-page.html) weitergeleitet.

Beispiel:

Copy

Full screen

Small screen

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 3-D Secure 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();
}

Fügen Sie die Verarbeitung des Ereignisses 3DS für die “3-D Secure”-Prüfung hinzu.

Beispiel:

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    ...
    case '3DS': {
      show3DS = true;
    }
  }
});

Fügen Sie die Komponente psdk-3ds dem HTML-Markup des Zahlungsportals hinzu, um die “3-D Secure”-Prüfung zu verarbeiten.

Beispiel:

Copy

Full screen

Small screen

@if (show3DS) {
  <psdk-3ds></psdk-3ds>
}

Vielen Dank für Ihr Feedback!

Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.

Letztmalig aktualisiert: 3. März 2025

Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

Your browser is not supported. Please try a different browser

Headless checkout

Bankkarten

Zusätzliche Eingabe von Nutzerdaten

"3-D Secure"-Prüfung