Web Tokenize Checkout - Personalización

Por defecto el botón contiene el texto "Pagar". Puedes modificar el texto del botón agregando el atributo data-button-label al fragmento de código HTML. Por ejemplo:

data-button-label="Comprar"

Para utilizar tu propio estilo, incluye el siguiente código CSS:

button.mercadopago-button {
  /* Tus atributos CSS */
}

Por ejemplo:

button.mercadopago-button {
  background-color: #fff;
  color: #111;
  border: 1px solid #111;
  border-radius: 0;
}

Los elementos que pueden personalizarse son:

• Botones
• Campos de ingreso de datos: inputs
• Elementos de transiciones: spinners y barras de progreso
• Bordes

Puedes modificar el color de esos elementos agregando el atributo data-elements-color al fragmento de código HTML.

El valor del atributo deberá ser en formato hexadecimal. Por ejemplo:

data-elements-color="#c0392b"

Puedes modificar el color del encabezado agregando el atributo data-header-color al fragmento de código HTML.

El valor del atributo deberá ser en formato hexadecimal. Por ejemplo:

data-header-color="#c0392b"

El color del texto de los botones y encabezado, 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:

data-elements-color="#81ecec" <!-- Color claro -->

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

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

Los atributos que pueden agregarse y modificarse son los siguientes.

Montos numéricos:

• Productos: data-summary-product
• Cantidad mínima de cuotas: data-min-installments
• Cantidad máxima de cuotas: data-max-installments
• Descuento: data-summary-discount
• Envío: data-summary-shipping
• Recargos: data-summary-charge
• Impuestos: data-summary-taxes
• Saldo pendiente: data-summary-arrears

Textos:

• Para modificar el título "Productos": data-summary-product-label
• Para modificar el título "Descuento": data-summary-discount-label

Usando el atributo data-summary-product-label, puedes especificar el texto que aparece como "Productos" en el detalle de la compra. Por ejemplo, puedes agregar el detalle de lo que se está pagando:

data-summary-product-label="4 productos"

Mediante el atributo data-summary-product, puedes especificar el monto en el detalle de la compra. Por ejemplo:

data-summary-product="654"

Usando el atributo data-min-installments o data-max-installments, puedes limitar el mínimo y máximo de la cantidad de cuotas que deseas ofrecer a tu pagador. Por ejemplo:

data-min-installments = 1

data-max-installments = 6

Usando el atributo data-summary-discount-label, puedes especificar el texto que aparece como "Descuento" en el detalle de la compra. Por ejemplo, puedes agregar el porcentaje de descuento:

data-summary-discount-label="Descuento 10%"

Mediante el atributo data-summary-discount, puedes especificar el monto de descuento en el detalle de la compra. Por ejemplo:

data-summary-discount="65.4"

Usando el atributo data-summary-shipping, puedes especificar el monto de envío en el detalle de la compra. Por ejemplo:

data-summary-shipping="10"

Usando el atributo data-summary-charge, puedes especificar el monto de recargos en el detalle de la compra. Por ejemplo:

data-summary-charge="10"

Aparecerá en el detalle de la compra bajo el concepto de "Recargos".

Usando el atributo data-summary-taxes, puedes especificar el monto de impuestos en el detalle de la compra. Por ejemplo:

data-summary-taxes="10"

Aparecerá en el detalle de la compra bajo el concepto de "Impuestos".

Usando el atributo data-summary-arrears, puedes especificar el monto de saldo pendiente en el detalle de la compra. Por ejemplo:

data-summary-arrears="10"

Aparecerá en el detalle de la compra bajo el concepto de "Saldo pendiente".