Change button appearance - User interface - Mercado Pago Developers
Which documentation are you looking for?

Do not know how to start integrating? 

Check the first steps

Change button appearance


It is possible to customize the look of the payment button by defining visual properties with alternative values to the default ones. By default, the payment button renders as in the following image.


To change the default texts, modify the customization property during rendering.

Customization momentWhen rendering.
ObservationsWhen sending an empty property, the screen will present the value defined by the default layout. On the other hand, when sending alternative text, it will replace the default text. To check which alternative texts are available, see the table below.

Check below for the visuals available to change and a code example.

KeyAvailable optionsDefaultObservations
buttonBackgrounddefault, black, blue, whitedefault-
buttonHeight-48pxMínimo: 48px.
Maximum: free choice.
valuePropColorgrey, whitegrey-
verticalPadding-16pxMínimo: 8px.
Maximum: free choice.
horizontalPadding-0pxMínimo: 0px.
Maximum: free choice.
const settings = {
 customization: {
      visual: {
          buttonBackground: 'black',
          borderRadius: '16px',

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


Such customization examples will generate the following result: