Interfaz de usuario - Personalización del checkout - Mercado Pago Developers

Interfaz de usuario

Personaliza Checkout Pro según tu modelo de negocio para ofrecer la mejor experiencia de compra posible a tus compradores.

Apertura del Checkout Pro

Puedes personalizar cómo abre Checkout Pro a través de roles y atributos para agregar a tu configuración de integración.

Abrir Checkout Pro sin botón de pago

Utiliza el método open para abrir Checkout desde cualquier elemento deseado de tu sitio, sin mostrar necesariamente el botón de pago a tus compradores.

Por ejemplo:

          
<!-- Inicializa el checkout -->
<script>
  const checkout = mp.checkout({
    preference: {
      id: "YOUR_PREFERENCE_ID",
    },
  });
</script>
<!-- Llama a la función ‘open’ desde el elemento de tu página que desees -->
<!-- Por ejemplo: un radio button -->
<input type="radio" id="checkout-open-radio" onclick="checkout.open()" />

        

Abrir Checkout Pro con botón de pago

Utiliza el método render para generar un botón de pago responsable de abrir Checkout Pro en tu sitio con los siguientes parámetros:

ParámetroTipo de datosDescripción
containerstringSelector CSS (identificador) del elemento HTML donde desees mostrar el botón de pago. Te permite definir el tipo de botón que deseas.
type (opcional)stringDefine el tipo de botón deseado. Actualmente, solo acepta el valor de 'billetera', que muestra un botón de pago con la marca Mercado Pago.
label (opcional)stringTexto representado en el botón. Valor predeterminado: Pagar.

Puedes utilizar el método render de dos formas diferentes:

  • Incluyendo la opción render con sus respectivos parámetros dentro de las opciones de inicialización de checkout.
  • Invocando la función render más tarde, desde el lugar que prefieras dentro de tu código, con sus respectivos parámetros.

Por ejemplo:

          
// Dentro de las opciones de inicialización
const checkout = mp.checkout({
  preference: {
    id: "YOUR_PREFERENCE_ID",
  },
  render: {
    container: ".cho-container",
    label: "Pagar",
  },
});

// Invocando la función posteriormente
checkout.render({
  container: ".cho-container",
  label: "Pagar",
});

        

Botón de pago por defecto

Default Label Button

Botón de pago personalizado

Custom Label Button

Abrir Checkout Pro automáticamente

Agrega el parámetro autoOpen a las opciones de inicio de Checkout para mostrar automáticamente Checkout Pro, sin necesidad de que tus compradores interactúen con un botón o cualquier otro elemento para abrirlo:

          
// Inicializa el checkout
const checkout = mp.checkout({
  preference: {
    id: "YOUR_PREFERENCE_ID",
  },
  autoOpen: true, // Habilita la apertura automática del Checkout Pro
});

        

Esquema de apertura

Checkout Pro te permite cambiar tu esquema de apertura predeterminado.

Actualmente, los esquemas disponibles son:

  • Redirect: abre Checkout Pro en una nueva ventana.
  • Modal: abre Checkout Pro en tu sitio.

Para integrar el esquema de redireccionamiento en tu integración, reemplaza el botón de pago configurado en la implementación básica y agrega el enlace web Checkout a tu sitio donde deseas que aparezca, como se muestra en el siguiente ejemplo:

Checkout Pro se abrirá en el init_point definido por la preferencia

          
<!doctype html>
<html>
  <head>
    <title>Pagar</title>
  </head>
  <body>
    <a href="<?php echo $preference->init_point; ?>">Pagar con Mercado Pago</a>
  </body>
</html>

        

Checkout Pro se abrirá en el init_point definido por la preferencia

          
<!doctype html>
<html>
  <head>
    <title>Mi sitio</title>
  </head>
  <body>
    <a href="{{ init_point }}" target="_blank">Pagar</a>
    <!--Donde el valor que debe tomar href es el init_point de la preferencia creada en el Server-Side -->
  </body>
</html>

        

Checkout Pro se abrirá en el init_point definido por la preferencia

          
<!doctype html>
<html>
  <head>
    <title>Pagar</title>
  </head>
  <body>
    <a href="${preference.initPoint}">Pagar con Mercado Pago</a>
  </body>
</html>

        

Checkout Pro se abrirá en el init_point definido por la preferencia

          
<!doctype html>
<html>
  <head>
    <title>Mi sitio</title>
  </head>
  <body>
    <a href="<%= @init_point %>" target="_blank">Pagar</a>
  </body>
</html>

        

Checkout Pro se abrirá en el init_point definido por la preferencia

          
<!doctype html>
<html>
  <head>
    <title>Pagar</title>
  </head>
  <body>
    <a href="@Html.DisplayFor(model => model.InitPoint)">Pagar con Mercado Pago</a>
  </body>
</html>

        

Checkout Pro se abrirá en el init_point definido por la preferencia

          
<!doctype html>
<html>
  <head>
    <title>Pay</title>
  </head>
  <body>
    <a href="{{ init_point }}" target="_blank">Pay with Mercado Pago</a>
  </body>
</html>

        

Estilo de color

Agrega el atributo theme, de acuerdo con el ejemplo a continuación, a las opciones de inicio de Checkout Pro para personalizar el color del encabezado y tus elementos:

          
<script>
  mp.checkout({
    preference: {...},
    render: {...},
    theme: {
        elementsColor: ''.
        headerColor: '',
    }
  });
</script>

        
Importante
La personalización de colores y elementos es válida solo para el esquema de apertura modal.

Encabezado

Cambia el color del encabezado agregando el atributo headerColor al objeto theme. Ten en cuenta que el valor del atributo debe estar en formato hexadecimal.

Por ejemplo:

          
theme: {
  headerColor: "#c0392b";
}

        

Elementos

Los elementos de Checkout Pro que se pueden personalizar son:

  • Botones;
  • Campos de información;
  • Elementos de transición como spinners y barras de progreso;
  • Bordes.

Puedes cambiar el color de estos elementos agregando el atributo elementsColor al objeto theme. Ten en cuenta que el valor del atributo debe estar en formato hexadecimal.

Por ejemplo:

javascript

theme: {
  elementsColor: "#c0392b";
}

Custom-Component

Textos

El color del texto de los botones y el encabezado de Checkout Pro se determinará automáticamente según el contraste del color definido para esos mismos elementos.

Los elementos de color claro tendrán el texto en color negro o #000. Por ejemplo:

javascript

theme: {
  elementsColor: "#81ecec"; // Color claro
}

Light Color Button

Los elementos de color oscuro tendrán el texto en color blanco o #fff. Por ejemplo:

javascript

theme: {
  elementsColor: "#8e44ad"; // Color oscuro
}

Dark Color Button