Representación de una tarjeta bancaria. Solo recibe los cuatro últimos dígitos (si llega un número completo, se queda con esos cuatro), así que el componente nunca muestra ni guarda el número entero. Para el lector de pantalla es una sola imagen con un nombre que lo dice todo. La red (Nexo es ficticia) va como texto o como logo que aporta el consumidor.
Angular
Vue
débito Activa•••• 4821Ana PérezCaduca 08/28Nexo
<flt-payment-card last4="4821" holder="Ana Pérez" expiry="2028-08" kind="debit" network="Nexo" />
<!-- Con logo de la red, aportado por el consumidor -->
<flt-payment-card last4="4821" network="Nexo">
<img fltPaymentCardNetwork src="nexo.svg" alt="" />
</flt-payment-card>
<FltPaymentCard last4="4821" holder="Ana Pérez" expiry="2028-08" kind="debit" network="Nexo" />
<!-- Con logo de la red, aportado por el consumidor -->
<FltPaymentCard last4="4821" network="Nexo">
<template #network><img src="nexo.svg" alt="" /></template>
</FltPaymentCard>
Estados
Activa, congelada, caducada, cancelada y pendiente de activación. Congelada, caducada y cancelada pasan a gris, pero el estado siempre va escrito y con icono, nunca solo con el color.