Primeiro, certifique-se de ter criado a preferência no seu backend.

Em seguida, instale o SDK de frontend (Javascript) do Mercado Pago, usado para acessar as funcionalidades do Mercado Pago com segurança e adicionar o botão de pagamento no seu projeto.

A instalação é feita em duas etapas:

1. Adicionar o SDK do Mercado Pago ao projeto com suas credenciais configuradas
2. Iniciar o checkout a partir da preferência gerada anteriormente

Para incluir o SDK Javascript do Mercado Pago, adicione o seguinte código ao HTML do seu projeto ou instale a biblioteca para ReactJS.

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

        

          
npm install @mercadopago/sdk-react

        

Em seguida, inicie a integração configurando sua chave pública usando o seguinte código JavaScript.

          
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();

        

          
import { initMercadoPago, Wallet } from '@mercadopago/sdk-react'
initMercadoPago('YOUR_PUBLIC_KEY');

        

Para integrações JavaScript/HTML, via CDN, você vai precisar ainda criar um container identificador para definir o local que o botão será inserido na tela. A criação do container é feita inserindo um elemento no código HTML da página no qual o componente será renderizado.

 <div id="wallet_container"></div>

Ao finalizar a etapa anterior, inicialize seu checkout utilizando o ID da preferência previamente criada com o identificador do elemento onde o botão deverá ser exibido, caso esteja utilizando a integração Javascript/HTML, ou instanciando o componente, no caso da biblioteca React, conforme os exemplos abaixo.

          
mp.bricks().create("wallet", "wallet_container", {
   initialization: {
       preferenceId: "<PREFERENCE_ID>",
   },
   customization: {
      theme: 'default',
   }
});

        

          
import { Wallet } from '@mercadopago/sdk-react';

const App = () => {
  return <Wallet initialization={{ preferenceId: 'YOUR_PREFERENCE_ID' }} />;
};
export default App;

        

Em seguida, observe o botão de pagamento renderizado em sua página. Caso queira fazer alterações nos textos ou uma alteração visual, acesse as seções de Alterar textos do botão e Alterar visual do botão.

No exemplo acima, um botão de pagamento será renderizado e ficará responsável por abrir o Checkout Pro. Caso queira que a experiência com Checkout Pro seja feita em uma aba externa, veja a seção Esquema de abertura

No final do processo de pagamento, é possível redirecionar o comprador para outro ambiente do site através do atributo back_urls que é configurado ao criar a preferência. As back_urls serão responsáveis por guiar o fluxo de retorno ao seu site quando o pagamento for concluído. É possível definir três URLs de retorno diferentes que correspondem a cenários de pagamento pendente, sucesso ou erro.

Para obter mais informações, consulte a seção URL de retorno.

Os pagamentos criados possuem os seguintes status: Pendente, Rejeitado e Aprovado. Para acompanhar as atualizações é necessário configurar seu sistema para receber as notificações de pagamentos e outras atualizações de status. Veja Notificações para mais detalhes.

Confira o exemplo completo de integração no GitHub para PHP ou NodeJS para fazer o download de um projeto básico de implementação rápida do Checkout Pro.