Card Payment - Checkout Bricks - Mercado Pago Developers

Card Payment Brick

O Card Payment Brick oferece um formulário de pagamento com um layout otimizado e temas diferentes, trazendo todos os campos necessários para se efetuar um pagamento através de cartão de crédito e/ou débito, e inclui os mecanismos necessários para receber automaticamente os dados necessários para criar o pagamento no back-end.

Este Brick, além de conter os campos de coleta dos dados pessoais do titular do cartão (nome do titular e documento), conta também com campos de coleta do número do cartão, data de vencimento e código de segurança (CVV) que já estão em conformidade com padrões de segurança PCI, eliminando a necessidade de tratamento desses dados.

Além de coletar os campos necessários para efetuar o pagamento, este componente ainda auxilia o usuário a finalizar o preenchimento da tela com alertas de campos incompletos e possíveis erros no preenchimento. Veja a seguir as principais caracteristicas deste Brick.

Experimente nosso Brick

Construa e confira a experiência visual do Card Payment Brick em tempo real. Quando estiver tudo pronto, baixe ou copie o código gerado.

Element for view
Demo

Layout

O layout do Card 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.
ElementoCaracterísticasObservações
Título e bandeiras aceitas

Propriedade: formTitle
Valor (título): Cartão de crédito ou débito
Label N/A
Placeholder: N/A
Tipo: text/imagem
Formato: N/A
Máx caracteres: N/A
Opcional
Customizável
*As bandeiras são exibidas em conjunto com o título. A única customização disponível para elas é ocultá-las junto ao título do formulário, deixando de exibir ambas informações.
Campo 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)
Campo 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)
Campo 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)
Campo para inserção do nome do titular do cartão

Propriedade: cardholderName
Valor: N/A
Label: Documento
Placeholder: N/A
Tipo: select
Formato: N/A
Máx. caracteres: N/A
Obrigatório

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

Propriedade: cardholderIdentificationType
Valor: RUT, 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.
Campo 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
Campo para inserção do email do comprador

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

*Se os dados foram fornecidos e salvos anteriormente, este elemento se torna opcional.
Botão de pagamento

Propriedade: formSubmit
Valor: [imagem] Pagar
Label: N/A
Placeholder: N/A
Tipo: text
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.