Inicio
Documentación
Recursos
Certificaciones
Comunidad

Recursos

Revisa las actualizaciones de nuestras soluciones y operatividad del sistema o pide soporte técnico.

Comunidad

Recibe las últimas novedades, pide ayuda a otros integradores y comparte tus conocimientos.

Cambiar de aspecto - Personalizaciones visuales - Mercado Pago Developers

Cambiar de aspecto

Client-Side

Wallet Brick permite algunas personalizaciones visuales listadas en la tabla abajo, todas opcionales y del tipo string.

Si la propiedad enviada está vacía, la pantalla mostrará el diseño definido por el layout predeterminado. Por otro lado, al enviar un valor alternativo, este reemplazará el valor predeterminado.

ClaveOpciones disponiblesPredeterminado
themedefault ou blackdefault
customStyle.valuePropColorPara el tema default, valuePropColor puede ser blue ou white, mientras que para el tema dark, valuePropColor puede ser black.Para el tema default, el predeterminado es blue, mientras que para el tema dark, el predeterminado es black.
customStyle.buttonHeightMínimo: 48px.
Máximo: libre elección.
48px
customStyle.borderRadiusMínimo: livre escolha.
Máximo: libre elección.
6px
customStyle.verticalPaddingMínimo: 8px.
Máximo: libre elección.
8px
customStyle.horizontalPaddingMínimo: 0px.
Máximo: libre elección.
0px
          
const settings = {
    ...,
    customization: {
        theme:'dark',
        customStyle: {
            valueProp: 'practicality',
            valuePropColor: 'black',
            borderRadius: '10px',
            verticalPadding: '10px',
            horizontalPadding: '10px',
        }
    }
}

        
          
const customization = {
    theme:'dark',
    customStyle: {
        valueProp: 'practicality',
        valuePropColor: 'black',
        borderRadius: '10px',
        verticalPadding: '10px',
        horizontalPadding: '10px',
    }
};

        

Ocultar texto de propuesta de valor (valueProp)

También es posible ocultar el texto de la propuesta de valor pasando el valor boolean true a la propiedad customStyle.hideValueProp. El valor predeterminado es false.

          
const settings = {
    ...,
    customization: {
	   theme: 'default',
        customStyle: {
            hideValueProp: true,
        }
    }
}

        
          
const customization = {
    theme: 'default',
    customStyle: {
        hideValueProp: true,
    }
};