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 visual do botão - Interface de usuário - Mercado Pago Developers

Busca inteligente powered by OpenAI 

Alterar visual do botão

Client-Side

É possível customizar o visual do botão de pagamento através da definição de propriedades visuais com valores alternativos aos padrões. Por padrão, o botão de pagamento é renderizado como na imagem a seguir.

cow-visual-wallet-default

Para alterar os textos padrões, modifique a propriedade customization durante a renderização.

-Descrição
Momento de customizaçãoAo renderizar.
Propriedadecustomization
ObservaçõesAo enviar uma propriedade vazia, a tela apresentará o visual definido pelo layout padrão. Por outro lado, ao se enviar um texto alternativo, este substituirá o texto padrão. Para verificar quais são os textos alternativos disponíveis, veja a tabela a seguir.

Confira a seguir os visuais disponíveis para alteração e um exemplo de código.

ChaveOpções disponíveisPadrãoObservações
buttonBackgrounddefault, black, blue, whitedefault-
buttonHeight-48pxMínimo: 48px.
Máximo: livre escolha.
borderRadius-6px-
valuePropColorgrey, whitegrey-
verticalPadding-16pxMínimo: 8px.
Máximo: livre escolha.
horizontalPadding-0pxMínimo: 0px.
Máximo: livre escolha.
          
const settings = {
 ...,
 customization: {
      visual: {
          buttonBackground: 'black',
          borderRadius: '16px',
      },
 },
}

        
          
const customization = {
 visual: {
     buttonBackground: 'black',
     borderRadius: '6px',
 },
}

        

Tais exemplos de customização irão gerar o seguinte resultado:

cow-visual-wallet