Personalizaciones
Esquema redirect
El Checkout de Mercado Pago permite cambiar su esquema de apertura.
Los esquemas disponibles actualmente son:
- Redirect: abre el Checkout de Mercado Pago en una nueva ventana.
- Modal: abre el Checkout de Mercado Pago en tu sitio.
Para integrar el esquema redirect, reemplaza el botón de pago que realizaste en la integración básica por este nuevo y suma el link del Web Checkout en tu sitio en el lugar que quieras que aparezca.
<!doctype html>
<html>
<head>
<title>Pagar</title>
</head>
<body>
<a href="<?php echo $preference->init_point; ?>">Pagar con Mercado Pago</a>
</body>
</html>
Redirige al 'init_point' de la preferencia
<!doctype html>
<html>
<head>
<title>Mi sitio</title>
</head>
<body>
<a href="$$init_point$$" target="_blank">Pagar</a>
</body>
</html>
Redirige al 'init_point' de la preferencia
<!doctype html>
<html>
<head>
<title>Pagar</title>
</head>
<body>
<a href="${preference.initPoint}">Pagar con Mercado Pago</a>
</body>
</html>
Redirige al 'init_point' de la preferencia
<!doctype html>
<html>
<head>
<title>Mi sitio</title>
</head>
<body>
<a href="<%= @init_point %>" target="_blank">Pagar</a>
</body>
</html>
Redirige al 'init_point' de 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>
Colores
Válido solo para el esquema modal.
Elementos
Los elementos que pueden personalizarse son:
- Botones
- Campos de ingreso de datos
- Elementos de transiciones: spinners y barras de progreso
- Bordes
Puedes modificar el color de esos elementos agregando el atributo data-elements-color en el código HTML.
El valor del atributo debe estar en formato hexadecimal. Por ejemplo:
Html
data-header-color="#c0392b"
Textos
El color del texto de los botones será determinado automáticamente dependiendo del contraste del color definido. Para un color de elemento claro, el color del texto será negro o #000. Por ejemplo:
Html
data-elements-color="#81ecec" <!-- Color claro -->
Para un color de elementos oscuro, el color del texto será blanco o #fff. Por ejemplo:
Html
data-elements-color="#8e44ad" <!-- Color oscuro -->
Botones
Texto
Por defecto, el botón muestra el texto “Pagar”. Puedes modificar el texto del botón agregando el atributo data-button-label en el código HTML. Por ejemplo:
Html
data-button-label="Comprar"
Por defecto:
Personalizado:
Redirige al 'init_point' de la preferencia