Cambiar textos de los botones
Client-Side
El botón de pago está compuesto por el botón y la propuesta de valor (valueProp), que puede ser personalizada de acuerdo con las opciones disponibles en Mercado Pago.
Hay dos temas disponibles: el default (también utilizado cuando no se especifica ninguna configuración) y el dark. La elección del tema impacta el color de fondo del botón, de la propuesta de valor y el color de las imágenes dentro del botón.
En caso de que no se haya especificado la propuesta de valor, por defecto será security_safety. A continuación, revisa todos los textos posibles para el contenido de la propuesta de valor:
| Opción | Texto |
| practicality | Usa tarjetas guardadas o dinero en cuenta |
| convenience_all | Meses con tarjeta o Meses sin Tarjeta de Mercado Pago |
| security_details | Todos tus datos protegidos |
| security_safety (por defecto) | Paga de forma segura |
| smart_option | El texto será elegido automáticamente por Wallet Brick para aumentar las posibilidades de venta según las características de la compra. |
| convenience_credits | Hasta 12 Meses sin Tarjeta Para utilizar la value prop de convenience_credits, es necesario que el Brick se inicialice con una preferencia y que la preferencia tenga el propósito de onboarding_credits. |
| payment_methods_logos | Se mostrarán los logotipos de los métodos de pago disponibles. Para configurar los métodos de pago, utilice la preference. Se recomienda la inicialización con una preferencia en el uso de la Value Prop payment_methods_logos. 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". |
const settings = {
...,
customization: {
theme: 'default',
customStyle: {
valueProp: 'practicality',
}
}
}
const customization = {
theme: 'default',
customStyle: {
valueProp: 'practicality',
}
};
| Clave | Opción | Texto |
| action | pay | Paga con Mercado Pago |
| action | buy | Compra con Mercado Pago |
| valueProp | practicality | Utilice las tarjetas guardadas o el saldo de su cuenta |
| valueProp | convenience | Cuota con o sin tarjeta |
| valueProp | security_details | Protección para sus datos |
| valueProp | security_safety | Pague de forma segura |
| valueProp | none | - |
Ejemplo de personalización de textos de botones:
const settings = {
...,
customization: {
texts: {
action: 'buy',
valueProp: 'security_details',
},
},
}
const customization = {
texts: {
action: 'buy',
valueProp: 'security_details',
},
}
Estos ejemplos de personalización generarán el resultado siguiente:
