Cartões bancários
Para configurar pagamentos usando cartões bancários, você pode seguir as instruções de configuração básicas. Se o usuário precisar inserir dados adicionais para concluir o pagamento, como ao pagar com cartões brasileiros, ou passar a verificação 3-D Secure, use as instruções fornecidas abaixo.
Entrada de dados adicionais do usuário
- Adicione um contêiner para o formulário da interface de pagamento.
Copy
- html
1<div id="form-container"></div>
- Adicione a manipulação do evento
show_fieldspara a exibição de campos novos.
Copy
- typescript
1headlessCheckout.form.onNextAction((nextAction) => {
2 switch (nextAction.type) {
3 case 'show_fields':
4 this.handleShowFieldsAction(nextAction);
5 }
6});
- Crie os campos de interface de pagamento para inserir dados adicionais, como um nome do titular do cartão, ou endereço de cobrança.
Copy
- typescript
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}
Verificação 3-D Secure
Este artigo foi útil?
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.
