Tipo de tarjeta de crédito con detección automática: estándares web Sherpa

Tipo de tarjeta de crédito con detección automática: estándares web Sherpa
Author:
13 enero, 2021

Hubo un momento en que la gente pensaba que Internet requería un método de pago completamente diferente al del mundo real. Después de un período de tiempo muy corto, todos se dieron cuenta de que las tarjetas de crédito se adaptaban bastante bien a la web, y así nació el formulario de tarjeta de crédito. Probablemente haya visto este formulario con frecuencia y siempre con los mismos campos:

  1. Tu nombre
  2. Tipo de tarjeta de crédito
  3. Número de tarjeta de crédito
  4. Fecha de caducidad

Recientemente, me encontré con varios sitios que han eliminado el campo de tipo de tarjeta de crédito. Tanto Amazon como GitHub no requieren que selecciones un tipo de tarjeta de crédito en su formulario. A medida que ingresa el número de la tarjeta de crédito, la interfaz de usuario cambia para mostrar el tipo de tarjeta de crédito que se está utilizando.

Amazon espera hasta que se ingresa el número completo de la tarjeta de crédito y luego muestra un ícono que representa el tipo de tarjeta de crédito.

Detección de tarjetas de crédito de Amazon

GitHub actualiza la interfaz un poco más rápido, esperando hasta que tenga suficiente información para averiguar el tipo de tarjeta de crédito. Inicialmente, se muestran varios iconos de tarjetas de crédito. Una vez que se determina el tipo de tarjeta de crédito real, todos los iconos desaparecen excepto el que representa el tipo de tarjeta de crédito.

Detección de tarjetas de crédito de GitHub

Esta detección de tipo de tarjeta de crédito es una buena adición al formulario de pago estándar porque libera al usuario de ingresar información que en realidad es redundante. Es trivial determinar el tipo de tarjeta de crédito que se utiliza una vez que comprende cómo funcionan los números de tarjeta de crédito.

¿Qué hay en un número de tarjeta de crédito?

A pesar de parecer algo aleatorio, los números de tarjetas de crédito en realidad se rigen por convenciones estrictas. Existe una norma llamada ISO / IEC 7812 que especifica el formato de los números de identificación en las tarjetas de crédito, así como otros números de identificación basados ​​en tarjetas. El número de identificación completo se divide en tres partes:

  1. Número de identificación de emisor (IIN). El IIN son los primeros cuatro a seis dígitos del número de identificación general y representa a la empresa que emitió la tarjeta. En el caso de las tarjetas de crédito, el IIN representa al banco emisor.
  2. Número de cuenta. Los siguientes números son su número de identificación personal. Para tarjetas de crédito, este es su número de cuenta.
  3. Comprobar dígito. El último dígito se utiliza para verificar la validez general del número de identificación. Los cálculos se utilizan con los números anteriores para determinar que el formato del número es correcto.

Considere el número de muestra de MasterCard 5555-5555-5555-4444 (no se preocupe, todos los bancos tienen números de tarjeta de crédito de muestra que puede utilizar para realizar pruebas). Los primeros cuatro dígitos, 5555, son el IIN que representa el banco falso que emite la MasterCard. Los números 5555-5555-444 son el número de cuenta individual y el último 4 es el dígito de control.

Detectar el tipo de tarjeta de crédito

Lo interesante del IIN es que también determina el tipo de tarjeta de crédito. A continuación, se muestran algunos patrones de IIN comunes:

  • Los IIN de MasterCard tienen los dos primeros dígitos en el rango 51-55
  • Los IIN de Visa siempre comienzan con un 4
  • Los IIN de American Expression siempre comienzan con 34 o 37

Sabiendo esto, es posible escribir una función de JavaScript simple para determinar el tipo de tarjeta de crédito dado un número de cuenta.

Esta función hace un uso extensivo de expresiones regulares para verificar el tipo de tarjeta de crédito. El argumento accountNumber debe ser una cadena (igual que el valor del campo de entrada de texto que evaluará). Puede usar getCreditCardType () de esta manera:

Tenga en cuenta que la función getCreditCardType () mira solo los primeros dígitos, por lo que funciona tanto cuando hay guiones en el número de cuenta como cuando no los hay.

Lo único que queda por hacer es vincular esta funcionalidad en un formulario. Para hacerlo, escuche los eventos de activación y desenfoque. Necesita escuchar ambos porque los usuarios escribirán su número de tarjeta de crédito o lo pegarán. En el último caso, el teclado nunca se activará y no obtendrá la detección de la tarjeta de crédito.

