Inicio
Documentação
Recursos
Parcerias
Comunidade

Parcerias

Conheça nosso programa para agĂȘncias ou desenvolvedores que oferecem serviços de integração e vendedores que desejam contratĂĄ-los.

Comunidade

Fique por dentro das Ășltimas novidades, peça ajuda a outros integradores e compartilhe seu conhecimento.

Ocultar elemento - CustomizaçÔes visuais - Mercado Pago Developers

Busca inteligente powered by OpenAI 

Ocultar elemento

Veja abaixo como ocultar elementos do Card Payment Brick.

Ocultar tĂ­tulo e bandeiras

Client-Side

BrickCard Payment Form
Momento de customizaçãoAo renderizar Brick
Propriedadecustomization.hideFormTitle
TipoBoolean
ObservaçÔesQuando true, oculta a linha de título e as bandeiras aceitas.
          
const settings = {
   ...,
   customization: {
       visual: {
           hideFormTitle: true
       }
   }
}

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

        

Ocultar botĂŁo de pagamento

Client-Side

BrickCard Payment Form
Momento de customizaçãoAo renderizar Brick
Propriedadecustomization.visual.hidePaymentButton
TipoBoolean
ObservaçÔesQuando true não mostra o botão de enviar o formulårio e passa a ser necessårio utilizar a função getFormData para obter os dados do formulårio (veja exemplo abaixo).
          
const settings = {
    ...,
    callbacks: {
        onReady: () => {
            // callback chamado quando o Brick estiver pronto
        },
        onError: (error) => { 
            // callback chamado para todos os casos de erro do Brick
        },
    },
    customization: {
        visual: {
            hidePaymentButton: true
        }
    }
}

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

        

Visto que o botão de pagamento padrão foi oculto, serå necessårio adicionar alguma substituição. Os blocos de código a seguir exemplificam como implementar seu botão de pagamento customizado.

html

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

Javascript

function createPayment(){
    window.cardPaymentBrickController.getFormData()
        .then((cardFormData) => {
            console.log('cardFormData received, creating payment...');
            fetch("/process_payment", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(cardFormData),
            })
        })
        .catch((error) => {
            // tratamento de erros ao chamar getFormData()
        });
};
Importante
Caso precise customizar o estilo visual do Brick para alĂ©m das customizaçÔes de temas e variĂĄveis customizadas, recomendamos que nĂŁo utilize as classes e ids CSS que sĂŁo enviadas com os Bricks como referĂȘncia, visto que sĂŁo gerados automaticamente durante o processo de build da aplicação e mudam regularmente. Utilize a herança dos elementos HTML para acessar os elementos que necessitar customizar.