datatrans · pstadler · Sep 8, 2023 · Sep 7, 2023
diff --git 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
@@ -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
@@ -9,11 +9,11 @@
 </head>
 <body style="margin: 0;">
   <nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
-    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/index.html">Basic Example</a>
-    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/inline-example.html">Inline Example</a>
-    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/floating-label.html">Floating Label Example</a>
-    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/iban.html">IBAN Example</a>
-    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/account.html">Account Number Example</a>
+    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/index.html">Basic</a>
+    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/inline-example.html">Inline</a>
+    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/floating-label.html">Floating Label</a>
+    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/iban.html">IBAN</a>
+    <a style="color: #fff; margin: 0 10px; text-decoration: none;" href="pciproxy-examples/account.html">Account Number</a>
   </nav>
   <p style="text-align: center;">Please select an example above.</p>
   <script>

diff --git a/pciproxy-examples/account.html b/pciproxy-examples/account.html
@@ -9,11 +9,11 @@
 </head>
 <body style="margin: 0;">
   <nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
-    <a href="index.html">Basic Example</a>
-    <a href="inline-example.html">Inline Example</a>
-    <a href="floating-label.html">Floating Label Example</a>
-    <a href="iban.html">IBAN Example</a>
-    <a style="text-decoration: underline;" href="account.html">Account Number Example</a>
+    <a href="index.html">Basic</a>
+    <a href="inline-example.html">Inline</a>
+    <a href="floating-label.html">Floating Label</a>
+    <a href="iban.html">IBAN</a>
+    <a style="text-decoration: underline;" href="account.html">Account Number</a>
     <a href="show.html">Reveal Card (Show API)</a>
   </nav>
   <form style="max-width: 400px; margin: 0 auto;">

diff --git a/pciproxy-examples/floating-label.html b/pciproxy-examples/floating-label.html
@@ -9,11 +9,11 @@
 </head>
 <body style="margin: 0;">
   <nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
-    <a href="index.html">Basic Example</a>
-    <a href="inline-example.html">Inline Example</a>
-    <a style="text-decoration: underline;" href="floating-label.html">Floating Label Example</a>
-    <a href="iban.html">IBAN Example</a>
-    <a href="account.html">Account Number Example</a>
+    <a href="index.html">Basic</a>
+    <a href="inline-example.html">Inline</a>
+    <a style="text-decoration: underline;" href="floating-label.html">Floating Label</a>
+    <a href="iban.html">IBAN</a>
+    <a href="account.html">Account Number</a>
     <a href="show.html">Reveal Card (Show API)</a>
   </nav>
   <form style="max-width: 400px; margin: 0 auto;">

diff --git a/pciproxy-examples/iban.html b/pciproxy-examples/iban.html
@@ -9,11 +9,11 @@
 </head>
 <body style="margin: 0;">
   <nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
-    <a href="index.html">Basic Example</a>
-    <a href="inline-example.html">Inline Example</a>
-    <a href="floating-label.html">Floating Label Example</a>
-    <a style="text-decoration: underline;" href="iban.html">IBAN Example</a>
-    <a href="account.html">Account Number Example</a>
+    <a href="index.html">Basic</a>
+    <a href="inline-example.html">Inline</a>
+    <a href="floating-label.html">Floating Label</a>
+    <a style="text-decoration: underline;" href="iban.html">IBAN</a>
+    <a href="account.html">Account Number</a>
     <a href="show.html">Reveal Card (Show API)</a>
   </nav>
   <form style="max-width: 400px; margin: 0 auto;">

diff --git a/pciproxy-examples/index.html b/pciproxy-examples/index.html
@@ -5,15 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <title>PCI Proxy Web Tokenization</title>
   <script src="https://pay.sandbox.datatrans.com/upp/payment/js/secure-fields-2.0.0.min.js"></script>
+  <script src="../assets/js/expirationdate.js"></script>
   <link rel="stylesheet" type="text/css" href="../assets/css/stylesheet.css">
 </head>
 <body style="margin: 0;">
   <nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
