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.
- html
1<div id="form-container"></div>
- Fügen Sie die Verarbeitung des Ereignisses
show_fieldsfür die Anzeige der neuen Felder hinzu.
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'show_fields':
4 this.handleShowFieldsAction(nextAction);
5 }
6});
- Erstellen Sie die im Zahlungsportal anzuzeigenden Felder für die Eingabe der zusätzlichen Daten, z. B. den Namen des Karteninhabers oder die Rechnungsadresse.
submitButtonText können Sie den Standardtext für die Schaltflächen in jedem Schritt der Bezahlmaske festlegen, z. B. Weiter.- typescript
1private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
2 this.form.fields = nextAction.data.fields;
3 if (nextAction.data.submitButtonText) {
4 this.updateSubmitButton(nextAction.data.submitButtonText);
5 }
6 this.updateForm(this.form);
7}
8
9private updateForm(form: Form): void {
10 const visibleFields = form.fields.filter((field) => {
11 return field.isVisible === '1';
12 });
13
14 const controls = visibleFields.map((field) => {
15 if (field.type === 'select') {
16 return this.getSelectControl(field);
17 }
18
19 if (field.type === 'check') {
20 return this.getCheckboxControl(field);
21 }
22
23 if (field.type === 'text') {
24 if (field.name === 'card_number') {
25 return this.getCardNumberControl(field);
26 }
27
28 if (field.name === 'phone') {
29 return this.getPhoneControl(field);
30 }
31
32 return this.getTextControl(field);
33 }
34
35 return null;
36 });
37
38 this.renderForm(controls);
39}
40
41private getSelectControl(field: Field): HTMLElement {
42 const control = new SelectComponent();
43 control.setAttribute('name', field.name);
44 return control;
45}
46
47private getCheckboxControl(field: Field): HTMLElement {
48 const control = new CheckboxComponent();
49 control.setAttribute('name', field.name);
50 return control;
51}
52
53private getCardNumberControl(field: Field): HTMLElement {
54 const control = new CardNumberComponent();
55 control.setAttribute('name', field.name);
56 control.setAttribute('icon', 'true');
57 return control;
58}
59
60private getPhoneControl(field: Field): HTMLElement {
61 const control = new PhoneComponent();
62 control.setAttribute('name', field.name);
63 control.setAttribute('showFlags', 'true');
64 return control;
65}
66
67private getTextControl(field: Field): HTMLElement {
68 const control = new TextComponent();
69 control.setAttribute('name', field.name);
70 return control;
71}
72
73private renderForm(controls: Array<HTMLElement | null>): void {
74 const formContainer = document.querySelector('#form-container');
75 formContainer.nativeElement.innerHTML = '';
76
77 controls.forEach((control) => {
78 if (!control) return;
79 formContainer.nativeElement.append(control);
80 });
81}
"3-D Secure"-Prüfung
Die 3-D Secure-Prüfung kann entweder über den integrierten Mechanismus des Acquirers oder über ein externen Merchant Plug-In (MPI) erfolgen, das den Karteninhaber authentifiziert und das Ergebnis an den Acquirer weiterleitet.
Wenn die Prüfung über den integrierten Mechanismus des Acquirers erfolgt, wird der Nutzer auf eine externe URL weitergeleitet. Hierbei müssen Sie die Verarbeitung des Ereignisses redirect konfigurieren.
Die Prüfung über ein MPI ist in der Komponente psdk-3ds implementiert, wobei WebSockets zum Einsatz kommen. Sie müssen die Verarbeitung des Ereignisses 3DS konfigurieren, damit der Hinterfragen-Ablauf korrekt funktioniert, da dieser Prüfprozess eine zusätzliche Aktion des Nutzers (er muss die Transaktion bestätigen) erfordert.
Wie geprüft wird, hängt von der Bank des Nutzers ab.
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.
