Home
Documentation
Resources
Partners
Community

Partners

Discover our program for agencies or developers that offer integration services and sellers who want to hire them.

Community

Get the latest news, ask others for help and share your knowledge.

Hide element - Visual customizations - Mercado Pago Developers
Which documentation are you looking for?

Do not know how to start integrating? 

Check the first steps

Hide element

See below how to hide Payment Brick elements.

Hide title

Client-Side

-Brick
Customization momentWhen rendering the Brick
Propertycustomization.hideFormTitle
TypeBoolean
CommentsWhen true, hides the title line.
          
const settings = {
   ...,
   customization: {
       visual: {
           hideFormTitle: true
       }
   }
}

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

        

Hide payment button

Client-Side

-Brick
Customization momentWhen rendering the Brick
Propertycustomization.visual.hidePaymentButton
TypeBoolean
CommentsWhen true, the form submit button is not displayed and it becomes necessary to use the getFormData function to get the form data (see example below).
          
const settings = {
    ...,
    callbacks: {
        onReady: () => {
            // callback called when brick is ready
        },
        onError: (error) => { 
            // callback called for all Brick error cases
        },
    },
    customization: {
        visual: {
            hidePaymentButton: true
        }
    }
}

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

        

Since the default payment button has been hidden, you will need to add some replacement. The following code blocks exemplify how to implement your custom payment button.

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) => {
            // error handling when calling getFormData()
        });
};

Hide Mercado Pago Wallet panel

Client-Side

-Brick
Customization momentWhen rendering the Brick
Propertycustomization.visual.hideRedirectionPanel
TypeBoolean
CommentsWhen true, hides within the payment option with the Mercado Pago Wallet, the redirection panel to the Mercado Pago website.
          
const settings = {
   ...,
   customization: {
       visual: {
           hideRedirectionPanel: true
       }
   }
}

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

        
Important
In case you need to customize the Brick’s visual style beyond the available themes and custom variables, avoid using the CSS ids and classes values that are bundled with the Bricks as reference, because they are automatically generated during the application’s build process and their names change regularly. Instead, use HTML inheritance to access the elements you need to customize.