Inicio
Documentación
Recursos
Certificaciones
Comunidad
Ocultar elemento - Personalizaciones visuales - Mercado Pago Developers

Búsqueda inteligente powered by OpenAI 

Ocultar elemento

Ve a continuación cómo ocultar elementos de Payment Brick.

Ocultar título

Client-Side

-Brick
Momento de personalizaciónAl renderizar el Brick
Propiedadcustomization.hideFormTitle
TipoBoolean
ObservacionesCuando true, oculta la línea de título.
          
const settings = {
   ...,
   customization: {
       visual: {
           hideFormTitle: true
       }
   }
}

        
          
const customization = {
 visual: {
   hideFormTitle: true
 }
};

        

Ocultar botón de pago

Client-Side

-Brick
Momento de personalizaciónAl renderizar el Brick
Propiedadcustomization.visual.hidePaymentButton
TipoBoolean
ObservacionesCuando true, el botón de envío del formulario no se muestra y pasa a ser necesario usar la función getFormData para obtener los datos del formulario (ver el ejemplo a continuación).
          
const settings = {
    ...,
    callbacks: {
        onReady: () => {
            // callback llamado cuando el Brick está listo
        },
        onError: (error) => { 
            // callback llamado para todos los casos de error de Brick
        },
    },
    customization: {
        visual: {
            hidePaymentButton: true
        }
    }
}

        
          
const customization = {
 visual: {
   hidePaymentButton: true
 }
};

        

Dado que el botón de pago predeterminado se ha ocultado, deberá agregar algún reemplazo. Los siguientes bloques de código ejemplifican cómo implementar su botón de pago personalizado.

html

<button type="button" onclick="createPayment();">Custom Payment Button</button>

Javascript

function createPayment(){
    window.paymentBrickController.getFormData()
        .then(({ formData }) => {
            console.log('formData received, creating payment...');
            fetch("/process_payment", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
            })
        })
        .catch((error) => {
            // manejo de errores al llamar getFormData()
        });
};

Ocultar panel de Cuenta de Mercado Pago

Client-Side

-Brick
Momento de personalizaciónAl renderizar el Brick
Propiedadcustomization.visual.hideRedirectionPanel
TipoBoolean
ObservacionesCuando true, oculta dentro de la opción de pago con la Billetera de Mercado Pago, el panel de redirección al sitio web de Mercado Pago.
          
const settings = {
   ...,
   customization: {
       visual: {
           hideRedirectionPanel: true
       }
   }
}

        
          
const customization = {
 visual: {
   hideRedirectionPanel: true
 }
};

        
Importante
Si necesita personalizar el estilo visual de Brick además de personalizar temas y variables personalizadas, le recomendamos que no utilizar como referencia o selector el valor de las clases e ID de CSS que son enviados con los Bricks, ya que se generan automáticamente durante el proceso de build de la aplicación y cambian regularmente. Utilice la herencia de elementos HTML para acceder a lo que necesita personalizar.