diff --git a/angular-14-example/src/app/secure-fields.service.ts b/angular-14-example/src/app/secure-fields.service.ts index d977851..8d56f49 100644 --- a/angular-14-example/src/app/secure-fields.service.ts +++ b/angular-14-example/src/app/secure-fields.service.ts @@ -52,7 +52,7 @@ export class SecureFieldsService { }); this.secureFields.on('change', (data: any) => { - // Fill epxiry date on card autocomplete + // Fill expiration date date on card autocomplete if(!data.fields.cardNumber.paymentMethod) { this.cardType = 'Unknown'; } diff --git a/assets/js/expirationdate.js b/assets/js/expirationdate.js new file mode 100644 index 0000000..ee854c1 --- /dev/null +++ b/assets/js/expirationdate.js @@ -0,0 +1,45 @@ +function formatExpirationDate (val) { + var p1 = parseInt(val[0], 10), + p2 = parseInt(val[1], 10); + + return /^\d$/.test(val) && "0" !== val && "1" !== val + ? "0" + val + " / " + : /^\d\d$/.test(val) + ? p2 > 2 && 0 !== p1 ? "0" + p1 + " / " + p2 : "" + val + " / " + : val +} + +function handleExpirationDate(element, focusOnFilled) { + ['input', 'keydown', 'keyup', 'mousedown', 'mouseup', 'select', 'contextmenu', 'drop'].forEach(function (key) { + element.addEventListener(key, function (e) { + if (/^\d+$/.test(e.key)) { + this.value = formatExpirationDate(this.value); + } + + if (/^\d{0,2}[\/]?\d{0,2}/.test(this.value)) { + this.oldValue = this.value; + this.oldSelectionStart = this.selectionStart; + this.oldSelectionEnd = this.selectionEnd; + } else if (this.hasOwnProperty('oldValue')) { + this.value = this.oldValue; + this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd); + } else { + this.value = ''; + } + if (this.oldSelectionEnd === 7 && key === 'keyup' && e.key.match(/^[0-9]$/)) { + secureFields.focus(focusOnFilled); + } + }); + }); +} + +function getExpirationDateObject (value) { + var split = value.split('/') + expm = split[0].trim(); + expy = split[1].trim(); + + return { + expm: expm, + expy: expy + }; +} diff --git a/index.html b/index.html index aaaa361..e60ce4c 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,11 @@

Please select an example above.

+
@@ -35,9 +36,23 @@ -
+
+ +
+ +
+ +
+ + + + + +
+
+
-
+
@@ -91,6 +106,7 @@ var cardContainer = document.getElementById('card-number-container'); var cvvContainer = document.getElementById('cvv-container'); + var expiryContainer = document.getElementById('expiry-container') // Set focus to input fields when clicking containers cardContainer.addEventListener('click', function () { @@ -102,6 +118,21 @@ // Set class names when fields change secureFields.on('change', function (data) { + // Fill expiration date date on card autocomplete + if (data.event.type === 'autocomplete') { + if (data.event.field === 'expiryYear') { + var value = (expiryInput.value || '/') + expiryInput.value = value.split('/')[0].trim() + ' / ' + data.event.value.slice(-2) + return + } + + if (data.event.field === 'expiryMonth') { + var value = (expiryInput.value || '/') + expiryInput.value = data.event.value + ' / ' + value.split('/')[1].trim() + return + } + } + var cardImage = cardContainer.querySelector('.secure-field--card-icon__recognized-card'); cardContainer.classList.remove('secure-field__has-error'); cvvContainer.classList.remove('secure-field__has-error'); @@ -132,7 +163,21 @@ }); document.getElementById('form-submit').addEventListener('click', function () { - secureFields.submit(); + // validate your expiration date field here + var result + try { + result = getExpirationDateObject(document.getElementById('expiry').value) + } catch { + // nothing to catch here + } + if (result) { + secureFields.submit({ + expm: result.expm, + expy: result.expy + }); + return; + } + expiryContainer.classList.add('secure-field__has-error'); }); secureFields.on('success', function (data) { @@ -142,6 +187,11 @@ result.style.display = 'block'; } }); + + document.getElementById("expiry").addEventListener('input', function () { + expiryContainer.classList.remove('secure-field__has-error'); + }); + handleExpirationDate(document.getElementById("expiry"), "cvv");