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.
- html
1<div id="form-container"></div>
- Adicione a manipulação do evento
show_fieldspara a exibição de campos novos.
- 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.
submitButtonText, você pode definir o texto do botão padrão para cada etapa do formulário de pagamento. Ex.: Continuar.- 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}
Verificação 3-D Secure
A verificação 3-D Secure pode ser gerenciada pelo mecanismo embutido do adquirente ou através de um Merchant Plug-In (MPI) externo, que autentica o portador do cartão e encaminha o resultado ao adquirente.
Quando a verificação é gerenciada pelo mecanismo embutido do adquirente, o usuário é redirecionado a um URL externo. Para esse cenário, você precisa configurar o gerenciamento do evento redirect.
A verificação por MPI é implementada com o componente psdk-3ds, no qual são usados WebSockets. Você precisa configurar o gerenciamento do evento 3DS para o fluxo de desafio funcionar corretamente, pois esse processo de verificação requer uma ação de usuário adicional para confirmar a transação.
A escolha do tipo de verificação depende do banco do usuário.
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.
