Payment - Checkout Bricks - Mercado Pago Developers

Payment Brick

O Payment Brick é uma solução modular e personalizável que permite adicionar vários métodos de pagamento à sua loja com apenas um Brick, permitindo que você salve os dados do cartão para compras futuras. Ao utilizar o Payment Brick, você terá diferentes métodos de pagamento à sua disposição e poderá escolher quais habilitar para o seu site.

Por enquanto, você pode dar aos seus clientes a possibilidade de fazer pagamentos por meio de cartões de débito e crédito ou utilizar a Conta Mercado Pago. A curto prazo, adicionaremos a possibilidade de que, usando este mesmo Brick, você também possa permitir que eles façam pagamentos em dinheiro.

A possibilidade de guardar os dados dos cartões que já foram debitados em compras anteriores torna o processo de pagamento mais eficiente e rápido. Para o comprador, não é mais necessário recarregar os dados cada vez que entrar no checkout.

payment-brick-layout-all

Por sua vez, nosso processador cumpre todas as garantias de segurança para oferecer aos usuários a máxima proteção ao salvar seus dados. Essa é uma das grandes vantagens de adicionar o Checkout Bricks ao seu site: a tranquilidade de oferecer uma solução segura, respaldada pelo Mercado Pago, mas customizada para as necessidades da sua empresa.

Layout

O layout do Payment Brick foi construído com base nas melhores práticas de UX para que seja possível entregar ao comprador a melhor experiência sem que você precise se preocupar com detalhes de design. O layout traz os elementos detalhados abaixo.

Atenção
Os Bricks foram criados para atender não somente necessidades técnicas de implementação e segurança, mas também para prover a melhor experiência ao comprador. Customizar um Brick pode mudar drasticamente a experiência do comprador. Nossa recomendação é que você sempre faça uso do Brick com a menor quantidade possível de customizações adicionais para garantir sempre a melhor experiência.

Campos dos formulários

SeçãoElementoCaracterísticasObservações
Container das opções de pagamentoTítulo

Propriedade: formTitle
Valor (título): Cartão de crédito ou débito
Label: N/A
Placeholder: N/A
Tipo: string
Formato: N/A
Máx caracteres: N/A
Opcional
Customizável
Container das opções de pagamentoBotão de pagamento

Propriedade: formSubmit
Valor: [imagem] Pagar
Label: N/A
Placeholder: N/A
Tipo: string
callback: onSubmit
função: promise(cardFormData)
Opcional
Ocultável e customizável

*A função recebe os dados do formulário, incluindo o token do cartão e apresenta animação de carregamento.
Formulário do pagamento com cartãoCampo para inserção do número do cartão

Propriedade: cardNumber
Valor: N/A
Label: Número do cartão
Placeholder: 1234 1234 1234 1234
Tipo: number
Formato: N/A
Máx. caracteres: a depender do emissor, podendo variar entre 15 e 16.
Obrigatório
Customizável (label, placeholder)
Formulário do pagamento com cartãoCampo para inserção da data de vencimento do cartão

Propriedade: expirationDate
Valor: N/A
Label: Data de vencimento
Placeholder: MM/AA
Tipo: date
Formato: MM/AA
Máx. caracteres: 5
Obrigatório
Customizável (label, placeholder)
Formulário do pagamento com cartãoCampo para inserção do código de segurança

Propriedade: securityCode
Valor: N/A
Label: Nome do titular como aparece no cartão
Placeholder: João Silva
Tipo: string
Formato: N/A
Máx. caracteres: 100
Obrigatório
Customizável (label, placeholder e máximo de caracteres errados)
Formulário do pagamento com cartãoCampo para inserção do nome do titular do cartão

Propriedade: cardholderName
Valor: N/A
Label: Nome do titular como aparece no cartão
Placeholder: Ex.: João Silva
Tipo: select
Formato: N/A
Máx. caracteres: N/A
Obrigatório

Customizável (label, placeholder, tipo, formato e máximo de caracteres errados)
Formulário do pagamento com cartãoCampo para seleção do documento do titular do cartão

Propriedade: cardholderIdentificationType
Valor: CC, CE, NIT, Otro
Label: Documento
Placeholder: N/A
Tipo: select
Formato: N/A
Máx. caracteres: N/A
Obrigatório*
Customizável (label, placeholder)

*Se os dados de tipo de documento e número de documento foram fornecidos e salvos anteriormente, este elemento se torna opcional.
Formulário do pagamento com cartãoCampo para inserção do número do documento do titular do cartão

Propriedade: cardholderIdentificationNumber
Valor: N/A
Label: N/A
Placeholder: N/A.
Tipo: number
Formato: N/A
Máx. caracteres: N/A
Obrigatório
Não customizável
Formulário do pagamento com cartãoCampo para inserção do email do comprador

Propriedade: email
Valor: N/A
Label: Email
Placeholder: Ex.: joaosilva@email.com
Tipo: string
Formato: padrão de e-mail convencional (exemplo@email.com)
Máx. caracteres: N/A
Obrigatório*
Customizável (label, placeholder)

*Se os dados foram fornecidos e salvos anteriormente, este elemento se torna opcional.