Implementando Checkout com Mercado Pago em React

Aprenda a implementar um sistema de checkout utilizando a API do Mercado Pago em um projeto frontend criado com React.

Introdução – Checkout com Mercado Pago em React

Fala, impressionador!

Se você quer criar um sistema de pagamentos no seu site ou aplicação, integrar a API do Mercado Pago é uma das melhores opções do mercado.

Neste guia, você vai aprender como fazer  a integração completa entre seu frontend e backend com a API do Mercado Pago, criando um checkout funcional do zero.

Curtiu? Então bora começar!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Criar uma Aplicação no Mercado Pago Developers

O primeiro passo é configurar sua aplicação no ambiente de desenvolvimento do Mercado Pago. Para isso:

1. Acesse Mercado Pago Developers;
2. Faça login com sua conta do Mercado Livre;
3. Clique no botão Criar aplicação no canto superior direito da tela;

4. Faça as autenticações necessárias;
5. Preencha o campo Nome da aplicação com "CheckoutMercadoPago<seunome>", por exemplo;

6. Selecione o tipo de pagamento que quer integrar e como você criou a aplicação, neste caso, "Pagamento online" e "desenvolvimento próprio";

7. Selecione como você quer receber pagamentos na loja. O mais comum, e o que iremos utilizar é o "Checkout Pro";

8. Confirme as informações e habilite os checkboxes de autorização e verificação de robôs e clique em Confirmar.

Após criar a aplicação, você precisa das credenciais para fazer testes:

1. Acesse Credenciais de teste no menu da sua aplicação;
2. Clique no botão Ativar credenciais, conceda as autorizações necessárias e o sistema vai criar uma Public Key e um Access Token;

Importante: Guarde essas credenciais em segurança. Você vai precisar delas na configuração do projeto.

Conhecendo o projeto React + NodeJS

Agora que temos as credenciais de teste do Mercado Pago, vamos ter acesso ao projeto que usaremos para realizar a integração.

Você pode baixar diretamente todas as pastas do drive no material disponível nesse artigo e abrir elas no Visual Studio Code, ou no seu editor de código favorito.

Dentro da pasta "Do Zero" temos outras duas pastas: a "backend" com os arquivos que criam e iniciam um servidor web simples usando o Express e a "frontend" que possui toda a estrutura visual construída com React.

Caso queira aprender como criar API Rest com NodeJS e Express e entender como conectar o backend com o frontend, você pode consultar os vídeos abaixo:

• Como Criar uma API REST com Node.js e Express em 16 Minutos!
• Como o Front e o Back se Comunicam? (Explicação com Projeto Real)

Para usar esses arquivos é necessário abrir cada uma das pastas em um terminal e:

1. Instalar as dependências em cada pasta com o comando npm install;
2. Usar o comando npm start para rodar o servidor do backend;
3. Usar o comando npm run dev para iniciar a aplicação frontend.

Com tudo pronto, no navegador deve aparecer uma tela com um título "Checkout do MercadoPago" um produto com o valor selecionado e o botão "Pagar com MercadoPago".

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Configurando o Backend com Node.js

Agora vamos configurar a API que vai se comunicar com o Mercado Pago. No seu projeto backend, instale os pacotes necessários:

npm install mercadopago dotenv cors

O que cada pacote faz?

• mercadopago: SDK oficial do Mercado Pago. Pode ser acessado através da documentação do npm;
• dotenv: Para gerenciar variáveis de ambiente, como o token de acesso para a aplicação que criamos;
• cors: Middleware para permitir requisições entre domínios.

Na sequência, crie um arquivo .env na raiz do seu projeto backend:

MERCADO_PAGO_ACCESS_TOKEN=seu_access_token_aqui

Substitua seu_access_token_aqui pelo Access Token que você copiou do painel do Mercado Pago.

Agora, vamos configurar o arquivo "server.js" dentro da pasta "backend" com tudo que precisaremos para configurar o frontend:

import dotenv from 'dotenv';
import express from 'express';
import cors from 'cors';
import { MercadoPagoConfig, Preference } from 'mercadopago';

dotenv.config();

const app = express();
const PORT = 3000;

// Middlewares
app.use(cors());
app.use(express.json());

// Configuração do Mercado Pago
const { MERCADO_PAGO_ACCESS_TOKEN } = process.env;
const client = new MercadoPagoConfig({
  accessToken: MERCADO_PAGO_ACCESS_TOKEN
});

// Servidor rodando
app.listen(PORT, () => {
  console.log(`Servidor rodando na porta ${PORT}`);
});

No código acima as dependências são importadas e o dotenv é inicializado para carregar as variáveis de ambiente. A aplicação Express é configurada para rodar na porta 3000, utilizando os middlewares cors e express.json(), que permitem requisições externas e o tratamento de dados no formato JSON.