-    <a style="text-decoration: underline;" href="index.html">Basic Example</a>
-    <a href="inline-example.html">Inline Example</a>
-    <a href="floating-label.html">Floating Label Example</a>
-    <a href="iban.html">IBAN Example</a>
-    <a href="account.html">Account Number Example</a>
+    <a style="text-decoration: underline;" href="index.html">Basic</a>
+    <a href="inline-example.html">Inline</a>
+    <a href="floating-label.html">Floating Label</a>
+    <a href="iban.html">IBAN</a>
+    <a href="account.html">Account Number</a>
     <a href="show.html">Reveal card (Show API)</a>
   </nav>
   <form style="max-width: 400px; margin: 0 auto;">
@@ -35,9 +36,23 @@
         </div>
       </div>
     </div>
-    <div style="max-width: 150px; margin-top: 20px">
+    <div style="margin-top: 20px; display: flex; flex-flow: row wrap; justify-content: space-between">
+      <!-- Expiry date -->
+      <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;">
+        <label for="expiry">Expiration Date</label>
+        <div class="secure-field--input-container" style="height: 40px">
+        <input id="expiry" type="tel" maxlength="7"  placeholder="MM / YY" class="secure-field--input" style="height: 40px; outline: none; font-size: 100%" autocomplete="off" />
+        <div class="secure-field--actions">
+          <span class="secure-field--action secure-field--action__card-icon">
+            <span class="secure-field--action-card-wrap">
+              <img class="secure-field--card-icon secure-field--card-icon__error" src="../assets/img/cvc-error.svg">
+            </span>
+          </span>
+        </div>
+      </div>
+      </div>
       <!-- CVV markup -->
-      <div id="cvv-container" class="secure-field secure-field__input secure-field__base secure-field__has-actions secure-field__has-card-icon">
+      <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;">
         <label for="cvv-number">CVV</label>
         <div class="secure-field--input-container" style="height: 40px">
           <div class="secure-field--input" id="cvv-number"></div>
@@ -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");
   </script>
   <style>
     /* The following styles are NOT required */

diff --git a/pciproxy-examples/inline-example.html b/pciproxy-examples/inline-example.html
@@ -5,16 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <title>PCI Proxy Web Tokenization</title>
   <script src="https://pay.sandbox.datatrans.com/upp/payment/js/secure-fields-2.0.0.min.js"></script>
+  <script src="../assets/js/expirationdate.js"></script>
   <link rel="stylesheet" type="text/css" href="../assets/css/stylesheet.css">
   <link rel="stylesheet" type="text/css" href="../assets/css/inline.css">
 </head>
 <body style="margin: 0;">
   <nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
-    <a href="index.html">Basic Example</a>
-    <a style="text-decoration: underline;" href="inline-example.html">Inline Example</a>
-    <a href="floating-label.html">Floating Label Example</a>
-    <a href="iban.html">IBAN Example</a>
-    <a href="account.html">Account Number Example</a>
+    <a href="index.html">Basic</a>
+    <a style="text-decoration: underline;" href="inline-example.html">Inline</a>
+    <a href="floating-label.html">Floating Label</a>
+    <a href="iban.html">IBAN</a>
+    <a href="account.html">Account Number</a>
     <a href="show.html">Reveal Card (Show API)</a>
   </nav>
   <form style="max-width: 390px; margin: 0 auto;">
@@ -36,7 +37,7 @@
         </div>
       </div>
       <div>
-        <input id="expiry" name="expiry" placeholder="MM/YY" type="tel" maxlength="7" />
+        <input id="expiry" name="expiry" placeholder="MM/YY" type="tel" maxlength="7" autocomplete="off" />
       </div>
       <!-- CVV markup -->
       <div id="cvv-container" class="secure-field secure-field__input secure-field__base">
