web-dev-qa-db-ja.com

クレジットカードリーダーをWebアプリケーションに接続しますか？

カードリーダーを私のWebアプリケーション（javascript）に接続して、ユーザーがクレジットカード情報を手動で入力する必要がないようにする方法はありますか？

このウェブアプリは、店舗で商品を購入するためのものです。ユーザーは購入したいアイテムをクリックし、リーダーでクレジットカードをスワイプすると、領収書が届きます。

javascriptcredit-cardfrontend
21
ajsie

実際には、単純なUSBカードリーダーがキーボード入力デバイスとして機能するために可能です。キーボード入力として機能するため、入力ボックスにフォーカスが合ったら、カードをスワイプし、気の利いたjQueryなどを使用して非表示フィールドにプッシュし、そこから処理します。

マリスがリンクしたその質問に対する私の答えを見てください。

編集：2016年2月

非常に単純なjQuery実装で GitHub Gist を作成しました。

40
AngeloS

他の回答で述べたように、バーコードスキャナーまたはカードリーダーはキーボードのように機能します。たとえば、ドキュメント全体にリスナーをアタッチできます。

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

必要に応じて、テキストボックスにリスナーを添付できます。カードをスワイプするときにフォーカスが合っていることを確認してください。

5
jay temp