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.

Exemplo:

Copy

Full screen

Small screen

<div id="form-container"></div>

Adicione a manipulação do evento show_fields para a exibição de campos novos.

Exemplo:

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'show_fields':
      this.handleShowFieldsAction(nextAction);
  }
});

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.

Exemplo:

Copy

Full screen

Small screen

private handleShowFieldsAction(nextAction: ShowFieldsAction): void {
  this.form.fields = nextAction.data.fields;
  this.updateForm(this.form);
}

private updateForm(form: Form): void {
  const visibleFields = form.fields.filter((field) => {
    return field.isVisible === '1';
  });

  const controls = visibleFields.map((field) => {
    if (field.type === 'select') {
      return this.getSelectControl(field);
    }

    if (field.type === 'check') {
      return this.getCheckboxControl(field);
    }

    if (field.type === 'text') {
      if (field.name === 'card_number') {
        return this.getCardNumberControl(field);
      }

      if (field.name === 'phone') {
        return this.getPhoneControl(field);
      }

      return this.getTextControl(field);
    }

    return null;
  });

  this.renderForm(controls);
}

private getSelectControl(field: Field): HTMLElement {
  const control = new SelectComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCheckboxControl(field: Field): HTMLElement {
  const control = new CheckboxComponent();
  control.setAttribute('name', field.name);
  return control;
}

private getCardNumberControl(field: Field): HTMLElement {
  const control = new CardNumberComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('icon', 'true');
  return control;
}

private getPhoneControl(field: Field): HTMLElement {
  const control = new PhoneComponent();
  control.setAttribute('name', field.name);
  control.setAttribute('showFlags', 'true');
  return control;
}

private getTextControl(field: Field): HTMLElement {
  const control = new TextComponent();
  control.setAttribute('name', field.name);
  return control;
}

private renderForm(controls: Array<HTMLElement | null>): void {
  const formContainer = document.querySelector('#form-container');
  formContainer.nativeElement.innerHTML = '';

  controls.forEach((control) => {
    if (!control) return;
    formContainer.nativeElement.append(control);
  });
}

Verificação 3-D Secure

Crie uma página de status de pagamento onde o usuário será redirecionado depois de passar a verificação 3-D Secure. Por exemplo, https://example.com/return-page.html.
Adicione o componente psdk-status à marcação HTML da interface de pagamento para exibir um status de pagamento.

Exemplo:

Copy

Full screen

Small screen

@if (showStatus) {
  <psdk-status></psdk-status>
}

Crie uma página para exibir a interface de pagamento. Por exemplo, https://example.com/form-page.html.
Inicialize a interface de pagamento especificando o ID do método de pagamento e o URL da página de status.

Exemplo:

Copy

Full screen

Small screen

await headlessCheckout.form.init({
  paymentMethodId: 1380, // Bank card payment ID
  returnUrl: 'http://example.com/return-page.html',
});

Adicione a manipulação do evento redirect para redirecionar o usuário a uma página externa para a verificação 3-D Secure. Depois de uma verificação bem-sucedida, o usuário será redirecionado para a página de status de pagamento (https://example.com/return-page.html).

Exemplo:

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    case 'redirect':
      this.handleRedirectAction(nextAction);
  }
});

private handleRedirectAction(redirectAction: RedirectAction): void {
  const url = this.buildRedirectUrl(redirectAction);
  window.location.href = url; // redirect to 3-D Secure page
}

private buildRedirectUrl(redirectAction: RedirectAction): string {
  const url = new URL(redirectAction.data.redirect.redirectUrl);
  const params = Object.entries(redirectAction.data.redirect.data);
  params.forEach((entry) => {
    const [key, value] = entry;
    url.searchParams.append(key, value);
  });
  return url.toString();
}

Adicione a manipulação do evento 3DS para a verificação 3-D Secure.

Exemplo:

Copy

Full screen

Small screen

headlessCheckout.form.onNextAction((nextAction) => {
  switch (nextAction.type) {
    ...
    case '3DS': {
      show3DS = true;
    }
  }
});

Adicione o componente psdk-3ds à marcação HTML da interface de pagamento para processar a verificação 3-D Secure.

Exemplo:

Copy

Full screen

Small screen

@if (show3DS) {
  <psdk-3ds></psdk-3ds>
}

Obrigado pelo seu feedback!

Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.

Última atualização: 3 de Março de 2025

Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

Your browser is not supported. Please try a different browser

Headless checkout

Cartões bancários

Entrada de dados adicionais do usuário

Verificação 3-D Secure