@@ -55,45 +56,6 @@
   <footer>
     <a href="https://github.com/datatrans/secure-fields-sample/blob/master/pciproxy-examples/inline-example.html">View this page on GitHub</a>
   </footer>
-  <script>
-    // Expiry date
-    function setInputFilter(textbox, inputFilter) {
-      ['input', 'keydown', 'keyup', 'mousedown', 'mouseup', 'select', 'contextmenu', 'drop'].forEach(function (key) {
-        textbox.addEventListener(key, function (e) {
-          if (/^\d+$/.test(e.key)) {
-            this.value = formatExpriy(this.value);
-          }
-
-          if (inputFilter(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('cvv');
-          }
-        });
-      });
-    }
-
-    setInputFilter(document.getElementById("expiry"), function(value) { return /^\d{0,2}[\/]?\d{0,2}/.test(value); });
-
-    function formatExpriy (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
-    }
-  </script>
   <script>
     // Credit Card and CVV
     var secureFields = new SecureFields();
@@ -138,7 +100,7 @@
     });
 
     secureFields.on('change', function (data) {
-      // Fill epxiry date on card autocomplete
+      // Fill expiration date date on card autocomplete
       if (data.event.type === 'autocomplete') {
         if (data.event.field === 'expiryYear') {
           var value = (expiryInput.value || '/')
@@ -170,7 +132,7 @@
         cardImage.src = '../assets/img/brands/' + data.fields.cardNumber.paymentMethod + '.svg';
         cardContainer.classList.add('secure-field__is-recognized');
       }
-      if (data.event.type === 'keyUp' && data.event.field === 'cardNumber' && data.event.eventData.isNumber && data.fields.cardNumber.valid) {
+      if (data.event.type === 'keyUp' && data.event.field === 'cardNumber' && data.event.eventData && data.event.eventData.isNumber && data.fields.cardNumber.valid) {
         document.getElementById('expiry').focus();
       }
     })
@@ -196,12 +158,21 @@
     });
 
     document.getElementById('form-submit').addEventListener('click', function () {
-      // validate your expiry field here
-      if (document.getElementById('expiry').value !== '') {
-        secureFields.submit();
-      } else {
-        paymentContainer.classList.add('field__has-error');
+      // 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;
+      }
+      paymentContainer.classList.add('field__has-error');
     });
 
     secureFields.on('success', function (data) {
@@ -211,6 +182,8 @@
         result.style.display = 'block';
       }
     });
+
+    handleExpirationDate(document.getElementById("expiry"), "cvv");
   </script>
   <style>
     /* The following styles are NOT required */

diff --git a/pciproxy-examples/show.html b/pciproxy-examples/show.html
@@ -9,11 +9,11 @@
 </head>
 <body style="margin: 0;">
   <nav style="text-align: center; background: #213d62; padding: 10px; margin-bottom: 40px;">
-    <a href="index.html">Basic Example</a>
-    <a href="inline-example.html">Inline Example</a>
-    <a href="floating-label.html">Floating Label Example</a>
-    <a href="iban.html">IBAN Example</a>
-    <a href="account.html">Account Number Example</a>
+    <a href="index.html">Basic</a>
+    <a href="inline-example.html">Inline</a>
+    <a href="floating-label.html">Floating Label</a>
+    <a href="iban.html">IBAN</a>
+    <a href="account.html">Account Number</a>
     <a style="text-decoration: underline;" href="show.html">Reveal Card (Show API)</a>
   </nav>
   <div style="max-width: 400px; margin: 0 auto;">

diff --git a/react-example-init/src/securefields/index.js b/react-example-init/src/securefields/index.js
@@ -147,7 +147,7 @@ export function SecureFields({
           <Icon fieldType={fields.cvv.placeholderElementId} iconType={cvvIcon} />
         </Field>
         <div className='pb-2 pl-2'>
-          <label>Expiry Date</label>
+          <label>Expiration Date</label>
           <div className='flex items-end'>
             <input
               type='tel'