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.
Copy
- html
<div id="form-container"></div>
- Fügen Sie die Verarbeitung des Ereignisses
show_fieldsfür die Anzeige der neuen Felder hinzu.
Copy
- typescript
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.
Copy
- typescript
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-statusdem HTML-Markup des Zahlungsportals hinzu, um einen Zahlungsstatus anzuzeigen.
Beispiel:
Copy
- html
@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
- typescript
await headlessCheckout.form.init({
paymentMethodId: 1380, // Bank card payment ID
returnUrl: 'http://example.com/return-page.html',
});
- Fügen Sie die Verarbeitung des Ereignisses
redirecthinzu, 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
- typescript
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();
}
War dieser Artikel hilfreich?
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.
