Configure a integração com cartões

Para configurar a integração do Payment Brick para receber pagamentos com cartões de crédito e débito você precisa seguir os passos abaixo.

1. Criar container
2. Incluir e configurar a biblioteca MercadoPago.js
3. Instanciar Brick
4. Renderizar Brick
5. Gerenciar cartões de crédito e débito
6. Incluir cartões salvos

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).

  <div id="paymentBrick_container"></div>

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

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

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

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

const mp = new MercadoPago('YOUR_PUBLIC_KEY');

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.

const bricksBuilder = mp.bricks();

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.

const renderPaymentBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     amount: 100, // valor total a ser pago
   },
   customization: {
     paymentMethods: {
       creditCard: 'all',
       debitCard: 'all',
     },
   },
   callbacks: {
     onReady: () => {
       /*
         Callback chamado quando o Brick estiver pronto.
         Aqui você pode ocultar loadings do seu site, por exemplo.
       */
     },
     onSubmit: ({ selectedPaymentMethod, formData }) => {
       // callback chamado ao clicar no botão de submissão dos dados
         return new Promise((resolve, reject) => {
           fetch("/processar-pago", {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
             },
             body: JSON.stringify(formData)
           })
             .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
       console.error(error);
     },
   },
 };
 window.paymentBrickController = await bricksBuilder.create(
   'payment',
   'paymentBrick_container',
   settings
 );
};
renderPaymentBrick(bricksBuilder);

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

O trecho de código responsável por incluir o cartão de crédito e débito como meio de pagamento é o seguinte:

settings = {
  ...,
  customization: {
    ...,
    paymentMethods: {
      ...,
      creditCard: 'all',
      debitCard: 'all'
    }
  }
}

As propriedades creditCard e debitCard aceitam 2 tipos de variável, string e string[]. No exemplo acima, serão aceitos pagamentos com cartões de crédito e débito de qualquer bandeira aceita pelo Mercado Pago.

Caso queira selecionar as bandeiras, ao invés da string all, você pode passar um array apenas com os IDs desejados. Como no exemplo abaixo, onde apenas serão aceitos os cartões de crédito MASTER e VISA e os cartões de débito ELO.

settings = {
  ...,
  customization: {
    ...,
    paymentMethods: {
      ...,
      creditCard: [ 'master', 'visa' ],
      debitCard: [ 'debelo' ]
    }
  }
}

Para uma lista completa dos IDs que podem ser passados dentro do array, consulte a API de Obter meios de pagamento em nossa API Reference.

No Payment Brick é possível disponibilizar cartões salvos para os seus clientes. Para saber como incluir os cartões salvos, consulte a seção Incluir cartões salvos.