para tu Web

Integrar un punto de cobro directo o donaciones vía PIX en tu sitio web no requiere complicados scripts de backend, SDKs pesados ni dependencias de JavaScript. En este tutorial paso a paso aprenderás a implementar una tarjeta visualmente impactante, con estilo Glassmorphism Dark Mode y los colores de la bandera de Brasil, lista para copiar e insertar en WordPress (Gutenberg o Elementor) o cualquier HTML plano.

🌟 Características de esta solución

Sin JavaScript ni librerías externas: Carga ultra rápida, 0 HTTP Requests adicionales y pesa menos de 1 KB.
Efecto de Gradiente Radial Neón (Brasil Theme): Gradientes radiales colocados estratégicamente con núcleos fuera de pantalla que generan una iluminación suave y moderna (#009c3b, #ffdf00, #002776).
API Dinámica para Código QR: Utiliza la API pública de qrserver.com para renderizar el código QR en tiempo real con fondo blanco nítido, asegurando un escaneo inmediato desde cualquier app bancaria.
Campo de Selección de Clave PIX: El input en modo readonly incluye los eventos nativos onclick="this.select();" para que el usuario seleccione la clave completa con un solo toque.

💻 Código HTML & CSS Inline Listo para Usar

Puedes pegar directamente este bloque en un bloque de HTML Personalizado en Gutenberg o en un widget HTML de Elementor / Divi:

<!-- Background Wrapper con las tonalidades exactas de la bandera de 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;">

  <!-- Contenedor 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);">
    
    <!-- Cabecera -->
    <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>

    <!-- Instrucciones -->
    <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>

🛠️ Cómo personalizar el código para tu negocio

1. Cambiar tu Clave PIX (CPF, CNPJ, Email o Teléfono)

En el elemento <input>, reemplaza el atributo value="123.456.789-01" por tu propia clave PIX.

2. Actualizar el Código QR Automático

En el tag <img>, modifica el parámetro data= dentro de la URL de la API: [https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=TU_CLAVE_O_STRING_PIX&bgcolor=ffffff](https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=TU_CLAVE_O_STRING_PIX&bgcolor=ffffff)

3. Insertar en WordPress

Editor de Bloques (Gutenberg): Añade un bloque llamado HTML Personalizado (Custom HTML) y pega el código completo.
Elementor / Divi / Beaver Builder: Añade un módulo/widget de HTML o Code y pega la estructura.

🚀 Ventajas para el SEO y la Experiencia de Usuario (UX)

Compatibilidad 100% Mobile: Adaptable a cualquier pantalla gracias a max-width: 380px y flexbox nativo.
Sin conflictos de scripts: Ideal para sitios con caché estricta (WP Rocket, Cloudflare) o configuraciones donde el JavaScript de terceros está bloqueado o deshabilitado.
Diseño UI Moderno: El efecto Glassmorphism (backdrop-filter: blur) genera una apariencia profesional y transmite confianza inmediata al usuario.