-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (115 loc) · 3.79 KB
/
index.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
<html>
<head>
<script src="http://localhost:4000/dist/payment-profile-tokenizer.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="example">
<div id="first-name"></div>
<div id="first-name-error-message"></div>
<div id="last-name"></div>
<div id="credit-card-number"></div>
<div id="credit-card-inline">
<div id="expiration-month"></div>
<div id="expiration-year"></div>
<div id="cvc"></div>
</div>
<button id="submit">Submit</button>
<div id="errors"></div>
</div>
</div>
<script>
var style = function(style = { field: {}, label: {} }) {
var result = {
labelInvalid: {
borderBottom: '1px solid red',
},
field: {
display: 'inline-block',
verticalAlign: 'middle',
margin: '0px',
borderStyle: 'none',
padding: '12px 0',
height: '40px',
outline: 'none',
},
fieldInvalid: {
borderBottom: '1px solid red',
}
};
Object.keys(result).forEach(function(key) {
result[key] = Object.assign(result[key], style[key]);
});
return result;
}
var options = {
type: 'creditCard',
liveValidation: true,
fields: {
firstName: {
selector: '#first-name',
placeholder: 'First Name',
style: style({ field: { minWidth: '500px', borderBottom: '1px solid #cfd7df' } }),
tabOrder: 1
},
lastName: {
selector: '#last-name',
placeholder: 'Last Name',
style: style({field: { minWidth: '500px', borderBottom: '1px solid #cfd7df' } }),
tabOrder: 2
},
creditCardNumber: {
selector: '#credit-card-number',
placeholder: 'Card Number',
style: style({ field: { width: '500px', borderBottom: '1px solid #cfd7df' } }),
tabOrder: 3
},
expirationMonth: {
selector: '#expiration-month',
placeholder: 'Expiration Month',
style: style({ field: { width: '150px', borderBottom: '1px solid #cfd7df' } }),
tabOrder: 4
},
expirationYear: {
selector: '#expiration-year',
placeholder: 'Expiration Year',
style: style({ field: { marginLeft: '25px', width: '150px', borderBottom: '1px solid #cfd7df' } }),
tabOrder: 5
},
cvv: {
selector: '#cvc',
placeholder: 'CVC',
style: style({ field: { marginLeft: '25px', width: '150px', borderBottom: '1px solid #cfd7df' } }),
tabOrder: 6
},
},
onLiveValidation: function(errors) {
var elem = document.querySelector('#errors');
if (errors.length === 0) {
elem.innerHTML = '';
return;
}
elem.innerHTML = errors[errors.length - 1].errorMessage;
console.log(errors);
}
};
var lib = new PaymentProfileTokenizer();
lib.create(options);
document.querySelector('#submit').addEventListener('click', function() {
lib.tokenize().then((token) => {
console.log('Received token: ' + token);
}).catch((error) => {
console.error(error);
if (!error.hasOwnProperty('invalidFields')) return;
var elem = document.querySelector('#errors');
if (error.invalidFields.length === 0) {
elem.innerHTML = '';
return;
}
elem.innerHTML = error.invalidFields[0].errorMessage;
});
});
</script>
</body>
</html>