Skip to content

Commit 6cfb970

Browse files
pstadlerpstadler
authored
Merge pull request #36 from datatrans/feature/autofill
Chore: Fix project setup
2 parents 3e0a2cc + b470166 commit 6cfb970

9 files changed

Lines changed: 10115 additions & 9531 deletions

File tree

‎angular-14-example/angular.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,5 +103,8 @@
103103
}
104104
}
105105
}
106+
},
107+
"cli": {
108+
"analytics": false
106109
}
107110
}

‎angular-14-example/src/app/secure-fields.service.ts‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,24 @@ import { environment } from 'src/environments/environment';
33
import { ScriptService } from './script.service';
44

55
@Injectable({
6-
providedIn: 'root'
6+
providedIn: 'root',
77
})
88
export class SecureFieldsService {
99
transactionId: any;
1010
cardType: string | undefined;
1111
cardNumberResult: string | undefined;
1212
cvvResult: string | undefined;
1313

14-
constructor(private scriptService: ScriptService) { }
14+
constructor(private scriptService: ScriptService) {}
1515
secureFields: any;
1616

17-
init(){
18-
this.scriptService.load(environment.production ? 'secure-fields' : 'secure-fields-test').then((data: any) => {
19-
this.initSecureFields();
20-
}).catch(error => console.log(error));
17+
init() {
18+
this.scriptService
19+
.load(environment.production ? 'secure-fields' : 'secure-fields-test')
20+
.then((data: any) => {
21+
this.initSecureFields();
22+
})
23+
.catch((error) => console.log(error));
2124
}
2225

2326
initSecureFields() {
@@ -27,12 +30,12 @@ export class SecureFieldsService {
2730
{
2831
cardNumber: {
2932
placeholderElementId: 'card-number',
30-
inputType: 'tel'
33+
inputType: 'tel',
3134
},
32-
cvv: {
35+
cvv: {
3336
placeholderElementId: 'cvv-number',
34-
inputType: 'tel'
35-
}
37+
inputType: 'tel',
38+
},
3639
}
3740
);
3841

@@ -42,21 +45,20 @@ export class SecureFieldsService {
4245
this.secureFields.setStyle('cardNumber', 'height: 40px;');
4346
this.secureFields.focus('cardNumber');
4447
this.secureFields.setPlaceholder('cardNumber', '4242 4242 4242 4242');
45-
this.secureFields.setPlaceholder("cvv", "123");
48+
this.secureFields.setPlaceholder('cvv', '123');
4649
});
4750

48-
this.secureFields.on("success", (data: any) => {
49-
if(data.transactionId) {
51+
this.secureFields.on('success', (data: any) => {
52+
if (data.transactionId) {
5053
this.transactionId = data.transactionId;
5154
}
5255
});
5356

5457
this.secureFields.on('change', (data: any) => {
5558
// Fill expiration date date on card autocomplete
56-
if(!data.fields.cardNumber.paymentMethod) {
59+
if (!data.fields.cardNumber.paymentMethod) {
5760
this.cardType = 'Unknown';
58-
}
59-
else {
61+
} else {
6062
this.cardType = data.fields.cardNumber.paymentMethod;
6163
}
6264
});

‎assets/js/expirationdate.js‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,49 @@
1-
function formatExpirationDate (val) {
1+
function formatExpirationDate(val) {
22
var p1 = parseInt(val[0], 10),
33
p2 = parseInt(val[1], 10);
44

55
return /^\d$/.test(val) && "0" !== val && "1" !== val
66
? "0" + val + " / "
77
: /^\d\d$/.test(val)
8-
? p2 > 2 && 0 !== p1 ? "0" + p1 + " / " + p2 : "" + val + " / "
9-
: val
8+
? p2 > 2 && 0 !== p1
9+
? "0" + p1 + " / " + p2
10+
: "" + val + " / "
11+
: val;
1012
}
1113

1214
function handleExpirationDate(element, focusOnFilled) {
13-
['input', 'keydown', 'keyup', 'mousedown', 'mouseup', 'select', 'contextmenu', 'drop'].forEach(function (key) {
14-
element.addEventListener(key, function (e) {
15-
if (/^\d+$/.test(e.key)) {
16-
this.value = formatExpirationDate(this.value);
17-
}
15+
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(
16+
function (key) {
17+
element.addEventListener(key, function (e) {
18+
if (/^\d+$/.test(e.key)) {
19+
this.value = formatExpirationDate(this.value);
20+
}
1821

19-
if (/^\d{0,2}[\/]?\d{0,2}/.test(this.value)) {
20-
this.oldValue = this.value;
21-
this.oldSelectionStart = this.selectionStart;
22-
this.oldSelectionEnd = this.selectionEnd;
23-
} else if (this.hasOwnProperty('oldValue')) {
24-
this.value = this.oldValue;
25-
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
26-
} else {
27-
this.value = '';
28-
}
29-
if (this.oldSelectionEnd === 7 && key === 'keyup' && e.key.match(/^[0-9]$/)) {
30-
secureFields.focus(focusOnFilled);
31-
}
32-
});
33-
});
22+
if (/^\d{0,2}[\/]?\d{0,2}/.test(this.value)) {
23+
this.oldValue = this.value;
24+
this.oldSelectionStart = this.selectionStart;
25+
this.oldSelectionEnd = this.selectionEnd;
26+
} else if (this.hasOwnProperty("oldValue")) {
27+
this.value = this.oldValue;
28+
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
29+
} else {
30+
this.value = "";
31+
}
32+
if (this.oldSelectionEnd === 7 && key === "keyup" && e?.key?.match(/^[0-9]$/)) {
33+
secureFields.focus(focusOnFilled);
34+
}
35+
});
36+
}
37+
);
3438
}
3539

36-
function getExpirationDateObject (value) {
37-
var split = value.split('/')
40+
function getExpirationDateObject(value) {
41+
var split = value.split("/");
3842
expm = split[0].trim();
3943
expy = split[1].trim();
4044

4145
return {
4246
expm: expm,
43-
expy: expy
47+
expy: expy,
4448
};
4549
}

‎pciproxy-examples/index.html‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -8,6 +9,7 @@
89
<script src="../assets/js/expirationdate.js"></script>
910
<link rel="stylesheet" type="text/css" href="../assets/css/stylesheet.css">
1011
</head>
12+
1113
<body style="margin: 0;">
1214
<nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
1315
<a style="text-decoration: underline;" href="index.html">Basic</a>
@@ -21,7 +23,8 @@
2123
<form style="max-width: 400px; margin: 0 auto;">
2224
<div style="max-width: 400px">
2325
<!-- Card Number markup -->
24-
<div id="card-number-container" class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-card-icon">
26+
<div id="card-number-container"
27+
class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-card-icon">
2528
<label for="card-number">Card Number</label>
2629
<div class="secure-field--input-container" style="height: 40px">
2730
<div class="secure-field--input" id="card-number"></div>
@@ -30,7 +33,8 @@
3033
<span class="secure-field--action-card-wrap">
3134
<img class="secure-field--card-icon secure-field--card-icon__empty" src="../assets/img/card-empty.svg">
3235
<img class="secure-field--card-icon secure-field--card-icon__error" src="../assets/img/card-error.svg">
33-
<img class="secure-field--card-icon secure-field--card-icon__recognized-card" src="../assets/img/card-recognized.svg">
36+
<img class="secure-field--card-icon secure-field--card-icon__recognized-card"
37+
src="../assets/img/card-recognized.svg">
3438
</span>
3539
</span>
3640
</div>
@@ -39,21 +43,26 @@
3943
</div>
4044
<div style="margin-top: 20px; display: flex; flex-flow: row wrap; justify-content: space-between">
4145
<!-- Expiry date -->
42-
<div id="expiry-container" class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-card-icon" style="max-width: 150px;">
46+
<div id="expiry-container"
47+
class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-card-icon"
48+
style="max-width: 150px;">
4349
<label for="expiry">Expiration Date</label>
4450
<div class="secure-field--input-container" style="height: 40px">
45-
<input id="expiry" type="tel" maxlength="7" placeholder="MM / YY" class="secure-field--input" style="height: 40px; outline: none; font-size: 100%" autocomplete="off" />
46-
<div class="secure-field--actions">
47-
<span class="secure-field--action secure-field--action__card-icon">
48-
<span class="secure-field--action-card-wrap">
49-
<img class="secure-field--card-icon secure-field--card-icon__error" src="../assets/img/cvc-error.svg">
51+
<input id="expiry" type="tel" maxlength="7" placeholder="MM / YY" class="secure-field--input"
52+
style="height: 40px; outline: none; font-size: 100%" autocomplete="cc-exp" />
53+
<div class="secure-field--actions">
54+
<span class="secure-field--action secure-field--action__card-icon">
55+
<span class="secure-field--action-card-wrap">
56+
<img class="secure-field--card-icon secure-field--card-icon__error" src="../assets/img/cvc-error.svg">
57+
</span>
5058
</span>
51-
</span>
59+
</div>
5260
</div>
5361
</div>
54-
</div>
5562
<!-- CVV markup -->
56-
<div id="cvv-container" class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-card-icon" style="max-width: 150px;">
63+
<div id="cvv-container"
64+
class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-card-icon"
65+
style="max-width: 150px;">
5766
<label for="cvv-number">CVV</label>
5867
<div class="secure-field--input-container" style="height: 40px">
5968
<div class="secure-field--input" id="cvv-number"></div>
@@ -76,7 +85,8 @@
7685
</div>
7786
</form>
7887
<footer>
79-
<a href="https://github.com/datatrans/secure-fields-sample/blob/master/pciproxy-examples/index.html">View this page on GitHub</a>
88+
<a href="https://github.com/datatrans/secure-fields-sample/blob/master/pciproxy-examples/index.html">View this page
89+
on GitHub</a>
8090
</footer>
8191
<script>
8292
var secureFields = new SecureFields();
@@ -85,12 +95,12 @@
8595
'1100007006',
8696
{
8797
cardNumber: {
88-
placeholderElementId: 'card-number',
89-
inputType: 'tel'
98+
placeholderElementId: 'card-number',
99+
inputType: 'tel'
90100
},
91-
cvv: {
92-
placeholderElementId: 'cvv-number',
93-
inputType: 'tel'
101+
cvv: {
102+
placeholderElementId: 'cvv-number',
103+
inputType: 'tel'
94104
}
95105
},
96106
{
@@ -101,13 +111,14 @@
101111
secureFields.on('ready', function () {
102112
// Set styles manually as they're inside an iframe and out of the scope of the parent's stylesheets
103113
secureFields.setStyle('cardNumber', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
104-
secureFields.setStyle('cvv','font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
114+
secureFields.setStyle('cvv', 'font-size: 100%; border-radius: 0; -webkit-appearance: none; padding: 0; outline: none');
105115
secureFields.focus('cardNumber');
106116
});
107117

108118
var cardContainer = document.getElementById('card-number-container');
109119
var cvvContainer = document.getElementById('cvv-container');
110-
var expiryContainer = document.getElementById('expiry-container')
120+
var expiryContainer = document.getElementById('expiry-container');
121+
var expiryInput = document.getElementById('expiry');
111122

112123
// Set focus to input fields when clicking containers
113124
cardContainer.addEventListener('click', function () {
@@ -196,7 +207,8 @@
196207
</script>
197208
<style>
198209
/* The following styles are NOT required */
199-
html, body {
210+
html,
211+
body {
200212
font-family: Arial, Helvetica, sans-serif;
201213
}
202214

‎pciproxy-examples/inline-example.html‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -9,6 +10,7 @@
910
<link rel="stylesheet" type="text/css" href="../assets/css/stylesheet.css">
1011
<link rel="stylesheet" type="text/css" href="../assets/css/inline.css">
1112
</head>
13+
1214
<body style="margin: 0;">
1315
<nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
1416
<a href="index.html">Basic</a>
@@ -22,23 +24,26 @@
2224
<form style="max-width: 390px; margin: 0 auto;">
2325
<div id="payment-container" class="inline-wrapper">
2426
<!-- Card Number markup -->
25-
<div id="card-number-container" class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-actions-left secure-field__has-card-icon">
27+
<div id="card-number-container"
28+
class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-actions-left secure-field__has-card-icon">
2629
<div class="secure-field--input-container" style="height: 40px">
2730
<div class="secure-field--actions">
2831
<span class="secure-field--action secure-field--action__card-icon">
2932
<span class="secure-field--action-card-wrap">
3033
<img class="secure-field--card-icon secure-field--card-icon__empty" src="../assets/img/card-empty.svg">
3134
<img class="secure-field--card-icon secure-field--card-icon__error" src="../assets/img/card-error.svg">
32-
<img class="secure-field--card-icon secure-field--card-icon__recognized-card" src="../assets/img/card-recognized.svg">
33-
<img class="secure-field--card-icon secure-field--cvv-icon secure-field--card-icon__empty" src="../assets/img/cvc-empty.svg">
35+
<img class="secure-field--card-icon secure-field--card-icon__recognized-card"
36+
src="../assets/img/card-recognized.svg">
37+
<img class="secure-field--card-icon secure-field--cvv-icon secure-field--card-icon__empty"
38+
src="../assets/img/cvc-empty.svg">
3439
</span>
3540
</span>
3641
</div>
3742
<div class="secure-field--input" id="card-number"></div>
3843
</div>
3944
</div>
4045
<div>
41-
<input id="expiry" name="expiry" placeholder="MM/YY" type="tel" maxlength="7" autocomplete="off" />
46+
<input id="expiry" name="expiry" placeholder="MM/YY" type="tel" maxlength="7" autocomplete="cc-exp" />
4247
</div>
4348
<!-- CVV markup -->
4449
<div id="cvv-container" class="secure-field secure-field__input secure-field__base">
@@ -55,7 +60,8 @@
5560
</div>
5661
</form>
5762
<footer>
58-
<a href="https://github.com/datatrans/secure-fields-sample/blob/master/pciproxy-examples/inline-example.html">View this page on GitHub</a>
63+
<a href="https://github.com/datatrans/secure-fields-sample/blob/master/pciproxy-examples/inline-example.html">View
64+
this page on GitHub</a>
5965
</footer>
6066
<script>
6167
// Credit Card and CVV
@@ -65,12 +71,12 @@
6571
'1100007006',
6672
{
6773
cardNumber: {
68-
placeholderElementId: 'card-number',
69-
inputType: 'tel'
74+
placeholderElementId: 'card-number',
75+
inputType: 'tel'
7076
},
71-
cvv: {
72-
placeholderElementId: 'cvv-number',
73-
inputType: 'tel'
77+
cvv: {
78+
placeholderElementId: 'cvv-number',
79+
inputType: 'tel'
7480
}
7581
},
7682
{
@@ -81,7 +87,7 @@
8187
secureFields.on('ready', function () {
8288
// Set styles manually as they're inside an iframe and out of the scope of the parent's stylesheets
8389
secureFields.setStyle('cardNumber', 'font: 16px/18px system-ui, sans-serif; border-radius: 0; border:0; -webkit-appearance: none; padding: 0; outline: none');
84-
secureFields.setStyle('cvv','font: 16px/18px system-ui, sans-serif; border-radius: 0; border:0; -webkit-appearance: none; padding: 0; outline: none');
90+
secureFields.setStyle('cvv', 'font: 16px/18px system-ui, sans-serif; border-radius: 0; border:0; -webkit-appearance: none; padding: 0; outline: none');
8591
secureFields.focus('cardNumber');
8692
secureFields.setPlaceholder("cardNumber", "4242 4242 4242 4242");
8793
secureFields.setPlaceholder("cvv", "123");
@@ -188,7 +194,8 @@
188194
</script>
189195
<style>
190196
/* The following styles are NOT required */
191-
html, body {
197+
html,
198+
body {
192199
font-family: Arial, Helvetica, sans-serif;
193200
}
194201

0 commit comments

Comments
 (0)