Cartões - Configure a integração - Mercado Pago Developers

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
Os passos são realizados no back-end ou no front-end. As pills Client-Side e Server-Side localizadas imediatamente ao lado do título te ajudam a identificar qual passo é realizado em qual instância.

E, para ajudar, preparamos um exemplo de código completo da configuração do Payment Brick com cartões 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="paymentBrick_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 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:

payment-Brick

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.

Gerenciar cartões de crédito e débito

Client-Side

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

Javascript

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.

Javascript

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.

Importante
A resposta da API contém IDs de diversos payment_type_id. Os IDs aceitos pela propriedade creditCard são apenas os que contém payment_type_id = 'credit_card' e os IDs aceitos pela propriedade debitCard são apenas os que contém payment_type_id = 'debit_card'.

Incluir cartões salvos

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.