A integração com o Mercado Pago é feita recuperando o MERCADO_PAGO_ACCESS_TOKEN das variáveis de ambiente e criando um cliente com MercadoPagoConfig. Esse cliente será utilizado para realizar operações relacionadas a pagamentos. Por fim, o servidor é iniciado com app.listen, exibindo uma mensagem no console indicando que está em execução.

Agora, vamos configurar o endpoint que vai gerar a preferência de pagamento:

app.get('/api/create-preference', async (req, res) => {
  try {
    const preference = new Preference(client);
    const body = {
      items: [
        {
          title: 'Fullstack Impressionador',
          quantity: 1,
          currency_id: 'BRL',
          unit_price: 1497
        }
      ],
      back_urls: {
        success: 'https://localhost:5173/success',
        failure: 'https://localhost:5173/canceled',
        pending: 'https://localhost:5173/pending'
      },
      auto_return: 'approved'
    };
    const response = await preference.create({ body });
    res.json({
      message: 'Preferência criada com sucesso',
      link: response.init_point
    });
  } catch (error) {
    console.error('Erro ao criar preferência:', error);
    res.status(500).json({
      message: 'Erro na criação da preferência',
      error
    });
  }
});

Para permitir a criação de pagamentos, é definido uma rota GET no Express com o endpoint /api/create-preference. Essa rota cria uma preferência de pagamento no Mercado Pago, descrevendo os detalhes da cobrança, como o produto, valor, moeda e as URLs de retorno para os diferentes estados do pagamento(sucesso, falha ou pendente).

Após a criação da preferência, a API retorna ao frontend o link de checkout (init_point).  Esse link é enviado ao frontend em formato JSON junto com uma mensagem de sucesso. Em caso de erro, a aplicação responde com status 500 e registra o problema no console.

Configurando o Frontend

Com o backend configurado, vamos criar a funcionalidade para o botão "pagar com MercadoPago" para que ele faça o redirecionamento para a tela de checkout.

Abra o terminal na pasta "frontend" e instale o axios com o comando npm install axions. Caso queira aprender mais sobre as vantagens do Axios, você pode consultar o vídeo AXIOS vs FETCH: Qual a melhor forma de consumir APIs.

Em seguida, abra o arquivo "Button.jsx" que está dentro da pasta "src/components" e faça atualização com o seguinte código:

import axios from "axios";

const Button = () => {
  const handleSubmit = async () => {
    try {
      const { data } = await axios.post(
        "http://localhost:3000/api/create-session"
      );
      window.location.href = data.init_point;
    } catch (error) {
      console.error("Deu erro na requisição", error);
    }
  };
  return <button onClick={handleSubmit}>Pagar com MercadoPago</button>;
};
export default Button;

Nesse componente, o Axios é utilizado para fazer uma requisição ao backend quando o usuário clica no botão. A função handleSubmit envia uma requisição para a API, que cria a sessão de pagamento no Mercado Pago.

Ao receber a resposta, o código utiliza a URL retornada para redirecionar o usuário diretamente para a página de checkout do Mercado Pago. Caso ocorra algum erro durante o processo, a aplicação apenas registra a falha no console, evitando que a interface quebre.

Conclusão

Parabéns! Você acabou de aprender como criar uma integração completa com a API do Mercado Pago usando Node.js. Essa habilidade abre um mundo de possibilidades para seus projetos.

Com o conhecimento que você adquiriu neste tutorial, você já consegue:

• Criar um sistema de pagamentos profissional do zero;
• Integrar checkout em qualquer aplicação web;
• Oferecer múltiplas formas de pagamento (cartão, Pix, boleto);
• Processar pagamentos de forma segura e confiável;
• Escalar sua solução de pagamentos conforme seu negócio cresce.

Mas isso é só o começo. A integração que você construiu aqui é a base para funcionalidades muito mais avançadas. A partir daqui, você pode:

• Implementar um sistema completo de e-commerce;
• Criar assinaturas e pagamentos recorrentes;
• Desenvolver um marketplace com múltiplos vendedores;
• Adicionar split de pagamentos;
• Implementar webhooks para atualização automática de status.

Lembre-se, a prática leva à perfeição. Quanto mais você trabalhar com integrações de API, mais natural e rápido esse processo vai se tornar!

Quer se aprofundar ainda mais? Temos um mini curso gratuito de HTML e CSS e um curso completo de Fullstack. Além disso, se preferir esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Posts mais recentes de Full Stack

• 
  LESS CSS: Guia Completo do Pré-processador (2026)8 de maio de 2026
  LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.
• 
  Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional29 de dezembro de 2025
  Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.
• 
  Try Catch no JavaScript: Programação Defensiva na Prática27 de novembro de 2025
  Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.