Adicionar checkout

Client-Side

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

Em seguida, instale o SDK de frontend do Mercado Pago no seu projeto para adicionar o botão de pagamento.

A instalação é feita em duas etapas:

Adicionar o SDK do Mercado Pago ao projeto

Client-Side

Para incluir o SDK do Mercado Pago.js, 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>

Atenção

O valor exibido na propriedade ID a seguir é apenas um exemplo e pode ser alterado, mas deve sempre corresponder ao ID indicado na etapa de renderização.

Iniciar o checkout a partir da preferência

Client-Side

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: {
 texts: {
  valueProp: 'smart_option',
 },
 },
});

          
<Wallet initialization={{ preferenceId: '<PREFERENCE_ID>' }} customization={{ texts:{ valueProp: 'smart_option'}}} />

Em seguida, observe o botão de pagamento renderizado em sua página.

wallet-render

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

Configurar as back_urls

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.

Importante

Não utilize domínios locais no valor back_urls, como 'localhost/' ou '127.0.0.1' com ou sem porta especificada. Recomendamos o uso de um servidor com um domínio nomeado (DNS) ou IPs de desenvolvimento para poder retornar ao site após o pagamento. Caso contrário, aparecerá a mensagem "Alguma coisa deu errado" ao finalizar o processo de compra.

Receber estados de pagamento

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.

Exemplo de implementação

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.

Create preferences

View the initial steps to set up the Checkout Pro integration.

Mobile Integration

Learn how to integrate Mercado Pago Checkout Pro for mobile projects.