Configure the payment button appearance - Additional settings - Mercado Pago Developers

Configure the payment button appearance

The Mercado Pago payment button is composed of the banner's textual content and the value proposition. You can customize the appearance of the Mercado Pago payment button to adapt it to your website. Below, learn about the different customizations you can apply.

Change the button appearance

You can modify the button's background color, the value proposition color, and the color of the images inside the payment button. If the sent property is empty, the screen will show the default design.

In the following code example, you will find the customization object, where you should complete the optional configurations of type string. Find the parameter details in the table we show below.

const settings = {
    ...,
    customization: {
        theme:'dark',
        valueProp: 'practicality',
        customStyle: {
            valuePropColor: 'black',
            buttonHeight: '48px',
            borderRadius: '10px',
            verticalPadding: '10px',
            horizontalPadding: '10px',
        }
    }
}
const customization = {
    theme:'dark',
    valueProp: 'practicality',
    customStyle: {
            valuePropColor: 'black',
            buttonHeight: '48px',
            borderRadius: '10px',
            verticalPadding: '10px',
            horizontalPadding: '10px',
    }
};
ElementTypeDescriptionAvailable options
themeStringDefines the visual customization theme, determining the light or dark style.default or black. Default is default
valuePropStringSpecifies a value or characteristic represented in the style context, which can be interpretive.'practicality'
customStyleObjectContains specific customizable style configurations, such as colors, dimensions, and spacing.
valuePropColorStringIndicates the color associated with the valueProp value, used for the presentation style.If the theme is default, valuePropColor can be blue or white. If the theme is dark, valuePropColor can be black. For the default theme, default is blue, while for the dark theme, default is black.
buttonHeightStringDefines the height of the button or other element, determining its vertical size.Minimum: 48px. Maximum: N/A Default is 48px.
borderRadiusStringDefines the border radius, determining how curved the corners of the styled elements are.Minimum: N/A Maximum: N/A Default is 6px
verticalPaddingStringSpecifies the vertical space (padding) (top and bottom) within an element.Minimum: 8px. Maximum: N/A. Default is 8px.
horizontalPaddingStringSpecifies the horizontal space (padding) (left and right) within an element.Minimum: 0px. Maximum: N/A. Default is 0x

Change the button's value proposition

You can modify the value proposition that is displayed below the button and customize it with the message that best fits your store's needs. To do this, replace the string of the valueProp parameter.

wallet-actioncomplement

In the following example, we share the customization object where the valueProp string is included, with which you can customize the value proposition. If no value is specified, the text security_safety will be displayed by default. Below, in the table, review all possible texts for the value proposition content.

const settings = {
    ...,
    customization: {
        theme: 'default',
        customStyle: {
            valueProp: 'practicality',
        }
    }
}
const customization = {
    theme: 'default',
    customStyle: {
        valueProp: 'practicality',
    }
};
OptionValue propositionObservation
practicalityUse saved cards or money in account-
security_detailsAll your data protected-
security_safetyPay securelyDefault value proposition
smart_optionAutomatic textThe text will be automatically chosen to increase sales possibilities according to the purchase characteristics.
payment_methods_logosAvailable payment method logosThe logos of available payment methods configured in the payment preference will be displayed. In case the preference has only one valid payment method, it will stop showing images and show the text: "With available money".

Hide the value proposition

You can hide the value proposition text by configuring the boolean hideValieProp as true. The default value is false, so by default a value proposition will always be displayed.

const settings = {
    ...,
    customization: {
	   theme: 'default',
        customStyle: {
            hideValueProp: true,
        }
    }
}
const settings = {
    ...,
    customization: {
	   theme: 'default',
        customStyle: {
            hideValueProp: true,
        }
    }
}

Auxiliary callbacks

You can use auxiliary callbacks, which are functions that are automatically executed at specific moments during the payment flow, to offer more transparency. Below, see an example of how to integrate them into your integration.

Below, see an example of how to integrate them into your integration and learn the details in the table.

mp.bricks().create("wallet", "wallet_container", {
   initialization: {
       preferenceId: "<PREFERENCE_ID>",
       redirectMode: "self",
   },
   callbacks: {
       onReady: () => {},
       onSubmit: () => {},
       onError: (error) => console.error(error),
     },
});
<Wallet
  initialization={{ preferenceId: '<PREFERENCE_ID>', redirectMode: 'self' }}
  onReady={() => {}}
  onError={() => {}}
  onSubmit={() => {}}
/>
CallbackDescriptionWhen to use
onReadyCallback called when the button is completely loaded.Serves to hide loading times from your site, for example.
onSubmitCallback called when clicking the button.It is used to indicate to the user that the flow must be completed in another tab, for example. It can be used in redirect mode.