Inicio
Documentação
Recursos
Certificações
Comunidade

Comunidade

Fique por dentro das últimas novidades, peça ajuda a outros integradores e compartilhe seu conhecimento.

Alterar estilo de cores - Interface de usuário - Mercado Pago Developers
Qual documentação você quer buscar?

Não sabe como começar a integrar? 

Acesse os primeiros passos

Alterar estilo de cores

O Checkout Pro permite personalizar o estilo de cores dos elementos de sua interface, customizando a forma como será exibido para o usuário.

Dentre as personalizações de cores é possível customizar a cor do cabeçalho e dos elementos do checkout como botões, campos de dados, bordas, elementos de transição e texto.

Importante
A customização de cores e elementos é válida somente para o esquema de abertura modal. Além disso, os atributos de cores devem estar obrigatoriamente em formato hexadecimal, por exemplo, #ff0000.

Para habilitar a edição do estilo de cores no checkout e em seus elementos, adicione o objeto theme e os atributos elementsColor e headerColor com a cor que deseja aplicar nas opções de inicialização, conforme exemplo abaixo.

          
mp.bricks().create("wallet", "wallet_container", {
   initialization: {
       preferenceId: "<PREFERENCE_ID>",
   },
   customization: {
       checkout: {
           theme: {
               elementsColor: "#4287F5",
               headerColor: "#4287F5",
           },
       },
   },
});

        
          
const customization = {
 checkout: {
   theme: {
     elementsColor: '#4287F5',
     headerColor: '#4287F5'
   },
 },
};


<Wallet
  initialization={{ preferenceId: '<PREFERENCE_ID>'}}
  customization={customization}
/>