Este código asume que existe un cuadro de texto con un ID de cc-num en la página. Usando el método addEventListener () de DOM Nivel 2, un controlador de eventos DOMContentLoaded configura el resto de los controladores de eventos para la página. En una aplicación web completa, incluiría este código siempre que inicialice otros controladores de eventos. Los eventos keyup y blur se asignan para llamar a handleEvent (). Dentro de handleEvent (), el valor actual del cuadro de texto se recupera a través de event.target.value y se pasa a la función getCreditCardType (). Una vez que se determina el tipo, se realizan los cambios apropiados en la interfaz de usuario.

¿Qué pasa con la seguridad?

La validación del lado del cliente está diseñada como una conveniencia para el usuario, no como una precaución de seguridad para su sistema. La detección automática del tipo de tarjeta de crédito de esta manera no indica si el número de la tarjeta de crédito en su conjunto es válido o no. El servidor debe detectar automáticamente el tipo de tarjeta de crédito utilizando el mismo algoritmo y validar si el número de tarjeta de crédito es válido o no. Los sistemas de comerciantes suelen hacer ambas comprobaciones por usted.

Otro aspecto a tener en cuenta: si no está detectando automáticamente todos los tipos de tarjetas de crédito que acepta, asegúrese de tener una forma para que el usuario especifique el tipo de tarjeta. Amazon muestra un cuadro desplegable de tipos de tarjetas de crédito disponibles si no puede determinar el tipo al mirar solo el número de la tarjeta de crédito. GitHub, por otro lado, detecta automáticamente todos los tipos de tarjetas de crédito que acepta.

Formularios más simples = Pago más rápido

Es un principio ampliamente aceptado que las formas más simples son mejores. Siempre que pueda hacer que un formulario sea más fácil de completar, definitivamente debe aprovechar la oportunidad para hacerlo. En el caso de las tarjetas de crédito, hemos estado pidiendo a los usuarios que proporcionen información redundante durante tanto tiempo que tendemos a aceptar el status quo. Amazon y GitHub son definitivamente los primeros en esta área, pero espero ver que más sitios adopten la detección automática de tipos de tarjetas de crédito en sus formas.

Si bien es útil identificar el tipo de tarjeta de crédito que se está utilizando y, a su vez, eliminar un campo de formulario, es aún más útil verificar que el número completo de la tarjeta de crédito sea válido antes de enviar el formulario. La mayoría de los números de tarjetas de crédito se pueden validar mediante el algoritmo de Luhn. El algoritmo de Luhn se puede implementar muy fácilmente en Javascript, lo que le permite verificar el formato del número de la tarjeta de crédito en el navegador. Tenga en cuenta que esto no garantiza que la tarjeta de crédito sea válida para su uso, solo que el número, de hecho, representa un número de tarjeta de crédito válido.

  • No olvide que determinar el tipo de tarjeta de crédito no es lo mismo que validar la tarjeta de crédito. El IIN puede ser válido mientras que el resto del número es falso.
  • Nunca confíe únicamente en JavaScript para validar información confidencial, como números de tarjetas de crédito. También debe tener siempre validación en el servidor.
  • Si solo acepta algunos tipos de tarjetas de crédito, asegúrese de que sea obvio en la interfaz de usuario.
  • No guarde el tipo de tarjeta de crédito detectado automáticamente en un campo de formulario para enviarlo al servidor.
  • Aplique la misma lógica para detectar el tipo de tarjeta de crédito en el servidor.
  • Si hay un tipo de tarjeta de crédito que no está detectando automáticamente, asegúrese de proporcionar alguna forma para que el usuario especifique el tipo manualmente. Amazon hace esto mostrando un menú desplegable de tipos de tarjetas de crédito disponibles si no puede detectar automáticamente.
  • “Electronic Payment Schemes”, W3C, 18 de diciembre de 1995
  • “ISO / IEC 7812”, Wikipedia, 30 de noviembre de 2011
  • “Credit Card Numbers”, Wikipedia, 30 de noviembre de 2011
  • Prueba de números de cuenta de tarjetas de crédito, Paypal
  • “Computer science in JavaScript: Validating credit card numbers”, NCZOnline, 4 de agosto de 2009
  • “Algoritmo de Luhn”, Wikipedia, 30 de noviembre de 2011

Nicolás Zakas

Nicholas C. Zakas es consultor, autor y orador.