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.
js
<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 checkout = mp.checkout({ preference: { id: preferenceId }, render: { container: '#wallet_container', // Use o ID do seu div existente label: 'Pagar com Mercado Pago' } }); </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="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.