Customizações visuais do Card Payment
O fluxo do checkout mobile via Card Payment Brick foi construído de forma modular. A base segue as melhores práticas de UX para entregar ao comprador a melhor experiência sem que você precise se preocupar com detalhes de design.
Quando quiser alinhar o checkout à identidade do seu aplicativo, o Mercado Pago SDK Checkout usa componentes tokenizados em design atômico: alterar um token repercute automaticamente em componentes, telas e estados.
Toda a customização visual parte do MPCheckoutAppearance, que você passa ao Builder do checkout. Ele define o tema aplicado (theme) e como o aplicativo alterna entre os modos claro e escuro (style).
data class MPCheckoutAppearance(
val theme: MercadoPagoThemeConfiguration = MercadoPagoThemes.Default,
val style: MercadoPagoUserInterfaceStyle = MercadoPagoUserInterfaceStyle.System,
)| Parâmetro | Descrição | Exemplo |
theme: MercadoPagoThemeConfiguration | Conjunto de temas claro e escuro que define o valor dos tokens. Sem customização, usa MercadoPagoThemes.Default. | tema |
style: MercadoPagoUserInterfaceStyle | Como o aplicativo alterna entre os temas: somente escuro, somente claro ou conforme o dispositivo. | MercadoPagoUserInterfaceStyle.System |
Um tema é um conjunto de tokens agrupados por categoria. Cada modo — claro e escuro — é um MercadoPagoThemeProvider, em que é definido o valor de cada categoria. É ele que preenche o theme do MPCheckoutAppearance.
val lightTheme = MercadoPagoThemeProvider.Default(
color = lightColors,
spacing = lightSpacings,
radius = lightRadius,
borderWidth = lightBorderWidth,
shape = lightShape,
typography = lightTypography,
)| Token | Descrição | Exemplo |
color: MercadoPagoColor | Cores dos componentes, telas, fundos etc. | lightColors |
spacing: MercadoPagoSpacing | Espaçamentos. | lightSpacings |
radius: MercadoPagoRadius | Raios de borda. | lightRadius |
borderWidth: MercadoPagoBorderWidth | Larguras de borda. | lightBorderWidth |
shape: MercadoPagoShape | Shapes dos componentes. | lightShape |
typography: MercadoPagoTypography | Tipografia. | lightTypography |
Você monta um MercadoPagoThemeConfiguration, com um provider para o modo claro e outro para o escuro, e o atribui ao theme do MPCheckoutAppearance. Pode criar um tema completo ou partir do tema padrão e sobrescrever só o que precisar.
| Abordagem | Quando usar |
| Tema completo | Você define todos os tokens do tema. |
| Sobrescrever tokens | Você parte do tema padrão e altera apenas os tokens necessários. |
Tema completo:
val theme = MercadoPagoThemeConfiguration(
lightTheme = lightTheme,
darkTheme = darkTheme,
)
val appearance = MPCheckoutAppearance(theme = theme)Sobrescrever tokens — parta do tema padrão com copy:
val theme = MercadoPagoThemeConfiguration(
lightTheme = MercadoPagoDefaultLightTheme.copy(
color = lightColors
),
darkTheme = MercadoPagoDefaultDarkTheme.copy(
color = darkColors
)
)