Home
Documentation
Resources
Certifications
Community
Change appearance - Visual customizations - Mercado Pago Developers
Which documentation are you looking for?

Do not know how to start integrating? 

Check the first steps

Change appearance

Client-Side

Style properties

-Description
Customization momentWhen rendering the Brick
Propertycustomization.visual.{buttonBackground, buttonHeight, borderRadius, valuePropColor, verticalPadding, horizontalPadding}
TypeString
CommentsWhen sending an empty property, the screen will present the appearance defined by the default layout shown after the rendering of the Brick. On the other hand, when you submit a alternative value, it will replace the default value. To check what the default values are, check out the table below.
KeyAvailable optionsDefaultComments
buttonBackgrounddefault, black, blue, whitedefault-
buttonHeight-48pxMinimum: 48px.
Maximum: free choice.
borderRadius-6px-
valuePropColorgrey, whitegrey-
verticalPadding-16pxMinimum: 16px.
Maximum: free choice.
horizontalPadding-0pxMinimum: 0px.
Maximum: free choice.
          
const settings = {
    ...,
    customization: {
         visual: {
             buttonBackground: 'black',
             borderRadius: '16px',
         },
    },
}

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


        

Hide value proposition text

-Description
Customization momentWhen rendering the Brick
Propertycustomization.visual.hideValueProp
TypeBoolean
CommentsWhen true, hides the value proposition text (below the button).
          
const settings = {
    ...,
    customization: {
         visual: {
             hideValueProp: true
         },
    },
}

        
          
const customization = {
 visual: {
   hideValueProp: true
 }
};