Configurar a integração - Checkout Bricks - Mercado Pago Developers

Configurar a integração

Para configurar a integração dos bricks você precisa seguir os passos abaixo:

  1. Criar container
  2. Incluir e configurar a biblioteca MercadoPago.js
  3. Instanciar brick
  4. Renderizar brick
Os passos são realizados no back-end ou no front-end. As pills Client-Side e Server-Side localizadas imediatamentamente ao lado do título te ajudam a identificar qual passo é realizado em qual instância.

E, para ajudar, preparamos um exemplo de codigo completo da configuração dos bricks, que você pode usar como modelo.

Criar container

Client-Side

Você vai precisar criar um container para definir o local que o brick será inserido na tela. A criação do container é feita inserindo um elemento (por exemplo, uma div) no código HTML da página no qual o brick será renderizado (veja código abaixo).

Atenção
O valor exibido na propriedade id a seguir é apenas um exemplo, e pode ser alterado, mas deve sempre corresponder ao id indicado na renderização.

html

  <div id="cardPaymentBrick_container"></div>

Incluir e configurar a biblioteca MercadoPago.js

Client-Side

Utilize a nossa biblioteca oficial para acessar as funcionalidades do Mercado Pago com segurança desde seu frontend.

Atenção
O codigo JS pode ser incluido em uma tag < script > ou um arquivo JS separado.

Você precisará instalar o SDK adicionando o seguinte em seu código HTML:

html

<script src="https://sdk.mercadopago.com/js/v2"></script>

Em seguida, inicialize o SDK definindo sua chave pública usando código JavaScript:

javascript

const mp = new MercadoPago('YOUR_PUBLIC_KEY');

Instanciar brick

Client-Side

Com o container criado e o SDK JS instalado, o próximo passo é instanciar o brick builder, que permitirá gerar o brick. Para instanciar o brick, insira o código abaixo após a etapa anterior.

javascript

const bricksBuilder = mp.bricks();
Atenção
Durante a instanciação do brick, é possível que apareçam diferentes erros. Para detalhamento de cada um deles, veja a seção Possíveis erros .

Renderizar brick

Client-Side

Uma vez instanciado, o brick pode ser renderizado e ter todas as suas configurações compiladas de modo que a estrutura final do brick seja gerada.

Para renderizar o brick, insira o código abaixo após o passo anterior e preencha os atributos conforme os comentários destacados neste mesmo código.

javascript

const renderCardPaymentBrick = async (bricksBuilder) => {

  const settings = {
    initialization: {
      amount: 100, //valor do processamento a ser realizado
    },
    callbacks: {
      onReady: () => {
        // callback chamado quando o Brick estiver pronto
      },
      onSubmit: (cardFormData) => {
        // callback chamado o usuário clicar no botão de submissão dos dados

        // ejemplo de envío de los datos recolectados por el Brick a su servidor
        return new Promise((resolve, reject) => {
            fetch("/process_payment", { 
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(cardFormData)
            })
            .then((response) => {
                // receber o resultado do pagamento
                resolve();
            })
            .catch((error) => {
                // lidar com a resposta de erro ao tentar criar o pagamento
                reject();
            })
          });
      },
      onError: (error) => { 
        // callback chamado para todos os casos de erro do Brick
      },
    },
  };
  const cardPaymentBrickController = await bricksBuilder.create('cardPayment', 'cardPaymentBrick_container', settings);
};
renderCardPaymentBrick(bricksBuilder);

O resultado de renderizar o brick deve ser como na imagem abaixo:

cardform

Atenção
Para um controle eficaz do Brick, a função enviada no onSubmit deve sempre retornar uma Promise. Chame o resolve() apenas se o processamento em seu backend ocorreu com sucesso. Chame o reject() caso algum erro ocorra. Isso fará com que o brick permita o preenchimento dos campos novamente e viabilize uma nova tentativa de pagamento. Ao chamar o método resolve() dentro da Promise do onSubmit, o brick não permite novos pagamentos. Caso queira realizar um novo pagamento, deve-se criar uma nova instância do Brick.