Web Tokenize Checkout - Personalización

Puedes personalizar de qué forma abrir el checkout a través de funciones y atributos que pueden agregarse a la configuración en el código de tu integración:

Usa el método open para abrir el checkout sin mostrar el botón de pago. Esto te permite conectarlo al elemento de tu página web desde el que prefieras realizar la apertura del Web Tokenize Checkout.

          
// Inicializa el checkout
const checkout = mp.checkout({
  tokenizer: {
    totalAmount: 4000,
    backUrl: 'https://www.mi-sitio.com/process'
  },
});
(...)
// Llama a la función ‘open’ desde el elemento de tu página que desees
// Por ejemplo: un radio button
<input type="radio" id="tokenizer-open-radio" onclick="checkout.open()">

        

Utiliza el método render para mostrar un botón de pago que permita la apertura del Web Tokenize Checkout. Para ello, debes incluir los siguientes parámetros:

Puedes utilizar este método de dos formas distintas:

• Incluyendo la opción render con sus respectivos parámetros dentro de las opciones de inicialización del checkout.

• Invocando a la función render posteriormente, desde el lugar que prefieras dentro de tu código, con sus respectivos parámetros.

  • javascript

  javascript

          
   // Dentro de las opciones de inicialización 
  const checkout = mp.checkout({
  tokenizer: {
    totalAmount: 4000,
    backUrl: 'https://www.mi-sitio.com/process'
  },
  render: {
    container: '.tokenizer-container', // Indica dónde se mostrará el botón
    label: 'Pagar' // Cambia el texto del botón de pago (opcional)
   }
  });
  
  // Invocando la función posteriormente
  checkout.render({
    container: '.tokenizer-container',
    label: 'Pagar'
  });
    
        

  Copiar

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

Añade el parámetro autoOpen a tus opciones de inicialización del checkout en tu integración para mostrar automáticamente el Web Tokenize Checkout, sin necesitar de la interacción con un botón u otro elemento para su apertura.

          
// Inicializa el checkout
const checkout = mp.checkout({
  tokenizer: {
    totalAmount: 4000,
    backUrl: 'https://www.mi-sitio.com/process'
  },
  autoOpen: true, // Habilita la apertura automática del checkout
});

        

Agrega el atributo theme de la siguiente manera a las opciones de inicialización para personalizar el color de algunos elementos y el encabezado de la interfaz del checkout.

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

        

Modifica el color del encabezado agregando el atributo headerColor al objeto theme. El valor del atributo deberá ser en formato hexadecimal. Por ejemplo:

          
theme: {
  headerColor: '#c0392b'
}

        

Los elementos que puedes personalizar son:

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

Modifica el color de esos elementos agregando el atributo elementsColor al objeto theme. El valor del atributo debe estar en formato hexadecimal. Por ejemplo:

theme: {
  elementsColor: '#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:

theme: {
    elementsColor: '#81ecec' // Color claro
}

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

theme: {
    elementsColor: '#8e44ad' // Color oscuro
}

Puedes agregar y modificar elementos al detalle de la compra sumando el atributo summary dentro del objeto tokenizer en tus configuraciones de inicialización de la siguiente manera:

          
mp.checkout({
  tokenizer: {
      …
      summary: {...}, 
  },
  render: {...},
})
  
        

Los atributos que pueden agregarse y modificarse son los siguientes:

Con el atributo productLabel 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:

summary: {
     productLabel: ‘4 productos’
}

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

summary: {
     product: 654
}

Personaliza los límites de cuotas sumando el atributo installments dentro del objeto tokenizer en tus configuraciones de inicialización, y agregando minInstallments o maxInstallments para establecer la cantidad mínima y máxima de cuotas respectivamente. Por ejemplo:

mp.checkout({
  tokenizer: {
    installments: {
        minInstallments: 1,
        maxInstallments: 12,
    }, 
  },
  render: {...},
});

Usa el atributo discountLabel para especificar el texto que aparece como "Descuento" en el detalle de la compra. Por ejemplo, puedes agregar el porcentaje de descuento:

summary: {
     discountLabel: ‘Descuento 10%’
}

Mediante el atributo discount, agrega el monto de descuento en el detalle de la compra. Por ejemplo:

summary: {
     discount: 70
}

Con el atributo shipping puedes especificar el monto de envío en el detalle de la compra. Por ejemplo:

summary: {
     shipping: 100
}

Usa el atributo charge para especificar el monto de recargos en el detalle de la compra. Por ejemplo:

summary: {
      charge: 10
}

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

Con el atributo taxes puedes especificar el monto de impuestos en el detalle de la compra. Por ejemplo:

summary: {
      taxes: 10
}

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

Agrega el atributo arrears para especificar el monto de saldo pendiente en el detalle de la compra. Por ejemplo:

summary: {
      arrears: 10
}

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