🛒 E-commerce Integrado com Bling e Checkout do Mercado Pago

Sistema completo de e-commerce desenvolvido em React com integração ao Bling ERP e processamento de pagamentos via Mercado Pago Checkout Pro.

🚀 Funcionalidades

Frontend (React)

• ✅ Catálogo de produtos integrado com Bling ERP
• ✅ Carrinho de compras com persistência local
• ✅ Sistema de autenticação e registro de usuários
• ✅ Páginas de checkout completas
• ✅ Design responsivo com Tailwind CSS
• ✅ Gerenciamento de banners promocionais
• ✅ Páginas institucionais (Política de Privacidade, Termos de Uso, etc.)

Backend (Node.js/Express)

• ✅ Integração completa com API do Bling ERP
• ✅ Processamento de pagamentos via Mercado Pago Checkout Pro
• ✅ Webhook para notificações de pagamento
• ✅ Envio de emails de confirmação (vendedor e cliente)
• ✅ Notificações via WhatsApp (opcional via Twilio)
• ✅ Gerenciamento de pedidos e banners

Integrações

• 🔗 Bling ERP: Sincronização de produtos, categorias e estoque
• 💳 Mercado Pago: Checkout Pro com suporte a PIX, Boleto e Cartão
• 📧 Email: Notificações automáticas via Nodemailer
• 📱 WhatsApp: Notificações via Twilio (opcional)

📋 Pré-requisitos

• Node.js 16+ e npm
• Conta no Bling ERP
• Conta no Mercado Pago (credenciais de teste ou produção)
• Servidor SMTP para envio de emails (Gmail, SendGrid, etc.)
• Conta Twilio (opcional, para WhatsApp)

🛠️ Instalação

1. Clone o repositório

git clone https://github.com/seu-usuario/ecomerce-integrado-bling-mercadopago.git
cd ecomerce-integrado-bling-mercadopago

2. Instale as dependências do frontend

npm install

3. Instale as dependências do backend

cd server
npm install
cd ..

4. Configure as variáveis de ambiente

Frontend (.env na raiz do projeto)

REACT_APP_API_URL=http://localhost:4000

Backend (server/.env.server)

# Mercado Pago
MERCADOPAGO_ACCESS_TOKEN=seu_access_token_aqui
MERCADOPAGO_PUBLIC_KEY=sua_public_key_aqui

# URLs
FRONTEND_URL=http://localhost:3000
BACKEND_URL=http://localhost:4000
PORT=4000

# Email (Nodemailer)
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=seu_email@gmail.com
SMTP_PASS=sua_senha_de_app

# Vendedor
SELLER_EMAIL=vendedor@exemplo.com
SELLER_PHONE=+5511999999999

# Twilio (opcional - para WhatsApp)
TWILIO_ACCOUNT_SID=
TWILIO_AUTH_TOKEN=
TWILIO_WHATSAPP_NUMBER=

5. Configure o Bling ERP

1. Acesse http://localhost:4000/auth/bling/login no navegador
2. Autorize o aplicativo
3. O token será salvo automaticamente

🚀 Executando o Projeto

Desenvolvimento

Terminal 1 - Backend

cd server
npm start

Terminal 2 - Frontend

npm start

O frontend estará disponível em http://localhost:3000 e o backend em http://localhost:4000.

📁 Estrutura do Projeto

├── public/                 # Arquivos estáticos
├── src/                    # Código fonte do frontend
│   ├── components/        # Componentes React
│   ├── context/           # Context API (Auth, Cart)
│   ├── pages/             # Páginas da aplicação
│   ├── services/          # Serviços de API
│   └── utils/             # Utilitários
├── server/                # Backend Node.js
│   ├── src/
│   │   ├── routes/        # Rotas da API
│   │   └── templates/     # Templates de email
│   └── data/              # Dados persistidos (JSON)
└── README.md

🔧 Configuração Detalhada

Mercado Pago

1. Acesse Mercado Pago Developers
2. Crie uma aplicação
3. Obtenha suas credenciais (Access Token e Public Key)
4. Configure as URLs de retorno no painel do Mercado Pago:
   • Success: http://seu-dominio.com/#/checkout/success
   • Failure: http://seu-dominio.com/#/checkout/failure
   • Pending: http://seu-dominio.com/#/checkout/pending
5. Configure a URL do webhook: http://seu-dominio.com/api/payments/webhook

Bling ERP

1. Acesse o painel do Bling
2. Vá em Configurações > API
3. Crie uma aplicação
4. Configure a URL de redirecionamento: http://localhost:4000/auth/bling/callback
5. Autorize o aplicativo acessando /auth/bling/login

Email (Gmail)

1. Ative a verificação em duas etapas na sua conta Google
2. Gere uma senha de aplicativo
3. Use essa senha no campo SMTP_PASS

🧪 Testando Pagamentos

Ambiente de Teste (Sandbox)

O Mercado Pago fornece cartões de teste:

• Aprovado: 5031 4332 1540 6351 (CVV: 123)
• Recusado: 5031 4332 1540 6351 (CVV: 123)
• Pendente: Use PIX ou Boleto

Testando o Fluxo Completo

1. Adicione produtos ao carrinho
2. Vá para o checkout
3. Preencha os dados de entrega
4. Será redirecionado para o Mercado Pago
5. Complete o pagamento
6. Você receberá um email de confirmação
7. O vendedor receberá notificações por email e WhatsApp

📝 Scripts Disponíveis

Frontend

• npm start - Inicia o servidor de desenvolvimento
• npm build - Cria build de produção
• npm test - Executa testes

Backend

• npm start - Inicia o servidor
• npm run dev - Inicia com nodemon (hot reload)

🔒 Segurança

• ⚠️ NUNCA commite arquivos .env ou .env.server
• Use variáveis de ambiente em produção
• Configure HTTPS em produção
• Valide todos os dados de entrada
• Use tokens seguros para autenticação

📚 Documentação Adicional

• Documentação do Mercado Pago
• Documentação do Bling API
• Documentação do React
• Documentação do Express

🤝 Contribuindo

1. Faça um fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

👨‍💻 Autor

Desenvolvido com ❤️ para integração completa de e-commerce.

🐛 Problemas Conhecidos

• Os erros 401 do Bling são resolvidos reautorizando em /auth/bling/login
• O auto_return do Mercado Pago foi removido temporariamente para evitar erros

📞 Suporte

Para problemas ou dúvidas, abra uma issue no GitHub.

---

⭐ Se este projeto foi útil, considere dar uma estrela!