Подключить устройство чтения кредитных карт к веб-приложению?

Question

Есть ли способ подключить устройство чтения карт к моему веб-приложению (javascript), чтобы пользователю не приходилось вручную вводить информацию о кредитной карте?

Это веб-приложение для покупки товаров в магазине. Пользователь нажимает на предметы, которые он хочет приобрести, а затем смахивает кредитную карту в считыватель и получает квитанцию.

Answer 1

На самом деле это возможно из-за того, что простые устройства чтения карт USB действуют как устройства ввода с клавиатуры.Так как он действует как ввод с клавиатуры, как только поле ввода находится в фокусе, вы можете провести карточкой, переместить ее в скрытое поле с помощью некоторого изящного jQuery и т. Д., А затем обработать ее оттуда.

Пожалуйста, см. Мойответ на этот вопрос, на который ссылается Марис.

РЕДАКТИРОВАТЬ: 2/2016

Я создал GitHub Gist с очень простымРеализация jQuery.

Answer 2

Как уже упоминалось в другом ответе, сканер штрих-кода или картридер работает как клавиатура.Вы можете прикрепить прослушиватель, например, ко всему документу:

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
        }
    }
}

Вы можете прикрепить прослушиватель к текстовому полю, если хотите.Убедитесь, что он сфокусирован при считывании карты.

Answer 3

Вот как это работает, я думаю. Кредитная карта предоставит вам программное обеспечение, которое вы установите на свой компьютер. Это программное обеспечение предоставляет службу на локальном порту.

Ваше веб-приложение отправит запрос в этот локальный сервис. Сделанный вами запрос может включать только сумму, которую вы хотите взимать, плюс некоторый токен аутентификации для аутентификации в службе.

После этого терминал кредитной карты будет обрабатывать начисления и либо вернет ссылочный номер в случае успеха, либо сообщение об ошибке.

Как видите, этот процесс не предоставляет информацию о кредитной карте вашему веб-приложению. Он просто получает уведомление о том, была ли транзакция одобрена или нет, поэтому вы можете продолжить или отклонить обработку заказа.