Dados adicionais

Dentro do callback onSubmit existe um segundo parâmetro, de uso opcional, chamado additionalData. Ele é um objeto e pode conter dados adicionais úteis para sua integração, mas que não são necessários para a confirmação do pagamento no backend.

Veja na tabela a seguir os campos contidos dentro do objeto additionalData, estes que só serão retornados caso o usuário tenha optado pelo pagamento com cartão.

Campo	Tipo	Descrição
bin	string	BIN do cartão inserido pelo usuário.
lastFourDigits	string	Os últimos quatro dígitos para compras com cartão.
cardholderName	string	Nome da pessoa titular do cartão.

Veja abaixo um exemplo de uso:

          
const settings = {
 ...,
 callbacks: {
   onSubmit: ({ selectedPaymentMethod, formData }, additionalData) => {
     // callback chamado após o usuário clicar no botão de submissão dos dados
     // o parâmetro additionalData é opcional, você pode removê-lo se quiser
     console.log(additionalData);
     // exemplo de envio dos dados coletados pelo Brick para seu servidor
     return new Promise((resolve, reject) => {
       let url = undefined;
       if (selectedPaymentMethod === 'credit_card' || selectedPaymentMethod === 'debit_card') {
         url = 'process_payment_card';
       } else if (selectedPaymentMethod === 'bank_transfer') {
         url = 'process_payment_pix';
       } else if (selectedPaymentMethod === 'ticket') {
         url = 'process_payment_ticket';
       }


       if (url) {
         fetch(url, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
           },
           body: JSON.stringify(formData),
         })
           .then((response) => response.json())
           .then((response) => {
             // receber o resultado do pagamento
             resolve();
           })
           .catch((error) => {
             // lidar com a resposta de erro ao tentar criar o pagamento
             reject();
           })
       } else if (selectedPaymentMethod === 'wallet_purchase') {
         // wallet_purchase (Conta Mercado Pago) não precisa ser enviado pelo backend
         resolve();
       } else {
         reject();
       }
     });
   },
 },
}

          
<Payment
 initialization={initialization}
 customization={customization}
 onSubmit={async ({ selectedPaymentMethod, formData }, additionalData) => {
   console.log({ selectedPaymentMethod, formData }, additionalData);
 }}
/>

Caso não esteja utilizando o botão nativo de enviar formulário do Brick, você também pode acessar o objeto additionalData através do método getAdditionalData. Veja um exemplo de uso a seguir.

// variável onde o controller do Brick está salvo
paymentBrickController.getAdditionalData()
        .then((additionalData) => {
            console.log("Additional data:", additionalData);
        })
        .catch((error) => console.error(error));

Atenção

Chame o método getAdditionalData somente após o envio do formulário, ou seja, após você chamar o método getFormData. Com isso, é garantido que os dados retornados são válidos e confiáveis.

Callbacks adicionales

Consulta cómo configurar Callbacks adicionales, que brindan más información mientras se ejecuta Paymet Brick.