Cómo Mostrar un Widget de Pago Móvil con Código QR en Blogger (Yape/Plin)

Ventajas de Usar Pagos por QR Móvil

• Instantáneo: El pago se confirma en segundos directamente en tu teléfono móvil.
• Sin comisiones intermedias: Directo entre tu aplicación móvil y la del usuario.
• Fácil de usar: El cliente únicamente debe escanear el código QR con su app preferida.

Pasos para Instalar el Widget

1. Descarga o guarda la imagen de tu código QR desde tu app móvil (Yape, Plin, etc.).
2. Sube la imagen a Blogger o a un servidor de imágenes.
3. Ve a Blogger > Diseño > Añadir un gadget.
4. Elige HTML/JavaScript.
5. Copia el código a continuación, coloca la URL de tu imagen QR y guarda.

Código HTML y CSS para Pago Móvil QR

<!-- Widget Pago QR Movil -->
<style>
  .qr-pay-card {
    background: #ffffff;
    border: 2px solid #742284;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    font-family: Arial, sans-serif;
    max-width: 320px;
    margin: 15px auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  }
  .qr-pay-title {
    color: #742284;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .qr-pay-img {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    margin: 10px 0;
    border: 1px solid #e0e0e0;
  }
  .qr-pay-phone {
    background: #f3e8f4;
    color: #742284;
    font-weight: bold;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 8px;
  }
</style>

<div class="qr-pay-card">
  <div class="qr-pay-title">📱 Pago con QR / Yape / Plin</div>
  <p style="font-size:12px; color:#555; margin:0;">Escanea el código QR desde tu app móvil:</p>
  
  <!-- Reemplaza por la URL de tu imagen QR -->
  <img src="URL_DE_TU_IMAGEN_QR.jpg" alt="Código QR de Pago" class="qr-pay-img" />
  
  <br />
  <div class="qr-pay-phone">Número: +51 987 654 321</div>
</div>