Como agregar Yape Peru a tu pagina web

🟢 Si usas WordPress:

Opción 1: Enlazar a tu Yape con un botón en el menú

Consigue tu código QR de Yape (en formato imagen o enlace de pago).
- Si tienes Yape con número, puedes generar un enlace del tipo: arduinoCopiarEditarhttps://yape.com.pe/tu-numero-o-id
- O puedes subir tu imagen QR a tu web o un servidor.
Ir al panel de WordPress → Apariencia → Menús.
Haz clic en “Enlaces personalizados”.
Completa así:
- URL: el enlace a tu imagen QR o tu enlace de pago Yape.
- Texto del enlace: Pagar con Yape o Donar con Yape.
Clic en “Añadir al menú” y luego en “Guardar menú”.

🔵 Si tu web es HTML o código personalizado:

Puedes agregar esto al menú (por ejemplo en header.html o donde esté tu navegación):

html
<li><a href="https://yape.com.pe/tu-numero-o-id" target="_blank">Pagar con Yape</a></li>

O si quieres mostrar una imagen QR directamente:

html
<li>
  <a href="/ruta-del-qr.png" target="_blank">
    <img src="/ruta-del-qr.png" alt="Paga con Yape" style="height:30px;">
  </a>
</li>

✅ Recomendación adicional

Puedes hacer una página aparte tipo «Donaciones» o «Pagar por Yape», y en el menú enlazar a esa página. Ahí puedes colocar:

Imagen del QR.
Enlace directo.
Instrucciones simples: “Escanea el código o entra al enlace para pagar por Yape.”

✅ OPCIÓN 2: Crear una página “Pagar con Yape” y enlazarla desde el menú

Ventajas:

Puedes incluir más detalles: imagen QR, instrucciones, monto sugerido, etc.
Más profesional.

Pasos:

Ve a Páginas → Añadir nueva.
Llámala por ejemplo: Pagar con Yape.
En el contenido:
- Sube y muestra tu imagen del QR.
- Añade instrucciones:
  “Escanea el código con tu app Yape y envía el monto que desees.”
Publica la página.
Luego, ve a Apariencia → Menús.
Añade esa nueva página al menú como cualquier otra.

✅ PASOS COMPLETOS para mostrar «Pagar con Yape» como botón en el menú

🔹 1. Agrega el enlace al menú

Ve a Apariencia → Menús.
En “Enlaces personalizados” pon:
- URL: tu enlace de Yape (ejemplo: https://yape.com.pe/987654321)
- Texto del enlace: Pagar con Yape
Clic en “Añadir al menú” y luego en “Guardar menú”.

🔹 2. Asigna una clase CSS al ítem del menú (para darle estilo de botón)

En la parte superior de la página de Menús, haz clic en “Opciones de pantalla” (arriba a la derecha).
Marca la casilla “Clases CSS”.
Ahora en el ítem “Pagar con Yape” que agregaste al menú, aparecerá un campo llamado “Clases CSS (opcional)”.
Escribe ahí: CopiarEditaryape-boton

🔹 3. Agrega el estilo de botón al CSS del tema

Ve a Apariencia → Personalizar → CSS adicional.
Pega el siguiente código:

css
.yape-boton a {
  background-color: #3bb44a; /* color verde tipo Yape */
  color: white !important;
  padding: 8px 16px;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.yape-boton a:hover {
  background-color: #2e9b3a;
}

Clic en “Publicar”.

🟩 Plantilla para tu página “Pagar con Yape”

Título de la página:

Pagar con Yape

Contenido (bloques):

html
<h2 style="text-align: center;">¡Gracias por tu apoyo!</h2>

<p style="text-align: center;">
Puedes realizar tu pago o colaboración rápida y segura usando <strong>Yape</strong>. Solo escanea el siguiente código QR con tu app Yape o haz clic en el botón para abrir el enlace directo desde tu celular.
</p>

<div style="text-align: center; margin: 30px 0;">
  <!-- Reemplaza el src con tu imagen QR -->
  <img src="URL_DE_TU_QR" alt="Código QR de Yape" style="max-width: 250px; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2);">
</div>

<p style="text-align: center;">
<b>Nombre Yape:</b> Tu nombre o negocio<br>
<b>Número:</b> 987 654 321
</p>

<div style="text-align: center; margin-top: 20px;">
  <a href="https://yape.com.pe/987654321" target="_blank" style="background-color: #3bb44a; color: white; padding: 12px 24px; text-decoration: none; font-weight: bold; border-radius: 5px;">
    Abrir en Yape
  </a>
</div>

<p style="text-align: center; margin-top: 40px; color: gray;">
Tu colaboración nos ayuda a seguir ofreciendo contenido gratuito y de calidad. ¡Gracias!
</p>

IMPORTANTE:

Reemplaza URL_DE_TU_QR con el enlace a tu imagen del QR (lo puedes subir en Medios → Añadir nuevo y copiar el enlace).
Cambia el número y nombre por los tuyos reales.

✅ Cómo usar esta plantilla en WordPress

Ve a Páginas → Añadir nueva.
Título: Pagar con Yape.
En el contenido, cambia a Editor por bloques o HTML personalizado.
Pega el contenido anterior (modo HTML o usando bloques personalizados).
Añade tu imagen QR desde “Medios” si aún no lo has hecho.
Publica la página.
Ve a Apariencia → Menús y añade esta página al menú si aún no lo has hecho.