Home
Documentation
Resources
Partners
Community

Partners

Discover our program for agencies or developers that offer integration services and sellers who want to hire them.

Community

Get the latest news, ask others for help and share your knowledge.

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
 }
};