Card Payment - Checkout Bricks - Mercado Pago Developers

Card Payment Brick

Card Payment Brick ofrece un formulario de pago con un diseño optimizado y diferentes temas, trayendo todos los campos necesarios para realizar un pago con tarjeta de crédito y/o débito, e incluye los mecanismos necesarios para recibir automáticamente los datos necesarios para crear el pago en el back-end.

Este Brick, además de contener los campos para recolectar los datos personales del titular de la tarjeta (nombre del titular y documento), también tiene campos para recolectar el número de tarjeta, la fecha de vencimiento y el código de seguridad (CVV), que ya cumplen con los estándares de seguridad PCI, eliminando la necesidad de procesar estos datos.

Además de recopilar los campos necesarios para realizar el pago, este componente también ayuda al usuario a terminar de completar la pantalla con alertas de campos incompletos y posibles errores en el llenado. Ve a continuación las principales características de este Brick.

Prueba nuestro Brick

Construye y comprueba la experiencia visual de Card Payment Brick en tiempo real. Cuando esté todo listo, descarga o copia el código generado.

Element for view
Demo

Layout

El layout de Card Payment Brick se basa en las mejores prácticas de UX para que sea posible ofrecer la mejor experiencia de compra sin que debas preocuparte por detalles de diseño. El layout presenta los elementos que se detallan a continuación.

Atención
Los Bricks se crearon no solo para satisfacer las necesidades técnicas de implementación y seguridad, sino también para brindar la mejor experiencia al comprador. La personalización de un Brick puede cambiar drásticamente la experiencia del comprador. Nuestra recomendación es que siempre hagas uso del Brick con la menor personalización adicional posible para garantizar siempre la mejor experiencia.
ElementoCaracterísticasObservaciones
Título y banderas aceptados

Propiedad: formTitle
Valor (título): Tarjeta de crédito o débito
Label: N/A
Placeholder: N/A
Tipo: text/imagen
Formato: N/A
Máx. caracteres: N/A
Opcional
Personalizable*

*Las banderas se muestran junto con el título. La única personalización disponible para ellos es ocultarlos junto al título del formulario, dejando de mostrar esa información.
Campo para ingresar el número de tarjeta

Propiedad: cardNumber
Valor: N/A
Label: Número de tarjeta
Placeholder: 1234 1234 1234 1234
Tipo: number
Formato: N/A
Máx. caracteres: dependiendo del emisor, pudiendo variar entre 15 y 16.
Obligatorio
personalizable (label, placeholder)
Campo para ingresar la fecha de vencimiento de la tarjeta

Propiedad: expirationDate
Valor: N/A
Label: Fecha de vencimiento
Placeholder: MM/AA
Tipo: date
Formato: MM/AA
Máx. caracteres: 5
Obligatorio
personalizable (label, placeholder y máximo de caracteres incorrectos)
Campo para ingresar el código de seguridad

Propiedad: securityCode
Valor: N/A
Label: Código de seguridad
Placeholder: 1234
Tipo: integer
Formato: N/A
Máx. caracteres: 4
Obligatorio
personalizable (label, placeholder)
Campo para ingresar el nombre del titular de la tarjeta

Propiedad: cardholderName
Valor: N/A
Label: Nombre del titular tal y como aparece en la tarjeta
Placeholder: João Silva
Tipo: string
Formato: N/A
Máx. caracteres: 100
Obligatorio

personalizable (label, placeholder, tipo, formato y máximo de caracteres incorrectos.)
Campo para seleccionar el documento del titular de la tarjeta

Propiedad: cardholderIdentificationType
Valor: CC, CE, NIT, Otro
Label: Documento
Placeholder: N/A
Tipo: select
Formato: N/A
Máx. caracteres: N/A
Obligatorio*
Personalizable (label, placeholder)

*Si los datos de tipo y número de documento se proporcionaron y guardaron previamente, este elemento se vuelve opcional.
Campo para ingresar el número de documento del titular de la tarjeta

Propiedad: cardholderIdentificationNumber
Valor: N/A
Label: N/A
Placeholder: N/A.
Tipo: number
Formato: N/A
Máx. caracteres: N/A
Obligatorio
no personalizable
Campo para ingresar el correo electrónico del comprador
Propiedad: email
Valor: N/A
Label: Email
Placeholder: joaosilva@email.com
Tipo: string
Formato: formato de e-mail convencional (ejemplo@email.com) Máx. caracteres: X
Obligatorio*
personalizable (label, placeholder)

*Si los datos se proporcionaron y guardaron previamente, este elemento se vuelve opcional.
Botón de pago
Propiedad: formSubmit
Valor: [imagen] Pagar
Label: N/A Placeholder: N/A
Tipo: text
callback: onSubmit
função: promise(cardFormData)
Opcional
Ocultable y personalizable

*La función recibe los datos del formulario, incluido el token de la tarjeta, y presenta una animación de carga.