para seu Site

Integrar um ponto de cobrança direto ou doações via PIX no seu site não requer scripts complicados de backend, SDKs pesados nem dependências de JavaScript. Neste tutorial passo a passo você aprenderá a implementar um cartão visualmente impactante, com estilo Glassmorphism Dark Mode e as cores da bandeira do Brasil, pronto para copiar e inserir no WordPress (Gutenberg ou Elementor) ou em qualquer HTML puro.

🌟 Características desta solução

Sem JavaScript nem bibliotecas externas: Carregamento ultra rápido, 0 requisições HTTP adicionais e pesa menos de 1 KB.
Efeito de Gradiente Radial Neon (Tema Brasil): Gradientes radiais posicionados estrategicamente com núcleos fora da tela que geram uma iluminação suave e moderna (#009c3b, #ffdf00, #002776).
API Dinâmica para Código QR: Utiliza a API pública do qrserver.com para renderizar o código QR em tempo real com fundo branco nítido, garantindo uma leitura imediata a partir de qualquer app bancário.
Campo de Seleção da Chave PIX: O input em modo readonly inclui os eventos nativos onclick="this.select();" para que o usuário selecione a chave completa com um único toque.

💻 Código HTML & CSS Inline Pronto para Usar

Você pode colar diretamente este bloco em um bloco de HTML Personalizado no Gutenberg ou em um widget HTML do Elementor / Divi:

<!-- Background Wrapper com as tonalidades exatas da bandeira do Brasil -->
<div style="width: 100%; padding: 60px 16px; box-sizing: border-box; background: radial-gradient(circle at -15% 45%, #009c3b 0%, rgba(0, 156, 59, 0.85) 30%, transparent 70%), radial-gradient(circle at 115% -15%, #ffdf00 0%, rgba(255, 223, 0, 0.85) 30%, transparent 65%), radial-gradient(circle at 115% 115%, #002776 0%, rgba(0, 39, 118, 0.9) 35%, transparent 70%), #041308; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;">

  <!-- Contêiner PIX Glassmorphism -->
  <div style="max-width: 380px; width: 100%; padding: 20px 24px 18px 24px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; background: rgba(8, 18, 12, 0.62); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-sizing: border-box; text-align: center; color: #ffffff; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.65);">
    
    <!-- Cabeçalho -->
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px;">
      <strong style="font-size: 1.15rem; font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        Pagamento via Pix 🇧🇷
      </strong>
      <span style="font-size: 0.78rem; background-color: rgba(0, 156, 59, 0.25); color: #00ff66; padding: 4px 10px; border-radius: 20px; font-weight: 700; border: 1px solid rgba(0, 255, 102, 0.4); flex-shrink: 0;">Instantâneo</span>
    </div>

    <!-- Instruções -->
    <p style="font-size: 0.92rem; color: #e2e8f0; margin: 0 0 16px 0; line-height: 1.45; text-align: left; font-weight: 400;">
      Informe qualquer valor diretamente no aplicativo do seu banco ao escanear o código ou copiar a chave abaixo.
    </p>

    <!-- Código QR -->
    <div style="display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: #ffffff;">
      <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=12345678901&bgcolor=ffffff" 
           alt="Código QR PIX" 
           style="width: 180px; height: 180px; display: block; margin: 0; border: none; border-radius: 6px;" />
      <span style="font-size: 0.78rem; color: #1e293b; font-weight: 600;">Abra o app do seu banco e escaneie o código</span>
    </div>

    <!-- Campo Chave Pix -->
    <div style="text-align: left;">
      <label for="pix-key-field" style="display: block; font-size: 0.82rem; font-weight: 600; color: #f1f5f9; margin-bottom: 6px;">
        Chave Pix (CPF) &mdash; Toque para selecionar
      </label>
      
      <input type="text" id="pix-key-field" value="123.456.789-01" readonly 
             onclick="this.select();" 
             onfocus="this.select();"
             style="width: 100%; box-sizing: border-box; padding: 11px; border: 2px dashed #00ff66; border-radius: 8px; font-family: monospace; font-size: 0.95rem; background: rgba(4, 20, 10, 0.8); color: #ffffff; text-align: center; font-weight: 700; cursor: pointer; outline: none;" />
    </div>

  </div>

</div>

🛠️ Como personalizar o código para o seu negócio

1. Alterar sua Chave PIX (CPF, CNPJ, E-mail ou Telefone)

No elemento <input>, substitua o atributo value="123.456.789-01" pela sua própria chave PIX.

2. Atualizar o Código QR Automático

Na tag <img>, modifique o parâmetro data= dentro da URL da API: [https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=SUA_CHAVE_OU_STRING_PIX&bgcolor=ffffff](https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=SUA_CHAVE_OU_STRING_PIX&bgcolor=ffffff)

3. Inserir no WordPress

Editor de Blocos (Gutenberg): Adicione um bloco chamado HTML Personalizado (Custom HTML) e cole o código completo.
Elementor / Divi / Beaver Builder: Adicione um módulo/widget de HTML ou Code e cole a estrutura.

🚀 Vantagens para o SEO e a Experiência do Usuário (UX)

Compatibilidade 100% Mobile: Adaptável a qualquer tela graças ao max-width: 380px e ao flexbox nativo.
Sem conflitos de scripts: Ideal para sites com cache estrita (WP Rocket, Cloudflare) ou configurações onde o JavaScript de terceiros está bloqueado ou desabilitado.
Design UI Moderno: O efeito Glassmorphism (backdrop-filter: blur) gera uma aparência profissional e transmite confiança imediata ao usuário.