1headlessCheckout.form.onNextAction((nextAction) => {
2  switch (nextAction.type) {
3    case 'show_fields':
4      this.handleShowFieldsAction(nextAction);
5  }
6});

 1private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
 2  this.form.fields = nextAction.data.fields;
 3  this.updateForm(this.form);
 4}
 5
 6private updateForm(form: Form): void {
 7  const visibleFields = form.fields.filter((field) => {
 8    return field.isVisible === '1';
 9  });
10
11  const controls = visibleFields.map((field) => {
12    if (field.type === 'select') {
13      return this.getSelectControl(field);
14    }
15
16    if (field.type === 'check') {
17      return this.getCheckboxControl(field);
18    }
19
20    if (field.type === 'text') {
21      if (field.name === 'card_number') {
22        return this.getCardNumberControl(field);
23      }
24
25      if (field.name === 'phone') {
26        return this.getPhoneControl(field);
27      }
28
29      return this.getTextControl(field);
30    }
31
32    return null;
33  });
34
35  this.renderForm(controls);
36}
37
38private getSelectControl(field: Field): HTMLElement {
39  const control = new SelectComponent();
40  control.setAttribute('name', field.name);
41  return control;
42}
43
44private getCheckboxControl(field: Field): HTMLElement {
45  const control = new CheckboxComponent();
46  control.setAttribute('name', field.name);
47  return control;
48}
49
50private getCardNumberControl(field: Field): HTMLElement {
51  const control = new CardNumberComponent();
52  control.setAttribute('name', field.name);
53  control.setAttribute('icon', 'true');
54  return control;
55}
56
57private getPhoneControl(field: Field): HTMLElement {
58  const control = new PhoneComponent();
59  control.setAttribute('name', field.name);
60  control.setAttribute('showFlags', 'true');
61  return control;
62}
63
64private getTextControl(field: Field): HTMLElement {
65  const control = new TextComponent();
66  control.setAttribute('name', field.name);
67  return control;
68}
69
70private renderForm(controls: Array<HTMLElement | null>): void {
71  const formContainer = document.querySelector('#form-container');
72  formContainer.nativeElement.innerHTML = '';
73
74  controls.forEach((control) => {
75    if (!control) return;
76    formContainer.nativeElement.append(control);
77  });
78}