Personalizaciones visuales del Card Payment
El flujo del checkout móvil mediante Card Payment fue construido de forma modular. La base sigue las mejores prácticas de UX para brindarle al comprador la mejor experiencia sin que tengas que preocuparte por los detalles de diseño.
Cuando quieras alinear el checkout con la identidad de tu app, el SDK usa componentes tokenizados en diseño atómico: cambiar un token se refleja automáticamente en componentes, pantallas y estados.
Toda la personalización visual parte de MPCheckoutAppearance, que pasas al Builder del checkout. Define el tema aplicado (theme) y cómo la app alterna entre los modos claro y oscuro (style).
data class MPCheckoutAppearance(
val theme: MercadoPagoThemeConfiguration = MercadoPagoThemes.Default,
val style: MercadoPagoUserInterfaceStyle = MercadoPagoUserInterfaceStyle.System,
)| Parámetro | Descripción | Ejemplo |
theme: MercadoPagoThemeConfiguration | Conjunto de temas claro y oscuro que define el valor de los tokens. Sin personalización, usa MercadoPagoThemes.Default. | tema |
style: MercadoPagoUserInterfaceStyle | Cómo la app alterna entre los temas: solo oscuro, solo claro o según el device. | MercadoPagoUserInterfaceStyle.System |
Un tema es un conjunto de tokens agrupados por categoría. Cada modo — claro y oscuro — es un MercadoPagoThemeProvider, donde defines el valor de cada categoría. Es lo que completa el theme del MPCheckoutAppearance.
val lightTheme = MercadoPagoThemeProvider.Default(
color = lightColors,
spacing = lightSpacings,
radius = lightRadius,
borderWidth = lightBorderWidth,
shape = lightShape,
typography = lightTypography,
)| Token | Descripción | Ejemplo |
color: MercadoPagoColor | Colores de los componentes, pantallas, fondos, etc. | lightColors |
spacing: MercadoPagoSpacing | Espaciados. | lightSpacings |
radius: MercadoPagoRadius | Radios de borde. | lightRadius |
borderWidth: MercadoPagoBorderWidth | Anchos de borde. | lightBorderWidth |
shape: MercadoPagoShape | Shapes de los componentes. | lightShape |
typography: MercadoPagoTypography | Tipografía. | lightTypography |
Armas un MercadoPagoThemeConfiguration — con un provider para el modo claro y otro para el oscuro — y lo asignas al theme del MPCheckoutAppearance. Puedes crear un tema completo o partir del tema predeterminado y sobrescribir solo lo que necesites.
| Enfoque | Cuándo usarlo |
| Tema completo | Defines todos los tokens del tema. |
| Sobrescribir tokens | Partes del tema predeterminado y cambias solo los tokens necesarios. |
Tema completo:
val theme = MercadoPagoThemeConfiguration(
lightTheme = lightTheme,
darkTheme = darkTheme,
)
val appearance = MPCheckoutAppearance(theme = theme)Sobrescribir tokens — parte del tema predeterminado con copy:
val theme = MercadoPagoThemeConfiguration(
lightTheme = MercadoPagoDefaultLightTheme.copy(
color = lightColors
),
darkTheme = MercadoPagoDefaultDarkTheme.copy(
color = darkColors
)
)