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 en tiempo real. Cuando esté todo listo, descarga o copia el código generado para agregarlo a tu sitio web o compartirlo con un desarrollador.
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.
| Elemento | Características | Observaciones |
| 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. |