Personalizaciones

Esquema redirect

El Smart Checkout permite cambiar su esquema de apertura.

Los esquemas disponibles actualmente son:

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

Checkout-redirect

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.

Redirige al 'init_point' de 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>

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

Nota

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"

Custom-Component


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 -->

Light Color Button


Para un color de elementos oscuro, el color del texto será blanco o #fff. Por ejemplo:

Html

data-elements-color="#8e44ad" <!-- Color oscuro -->

Dark Color Button

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:

Default Label Button

Personalizado:

Custom Label Button


Próximos pasos

La búsqueda no arrojó ningún resultado.

Verifica la la ortografía de los términos de búsqueda o prueba con otras palabras clave.