Configurar la apariencia del botón de pago - Configuraciones adicionales - Mercado Pago Developers

Configurar la apariencia del botón de pago

El botón de pago de Mercado Pago está compuesto por el contenido textual del banner y la propuesta de valor. Puedes personalizar la apariencia del botón de pago de Mercado Pago para adaptarlo a tu sitio web. A continuación, conoce las diferentes personalizaciones que puedes aplicar.

Cambiar la apariencia del botón

Puedes modificar el color de fondo del botón, de la propuesta de valor y el color de las imágenes dentro del botón de pago. Si la propiedad enviada está vacía, la pantalla mostrará el diseño predeterminado.

En el siguiente ejemplo de código encontrarás el objeto customization, en donde deberás completar las configuraciones opcionales de tipo string. Encuentra los detalles de los parámetros en la tabla que mostramos a continuación.

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

Elemento	Tipo	Descripción	Opciones disponibles
`theme`	String	Define el tema de personalización visual, determinando el estilo claro u oscuro.	`default` o `black`. Por defecto es `default`
`valueProp`	String	Especifica un valor o característica representada en el contexto del estilo, que puede ser interpretativo.	'practicality'
`customStyle`	Objeto	Contiene configuraciones específicas de estilo personalizable, como colores, dimensiones y espaciados.
`valuePropColor`	String	Indica el color asociado al valor de valueProp, usado para el estilo de presentación.	Si el tema es default, valuePropColor puede ser blue o white. Si el tema es dark, valuePropColor puede ser black. Para el tema default, por defecto es blue, mientras que para el tema dark, por defecto es black.
`buttonHeight`	String	Define la altura del botón u otro elemento, determinando su tamaño vertical.	Mínimo: 48px. Máximo: N/A Por defecto es 48px.
`borderRadius`	String	Define el radio de los bordes, determinando cuán curvados son los esquinas de los elementos estilizados.	Mínimo: N/A Máximo: N/A Por defecto es 6px
`verticalPadding`	String	Especifica el espacio (padding) vertical (superior e inferior) dentro de un elemento.	Mínimo: 8px. Máximo: N/A. Por defecto es 8px.
`horizontalPadding`	String	Especifica el espacio (padding) horizontal (izquierdo y derecho) dentro de un elemento.	Mínimo: 0px. Máximo: N/A. Por defecto es 0x

Cambiar la propuesta de valor del botón

Puedes modificar la propuesta de valor que se muestra debajo del botón y personalizarla por el mensaje que se ajuste mejor a las necesidades de tu tienda. Para eso, reemplaza el string del parámetro valueProp.

wallet-actioncomplement

En el siguiente ejemplo te compartimos el objeto customization en donde se incluye el string valueProp, con el que puedes personalizar la propuesta de valor. Si no se especifica un valor, se mostrará por defecto el texto security_safety. A continuación, en la tabla, revisa todos los textos posibles para el contenido de la propuesta de valor.

const settings = {
    ...,
    customization: {
        theme: 'default',
        customStyle: {
            valueProp: 'practicality',
        }
    }
}

const customization = {
    theme: 'default',
    customStyle: {
        valueProp: 'practicality',
    }
};

Opción	Propuesta de valor	Observación
`practicality`	Usa tarjetas guardadas o dinero en cuenta	-
`security_details`	Todos tus datos protegidos	-
`security_safety`	Paga de forma segura	Propuesta de valor por defecto
`smart_option`	Texto automático	El texto será elegido automáticamente para aumentar las posibilidades de venta según las características de la compra.
`payment_methods_logos`	Logotipos de métodos de pago disponibles	Se mostrarán los logotipos de los métodos de pago disponibles configurados en la preferencia de pago. En caso de que la preferencia tenga solo un método de pago válido, dejará de mostrar imágenes y mostrará el texto: "Con dinero disponible".

Ocultar la propuesta de valor

Puedes ocultar el texto de la propuesta de valor configurando el boolean hideValieProp como true. El valor predeterminado es false, por lo que por defecto siempre se mostrará una propuesta de valor.

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

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

Callbacks auxiliares

Puedes utilizar los callbacks auxiliares, que son funciones que se ejecutan automáticamente en momentos específicos durante el flujo de pago, para ofrecer más transparencia. A continuación, ve un ejemplo de cómo integrarlos en tu integración.

A continuación, ve un ejemplo de cómo integrarlos en tu integración y conoce los detalles en la tabla.

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	Descripción	Cuando usar
`onReady`	Callback llamado cuando el botón está completamente cargado.	Sirve para ocultar los tiempos de carga de tu sitio, por ejemplo.
`onSubmit`	Callback llamado al hacer clic en el botón.	Se usa para indicarle al usuario que el flujo debe completarse en otra pestaña, por ejemplo. Puede usarse en el modo redirect.