Personalizaciones

En esta página

Esquema modal

Colores

Botones

Esquema modal

El Web Checkout modal permite cambiar su esquema de apertura.

Los esquemas disponibles actualmente son:

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

Checkout-Modal

Para integrar el esquema modal, reemplaza el botón de pago que realizaste en la integración básica por el siguiente snippet:

<form action="/procesar-pago" method="POST">
  <script
   src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
   data-access-token= “PROD_ACCESS_TOKEN”
   data-preference-id="<?php echo $preference->id; ?>">
  </script>
</form>
<form action="/procesar-pago" method="POST">
  <script
   src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
   data-access-token= “PROD_ACCESS_TOKEN”
   data-preference-id="$$id$$">
  </script>
</form>
<form action="/procesar-pago" method="POST">
  <script
   src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
   data-access-token= “PROD_ACCESS_TOKEN”
   data-preference-id="${preference.id}">
  </script>
</form>
<form action="/procesar-pago" method="POST">
  <script
   src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
   data-access-token= “PROD_ACCESS_TOKEN”
   data-preference-id="%= @init_point %>">
  </script>
</form>
<form action="/procesar-pago" method="POST">
  <script
   src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
   data-access-token= “PROD_ACCESS_TOKEN”
   data-preference-id="@Html.DisplayFor(model => model.id)">
  </script>
</form>

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

Otras funcionalidades

Configura tus pago y adapta Web Checkout a tu negocio.

Integración avanzadaRECOMENDADO

Optimiza tu integración y mejora la gestión de tus ventas.








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.