Adicionar o SDK ao frontend e inicializar o checkout
Client-Side
Uma vez configurado o backend, é necessário configurar o frontend para completar a experiência de pagamento do lado do cliente. Para isso, utilize o SDK MercadoPago.js, que permite capturar pagamentos diretamente no frontend de maneira segura.
Nesta seção, você aprenderá como incluir e inicializar corretamente o SDK, e como renderizar o botão de pagamento do Mercado Pago.
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 produção, disponível nos detalhes da sua aplicação em Suas integrações. Para acessá-lo, vá até a seção Produção e clique em Credenciais de produção no menu à esquerda da tela.
Agora, será necessário utilizar o identificador da preferência de pagamento obtido na etapa 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
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Botão de Pagamento - Mercado Pago</title> <script src="https://sdk.mercadopago.com/js/v2"></script> </head> <body> <h1>Botão de Pagamento</h1> <!-- Container onde o botão será renderizado --> <div id="wallet_container"></div> <script> // Inicialize o Mercado Pago com sua chave pública const mp = new MercadoPago('YOUR_PUBLIC_KEY'); // Crie o botão de pagamento no container especificado mp.bricks().create("wallet", "wallet_container", { initialization: { preferenceId: "YOUR_PREFERENCE_ID", // Substitua com seu ID de preferência } }); </script> </body> </html>
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="wallet_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:
Uma vez que você tenha finalizado a configuração no frontend, configure as Notificações para que seu servidor receba atualizações em tempo real sobre os eventos ocorridos na sua integração.