Bank cards
To set up payments using bank cards, you can follow the basic setup instructions. If the user needs to enter additional data to complete payment, e.g., when paying with Brazilian cards, or pass the 3-D Secure verification, use the instructions provided below.
Additional user data entry
- Add a container for the payment UI form.
- html
1<div id="form-container"></div>
- Add the handling of the
show_fieldsevent for the new fields display.
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'show_fields':
4 this.handleShowFieldsAction(nextAction);
5 }
6});
- Create the payment UI fields for entering additional data, e.g., a cardholder name or billing address.
submitButtonText field, you can set the default button copy for each payment form step, e.g., Continue.- 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 verification
3-D Secure verification can be handled either by the acquirer’s built-in mechanism or through an external Merchant Plug-In (MPI), which authenticates a cardholder and forwards the result to the acquirer.
When the verification is handled by the acquirer’s built-in mechanism, the user is redirected to an external URL. For this scenario, you need to configure handling of the redirect event.
The verification through an MPI is implemented with the psdk-3ds component in which WebSockets are used. You need to configure handling of the 3DS event for the challenge flow to work correctly, as this verification process requires an additional user action to confirm the transaction.
The choice of verification type depends on the user’s bank.
Found a typo or other text error? Select the text and press Ctrl+Enter.
