Adicionar o SDK ao frontend e inicializar o checkout

Incluir o SDK com HTML/js

Para incluir o SDK MercadoPago.js na sua página HTML a partir de um CDN (Content Delivery Network), adicione a tag <script> antes da tag </body> no seu arquivo HTML principal, conforme mostrado no exemplo abaixo:

html
<!DOCTYPE html>
<html>
<head>
  <title>Minha Integração com Checkout Pro</title>
</head>
<body>

  <!-- Conteúdo da sua página -->

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

  <script>
    // Seu código JavaScript irá aqui
  </script>

</body>
</html>

Inicializar o checkout a partir da preferência de pagamento

Após incluir o SDK no seu frontend, é necessário inicializá-lo e, em seguida, iniciar o checkout.

Para continuar, utilize sua credencial Public Key de testeChave pública vinculada a uma aplicação, utilizada no frontend para inicializar e testar a integração. Você pode consultá-la na seção Credenciais da aplicação, dentro do ambiente de teste. Ela não permite processar pagamentos reais..

Você também precisará utilizar o identificador da preferência de pagamento que obteve como resposta em Criar e configurar uma preferência de pagamento.

Para inicializar o SDK via CDN, insira o código a seguir dentro da tag <script>. Substitua YOUR_PUBLIC_KEY pela public_key de produção da sua aplicação e YOUR_PREFERENCE_ID pelo identificador da preferência de pagamento.

Javascript
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
  // Configure sua chave pública do Mercado Pago
  const publicKey = "YOUR_PUBLIC_KEY";
  // Configure o ID de preferência que você deve receber do seu backend
  const preferenceId = "YOUR_PREFERENCE_ID";

  // Inicializa o SDK do Mercado Pago
  const mp = new MercadoPago(publicKey);

  // Cria o botão de pagamento
  const bricksBuilder = mp.bricks();
  const renderWalletBrick = async (bricksBuilder) => {
    await bricksBuilder.create("wallet", "walletBrick_container", {
      initialization: {
        preferenceId: "<PREFERENCE_ID>",
      }
});
  };

  renderWalletBrick(bricksBuilder);
</script>

Criar um container HTML para o botão de pagamento

Client-Side

Por fim, adicione um container ao código HTML para definir a localização onde o botão de pagamento do Mercado Pago será exibido. Para criar esse container, insira o seguinte elemento no HTML da página onde o componente será renderizado:

html
<!-- Container para o botão de pagamento -->
<div id="walletBrick_container"></div>

Renderizar o botão de pagamento

O SDK do Mercado Pago é responsável por renderizar automaticamente o botão de pagamento dentro do elemento definido, permitindo que o comprador seja redirecionado para um formulário de compra no ambiente do Mercado Pago. Veja um exemplo na imagem abaixo: