-
Notifications
You must be signed in to change notification settings - Fork 49
/
demo-events.html
138 lines (113 loc) · 4.06 KB
/
demo-events.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Cardswipe Events Demonstration</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.cardswipe.js"></script>
<link rel="stylesheet" type="text/css" href="demo-events.css" />
</head>
<body>
<div id="pagecontent">
<h1>Cardswipe Events Demo</h1>
<p>
<strong>Plug in your card reader and scan a card.</strong> This page uses the built-in card data parsers, which recognize various formats.
If you scan a payment card, the form fields will be filled in with data from the card.
The page subscribes to the plugin's custom events to update the user interface while a scan is in progress.
</p>
<form>
<ul>
<li><label>Mr./Ms.: <input type="text" name="honorific" id="honorific" /></label></li>
<li><label>First name: <input type="text" name="firstName" id="firstName" /></label></li>
<li><label>Last name: <input type="text" name="lastName" id="lastName" /></label></li>
<li><label>Card type: <select name="type" id="type">
<option value="">(Select card type)</option>
<option value="amex">American Express</option>
<option value="discover">Discover</option>
<option value="visa">Visa</option>
<option value="mastercard">MasterCard</option>
</select></label></li>
<li><label>Card number: <input type="text" name="account" id="account" /></label></li>
<li>
Expiration date:
<label>Month: <input type="text" name="expMonth" id="expMonth" size="2" /></label>
<label>Year: <input type="text" name="expYear" id="expYear" size="2" /></label>
</li>
</ul>
</form>
</div>
<!-- A modal-style message that appears while scanning -->
<div id="overlay">
<div id="scanning" class="dialog">
<p>Scanning...</p>
</div>
</div>
<div id="failure" class="dialog">
<p>Unrecognized card.</p>
</div>
<div id="success" class="dialog">
<p>Successful scan!</p>
<div id="properties">
</div>
</div>
<script type="text/javascript">
// Called by plugin on a successful scan.
var complete = function (data) {
// Is it a payment card?
if (data.type == "generic")
return;
// Copy data fields to form
$("#honorific").val(data.honorific);
$("#firstName").val(data.firstName);
$("#lastName").val(data.lastName);
$("#account").val(data.account);
$("#expMonth").val(data.expMonth);
$("#expYear").val(data.expYear);
$("#type").val(data.type);
};
// Event handler for scanstart.cardswipe.
var scanstart = function () {
$("#overlay").fadeIn(200);
};
// Event handler for scanend.cardswipe.
var scanend = function () {
$("#overlay").fadeOut(200);
};
// Event handler for success.cardswipe. Displays returned data in a dialog
var success = function (event, data) {
$("#properties").empty();
// Iterate properties of parsed data
for (var key in data) {
if (data.hasOwnProperty(key)) {
var text = key + ': ' + data[key];
$("#properties").append('<div class="property">' + text + '</div>');
}
}
$("#success").fadeIn().delay(3000).fadeOut();
}
var failure = function () {
$("#failure").fadeIn().delay(1000).fadeOut();
}
// Initialize the plugin with default parser and callbacks.
//
// Set debug to true to watch the characters get captured and the state machine transitions
// in the javascript console. This requires a browser that supports the console.log function.
//
// Set firstLineOnly to true to invoke the parser after scanning the first line. This will speed up the
// time from the start of the scan to invoking your success callback.
$.cardswipe({
firstLineOnly: true,
success: complete,
parsers: ["visa", "amex", "mastercard", "discover", "generic"],
debug: false
});
// Bind event listeners to the document
$(document)
.on("scanstart.cardswipe", scanstart)
.on("scanend.cardswipe", scanend)
.on("success.cardswipe", success)
.on("failure.cardswipe", failure)
;
</script>
</body>
</html>