Adicionar o SDK ao frontend e inicializar o checkout
Client-Side
Uma vez configurado o backend e criada a Order, e necessario configurar o frontend para completar a experiencia de pagamento do lado do cliente. Para isso, utilize o SDK MercadoPago.js, que permite renderizar o botao de pagamento do Mercado Pago e redirecionar o comprador ao init_point obtido na resposta da criacao da Order.
Nesta secao, voce aprendera como incluir e inicializar corretamente o SDK, e como renderizar o botao de pagamento do Mercado Pago.
Incluir o SDK com HTML/js
Para incluir o SDK MercadoPago.js na sua pagina 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 Integracao com Checkout Pro</title> </head> <body> <!-- Conteudo da sua pagina --> <script src="https://sdk.mercadopago.com/js/v2"></script> <script> // Seu codigo JavaScript ira aqui </script> </body> </html>
Inicializar o checkout a partir da Order
Apos incluir o SDK no seu frontend, e necessario inicializa-lo e, em seguida, iniciar o checkout utilizando o init_point obtido na resposta da criacao da Order.
Para continuar, utilize sua credencial Public Key de testeChave publica de testes e que e utilizada no frontend para acessar informacoes e criptografar dados, seja na fase de desenvolvimento ou na fase de testes. Voce pode acessa-la atraves de *Suas integracoes > Dados da integracao > Testes > Credenciais de teste*..
Voce tambem precisara utilizar o init_point que obteve como resposta ao criar a Order.
Para inicializar o SDK via CDN, insira o codigo a seguir dentro da tag <script>. Substitua YOUR_PUBLIC_KEY pela public_key de producao da sua aplicacao e YOUR_INIT_POINT pelo init_point obtido da resposta da Order.
Javascript
<script src="https://sdk.mercadopago.com/js/v2"></script> <script> // Configure sua chave publica do Mercado Pago const publicKey = "YOUR_PUBLIC_KEY"; // O init_point obtido da resposta da criacao da Order const initPoint = "YOUR_INIT_POINT"; // Inicializa o SDK do Mercado Pago const mp = new MercadoPago(publicKey); // Cria o botao de pagamento const bricksBuilder = mp.bricks(); const renderWalletBrick = async (bricksBuilder) => { await bricksBuilder.create("wallet", "walletBrick_container", { initialization: { redirectMode: "self" }, callbacks: { onSubmit: () => { // Redireciona o comprador para o init_point da Order window.location.href = initPoint; } } }); }; renderWalletBrick(bricksBuilder); </script>
Criar um container HTML para o botao de pagamento
Client-Side
Por fim, adicione um container ao codigo HTML para definir a localizacao onde o botao de pagamento do Mercado Pago sera exibido. Para criar esse container, insira o seguinte elemento no HTML da pagina onde o componente sera renderizado:
html
<!-- Container para o botao de pagamento --> <div id="walletBrick_container"></div>
Renderizar o botao de pagamento
O SDK do Mercado Pago e responsavel por renderizar automaticamente o botao de pagamento dentro do elemento definido. Ao clicar, o comprador sera redirecionado ao init_point da Order, onde podera completar o pagamento no ambiente seguro do Mercado Pago. Veja um exemplo na imagem abaixo:
Uma vez que voce tenha finalizado a configuracao no frontend, configure as Notificacoes para que seu servidor receba atualizacoes em tempo real sobre os eventos ocorridos na sua integracao.