javascript - skeuocard - ¿Conectar un lector de tarjetas de crédito a la aplicación web?

mask credit card number javascript

Question

¿Hay alguna manera de conectar un lector de tarjetas a mi aplicación web (javascript) para que el usuario no tenga que ingresar manualmente la información de la tarjeta de crédito?

Esta aplicación web es para comprar productos en una tienda. El usuario hace clic en los artículos que desea comprar y luego desliza la tarjeta de crédito en el lector y recibe un recibo.

Answer 1

Así es como funciona, creo. La tarjeta de crédito le dará una pieza de software que instale en su máquina. Ese software expone un servicio en un puerto local.

Su aplicación web enviará una solicitud a ese servicio local. La solicitud que realizó solo puede incluir la cantidad que desea cobrar más un token de autenticación para autenticarse en el servicio.

Después de lo cual, el terminal de la tarjeta de crédito procesará el cargo y devolverá un número de referencia en caso de éxito o un mensaje en caso de fallo.

Como puede ver, este proceso no expone la información de la tarjeta de crédito a su aplicación web. Solo se le notifica si la transacción se aprobó o no para que pueda continuar o rechazar el procesamiento del pedido.

Answer 2

Como se menciona en la otra respuesta, el escáner de código de barras o el lector de tarjetas funciona como un teclado. Puede adjuntar un oyente, por ejemplo en todo el documento:

document.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    // store it , in this example, i use localstorage
    if(localStorage.getItem("card") && localStorage.getItem("card") != ''null'') {
        // append on every keypress
        localStorage.setItem("card", localStorage.getItem("card") + String.fromCharCode(charCode));
    } else {
        // remove localstorage if it takes 300 ms (you can set it)
        localStorage.setItem("card", String.fromCharCode(charCode));
        setTimeout(function() {
            localStorage.removeItem("card");
        }, 300);
    }
    // when reach on certain length within 300 ms, it is not typed by a human being 
    if(localStorage.getItem("card").length == 8) {
        // do some validation
        if(passedonvalidation){
            // do some action
        }
    }
}

Puede adjuntar el oyente en un cuadro de texto si lo desea. Asegúrese de que esté enfocado cuando se pase la tarjeta.

Answer 3

En realidad, es posible debido a que los lectores de tarjetas USB simples actúan como dispositivos de entrada de teclado. Ya que actúa como una entrada de teclado, una vez que el cuadro de entrada está enfocado, puedes deslizar la tarjeta, empujarla a un campo oculto usando algunos jQuery ingeniosos, etc. y luego procesarlos desde allí.

Por favor vea mi respuesta a esa pregunta que Maris vinculó.

EDITAR: 2/2016

Creé un GitHub Gist con una implementación jQuery muy simple.

Answer 4

La respuesta corta es: No. ¿Puede encontrar más explicaciones en Cómo vincular el lector de tarjetas de acceso con PHP?