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',
}
};
Element | Type | Description | Available options |
theme | String | Defines the visual customization theme, determining the light or dark style. | default or black . Default is default |
valueProp | String | Specifies a value or characteristic represented in the style context, which can be interpretive. | 'practicality' |
customStyle | Object | Contains specific customizable style configurations, such as colors, dimensions, and spacing. | |
valuePropColor | String | Indicates 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. |
buttonHeight | String | Defines the height of the button or other element, determining its vertical size. | Minimum: 48px. Maximum: N/A Default is 48px. |
borderRadius | String | Defines the border radius, determining how curved the corners of the styled elements are. | Minimum: N/A Maximum: N/A Default is 6px |
verticalPadding | String | Specifies the vertical space (padding) (top and bottom) within an element. | Minimum: 8px. Maximum: N/A. Default is 8px. |
horizontalPadding | String | Specifies 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.
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',
}
};
Option | Value proposition | Observation |
practicality | Use saved cards or money in account | - |
security_details | All your data protected | - |
security_safety | Pay securely | Default value proposition |
smart_option | Automatic text | The text will be automatically chosen to increase sales possibilities according to the purchase characteristics. |
payment_methods_logos | Available payment method logos | The 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={() => {}}
/>
Callback | Description | When to use |
onReady | Callback called when the button is completely loaded. | Serves to hide loading times from your site, for example. |
onSubmit | Callback 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. |