Payment - Checkout Bricks - Mercado Pago Developers

Payment Brick

Payment Brick es una solución modular y personalizable que permite agregar varios medios de pago a tu tienda con solamente un Brick, permitiendo guardar los datos de tarjetas para compras futuras. Al utilizar Payment Brick, tendrás a tu disposición diferentes medios de pago y podrás elegir cuáles habilitar para tu sitio.

Por el momento, podrás darle a tus clientes la posibilidad de hacer pagos a través de tarjetas de débito y crédito o utilizar la Cuenta de Mercado Pago. En el corto plazo sumaremos la posibilidad de que, usando este mismo Brick, puedas permitirle también realizar pagos en efectivo.

La posibilidad de guardar los datos de tarjetas que ya fueron cargadas en compras anteriores, hace que el proceso de pago sea más eficiente y rápido. Para el comprador ya no es necesario tener que volver a cargar los datos cada vez que ingrese al checkout.

payment-Brick-layout-all

A su vez, nuestro procesador cumple con todas las garantías de seguridad para darle a los usuarios la máxima protección al guardar sus datos. Esa es una de las grandes ventajas de sumar Checkout Bricks a su sitio: la tranquilidad de brindar una solución segura, con el respaldo de Mercado Pago, pero personalizado a las necesidades de su empresa.

Layout

El layout de Payment Brick se basa en las mejores prácticas UX para que sea posible ofrecer al comprador la mejor experiencia sin que debas preocuparte por detalles de diseño. Presenta los elementos detallados 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.

Campos de los formularios

SecciónElementoCaracterísticasObservaciones
Container de opciones de pagoTítulo

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
Container de opciones de pagoBotó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.
Formulario de pago con tarjetaCampo 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)
Formulario de pago con tarjetaCampo 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)
Formulario de pago con tarjetaCampo 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)
Formulario de pago con tarjetaCampo 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.)
Formulario de pago con tarjetaCampo para seleccionar el documento del titular de la tarjeta

Propiedad: cardholderIdentificationType
Valor: CI, 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.
Formulario de pago con tarjetaCampo 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
Formulario de pago con tarjetaCampo 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: N/A
Obligatorio*
Personalizable (label, placeholder)

*Si los datos se proporcionaron y guardaron previamente, este elemento se vuelve opcional.