Cómo Integrar un Botón de Pago con Mercado Pago en Blogger

Mercado Pago es la pasarela de pagos líder en Latinoamérica, permitiendo recibir dinero con tarjetas de crédito, débito y transferencias bancarias. En esta guía paso a paso te mostramos cómo agregar un botón o link de pago de Mercado Pago en Blogger.

Ventajas de Mercado Pago en tu Blog

• Múltiples medios de pago: Tus usuarios pueden pagar con tarjeta de crédito, débito y dinero en cuenta.
• Conversión local: Soporta cobros en moneda local (ARS, BRL, MXN, CLP, PEN, COP, etc.).
• Fácil integración: Solo necesitas generar un link de pago desde tu cuenta de Mercado Pago.

Pasos para la Instalación

1. Crea un "Link de pago" desde tu cuenta oficial de Mercado Pago.
2. En tu panel de Blogger, dirígete a Diseño.
3. Haz clic en Añadir un gadget y selecciona HTML/JavaScript.
4. Copia el código a continuación, reemplaza el enlace por el tuyo y guarda el widget.

Código HTML y CSS del Botón Mercado Pago

<!-- Widget Mercado Pago -->
<style>
  .mp-card {
    background: #ffffff;
    border: 1px solid #009ee3;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    font-family: Arial, sans-serif;
    max-width: 350px;
    margin: 15px auto;
  }
  .mp-title {
    font-size: 18px;
    color: #009ee3;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .mp-desc {
    font-size: 13px;
    color: #555555;
    margin-bottom: 15px;
    line-height: 1.4;
  }
  .mp-btn {
    display: inline-block;
    background-color: #009ee3;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 90%;
  }
  .mp-btn:hover {
    background-color: #0081ba;
    transform: translateY(-2px);
  }
</style>

<div class="mp-card">
  <div class="mp-title">💳 Pagar con Mercado Pago</div>
  <p class="mp-desc">Aceptamos tarjetas de crédito, débito y transferencias directas mediante Mercado Pago.</p>
  <a href="HTTPS://MPAGO.LA/TU_LINK_DE_PAGO" class="mp-btn" target="_blank" rel="noopener noreferrer">
    Pagar con Mercado Pago
  </a>
</div>