From 2b20d30e42e1b1f3e8b983ec886edbbfb3049b88 Mon Sep 17 00:00:00 2001
From: sponglord <nicholas.spong@adyen.com>
Date: Fri, 29 Oct 2021 17:15:55 +0200
Subject: [PATCH] Implementing handling an optional expiry date as determined
 by binLookup (#1328)

* Implementing handling an optional expiry date as determined by binLookup

* Add 'korean_local_card' brand to playground KCP example

* Updating securedFields playground file to work with v5

* Refactor how we detect single date field and clear error (if optional or hidden)

* Fixed tests in customcard.unsupportedCard.test.js

* Removed unused imports from test

* Fix so that ClientFunction runs for test (removed ref to DOM element)

* Fixed bug where card could not become valid if dateField eas optional but had an error due to an isValidate call

* Also clear isValidated errors for optional/hidden separate date fields (custom card scenario)

* Add classes for ExpirationDate component in same format as for CVC

* Create e2e Page Model for testing Card Component

* Added first e2e tests (using Page Model) for optional expiryDate

* Another test added

* Improved CardPage.getFromWindow fn

* Improved routine to remove DOM elements from state.errors

* Added assertion timeouts to 3DS2 tests to allow flexibility in how long it takes for challenge window to load

* Slowed down 3rd expiryDate test more so that it works better when part of a batch of tests (testcafe bug)

* Mock response fny made generic (part of BasePage) for more easy reuse

* Added tests for expiryDatePolicy = 'hidden'

* Create type for window.mockBinCount so that e2e tests have a way to know/turn off SDK bin mocking (in case it's accidentally been left on)

* Added functionality for e2e tests to know/turn off SDK bin mocking (in case it's accidentally been left on)

* Added line to 'hidden' test

* Moved checkMocking.test so that it is always the first run

* Adding clientScripts to fixture last seems to allow onChange event to always fire (was sometimes failing when entire test suite was run)

* Adding code to custom card playground & e2e files to handle 'optional' date & cvc policies

* Removed id's from playground & e2e custom card examples. Allowed separate date field example to support dual branding

* Added CustomCard Page model & tests for optional expiryDate on the "regular" custom card

* Aligning class names for the "separate" custom card

* Added new utils for Card pages

* Added tests for optional expiryDate on the "separate" custom card

* Added utils for retrieving iframe input & aria error fields

* Convert customcard.unsupportedCard.test.js to use Custom card Page model (& stripped repeated test code)

* onChange function for Cards that maps state.errors to remove DOM nodes - moved to Cards.js (it's just not always picked up from the expiryDate.clientScript.js for some reason)

* Comments added

* Added assertion in e2e test for undefined object

* removing unused code

* Replaced zeroPad fn with String.padStart

* Mock related functionality moved out from BasePage to a mocks util for the Card related pages & tests
---
 packages/e2e/app/src/pages/Cards/Cards.js     |  19 +-
 .../src/pages/CustomCards/CustomCards.html    |  28 +-
 .../app/src/pages/CustomCards/CustomCards.js  |   2 +
 .../pages/CustomCards/customCards.config.js   |  75 +++--
 packages/e2e/tests/_common/cardMocks.js       |  44 +++
 .../e2e/tests/_common/checkMocking.test.js    |  14 +
 packages/e2e/tests/_models/BasePage.js        |  25 ++
 .../e2e/tests/_models/CardComponent.page.js   | 101 ++++++
 .../tests/_models/CustomCardComponent.page.js | 125 ++++++++
 .../binLookup.clientScripts.js                |   6 +
 .../expiryDatePolicies.hidden.test.js         | 134 ++++++++
 .../expiryDatePolicies.optional.test.js       | 175 +++++++++++
 .../threeDS2/threeDS2.default.size.test.js    |  19 +-
 packages/e2e/tests/cards/utils/cardUtils.js   |  38 ++-
 packages/e2e/tests/cards/utils/kcpUtils.js    |   9 +-
 .../customcard.unsupportedCard.test.js        | 296 ++++++------------
 ...xpiryDatePolicies.optional.regular.test.js | 166 ++++++++++
 ...piryDatePolicies.optional.separate.test.js | 197 ++++++++++++
 .../minimumExpiryDate.separate.test.js        |   2 -
 .../tests/customcard/utils/customCardUtils.js |  27 +-
 packages/e2e/tests/index.js                   |  10 +
 packages/e2e/tests/utils/commonUtils.js       |  30 +-
 packages/lib/config/rollup.config.js          |   2 +
 .../Card/components/CardInput/CardInput.tsx   |   8 +-
 .../CardInput/components/CardFields.tsx       |   7 +-
 .../CardInput/components/ExpirationDate.tsx   |  11 +-
 .../components/CardInput/components/types.ts  |  11 +-
 .../Card/components/CardInput/types.ts        |   7 +-
 packages/lib/src/components/Card/types.ts     |   3 +-
 .../SecuredFields/SecuredFieldsProvider.ts    |  13 +-
 .../SecuredFieldsProviderHandlers.ts          |  54 +++-
 .../internal/SecuredFields/defaultProps.ts    |   3 +-
 .../lib/configuration/constants.ts            |  19 +-
 .../SecuredFields/lib/core/AbstractCSF.ts     |   3 +-
 .../lib/core/AbstractSecuredField.ts          |   7 +-
 .../internal/SecuredFields/lib/core/CSF.ts    |   8 +-
 .../lib/core/SecuredField.test.ts             |   2 +-
 .../SecuredFields/lib/core/SecuredField.ts    |  49 ++-
 .../lib/core/createSecuredFields.ts           |   2 +-
 .../lib/core/handleEncryption.ts              |   3 +-
 .../lib/core/handleValidation.ts              |   7 +-
 .../SecuredFields/lib/core/initCSF.ts         |   3 +-
 .../core/utils/handleBrandFromBinLookup.ts    |  64 +++-
 .../lib/core/utils/iframes/setFocusOnFrame.ts |   3 +-
 .../lib/core/utils/processAutoComplete.ts     |   7 +-
 .../lib/core/utils/processBrand.ts            |  14 +-
 .../lib/core/utils/processErrors.ts           |   3 +-
 .../internal/SecuredFields/lib/types.ts       |  14 +-
 .../SecuredFields/lib/utilities/cardType.ts   |   3 +-
 .../lib/utilities/commonUtils.test.ts         | 237 +++++++++++++-
 .../lib/utilities/commonUtils.ts              |  26 +-
 packages/lib/src/utils/hasOwnProperty.ts      |   3 +
 packages/playground/src/pages/Cards/Cards.js  |   2 +-
 .../pages/SecuredFields/SecuredFields.html    |  40 +--
 .../SecuredFields/securedFields.config.js     |  46 ++-
 55 files changed, 1823 insertions(+), 403 deletions(-)
 create mode 100644 packages/e2e/tests/_common/cardMocks.js
 create mode 100644 packages/e2e/tests/_common/checkMocking.test.js
 create mode 100644 packages/e2e/tests/_models/BasePage.js
 create mode 100644 packages/e2e/tests/_models/CardComponent.page.js
 create mode 100644 packages/e2e/tests/_models/CustomCardComponent.page.js
 create mode 100644 packages/e2e/tests/cards/expiryDate/expiryDatePolicies.hidden.test.js
 create mode 100644 packages/e2e/tests/cards/expiryDate/expiryDatePolicies.optional.test.js
 create mode 100644 packages/e2e/tests/customcard/expiryDate/expiryDatePolicies.optional.regular.test.js
 create mode 100644 packages/e2e/tests/customcard/expiryDate/expiryDatePolicies.optional.separate.test.js
 create mode 100644 packages/lib/src/utils/hasOwnProperty.ts

diff --git a/packages/e2e/app/src/pages/Cards/Cards.js b/packages/e2e/app/src/pages/Cards/Cards.js
index 3490535394..c3b687904d 100644
--- a/packages/e2e/app/src/pages/Cards/Cards.js
+++ b/packages/e2e/app/src/pages/Cards/Cards.js
@@ -22,7 +22,24 @@ const initCheckout = async () => {
     window.card = checkout
         .create('card', {
             brands: ['mc', 'visa', 'amex', 'maestro', 'bcmc'],
-            onChange: state => console.log(state),
+            onChange: state => {
+                /**
+                 * Needed now that, for v5, we enhance the securedFields state.errors object with a rootNode prop
+                 *  - Testcafe doesn't like a ClientFunction retrieving an object with a DOM node in it!?
+                 *
+                 *  AND, for some reason, if you place this onChange function in expiryDate.clientScripts.js it doesn't always get read.
+                 *  It'll work when it's part of a small batch but if part of the full test suite it gets ignored - so the tests that rely on
+                 *  window.mappedStateErrors fail
+                 */
+                if (!!Object.keys(state.errors).length) {
+                    // Replace any rootNode values in the objects in state.errors with an empty string
+                    const nuErrors = Object.entries(state.errors).reduce((acc, [fieldType, error]) => {
+                        acc[fieldType] = error ? { ...error, rootNode: '' } : error;
+                        return acc;
+                    }, {});
+                    window.mappedStateErrors = nuErrors;
+                }
+            },
             ...window.cardConfig
         })
         .mount('.card-field');
diff --git a/packages/e2e/app/src/pages/CustomCards/CustomCards.html b/packages/e2e/app/src/pages/CustomCards/CustomCards.html
index e17c4414ca..145529c41c 100644
--- a/packages/e2e/app/src/pages/CustomCards/CustomCards.html
+++ b/packages/e2e/app/src/pages/CustomCards/CustomCards.html
@@ -20,7 +20,7 @@ <h3 class="card-text sf-text">CustomCard #1</h3>
             <div class="merchant-checkout__payment-method__details secured-fields" >
                 <span class="pm-image">
                     <img
-                        id="pmImage"
+                        class="pm-image-1"
                         width="40"
                         src="https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/nocard.svg"
                         alt="card"
@@ -28,17 +28,17 @@ <h3 class="card-text sf-text">CustomCard #1</h3>
                 </span>
                 <span class="pm-image-dual">
                     <img
-                        id="pmImageDual1"
+                        class="pm-image-dual-1"
                         width="40"
                         alt=""
                     />
                     <img
-                        id="pmImageDual2"
+                        class="pm-image-dual-2"
                         width="40"
                         alt=""
                     />
                 </span>
-                <label class="pm-form-label">
+                <label class="pm-form-label pm-form-label-pan">
                     <span class="pm-form-label__text">Card number:</span>
                     <span class="pm-input-field" data-cse="encryptedCardNumber"></span>
                     <span class="pm-form-label__error-text">Please enter a valid credit card number</span>
@@ -67,23 +67,35 @@ <h3 class="card-text sf-text">CustomCard #2</h3>
             <div class="merchant-checkout__payment-method__details secured-fields-2">
                 <span class="pm-image">
                     <img
-                        id="pmImage2"
+                        class="pm-image-1"
                         width="40"
                         src="https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/nocard.svg"
                         alt=""
                     />
                 </span>
-                <label class="pm-form-label">
+                <span class="pm-image-dual">
+                    <img
+                            class="pm-image-dual-1"
+                            width="40"
+                            alt=""
+                    />
+                    <img
+                            class="pm-image-dual-2"
+                            width="40"
+                            alt=""
+                    />
+                </span>
+                <label class="pm-form-label pm-form-label-pan">
                     <span class="pm-form-label__text">Card number:</span>
                     <span class="pm-input-field" data-cse="encryptedCardNumber"></span>
                     <span class="pm-form-label__error-text">Please enter a valid credit card number</span>
                 </label>
-                <label class="pm-form-label exp-month">
+                <label class="pm-form-label pm-form-label--exp-month">
                     <span class="pm-form-label__text">Expiry month:</span>
                     <span class="pm-input-field" data-cse="encryptedExpiryMonth"></span>
                     <span class="pm-form-label__error-text">Date error text</span>
                 </label>
-                <label class="pm-form-label exp-year">
+                <label class="pm-form-label pm-form-label--exp-year">
                     <span class="pm-form-label__text">Expiry year:</span>
                     <span class="pm-input-field" data-cse="encryptedExpiryYear"></span>
                     <span class="pm-form-label__error-text">Date error text</span>
diff --git a/packages/e2e/app/src/pages/CustomCards/CustomCards.js b/packages/e2e/app/src/pages/CustomCards/CustomCards.js
index d37c3e32c3..4a4b756da3 100644
--- a/packages/e2e/app/src/pages/CustomCards/CustomCards.js
+++ b/packages/e2e/app/src/pages/CustomCards/CustomCards.js
@@ -38,8 +38,10 @@ const initCheckout = async () => {
         .create('securedfields', {
             type: 'card',
             brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'cartebancaire'],
+            onConfigSuccess,
             onBrand,
             onFocus: setFocus,
+            onBinLookup,
             onChange,
             ...window.cardConfig
         })
diff --git a/packages/e2e/app/src/pages/CustomCards/customCards.config.js b/packages/e2e/app/src/pages/CustomCards/customCards.config.js
index c4d1bcea03..4f9bcb7f1c 100644
--- a/packages/e2e/app/src/pages/CustomCards/customCards.config.js
+++ b/packages/e2e/app/src/pages/CustomCards/customCards.config.js
@@ -1,9 +1,11 @@
 let hideCVC = false;
+let optionalCVC = false;
 let hideDate = false;
+let optionalDate = false;
 let isDualBranding = false;
 
 function setAttributes(el, attrs) {
-    for (var key in attrs) {
+    for (const key in attrs) {
         el.setAttribute(key, attrs[key]);
     }
 }
@@ -42,17 +44,13 @@ export function onConfigSuccess(pCallbackObj) {
 }
 
 export function setCCErrors(pCallbackObj) {
-    if (pCallbackObj.error === 'originKeyError') {
-        document.querySelector('.card-input__spinner__holder').style.display = 'none';
-        pCallbackObj.rootNode.style.display = 'block';
-        return;
-    }
-
     if (!pCallbackObj.rootNode) return;
 
     const sfNode = pCallbackObj.rootNode.querySelector(`[data-cse="${pCallbackObj.fieldType}"]`);
     const errorNode = sfNode.parentNode.querySelector('.pm-form-label__error-text');
 
+    if (errorNode.innerText === '' && pCallbackObj.error === '') return;
+
     if (pCallbackObj.error !== '') {
         errorNode.style.display = 'block';
         errorNode.innerText = pCallbackObj.errorI18n;
@@ -102,26 +100,52 @@ export function onBrand(pCallbackObj) {
         cvcNode.style.display = 'block';
     }
 
+    // Optional cvc fields
+    if (pCallbackObj.cvcPolicy === 'optional' && !optionalCVC) {
+        optionalCVC = true;
+        if (cvcNode) cvcNode.querySelector('.pm-form-label__text').innerText = 'CVV/CVC (optional):';
+    }
+
+    if (optionalCVC && pCallbackObj.cvcPolicy !== 'optional') {
+        optionalCVC = false;
+        if (cvcNode) cvcNode.querySelector('.pm-form-label__text').innerText = 'CVV/CVC:';
+    }
+
     /**
      * Deal with showing/hiding date field(s)
      */
     const dateNode = pCallbackObj.rootNode.querySelector('.pm-form-label--exp-date');
-    const monthNode = pCallbackObj.rootNode.querySelector('.pm-form-label.exp-month');
-    const yearNode = pCallbackObj.rootNode.querySelector('.pm-form-label.exp-year');
+    const monthNode = pCallbackObj.rootNode.querySelector('.pm-form-label--exp-month');
+    const yearNode = pCallbackObj.rootNode.querySelector('.pm-form-label--exp-year');
 
-    if (pCallbackObj.datePolicy === 'hidden' && !hideDate) {
+    if (pCallbackObj.expiryDatePolicy === 'hidden' && !hideDate) {
         hideDate = true;
         if (dateNode) dateNode.style.display = 'none';
         if (monthNode) monthNode.style.display = 'none';
         if (yearNode) yearNode.style.display = 'none';
     }
 
-    if (hideDate && pCallbackObj.datePolicy !== 'hidden') {
+    if (hideDate && pCallbackObj.expiryDatePolicy !== 'hidden') {
         hideDate = false;
         if (dateNode) dateNode.style.display = 'block';
         if (monthNode) monthNode.style.display = 'block';
         if (yearNode) yearNode.style.display = 'block';
     }
+
+    // Optional date fields
+    if (pCallbackObj.expiryDatePolicy === 'optional' && !optionalDate) {
+        optionalDate = true;
+        if (dateNode) dateNode.querySelector('.pm-form-label__text').innerText = 'Expiry date (optional):';
+        if (monthNode) monthNode.querySelector('.pm-form-label__text').innerText = 'Expiry month (optional):';
+        if (yearNode) yearNode.querySelector('.pm-form-label__text').innerText = 'Expiry year (optional):';
+    }
+
+    if (optionalDate && pCallbackObj.expiryDatePolicy !== 'optional') {
+        optionalDate = false;
+        if (dateNode) dateNode.querySelector('.pm-form-label__text').innerText = 'Expiry date:';
+        if (monthNode) monthNode.querySelector('.pm-form-label__text').innerText = 'Expiry month:';
+        if (yearNode) yearNode.querySelector('.pm-form-label__text').innerText = 'Expiry year:';
+    }
 }
 
 function dualBrandListener(e) {
@@ -133,10 +157,10 @@ function resetDualBranding(rootNode) {
 
     setLogosActive(rootNode);
 
-    const brandLogo1 = rootNode.querySelector('#pmImageDual1');
+    const brandLogo1 = rootNode.querySelector('.pm-image-dual-1');
     brandLogo1.removeEventListener('click', dualBrandListener);
 
-    const brandLogo2 = rootNode.querySelector('#pmImageDual2');
+    const brandLogo2 = rootNode.querySelector('.pm-image-dual-2');
     brandLogo2.removeEventListener('click', dualBrandListener);
 }
 
@@ -144,8 +168,8 @@ function resetDualBranding(rootNode) {
  * Implementing dual branding
  */
 function onDualBrand(pCallbackObj) {
-    const brandLogo1 = pCallbackObj.rootNode.querySelector('#pmImageDual1');
-    const brandLogo2 = pCallbackObj.rootNode.querySelector('#pmImageDual2');
+    const brandLogo1 = pCallbackObj.rootNode.querySelector('.pm-image-dual-1');
+    const brandLogo2 = pCallbackObj.rootNode.querySelector('.pm-image-dual-2');
 
     isDualBranding = true;
 
@@ -189,13 +213,12 @@ export function onBinLookup(pCallbackObj) {
 }
 
 export function onChange(state, component) {
+    // From v5 the onError handler is no longer only for card comp related errors - so watch state.errors and call the card specific setCCErrors based on this
     if (!!Object.keys(state.errors).length) {
         const errors = Object.entries(state.errors).map(([fieldType, error]) => {
             return {
                 fieldType,
-                error: !!error ? error.toString() : '',
-                rootNode: component._node,
-                errorI18n: component.props.i18n.translations[error]
+                ...(error ? error : { error: '', rootNode: component._node })
             };
         });
         errors.forEach(setCCErrors);
@@ -207,7 +230,21 @@ export function onChange(state, component) {
      */
     if (isDualBranding) {
         const mode = state.valid.encryptedCardNumber ? 'dualBranding_valid' : 'dualBranding_notValid';
-        setLogosActive(document.querySelector('.secured-fields'), mode);
+        setLogosActive(component._node, mode);
+    }
+
+    /**
+     * For running the e2e tests in testcafe - we need a mapped version of state.errors
+     * since, for v5, we enhance the securedFields state.errors object with a rootNode prop
+     * & Testcafe doesn't like a ClientFunction retrieving an object with a DOM node in it!?
+     */
+    if (!!Object.keys(state.errors).length) {
+        // Replace any rootNode values in the objects in state.errors with an empty string
+        const nuErrors = Object.entries(state.errors).reduce((acc, [fieldType, error]) => {
+            acc[fieldType] = error ? { ...error, rootNode: '' } : error;
+            return acc;
+        }, {});
+        window.mappedStateErrors = nuErrors;
     }
 }
 
diff --git a/packages/e2e/tests/_common/cardMocks.js b/packages/e2e/tests/_common/cardMocks.js
new file mode 100644
index 0000000000..7271ba5629
--- /dev/null
+++ b/packages/e2e/tests/_common/cardMocks.js
@@ -0,0 +1,44 @@
+import { ClientFunction, RequestMock } from 'testcafe';
+import { BASE_URL } from '../pages';
+
+import path from 'path';
+require('dotenv').config({ path: path.resolve('../../', '.env') });
+
+export const binLookupUrl = `https://checkoutshopper-test.adyen.com/checkoutshopper/v2/bin/binLookup?token=${process.env.CLIENT_KEY}`;
+
+/**
+ * Functionality for mocking a /binLookup API response via testcafe's fixture.requestHooks()
+ *
+ * @param requestURL
+ * @param mockedResponse
+ * @returns {RequestMock}
+ */
+export const getBinLookupMock = (requestURL, mockedResponse) => {
+    return RequestMock()
+        .onRequestTo(request => {
+            return request.url === requestURL && request.method === 'post';
+        })
+        .respond(
+            (req, res) => {
+                const body = JSON.parse(req.body);
+                mockedResponse.requestId = body.requestId;
+                res.setBody(mockedResponse);
+            },
+            200,
+            {
+                'Access-Control-Allow-Origin': BASE_URL
+            }
+        );
+};
+
+// For the tests as a whole - throw an error if SDK binLookup mocking is turned on
+export const checkSDKMocking = ClientFunction(() => {
+    if (window.mockBinCount > 0) {
+        throw new Error('SDK bin mocking is turned on - this will affect/break the tests - so turn it off in triggerBinLookup.ts');
+    }
+});
+
+// For individual test suites (perhaps being run in isolation) - provide a way to ensure SDK bin mocking is turned off
+export const turnOffSDKMocking = ClientFunction(() => {
+    window.mockBinCount = 0;
+});
diff --git a/packages/e2e/tests/_common/checkMocking.test.js b/packages/e2e/tests/_common/checkMocking.test.js
new file mode 100644
index 0000000000..5456e348da
--- /dev/null
+++ b/packages/e2e/tests/_common/checkMocking.test.js
@@ -0,0 +1,14 @@
+import { checkSDKMocking } from './cardMocks';
+import CardComponentPage from '../_models/CardComponent.page';
+
+const cardPage = new CardComponentPage();
+
+fixture`Test that bin mocking isn't turned on in the SDK`.page(cardPage.pageUrl);
+
+/**
+ * Check that bin mocking isn't turned on in the SDK
+ * - this is used for testing (in triggerBinLookup.ts) but if left on will break or skew the tests
+ */
+test('Check for SDK Bin mocking', async () => {
+    await checkSDKMocking();
+});
diff --git a/packages/e2e/tests/_models/BasePage.js b/packages/e2e/tests/_models/BasePage.js
new file mode 100644
index 0000000000..e34e891604
--- /dev/null
+++ b/packages/e2e/tests/_models/BasePage.js
@@ -0,0 +1,25 @@
+import { BASE_URL } from '../pages';
+import { ClientFunction } from 'testcafe';
+
+export default class BasePage {
+    constructor(url) {
+        this.pageUrl = `${BASE_URL}/${url}`;
+    }
+
+    /**
+     * Client function that accesses properties on the window object
+     */
+    getFromWindow = ClientFunction(path => {
+        const splitPath = path.split('.');
+        const reducer = (xs, x) => (xs && xs[x] !== undefined ? xs[x] : undefined);
+
+        return splitPath.reduce(reducer, window);
+    });
+
+    /**
+     * Hack to force testcafe to fire expected blur events as (securedFields) switch focus
+     */
+    setForceClick = ClientFunction(val => {
+        window.testCafeForceClick = val;
+    });
+}
diff --git a/packages/e2e/tests/_models/CardComponent.page.js b/packages/e2e/tests/_models/CardComponent.page.js
new file mode 100644
index 0000000000..c86e9659a6
--- /dev/null
+++ b/packages/e2e/tests/_models/CardComponent.page.js
@@ -0,0 +1,101 @@
+import { ClientFunction, Selector } from 'testcafe';
+import BasePage from './BasePage';
+import { getIframeSelector } from '../utils/commonUtils';
+import cu from '../cards/utils/cardUtils';
+
+/**
+ * The Page Model Pattern is a test automation pattern that allows you to create an
+ * abstraction of the tested page, and use it in test code to refer to page elements
+ */
+export default class CardPage extends BasePage {
+    constructor() {
+        super('cards');
+
+        const BASE_EL = '.card-field';
+
+        /**
+         * CardNumber
+         */
+        // Top level <div>
+        this.numHolder = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber`);
+        //        this.numHolderInError = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber.adyen-checkout__field--error`);
+
+        // The <span> that holds the label text (first child of the <label>)
+        this.numLabelText = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber .adyen-checkout__label__text`);
+        this.numLabelTextError = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber .adyen-checkout__label__text--error`);
+
+        // The <span> that holds the iframe
+        this.numSpan = Selector(`${BASE_EL} .adyen-checkout__card__cardNumber__input`);
+
+        // The <span> that holds the error text
+        this.numErrorText = Selector(`${BASE_EL} .adyen-checkout__field--cardNumber .adyen-checkout__error-text`);
+
+        // The <img> el that holds the card brand logo (actually a child of this.numSpan)
+        this.brandingIcon = Selector(`${BASE_EL} .adyen-checkout__card__cardNumber__brandIcon`);
+
+        /**
+         * ExpiryDate
+         */
+        // Top level <div>
+        this.dateHolder = Selector(`${BASE_EL} .adyen-checkout__field__exp-date`);
+        //        this.dateHolderInError = Selector(`${BASE_EL} .adyen-checkout__field__exp-date.adyen-checkout__field--error`);
+        this.dateHolderAsOptional = Selector(`${BASE_EL} .adyen-checkout__field__exp-date--optional`);
+
+        // The <span> that holds the label text (first child of the <label>)
+        this.dateLabelText = Selector(`${BASE_EL} .adyen-checkout__field__exp-date .adyen-checkout__label__text`);
+        this.dateLabelTextError = Selector(`${BASE_EL} .adyen-checkout__field__exp-date .adyen-checkout__label__text--error`);
+
+        // The <span> that holds the iframe
+        this.dateSpan = Selector(`${BASE_EL} .adyen-checkout__card__exp-date__input`);
+
+        // The <span> that holds the error text
+        this.dateErrorText = Selector(`${BASE_EL} .adyen-checkout__field__exp-date .adyen-checkout__error-text`);
+
+        /**
+         * CVC
+         */
+        // Top level <div>
+        this.cvcHolder = Selector(`${BASE_EL} .adyen-checkout__field__cvc`);
+        //        this.cvcHolderInError = Selector(`${BASE_EL} .adyen-checkout__field__cvc.adyen-checkout__field--error`);
+        this.cvcHolderAsOptional = Selector(`${BASE_EL} .adyen-checkout__field__cvc--optional`);
+
+        // The <span> that holds the label text (first child of the <label>)
+        this.cvcLabelText = Selector(`${BASE_EL} .adyen-checkout__field__cvc .adyen-checkout__label__text`);
+        this.cvcLabelTextError = Selector(`${BASE_EL} .adyen-checkout__field__cvc .adyen-checkout__label__text--error`);
+
+        // The <span> that holds the iframe
+        this.cvcSpan = Selector(`${BASE_EL} .adyen-checkout__card__cvc__input`);
+
+        // The <span> that holds the error text
+        this.cvcErrorText = Selector(`${BASE_EL} .adyen-checkout__field__cvc .adyen-checkout__error-text`);
+
+        /**
+         * Dual branding
+         */
+        this.dualBrandingIconHolder = Selector(`${BASE_EL} .adyen-checkout__card__dual-branding__buttons`);
+        this.dualBrandingIconHolderActive = Selector(`${BASE_EL} .adyen-checkout__card__dual-branding__buttons--active`);
+
+        /**
+         * KCP
+         */
+        this.passwordSpan = Selector(`${BASE_EL} [data-cse="encryptedPassword"]`);
+
+        /**
+         * iframe utils
+         */
+        this.iframeSelector = getIframeSelector(`${BASE_EL} iframe`);
+        this.cardUtils = cu(this.iframeSelector);
+
+        /**
+         * Pay button
+         */
+        this.payButton = Selector(`${BASE_EL} .adyen-checkout__button--pay`);
+    }
+
+    getFromState = ClientFunction(path => {
+        const splitPath = path.split('.');
+        const reducer = (xs, x) => (xs && xs[x] !== undefined ? xs[x] : undefined);
+
+        return splitPath.reduce(reducer, window.card.state);
+    });
+}
diff --git a/packages/e2e/tests/_models/CustomCardComponent.page.js b/packages/e2e/tests/_models/CustomCardComponent.page.js
new file mode 100644
index 0000000000..df4b30ab86
--- /dev/null
+++ b/packages/e2e/tests/_models/CustomCardComponent.page.js
@@ -0,0 +1,125 @@
+import { ClientFunction, Selector } from 'testcafe';
+import BasePage from './BasePage';
+import { getIframeSelector } from '../utils/commonUtils';
+import cu from '../cards/utils/cardUtils';
+import ccu from '../customcard/utils/customCardUtils';
+
+export default class CustomCardPage extends BasePage {
+    constructor(baseEl = '.secured-fields') {
+        super('customcards');
+
+        const BASE_EL = baseEl;
+
+        /**
+         * CardNumber
+         */
+        // Top level <label>
+        this.numHolder = Selector(`${BASE_EL} .pm-form-label-pan`);
+
+        // The <span> that holds the label text (first child of the <label>)
+        this.numLabelText = Selector(`${BASE_EL} .pm-form-label-pan .pm-form-label__text`);
+
+        // The <span> that holds the iframe
+        this.numSpan = Selector(`${BASE_EL} .pm-form-label-pan .pm-input-field`);
+
+        // The <span> that holds the error text - display: none | block
+        this.numErrorText = Selector(`${BASE_EL} .pm-form-label-pan .pm-form-label__error-text`);
+
+        /**
+         * ExpiryDate
+         */
+        // Top level <div>
+        this.dateHolder = Selector(`${BASE_EL} .pm-form-label--exp-date`);
+
+        // The <span> that holds the label text (first child of the <label>)
+        this.dateLabelText = Selector(`${BASE_EL} .pm-form-label--exp-date .pm-form-label__text`);
+
+        // The <span> that holds the iframe
+        this.dateSpan = Selector(`${BASE_EL} .pm-form-label--exp-date .pm-input-field`);
+
+        // The <span> that holds the error text
+        this.dateErrorText = Selector(`${BASE_EL} .pm-form-label--exp-date .pm-form-label__error-text`);
+
+        /**
+         * ExpiryMonth
+         */
+        // Top level <div>
+        this.monthHolder = Selector(`${BASE_EL} .pm-form-label--exp-month`);
+
+        // The <span> that holds the label text (first child of the <label>)
+        this.monthLabelText = Selector(`${BASE_EL} .pm-form-label--exp-month .pm-form-label__text`);
+
+        // The <span> that holds the iframe
+        this.monthSpan = Selector(`${BASE_EL} .pm-form-label--exp-month .pm-input-field`);
+
+        // The <span> that holds the error text
+        this.monthErrorText = Selector(`${BASE_EL} .pm-form-label--exp-month .pm-form-label__error-text`);
+
+        /**
+         * ExpiryYear
+         */
+        // Top level <div>
+        this.yearHolder = Selector(`${BASE_EL} .pm-form-label--exp-year`);
+
+        // The <span> that holds the label text (first child of the <label>)
+        this.yearLabelText = Selector(`${BASE_EL} .pm-form-label--exp-year .pm-form-label__text`);
+
+        // The <span> that holds the iframe
+        this.yearSpan = Selector(`${BASE_EL} .pm-form-label--exp-year .pm-input-field`);
+
+        // The <span> that holds the error text
+        this.yearErrorText = Selector(`${BASE_EL} .pm-form-label--exp-year .pm-form-label__error-text`);
+
+        /**
+         * CVC
+         */
+        // Top level <div>
+        this.cvcHolder = Selector(`${BASE_EL} .pm-form-label--cvc`);
+
+        // The <span> that holds the label text (first child of the <label>)
+        this.cvcLabelText = Selector(`${BASE_EL} .pm-form-label--cvc .pm-form-label__text`);
+
+        // The <span> that holds the iframe
+        this.cvcSpan = Selector(`${BASE_EL} .pm-form-label--cvc .pm-input-field`);
+
+        // The <span> that holds the error text
+        this.cvcErrorText = Selector(`${BASE_EL} .pm-form-label--cvc .pm-form-label__error-text`);
+
+        /**
+         * Branding
+         */
+        // The <img> el that holds the card brand logo
+        this.brandingIcon = Selector(`${BASE_EL} .pm-image-1`);
+
+        /**
+         * Dual branding
+         */
+        // Has display:block when dual branding is happening
+        // Changes opacity & pointer-events to indicate active/inactive (dual branded card complete/incomplete)
+        this.dualBrandingIconHolder = Selector(`${BASE_EL} .pm-image-dual`); // Changes opacity & pointer-events to indicate active/inactive
+
+        this.dualBrandImage1 = Selector(`${BASE_EL} .pm-image-dual-1`);
+        this.dualBrandImage2 = Selector(`${BASE_EL} .pm-image-dual-2`);
+
+        /**
+         * iframe utils
+         */
+        this.iframeSelector = getIframeSelector(`${BASE_EL} iframe`);
+        this.cardUtils = cu(this.iframeSelector);
+
+        // Applies to custom card with separate date fields - where month, year & cvc have different indices
+        this.customCardUtils = ccu(this.iframeSelector);
+
+        /**
+         * Pay button
+         */
+        this.payButton = Selector(`${BASE_EL} .adyen-checkout__button`);
+    }
+
+    getFromState = ClientFunction((base, path) => {
+        const splitPath = path.split('.');
+        const reducer = (xs, x) => (xs && xs[x] !== undefined ? xs[x] : undefined);
+
+        return splitPath.reduce(reducer, window[base].state);
+    });
+}
diff --git a/packages/e2e/tests/cards/binLookup/responseAndCallbacks/binLookup.clientScripts.js b/packages/e2e/tests/cards/binLookup/responseAndCallbacks/binLookup.clientScripts.js
index 1479884169..f92c416c32 100644
--- a/packages/e2e/tests/cards/binLookup/responseAndCallbacks/binLookup.clientScripts.js
+++ b/packages/e2e/tests/cards/binLookup/responseAndCallbacks/binLookup.clientScripts.js
@@ -8,6 +8,12 @@ window.cardConfig = {
         window.binLookupObj = obj;
     },
     onChange: state => {
+        // Needed now that, for v5, we enhance the securedFields state.errors object with a rootNode prop
+        // - Testcafe doesn't like a ClientFunction retrieving an object with a DOM node in it!?
+        if (state.errors.encryptedCardNumber) {
+            state.errors.encryptedCardNumber.rootNode = '';
+        }
+
         window.errorObj = state.errors;
     }
 };
diff --git a/packages/e2e/tests/cards/expiryDate/expiryDatePolicies.hidden.test.js b/packages/e2e/tests/cards/expiryDate/expiryDatePolicies.hidden.test.js
new file mode 100644
index 0000000000..6e369e1064
--- /dev/null
+++ b/packages/e2e/tests/cards/expiryDate/expiryDatePolicies.hidden.test.js
@@ -0,0 +1,134 @@
+import CardComponentPage from '../../_models/CardComponent.page';
+import { REGULAR_TEST_CARD } from '../utils/constants';
+import { binLookupUrl, getBinLookupMock, turnOffSDKMocking } from '../../_common/cardMocks';
+
+const cardPage = new CardComponentPage();
+
+/**
+ * NOTE - we are mocking the response until such time as we have a genuine card,
+ * that's not in our local RegEx, that returns the properties we want to test
+ */
+const mockedResponse = {
+    brands: [
+        {
+            brand: 'cup', // keep as a recognised card brand (cup) until we have a genuine brand w. hidden expiryDate
+            cvcPolicy: 'hidden',
+            enableLuhnCheck: true,
+            expiryDatePolicy: 'hidden',
+            supported: true
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestId: null
+};
+
+const mock = getBinLookupMock(binLookupUrl, mockedResponse);
+
+fixture`Test how Card Component handles hidden expiryDate policy`
+    .beforeEach(async t => {
+        await t.navigateTo(cardPage.pageUrl);
+        await turnOffSDKMocking();
+    })
+    .requestHooks(mock)
+    .clientScripts('./expiryDate.clientScripts.js');
+
+test('#1 Testing hidden expiryDatePolicy - how UI & state respond', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // UI reflects that binLookup says expiryDate is hidden
+    await t.expect(cardPage.dateHolder.filterHidden().exists).ok();
+
+    // ...and cvc is hidden too
+    await t.expect(cardPage.cvcHolder.filterHidden().exists).ok();
+
+    // Card seen as valid (since CVC is hidden too)
+    await t.expect(cardPage.getFromState('isValid')).eql(true);
+
+    // Clear number and see UI & state reset
+    await cardPage.cardUtils.deleteCardNumber(t);
+    await t
+        .expect(cardPage.dateHolder.filterVisible().exists)
+        .ok()
+        .expect(cardPage.cvcHolder.filterVisible().exists)
+        .ok()
+        .expect(cardPage.getFromState('isValid'))
+        .eql(false);
+});
+
+test('#2 Testing hidden expiryDatePolicy - validating fields first and then entering PAN should see errors cleared from state', async t => {
+    // Start, allow time for iframes to load so isValidated call to SF won't fail
+    await t.wait(1000);
+
+    // Click pay
+    await t.click(cardPage.payButton);
+
+    // Expect errors in UI
+    await t
+        .expect(cardPage.numLabelTextError.exists)
+        .ok()
+        .expect(cardPage.dateLabelTextError.exists)
+        .ok()
+        .expect(cardPage.cvcLabelTextError.exists)
+        .ok();
+
+    // Expect errors in (mapped) state
+    await t
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate'))
+        .notEql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate'))
+        .notEql(undefined)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedSecurityCode'))
+        .notEql(null);
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // Expect errors to be cleared - since the fields were in error because they were empty
+    // and now the PAN field is filled and the date & cvc fields are now hidden...
+
+    // ...State errors cleared
+    await t
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate'))
+        .eql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedSecurityCode'))
+        .eql(null);
+});
+
+test('#3 Testing hidden expiryDatePolicy - date field in error does not stop card becoming valid', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Card out of date
+    await cardPage.cardUtils.fillDate(t, '12/90');
+
+    // Expect errors in UI
+    await t.expect(cardPage.dateLabelTextError.exists).ok();
+
+    // Force blur event to fire on date field
+    await cardPage.setForceClick(true);
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // UI reflects that binLookup says expiryDate is hidden
+    await t.expect(cardPage.dateHolder.filterHidden().exists).ok();
+
+    // Card seen as valid (despite date field technically being in error)
+    await t.expect(cardPage.getFromState('isValid')).eql(true);
+
+    // Expect errors in (mapped) state to remain
+    await t.expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate')).notEql(null);
+
+    // Delete number
+    await cardPage.cardUtils.deleteCardNumber(t);
+
+    // Errors in UI visible again
+    await t.expect(cardPage.dateLabelTextError.exists).ok();
+
+    // Card is not valid
+    await t.expect(cardPage.getFromState('isValid')).eql(false);
+});
diff --git a/packages/e2e/tests/cards/expiryDate/expiryDatePolicies.optional.test.js b/packages/e2e/tests/cards/expiryDate/expiryDatePolicies.optional.test.js
new file mode 100644
index 0000000000..f327819c6f
--- /dev/null
+++ b/packages/e2e/tests/cards/expiryDate/expiryDatePolicies.optional.test.js
@@ -0,0 +1,175 @@
+import { binLookupUrl, getBinLookupMock, turnOffSDKMocking } from '../../_common/cardMocks';
+import CardComponentPage from '../../_models/CardComponent.page';
+import { REGULAR_TEST_CARD } from '../utils/constants';
+import { Selector } from 'testcafe';
+
+const cardPage = new CardComponentPage();
+
+/**
+ * NOTE - we are mocking the response until such time as we have a genuine card,
+ * that's not in our local RegEx, that returns the properties we want to test
+ */
+const mockedResponse = {
+    brands: [
+        {
+            brand: 'cup', // keep as a recognised card brand (cup) until we have a genuine brand w. optional expiryDate
+            cvcPolicy: 'optional',
+            enableLuhnCheck: true,
+            expiryDatePolicy: 'optional',
+            supported: true
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestId: null
+};
+
+const mock = getBinLookupMock(binLookupUrl, mockedResponse);
+
+fixture`Test how Card Component handles optional expiryDate policy`
+    .beforeEach(async t => {
+        await t.navigateTo(cardPage.pageUrl);
+        // For individual test suites (that rely on binLookup & perhaps are being run in isolation)
+        // - provide a way to ensure SDK bin mocking is turned off
+        await turnOffSDKMocking();
+    })
+    .requestHooks(mock)
+    .clientScripts('./expiryDate.clientScripts.js');
+
+test('#1 Testing optional expiryDatePolicy - how UI & state respond', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Regular date label
+    await t.expect(cardPage.dateLabelText.withText('(optional)').exists).notOk();
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // UI reflects that binLookup says expiryDate is optional
+    await t.expect(cardPage.dateLabelText.withText('(optional)').exists).ok();
+
+    // ...and cvc is optional too
+    await t.expect(cardPage.cvcLabelText.withText('(optional)').exists).ok();
+
+    // Card seen as valid (since CVC is optional too)
+    await t.expect(cardPage.getFromState('isValid')).eql(true);
+
+    // Clear number and see UI & state reset
+    await cardPage.cardUtils.deleteCardNumber(t);
+    await t
+        .expect(cardPage.dateLabelText.withText('(optional)').exists)
+        .notOk()
+        .expect(cardPage.cvcLabelText.withText('(optional)').exists)
+        .notOk()
+        .expect(cardPage.getFromState('isValid'))
+        .eql(false);
+});
+
+test('#2 Testing optional expiryDatePolicy - how securedField responds', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Expect iframe to exist in expiryDate field with aria-required attr set to true
+    await t
+        .switchToIframe(cardPage.iframeSelector.nth(1))
+        .expect(Selector('[data-fieldtype="encryptedExpiryDate"]').getAttribute('aria-required'))
+        .eql('true')
+        .switchToMainWindow();
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // Expect iframe to exist in expiryDate field and with aria-required attr set to false
+    await t
+        .switchToIframe(cardPage.iframeSelector.nth(1))
+        .expect(Selector('[data-fieldtype="encryptedExpiryDate"]').getAttribute('aria-required'))
+        .eql('false')
+        .switchToMainWindow();
+
+    // Clear number and see SF's aria-required reset
+    await cardPage.cardUtils.deleteCardNumber(t);
+
+    await t
+        .switchToIframe(cardPage.iframeSelector.nth(1))
+        .expect(Selector('[data-fieldtype="encryptedExpiryDate"]').getAttribute('aria-required'))
+        .eql('true')
+        .switchToMainWindow();
+});
+
+test('#3 Testing optional expiryDatePolicy - validating fields first and then entering PAN should see errors cleared from both UI & state', async t => {
+    // Start, allow time for iframes to load so isValidated call to SF won't fail
+    await t.wait(1000);
+
+    // Click pay
+    await t.click(cardPage.payButton);
+
+    // Expect errors in UI
+    await t
+        .expect(cardPage.numLabelTextError.exists)
+        .ok()
+        .expect(cardPage.dateLabelTextError.exists)
+        .ok()
+        .expect(cardPage.cvcLabelTextError.exists)
+        .ok();
+
+    // Expect errors in (mapped) state
+    await t
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate'))
+        .notEql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedSecurityCode'))
+        .notEql(null);
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // Expect errors to be cleared - since the fields were in error because they were empty
+    // and now the PAN field is filled and the date & cvc fields are now optional...
+
+    // ...UI errors cleared...
+    await t
+        .expect(cardPage.numLabelTextError.exists)
+        .notOk()
+        .expect(cardPage.dateLabelTextError.exists)
+        .notOk()
+        .expect(cardPage.cvcLabelTextError.exists)
+        .notOk();
+
+    // ...State errors cleared
+    await t
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate'))
+        .eql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedSecurityCode'))
+        .eql(null);
+});
+
+test('#4 Testing optional expiryDatePolicy - date field in error DOES stop card becoming valid', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Card out of date
+    await cardPage.cardUtils.fillDate(t, '12/90');
+
+    // Expect errors in UI
+    await t.expect(cardPage.dateLabelTextError.exists).ok();
+
+    // Force blur event to fire on date field
+    await cardPage.setForceClick(true);
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // UI reflects that binLookup says expiryDate is optional
+    await t.expect(cardPage.dateLabelText.withText('(optional)').exists).ok();
+
+    // Visual errors persist in UI
+    await t.expect(cardPage.dateLabelTextError.exists).ok();
+
+    // Card not seen as valid
+    await t.expect(cardPage.getFromState('isValid')).eql(false);
+
+    // Delete erroneous date
+    await cardPage.cardUtils.deleteDate(t);
+
+    // Card is now valid
+    await t.expect(cardPage.getFromState('isValid')).eql(true);
+});
diff --git a/packages/e2e/tests/cards/threeDS2/threeDS2.default.size.test.js b/packages/e2e/tests/cards/threeDS2/threeDS2.default.size.test.js
index 14947ecf33..863b6cd2e2 100644
--- a/packages/e2e/tests/cards/threeDS2/threeDS2.default.size.test.js
+++ b/packages/e2e/tests/cards/threeDS2/threeDS2.default.size.test.js
@@ -60,25 +60,23 @@ test('Fill in card number that will trigger full flow (fingerprint & challenge)'
         // Expect no errors
         .expect(Selector('.adyen-checkout__field--error').exists)
         .notOk()
-        // Allow time for the /submitThreeDS2Fingerprint call, which we expect to be successful
-        .wait(2000)
         .expect(loggerSubmitThreeDS2.contains(r => r.response.statusCode === 200))
-        .ok();
+        // Allow time for the /submitThreeDS2Fingerprint call, which we expect to be successful
+        .ok({ timeout: 2000 });
 
     // console.log(logger.requests[0].response.headers);
 
     // Check challenge window size is read from default config prop
-    await t.expect(Selector('.adyen-checkout__threeds2__challenge--02').exists).ok();
+    await t.expect(Selector('.adyen-checkout__threeds2__challenge--02').exists).ok({ timeout: 3000 });
 
     // Complete challenge
     await fillChallengeField(t);
     await submitChallenge(t);
 
     await t
-        // Allow time for the /details call, which we expect to be successful
-        .wait(2000)
         .expect(loggerDetails.contains(r => r.response.statusCode === 200))
-        .ok()
+        // Allow time for the /details call, which we expect to be successful
+        .ok({ timeout: 2000 })
         .wait(1000);
 
     // console.log(logger.requests[1].response.headers);
@@ -111,17 +109,16 @@ test('Fill in card number that will trigger challenge-only flow', async t => {
         .notOk();
 
     // Check challenge window size is read from config prop
-    await t.expect(Selector('.adyen-checkout__threeds2__challenge--02').exists).ok();
+    await t.expect(Selector('.adyen-checkout__threeds2__challenge--02').exists).ok({ timeout: 3000 });
 
     // Complete challenge
     await fillChallengeField(t);
     await submitChallenge(t);
 
     await t
-        // Allow time for the ONLY details call, which we expect to be successful
-        .wait(2000)
         .expect(loggerDetails.contains(r => r.response.statusCode === 200))
-        .ok()
+        // Allow time for the ONLY details call, which we expect to be successful
+        .ok({ timeout: 2000 })
         .wait(2000);
 
     // Check the value of the alert text
diff --git a/packages/e2e/tests/cards/utils/cardUtils.js b/packages/e2e/tests/cards/utils/cardUtils.js
index c1515c46ee..2de66a7440 100644
--- a/packages/e2e/tests/cards/utils/cardUtils.js
+++ b/packages/e2e/tests/cards/utils/cardUtils.js
@@ -1,7 +1,10 @@
-import { fillIFrame, deleteFromIFrame, deleteDigitsFromIFrame } from '../../utils/commonUtils';
+import { getInputSelector, fillIFrame, deleteFromIFrame, deleteDigitsFromIFrame, checkIframeForAttributeValue } from '../../utils/commonUtils';
 import { REGULAR_TEST_CARD, TEST_DATE_VALUE, TEST_CVC_VALUE } from './constants';
 
 /**
+ * These utils provide a 'friendly' wrapper around the more generic functions in commonUtils
+ * - prefilling the iframe selector, an iframe index and the iframe input element selector
+ *
  * Unique to each component are where the iframes are to be found,
  * the indices by which a specific iframe can be identified,
  * and the selectors for elements found within it
@@ -18,11 +21,14 @@ export default iframeSelector => {
     return {
         fillCardNumber: fillCardNumber(iframeSelector),
         deleteCardNumber: deleteCardNumber(iframeSelector),
+        deleteDate: deleteDate(iframeSelector),
         deleteCVC: deleteCVC(iframeSelector),
         fillDate: fillDate(iframeSelector),
         fillCVC: fillCVC(iframeSelector),
         fillDateAndCVC: fillDateAndCVC(iframeSelector),
-        deleteDigitsFromCardNumber: deleteDigitsFromCardNumber(iframeSelector)
+        deleteDigitsFromCardNumber: deleteDigitsFromCardNumber(iframeSelector),
+        // More generic function (need to specify index and fieldType
+        checkIframeForAttrVal: checkIframeForAttrVal(iframeSelector)
     };
 };
 
@@ -34,37 +40,43 @@ export default iframeSelector => {
  */
 const fillCardNumber = iframeSelector => {
     return async (t, value = REGULAR_TEST_CARD, action) => {
-        return fillIFrame(t, iframeSelector, 0, '[data-fieldtype="encryptedCardNumber"]', value, action);
+        return fillIFrame(t, iframeSelector, 0, getInputSelector('encryptedCardNumber'), value, action);
     };
 };
 
 const deleteCardNumber = iframeSelector => {
     return async t => {
-        return deleteFromIFrame(t, iframeSelector, 0, '[data-fieldtype="encryptedCardNumber"]');
+        return deleteFromIFrame(t, iframeSelector, 0, getInputSelector('encryptedCardNumber'));
     };
 };
 
 const deleteDigitsFromCardNumber = iframeSelector => {
     return async (t, startCaretPos, endCaretPos) => {
-        return deleteDigitsFromIFrame(t, iframeSelector, 0, '[data-fieldtype="encryptedCardNumber"]', startCaretPos, endCaretPos);
+        return deleteDigitsFromIFrame(t, iframeSelector, 0, getInputSelector('encryptedCardNumber'), startCaretPos, endCaretPos);
+    };
+};
+
+const deleteDate = iframeSelector => {
+    return async t => {
+        return deleteFromIFrame(t, iframeSelector, 1, getInputSelector('encryptedExpiryDate'));
     };
 };
 
 const deleteCVC = iframeSelector => {
     return async t => {
-        return deleteFromIFrame(t, iframeSelector, 2, '[data-fieldtype="encryptedSecurityCode"]');
+        return deleteFromIFrame(t, iframeSelector, 2, getInputSelector('encryptedSecurityCode'));
     };
 };
 
 const fillDate = iframeSelector => {
     return async (t, value = TEST_DATE_VALUE, action) => {
-        return fillIFrame(t, iframeSelector, 1, '[data-fieldtype="encryptedExpiryDate"]', value, action);
+        return fillIFrame(t, iframeSelector, 1, getInputSelector('encryptedExpiryDate'), value, action);
     };
 };
 
 const fillCVC = iframeSelector => {
     return async (t, value = TEST_CVC_VALUE, action, iFrameNum = 2) => {
-        return fillIFrame(t, iframeSelector, iFrameNum, '[data-fieldtype="encryptedSecurityCode"]', value, action);
+        return fillIFrame(t, iframeSelector, iFrameNum, getInputSelector('encryptedSecurityCode'), value, action);
     };
 };
 
@@ -77,3 +89,13 @@ const fillDateAndCVC = iframeSelector => {
         return fc(t, cvcValue);
     };
 };
+
+/**
+ * @usage cardPage.cardUtils.checkIframeForAttrVal(t, 1, 'encryptedExpiryDate', 'aria-required', 'true');
+ * Will check input in expiryDate iframe for an 'aria-required' attr with a value 'true'
+ */
+const checkIframeForAttrVal = iframeSelector => {
+    return async (t, index, fieldType, attr, value) => {
+        return checkIframeForAttributeValue(t, iframeSelector, index, getInputSelector(fieldType), attr, value);
+    };
+};
diff --git a/packages/e2e/tests/cards/utils/kcpUtils.js b/packages/e2e/tests/cards/utils/kcpUtils.js
index e41cc4b6d8..6e93400ca7 100644
--- a/packages/e2e/tests/cards/utils/kcpUtils.js
+++ b/packages/e2e/tests/cards/utils/kcpUtils.js
@@ -1,8 +1,11 @@
-import { fillIFrame, checkIframeContainsValue } from '../../utils/commonUtils';
+import { getInputSelector, fillIFrame, checkIframeInputContainsValue } from '../../utils/commonUtils';
 
 import { TEST_PWD_VALUE, TEST_TAX_NUMBER_VALUE } from './constants';
 
 /**
+ * These utils provide a 'friendly' wrapper around the more generic functions in commonUtils
+ * - prefilling the iframe selector, an iframe index and the iframe input element selector
+ *
  * Unique to each component are where the iframes are to be found,
  * the indices by which a specific iframe can be identified,
  * and the selectors for elements found within it.
@@ -31,13 +34,13 @@ export default iframeSelector => {
  */
 const fillPwd = iframeSelector => {
     return async (t, value = TEST_PWD_VALUE, action) => {
-        return fillIFrame(t, iframeSelector, 3, '[data-fieldtype="encryptedPassword"]', value, action);
+        return fillIFrame(t, iframeSelector, 3, getInputSelector('encryptedPassword'), value, action);
     };
 };
 
 const checkPwd = iframeSelector => {
     return async (t, value) => {
-        return checkIframeContainsValue(t, iframeSelector, 3, '.js-iframe-input', value);
+        return checkIframeInputContainsValue(t, iframeSelector, 3, '.js-iframe-input', value);
     };
 };
 
diff --git a/packages/e2e/tests/customcard/branding/customcard.unsupportedCard.test.js b/packages/e2e/tests/customcard/branding/customcard.unsupportedCard.test.js
index e43dd90458..e8e393e30f 100644
--- a/packages/e2e/tests/customcard/branding/customcard.unsupportedCard.test.js
+++ b/packages/e2e/tests/customcard/branding/customcard.unsupportedCard.test.js
@@ -1,273 +1,183 @@
-import { Selector, ClientFunction } from 'testcafe';
-import { start, getIframeSelector } from '../../utils/commonUtils';
-import cu from '../../cards/utils/cardUtils';
+import { start, getAriaErrorField, checkIframeElHasExactText } from '../../utils/commonUtils';
 import { REGULAR_TEST_CARD, MAESTRO_CARD } from '../../cards/utils/constants';
-import { CUSTOMCARDS_URL } from '../../pages';
 import LANG from '../../../../lib/src/language/locales/en-US.json';
 
-const errorLabel = Selector('.secured-fields .pm-form-label__error-text');
+import CustomCardComponentPage from '../../_models/CustomCardComponent.page';
+import { turnOffSDKMocking } from '../../_common/cardMocks';
 
-const UNSUPPORTED_CARD = LANG['error.va.sf-cc-num.03'];
-
-const getSFState = ClientFunction((what, prop) => {
-    return window.securedFields.state[what][prop];
-});
+const cardPage = new CustomCardComponentPage();
 
-const TEST_SPEED = 1;
+const BASE_REF = 'securedFields';
 
-const iframeSelector = getIframeSelector('.secured-fields iframe');
+const UNSUPPORTED_CARD = LANG['error.va.sf-cc-num.03'];
 
-const cardUtils = cu(iframeSelector);
+const TEST_SPEED = 1;
 
 fixture`Testing persistence of "Unsupported card" error and state at both component & securedField level`
-    .page(CUSTOMCARDS_URL)
-    .clientScripts('customcard.unsupportedCard.clientScripts.js');
+    .beforeEach(async t => {
+        await t.navigateTo(cardPage.pageUrl);
+        // For individual test suites (that rely on binLookup & perhaps are being run in isolation)
+        // - provide a way to ensure SDK bin mocking is turned off
+        await turnOffSDKMocking();
+    })
+    .clientScripts('./customcard.unsupportedCard.clientScripts.js');
 
 test(
     'Enter partial card number that is not supported then ' +
         'check resulting error is processed correctly at merchant and SF level then ' +
         'add digits to number and check error states persist then ' +
-        ' complete number to make it "valid" (right length, passes luhn then ' +
+        'complete number to make it "valid" (right length, passes luhn then ' +
         'check error states persist then ' +
-        'delete number & check error state clear then ' +
+        'delete number & check error states clear then ' +
         'add supported number and check field is seen as valid at merchant and SF levels',
     async t => {
         // Start, allow time to load
-        await start(t, 2000, TEST_SPEED);
+        await start(t, 1000, TEST_SPEED);
 
         // Hidden error field
-        await t.expect(errorLabel.filterHidden().exists).ok();
+        await t.expect(cardPage.numErrorText.filterHidden().exists).ok();
 
-        /**
-         * Add partial number
-         */
-        await cardUtils.fillCardNumber(t, REGULAR_TEST_CARD.substr(0, 11));
+        // Add partial number
+        await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD.substr(0, 11));
 
-        // Merchant/components level error field visible & text set
+        // Components level error field visible & text set
         await t
-            .expect(errorLabel.filterVisible().exists)
+            .expect(cardPage.numErrorText.filterVisible().exists)
             .ok()
-            .expect(errorLabel.withExactText(UNSUPPORTED_CARD).exists)
+            .expect(cardPage.numErrorText.withExactText(UNSUPPORTED_CARD).exists)
             .ok();
 
-        // Error received & processed at SF level
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('true')
-            // Expect error field in iframe to be filled
-            .expect(Selector('#ariaErrorField').withExactText(UNSUPPORTED_CARD).exists)
-            .ok()
-            .switchToMainWindow();
-
         /**
-         * Click button - to force blur event
+         * Error received & processed at SF level
          */
-        await t.click('.adyen-checkout__button');
+        // Expect input in iframe to have aria-invalid set to true
+        await cardPage.cardUtils.checkIframeForAttrVal(t, 0, 'encryptedCardNumber', 'aria-invalid', 'true');
 
-        // Expect error field in iframe to persist
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            .expect(Selector('#ariaErrorField').withExactText(UNSUPPORTED_CARD).exists)
-            .ok()
-            .switchToMainWindow();
+        // Expect error field in iframe to be filled
+        await checkIframeElHasExactText(t, cardPage.iframeSelector, 0, getAriaErrorField('encryptedCardNumber'), UNSUPPORTED_CARD);
 
-        /**
-         * Add more digits
-         */
-        await cardUtils.fillCardNumber(t, '0000');
+        // Click button - to force blur event
+        await t.click(cardPage.payButton);
 
-        // Merchant/components level error field persists
-        await t.expect(errorLabel.withExactText(UNSUPPORTED_CARD).exists).ok();
+        // Expect unsupported card error in iframe to persist (and not become 'incomplete field')
+        await checkIframeElHasExactText(t, cardPage.iframeSelector, 0, getAriaErrorField('encryptedCardNumber'), UNSUPPORTED_CARD);
 
-        // Expect errors received & processed at SF level to persist
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('true')
-            // Expect error field in iframe to be filled
-            .expect(Selector('#ariaErrorField').withExactText(UNSUPPORTED_CARD).exists)
-            .ok()
-            .switchToMainWindow();
+        // Add more digits
+        await cardPage.cardUtils.fillCardNumber(t, '0000');
+
+        // Components level error field persists
+        await t.expect(cardPage.numErrorText.withExactText(UNSUPPORTED_CARD).exists).ok();
 
         /**
-         * Add last digit to complete a number that passes luhn
+         * Expect errors received & processed at SF level to persist
          */
-        await cardUtils.fillCardNumber(t, '4');
+        // Expect input in iframe to have aria-invalid set to true
+        await cardPage.cardUtils.checkIframeForAttrVal(t, 0, 'encryptedCardNumber', 'aria-invalid', 'true');
+
+        // Expect error field in iframe to be filled
+        await checkIframeElHasExactText(t, cardPage.iframeSelector, 0, getAriaErrorField('encryptedCardNumber'), UNSUPPORTED_CARD);
+
+        // Add last digit to complete a number that passes luhn
+        await cardPage.cardUtils.fillCardNumber(t, '4');
 
-        // Field should be marked as not valid
-        await t.expect(getSFState('valid', 'encryptedCardNumber')).eql(false);
+        // Field should be marked in state as not valid
+        await t.expect(cardPage.getFromState(BASE_REF, 'valid.encryptedCardNumber')).eql(false);
 
         // Merchant/components level error field persists
-        await t.expect(errorLabel.withExactText(UNSUPPORTED_CARD).exists).ok();
+        await t.expect(cardPage.numErrorText.withExactText(UNSUPPORTED_CARD).exists).ok();
 
         // Expect errors received & processed at SF level to persist
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('true')
-            // Expect error field in iframe to be filled
-            .expect(Selector('#ariaErrorField').withExactText(UNSUPPORTED_CARD).exists)
-            .ok()
-            .switchToMainWindow();
+        await cardPage.cardUtils.checkIframeForAttrVal(t, 0, 'encryptedCardNumber', 'aria-invalid', 'true');
 
-        /**
-         * Delete number
-         */
-        await cardUtils.deleteCardNumber(t);
+        await checkIframeElHasExactText(t, cardPage.iframeSelector, 0, getAriaErrorField('encryptedCardNumber'), UNSUPPORTED_CARD);
 
-        // Merchant/components level error field hidden
-        await t.expect(errorLabel.filterHidden().exists).ok();
+        // Delete number
+        await cardPage.cardUtils.deleteCardNumber(t);
 
-        // Error clearing received & processed at SF level
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('true')
-            // Expect error field in iframe to be unfilled
-            .expect(Selector('#ariaErrorField').withExactText('').exists)
-            .ok()
-            .switchToMainWindow();
+        // Components level error field hidden
+        await t.expect(cardPage.numErrorText.filterHidden().exists).ok();
 
         /**
-         * Add supported number
+         * Expect error clearing received & processed at SF level
          */
-        await cardUtils.fillCardNumber(t, MAESTRO_CARD);
+        // Expect input in iframe to have aria-invalid set to true
+        await cardPage.cardUtils.checkIframeForAttrVal(t, 0, 'encryptedCardNumber', 'aria-invalid', 'true');
 
-        // Field should be marked as valid
-        await t.expect(getSFState('valid', 'encryptedCardNumber')).eql(true);
+        // Expect error field in iframe to be unfilled
+        await checkIframeElHasExactText(t, cardPage.iframeSelector, 0, getAriaErrorField('encryptedCardNumber'), '');
 
-        // With encrypted blob
-        await t.expect(getSFState('data', 'encryptedCardNumber')).contains('adyenjs_0_1_');
+        // Add supported number
+        await cardPage.cardUtils.fillCardNumber(t, MAESTRO_CARD);
 
-        // Validity received & processed at SF level
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('false')
-            // Expect error field in iframe to be unfilled
-            .expect(Selector('#ariaErrorField').withExactText('').exists)
-            .ok()
-            .switchToMainWindow();
+        // Field should be marked in state as valid...
+        await t.expect(cardPage.getFromState(BASE_REF, 'valid.encryptedCardNumber')).eql(true);
+
+        // ...with encrypted blob
+        await t.expect(cardPage.getFromState(BASE_REF, 'data.encryptedCardNumber')).contains('adyenjs_0_1_');
+
+        /**
+         * Validity received & processed at SF level
+         */
+        // Expect input in iframe to have aria-invalid set to false
+        await cardPage.cardUtils.checkIframeForAttrVal(t, 0, 'encryptedCardNumber', 'aria-invalid', 'false');
+
+        // Expect error field in iframe to be unfilled
+        await checkIframeElHasExactText(t, cardPage.iframeSelector, 0, getAriaErrorField('encryptedCardNumber'), '');
     }
 );
 
 test(
-    'Same as previous test except ' +
+    'Enter unsupported card and expect similar errors in UI, state & SF as previous test, then ' +
         'when adding supported number we paste it straight in then ' +
         'check error states are removed at merchant and SF levels then ' +
         'check field is seen as valid at merchant and SF levels',
     async t => {
         // Start, allow time to load
-        await start(t, 2000, TEST_SPEED);
-
-        // Hidden error field
-        await t.expect(errorLabel.filterHidden().exists).ok();
+        await start(t, 1000, TEST_SPEED);
 
-        /**
-         * Add partial number
-         */
-        await cardUtils.fillCardNumber(t, REGULAR_TEST_CARD.substr(0, 11));
+        // Add unsupported number
+        await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
 
-        // Merchant/components level error field visible & text set
+        // Components level error field visible & text set
         await t
-            .expect(errorLabel.filterVisible().exists)
+            .expect(cardPage.numErrorText.filterVisible().exists)
             .ok()
-            .expect(errorLabel.withExactText(UNSUPPORTED_CARD).exists)
+            .expect(cardPage.numErrorText.withExactText(UNSUPPORTED_CARD).exists)
             .ok();
 
-        // Error received & processed at SF level
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('true')
-            // Expect error field in iframe to be filled
-            .expect(Selector('#ariaErrorField').withExactText(UNSUPPORTED_CARD).exists)
-            .ok()
-            .switchToMainWindow();
-
-        /**
-         * Click button - to force blur event
-         */
-        await t.click('.adyen-checkout__button');
-
-        // Expect error field in iframe to persist
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            .expect(Selector('#ariaErrorField').withExactText(UNSUPPORTED_CARD).exists)
-            .ok()
-            .switchToMainWindow();
-
         /**
-         * Add more digits
+         * Error received & processed at SF level
          */
-        await cardUtils.fillCardNumber(t, '0000');
+        // Expect input in iframe to have aria-invalid set to true
+        await cardPage.cardUtils.checkIframeForAttrVal(t, 0, 'encryptedCardNumber', 'aria-invalid', 'true');
 
-        // Merchant/components level error field persists
-        await t.expect(errorLabel.withExactText(UNSUPPORTED_CARD).exists).ok();
+        // Expect error field in iframe to be filled
+        await checkIframeElHasExactText(t, cardPage.iframeSelector, 0, getAriaErrorField('encryptedCardNumber'), UNSUPPORTED_CARD);
 
-        // Expect errors received & processed at SF level to persist
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('true')
-            // Expect error field in iframe to be filled
-            .expect(Selector('#ariaErrorField').withExactText(UNSUPPORTED_CARD).exists)
-            .ok()
-            .switchToMainWindow();
+        // Field should be marked in state as not valid
+        await t.expect(cardPage.getFromState(BASE_REF, 'valid.encryptedCardNumber')).eql(false);
 
         /**
-         * Add last digit to complete a number that passes luhn
+         * Paste in supported number
          */
-        await cardUtils.fillCardNumber(t, '4');
+        await cardPage.cardUtils.fillCardNumber(t, MAESTRO_CARD, 'paste');
 
-        // Field should be marked as not valid
-        await t.expect(getSFState('valid', 'encryptedCardNumber')).eql(false);
+        // Merchant/components level error field hidden
+        await t.expect(cardPage.numErrorText.filterHidden().exists).ok();
 
-        // Merchant/components level error field persists
-        await t.expect(errorLabel.withExactText(UNSUPPORTED_CARD).exists).ok();
+        // Field should be marked in state as valid...
+        await t.expect(cardPage.getFromState(BASE_REF, 'valid.encryptedCardNumber')).eql(true);
 
-        // Expect errors received & processed at SF level to persist
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('true')
-            // Expect error field in iframe to be filled
-            .expect(Selector('#ariaErrorField').withExactText(UNSUPPORTED_CARD).exists)
-            .ok()
-            .switchToMainWindow();
+        // ...with encrypted blob
+        await t.expect(cardPage.getFromState(BASE_REF, 'data.encryptedCardNumber')).contains('adyenjs_0_1_');
 
         /**
-         * Paste in supported number
+         * Validity received & processed at SF level
          */
-        await cardUtils.fillCardNumber(t, MAESTRO_CARD, 'paste');
-
-        // Merchant/components level error field hidden
-        await t.expect(errorLabel.filterHidden().exists).ok();
+        // Expect input in iframe to have aria-invalid set to false
+        await cardPage.cardUtils.checkIframeForAttrVal(t, 0, 'encryptedCardNumber', 'aria-invalid', 'false');
 
-        // Field should be marked as valid
-        await t.expect(getSFState('valid', 'encryptedCardNumber')).eql(true);
-
-        // With encrypted blob
-        await t.expect(getSFState('data', 'encryptedCardNumber')).contains('adyenjs_0_1_');
-
-        // Validity received & processed at SF level
-        await t
-            .switchToIframe(iframeSelector.nth(0))
-            // Expect input in iframe to have aria-invalid set to true
-            .expect(Selector('[data-fieldtype="encryptedCardNumber"]').getAttribute('aria-invalid'))
-            .eql('false')
-            // Expect error field in iframe to be unfilled
-            .expect(Selector('#ariaErrorField').withExactText('').exists)
-            .ok()
-            .switchToMainWindow();
+        // Expect error field in iframe to be unfilled
+        await checkIframeElHasExactText(t, cardPage.iframeSelector, 0, getAriaErrorField('encryptedCardNumber'), '');
     }
 );
diff --git a/packages/e2e/tests/customcard/expiryDate/expiryDatePolicies.optional.regular.test.js b/packages/e2e/tests/customcard/expiryDate/expiryDatePolicies.optional.regular.test.js
new file mode 100644
index 0000000000..974a53d062
--- /dev/null
+++ b/packages/e2e/tests/customcard/expiryDate/expiryDatePolicies.optional.regular.test.js
@@ -0,0 +1,166 @@
+import { binLookupUrl, getBinLookupMock, turnOffSDKMocking } from '../../_common/cardMocks';
+import CustomCardComponentPage from '../../_models/CustomCardComponent.page';
+import { REGULAR_TEST_CARD } from '../../cards/utils/constants';
+
+const cardPage = new CustomCardComponentPage();
+
+const BASE_REF = 'securedFields';
+
+/**
+ * NOTE - we are mocking the response until such time as we have a genuine card,
+ * that's not in our local RegEx, that returns the properties we want to test
+ */
+const mockedResponse = {
+    brands: [
+        {
+            brand: 'cup', // keep as a recognised card brand (cup) until we have a genuine brand w. optional expiryDate
+            cvcPolicy: 'optional',
+            enableLuhnCheck: true,
+            expiryDatePolicy: 'optional',
+            supported: true
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestId: null
+};
+
+const mock = getBinLookupMock(binLookupUrl, mockedResponse);
+
+fixture`Test how regular Custom Card Component handles optional expiryDate policy`
+    .beforeEach(async t => {
+        await t.navigateTo(cardPage.pageUrl);
+        // For individual test suites (that rely on binLookup & perhaps are being run in isolation)
+        // - provide a way to ensure SDK bin mocking is turned off
+        await turnOffSDKMocking();
+    })
+    .requestHooks(mock)
+    .clientScripts('./expiryDate.clientScripts.js');
+
+test('#1 Testing optional expiryDatePolicy - how UI & state respond', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Regular date label
+    await t.expect(cardPage.dateLabelText.withText('(optional)').exists).notOk();
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // UI reflects that binLookup says expiryDate is optional
+    await t.expect(cardPage.dateLabelText.withText('(optional)').exists).ok();
+
+    // ...and cvc is optional too
+    await t.expect(cardPage.cvcLabelText.withText('(optional)').exists).ok();
+
+    // Card seen as valid (since CVC is optional too)
+    await t.expect(cardPage.getFromState(BASE_REF, 'isValid')).eql(true);
+
+    // Clear number and see UI & state reset
+    await cardPage.cardUtils.deleteCardNumber(t);
+    await t
+        .expect(cardPage.dateLabelText.withText('(optional)').exists)
+        .notOk()
+        .expect(cardPage.cvcLabelText.withText('(optional)').exists)
+        .notOk()
+        .expect(cardPage.getFromState(BASE_REF, 'isValid'))
+        .eql(false);
+});
+
+test('#2 Testing optional expiryDatePolicy - how securedField responds', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Expect iframe to exist in expiryDate field with aria-required attr set to true
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 1, 'encryptedExpiryDate', 'aria-required', 'true');
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // Expect iframe to exist in expiryDate field and with aria-required attr set to false
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 1, 'encryptedExpiryDate', 'aria-required', 'false');
+
+    // Clear number and see SF's aria-required reset
+    await cardPage.cardUtils.deleteCardNumber(t);
+
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 1, 'encryptedExpiryDate', 'aria-required', 'true');
+});
+
+test('#3 Testing optional expiryDatePolicy - validating fields first and then entering PAN should see errors cleared from both UI & state', async t => {
+    // Start, allow time for iframes to load so isValidated call to SF won't fail
+    await t.wait(1000);
+
+    // Click pay
+    await t.click(cardPage.payButton);
+
+    // Expect errors in UI
+    await t
+        .expect(cardPage.numErrorText.filterVisible().exists)
+        .ok()
+        .expect(cardPage.dateErrorText.filterVisible().exists)
+        .ok()
+        .expect(cardPage.cvcErrorText.filterVisible().exists)
+        .ok();
+
+    // Expect errors in (mapped) state
+    await t
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate'))
+        .notEql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate'))
+        .notEql(undefined)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedSecurityCode'))
+        .notEql(null);
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // Expect errors to be cleared - since the fields were in error because they were empty
+    // and now the PAN field is filled and the date & cvc fields are now optional...
+
+    // ...UI errors cleared...
+    await t
+        .expect(cardPage.numErrorText.filterHidden().exists)
+        .ok()
+        .expect(cardPage.dateErrorText.filterHidden().exists)
+        .ok()
+        .expect(cardPage.cvcErrorText.filterHidden().exists)
+        .ok();
+
+    // ...State errors cleared
+    await t
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryDate'))
+        .eql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedSecurityCode'))
+        .eql(null);
+});
+
+test('#4 Testing optional expiryDatePolicy - date field in error DOES stop card becoming valid', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Card out of date
+    await cardPage.cardUtils.fillDate(t, '12/90');
+
+    // Expect errors in UI
+    await t.expect(cardPage.dateErrorText.filterVisible().exists).ok();
+
+    // Force blur event to fire on date field
+    await cardPage.setForceClick(true);
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // UI reflects that binLookup says expiryDate is optional
+    await t.expect(cardPage.dateLabelText.withText('(optional)').exists).ok();
+
+    // Visual errors persist in UI
+    await t.expect(cardPage.dateErrorText.filterVisible().exists).ok();
+
+    // Card not seen as valid
+    await t.expect(cardPage.getFromState(BASE_REF, 'isValid')).eql(false);
+
+    // Delete erroneous date
+    await cardPage.cardUtils.deleteDate(t);
+
+    // Card is now valid
+    await t.expect(cardPage.getFromState(BASE_REF, 'isValid')).eql(true);
+});
diff --git a/packages/e2e/tests/customcard/expiryDate/expiryDatePolicies.optional.separate.test.js b/packages/e2e/tests/customcard/expiryDate/expiryDatePolicies.optional.separate.test.js
new file mode 100644
index 0000000000..56b5b4bc36
--- /dev/null
+++ b/packages/e2e/tests/customcard/expiryDate/expiryDatePolicies.optional.separate.test.js
@@ -0,0 +1,197 @@
+import { binLookupUrl, getBinLookupMock, turnOffSDKMocking } from '../../_common/cardMocks';
+import CustomCardComponentPage from '../../_models/CustomCardComponent.page';
+import { REGULAR_TEST_CARD } from '../../cards/utils/constants';
+
+const cardPage = new CustomCardComponentPage('.secured-fields-2');
+
+const BASE_REF = 'securedFields2';
+
+/**
+ * NOTE - we are mocking the response until such time as we have a genuine card,
+ * that's not in our local RegEx, that returns the properties we want to test
+ */
+const mockedResponse = {
+    brands: [
+        {
+            brand: 'cup', // keep as a recognised card brand (cup) until we have a genuine brand w. optional expiryDate
+            cvcPolicy: 'optional',
+            enableLuhnCheck: true,
+            expiryDatePolicy: 'optional',
+            supported: true
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestId: null
+};
+
+const mock = getBinLookupMock(binLookupUrl, mockedResponse);
+
+fixture`Test how Custom Card Component with separate date fields handles optional expiryDate policy`
+    .beforeEach(async t => {
+        await t.navigateTo(cardPage.pageUrl);
+        // For individual test suites (that rely on binLookup & perhaps are being run in isolation)
+        // - provide a way to ensure SDK bin mocking is turned off
+        await turnOffSDKMocking();
+    })
+    .requestHooks(mock)
+    .clientScripts('./expiryDate.clientScripts.js');
+
+test('#1 Testing optional expiryDatePolicy - how UI & state respond', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Regular date labels
+    await t
+        .expect(cardPage.monthLabelText.withText('(optional)').exists)
+        .notOk()
+        .expect(cardPage.yearLabelText.withText('(optional)').exists)
+        .notOk();
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // UI reflects that binLookup says expiryDate is optional
+    await t
+        .expect(cardPage.monthLabelText.withText('(optional)').exists)
+        .ok()
+        .expect(cardPage.yearLabelText.withText('(optional)').exists)
+        .ok();
+
+    // ...and cvc is optional too
+    await t.expect(cardPage.cvcLabelText.withText('(optional)').exists).ok();
+
+    // Card seen as valid (since CVC is optional too)
+    await t.expect(cardPage.getFromState(BASE_REF, 'isValid')).eql(true);
+
+    // Clear number and see UI & state reset
+    await cardPage.cardUtils.deleteCardNumber(t);
+    await t
+        .expect(cardPage.monthLabelText.withText('(optional)').exists)
+        .notOk()
+        .expect(cardPage.yearLabelText.withText('(optional)').exists)
+        .notOk()
+        .expect(cardPage.cvcLabelText.withText('(optional)').exists)
+        .notOk()
+        .expect(cardPage.getFromState(BASE_REF, 'isValid'))
+        .eql(false);
+});
+
+test('#2 Testing optional expiryDatePolicy - how securedFields respond', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Expect iframe to exist in expiryMonth field with aria-required attr set to true
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 1, 'encryptedExpiryMonth', 'aria-required', 'true');
+
+    // Expect iframe to exist in expiryYear field with aria-required attr set to true
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 2, 'encryptedExpiryYear', 'aria-required', 'true');
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // Expect iframe to exist in expiryMonth field and with aria-required attr set to false
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 1, 'encryptedExpiryMonth', 'aria-required', 'false');
+
+    // Expect iframe to exist in expiryYear field and with aria-required attr set to false
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 2, 'encryptedExpiryYear', 'aria-required', 'false');
+
+    // Clear number and see SF's aria-required reset
+    await cardPage.cardUtils.deleteCardNumber(t);
+
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 1, 'encryptedExpiryMonth', 'aria-required', 'true');
+    await cardPage.cardUtils.checkIframeForAttrVal(t, 2, 'encryptedExpiryYear', 'aria-required', 'true');
+});
+
+test('#3 Testing optional expiryDatePolicy - validating fields first and then entering PAN should see errors cleared from both UI & state', async t => {
+    // Start, allow time for iframes to load so isValidated call to SF won't fail
+    await t.wait(1000);
+
+    // Click pay
+    await t.click(cardPage.payButton);
+
+    // Expect errors in UI
+    await t
+        .expect(cardPage.numErrorText.filterVisible().exists)
+        .ok()
+        .expect(cardPage.monthErrorText.filterVisible().exists)
+        .ok()
+        .expect(cardPage.yearErrorText.filterVisible().exists)
+        .ok()
+        .expect(cardPage.cvcErrorText.filterVisible().exists)
+        .ok();
+
+    // Expect errors in (mapped) state
+    await t
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryMonth'))
+        .notEql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryMonth'))
+        .notEql(undefined)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryYear'))
+        .notEql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedSecurityCode'))
+        .notEql(null);
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // Expect errors to be cleared - since the fields were in error because they were empty
+    // and now the PAN field is filled and the date & cvc fields are now optional...
+
+    // ...UI errors cleared...
+    await t
+        .expect(cardPage.numErrorText.filterHidden().exists)
+        .ok()
+        .expect(cardPage.monthErrorText.filterHidden().exists)
+        .ok()
+        .expect(cardPage.yearErrorText.filterHidden().exists)
+        .ok()
+        .expect(cardPage.cvcErrorText.filterHidden().exists)
+        .ok();
+
+    // ...State errors cleared
+    await t
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryMonth'))
+        .eql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedExpiryYear'))
+        .eql(null)
+        .expect(cardPage.getFromWindow('mappedStateErrors.encryptedSecurityCode'))
+        .eql(null);
+});
+
+test('#4 Testing optional expiryDatePolicy - date field in error DOES stop card becoming valid', async t => {
+    // Wait for field to appear in DOM
+    await cardPage.numHolder();
+
+    // Card out of date
+    await cardPage.customCardUtils.fillMonth(t, '12');
+    await cardPage.customCardUtils.fillYear(t, '90');
+
+    // Expect errors in UI
+    await t.expect(cardPage.yearErrorText.filterVisible().exists).ok();
+
+    // Force blur event to fire on date field
+    await cardPage.setForceClick(true);
+
+    // Fill number to provoke (mock) binLookup response
+    await cardPage.cardUtils.fillCardNumber(t, REGULAR_TEST_CARD);
+
+    // UI reflects that binLookup says expiryDate is optional
+    await t
+        .expect(cardPage.monthLabelText.withText('(optional)').exists)
+        .ok()
+        .expect(cardPage.yearLabelText.withText('(optional)').exists)
+        .ok();
+
+    // Visual errors persist in UI
+    await t.expect(cardPage.yearErrorText.filterVisible().exists).ok();
+
+    // Card not seen as valid
+    await t.expect(cardPage.getFromState(BASE_REF, 'isValid')).eql(false);
+
+    // Delete erroneous date
+    await cardPage.customCardUtils.deleteMonth(t);
+    await cardPage.customCardUtils.deleteYear(t);
+
+    // Card is now valid
+    await t.expect(cardPage.getFromState(BASE_REF, 'isValid')).eql(true);
+});
diff --git a/packages/e2e/tests/customcard/expiryDate/minimumExpiryDate.separate.test.js b/packages/e2e/tests/customcard/expiryDate/minimumExpiryDate.separate.test.js
index 90f489bf74..cc1fbd6d40 100644
--- a/packages/e2e/tests/customcard/expiryDate/minimumExpiryDate.separate.test.js
+++ b/packages/e2e/tests/customcard/expiryDate/minimumExpiryDate.separate.test.js
@@ -1,10 +1,8 @@
 import { Selector } from 'testcafe';
 import { start, getIframeSelector } from '../../utils/commonUtils';
-import cu from '../../cards/utils/cardUtils';
 import { CUSTOMCARDS_URL } from '../../pages';
 import LANG from '../../../../lib/src/language/locales/en-US.json';
 import ccu from '../utils/customCardUtils';
-import { TEST_MONTH_VALUE, TEST_YEAR_VALUE } from '../../cards/utils/constants';
 
 const errorHolder = Selector('.pm-form-label__error-text');
 
diff --git a/packages/e2e/tests/customcard/utils/customCardUtils.js b/packages/e2e/tests/customcard/utils/customCardUtils.js
index 4a86283ce9..8e127ddc61 100644
--- a/packages/e2e/tests/customcard/utils/customCardUtils.js
+++ b/packages/e2e/tests/customcard/utils/customCardUtils.js
@@ -1,6 +1,9 @@
-import { fillIFrame, checkIframeContainsValue } from '../../utils/commonUtils';
+import { getInputSelector, deleteFromIFrame, fillIFrame } from '../../utils/commonUtils';
 
 /**
+ * These utils provide a 'friendly' wrapper around the more generic functions in commonUtils
+ * - prefilling the iframe selector, an iframe index and the iframe input element selector
+ *
  * Unique to each component are where the iframes are to be found,
  * the indices by which a specific iframe can be identified,
  * and the selectors for elements found within it.
@@ -18,7 +21,9 @@ export default iframeSelector => {
     return {
         fillMonth: fillMonth(iframeSelector),
         fillYear: fillYear(iframeSelector),
-        fillCVC: fillCVC(iframeSelector)
+        fillCVC: fillCVC(iframeSelector),
+        deleteMonth: deleteMonth(iframeSelector),
+        deleteYear: deleteYear(iframeSelector)
     };
 };
 
@@ -30,18 +35,30 @@ export default iframeSelector => {
  */
 const fillMonth = iframeSelector => {
     return async (t, value, action) => {
-        return fillIFrame(t, iframeSelector, 1, '[data-fieldtype="encryptedExpiryMonth"]', value, action);
+        return fillIFrame(t, iframeSelector, 1, getInputSelector('encryptedExpiryMonth'), value, action);
+    };
+};
+
+const deleteMonth = iframeSelector => {
+    return async t => {
+        return deleteFromIFrame(t, iframeSelector, 1, getInputSelector('encryptedExpiryMonth'));
     };
 };
 
 const fillYear = iframeSelector => {
     return async (t, value, action) => {
-        return fillIFrame(t, iframeSelector, 2, '[data-fieldtype="encryptedExpiryYear"]', value, action);
+        return fillIFrame(t, iframeSelector, 2, getInputSelector('encryptedExpiryYear'), value, action);
+    };
+};
+
+const deleteYear = iframeSelector => {
+    return async t => {
+        return deleteFromIFrame(t, iframeSelector, 2, getInputSelector('encryptedExpiryYear'));
     };
 };
 
 const fillCVC = iframeSelector => {
     return async (t, value, action) => {
-        return fillIFrame(t, iframeSelector, 3, '[data-fieldtype="encryptedSecurityCode"]', value, action);
+        return fillIFrame(t, iframeSelector, 3, getInputSelector('encryptedSecurityCode'), value, action);
     };
 };
diff --git a/packages/e2e/tests/index.js b/packages/e2e/tests/index.js
index c0262ac4e0..fdc88158f0 100644
--- a/packages/e2e/tests/index.js
+++ b/packages/e2e/tests/index.js
@@ -10,8 +10,15 @@ const remote = process.argv.indexOf('--remote') > -1 || process.argv.indexOf('-r
         const runner = testcafe.createRunner();
         let browser = 'chrome:headless';
 
+        let d = new Date();
+
         if (remote) {
             const remoteConnection = await testcafe.createBrowserConnection();
+
+            console.log(
+                /* prettier-ignore */
+                `Tests ready at - ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
+            );
             console.log('\x1b[36m%s\x1b[0m', `${remoteConnection.url}`); // Outputs remoteConnection.url so that it can be visited from the remote browser.
             browser = remoteConnection;
         }
@@ -20,6 +27,9 @@ const remote = process.argv.indexOf('--remote') > -1 || process.argv.indexOf('-r
             .browsers(browser)
             .run();
 
+        d = new Date();
+        /* prettier-ignore */
+        console.log(`Tests completed at - ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`);
         console.log('Number failed tests:', failedCount);
     } finally {
         await testcafe.close();
diff --git a/packages/e2e/tests/utils/commonUtils.js b/packages/e2e/tests/utils/commonUtils.js
index b3ccb86047..ba70b3f5e2 100644
--- a/packages/e2e/tests/utils/commonUtils.js
+++ b/packages/e2e/tests/utils/commonUtils.js
@@ -1,5 +1,15 @@
 import { ClientFunction, Selector } from 'testcafe';
 
+export const getInputSelector = (fieldType, withSelector = false) => {
+    const selStr = `[data-fieldtype="${fieldType}"]`;
+    return withSelector ? Selector(selStr) : selStr;
+};
+
+export const getAriaErrorField = (fieldType, withSelector = false) => {
+    const selStr = `#${fieldType}-ariaErrorField`;
+    return withSelector ? Selector(selStr) : selStr;
+};
+
 export const getIframeSelector = (selectorStr, timeout = 20000) => {
     return Selector(selectorStr, { timeout });
 };
@@ -46,7 +56,7 @@ export const deleteDigitsFromIFrame = async (t, iframeSelector, iFrameNum, iFram
         .switchToMainWindow();
 };
 
-export const checkIframeContainsValue = async (t, iframeSelector, iFrameNum, iFrameInputSelector, valueToCheck) => {
+export const checkIframeInputContainsValue = async (t, iframeSelector, iFrameNum, iFrameInputSelector, valueToCheck) => {
     return t
         .switchToMainWindow()
         .switchToIframe(iframeSelector.nth(iFrameNum))
@@ -54,6 +64,24 @@ export const checkIframeContainsValue = async (t, iframeSelector, iFrameNum, iFr
         .contains(valueToCheck);
 };
 
+export const checkIframeForAttributeValue = async (t, iframeSelector, iFrameNum, iFrameInputSelector, inputAttr, valueToCheck) => {
+    return t
+        .switchToMainWindow()
+        .switchToIframe(iframeSelector.nth(iFrameNum))
+        .expect(Selector(iFrameInputSelector).getAttribute(inputAttr))
+        .eql(valueToCheck)
+        .switchToMainWindow();
+};
+
+export const checkIframeElHasExactText = async (t, iframeSelector, iFrameNum, iFrameElSelector, textValue) => {
+    return t
+        .switchToMainWindow()
+        .switchToIframe(iframeSelector.nth(iFrameNum))
+        .expect(Selector(iFrameElSelector).withExactText(textValue).exists)
+        .ok()
+        .switchToMainWindow();
+};
+
 export const getIsValid = ClientFunction((who = 'card') => {
     return window[who].isValid;
 });
diff --git a/packages/lib/config/rollup.config.js b/packages/lib/config/rollup.config.js
index ece3f1903a..e9aa5a6560 100644
--- a/packages/lib/config/rollup.config.js
+++ b/packages/lib/config/rollup.config.js
@@ -8,6 +8,8 @@ import eslint from '@rollup/plugin-eslint';
 import terserConfig from './terser.config';
 import pkg from '../package.json';
 const currentVersion = require('./version')();
+import path from 'path';
+require('dotenv').config({ path: path.resolve('../../', '.env') });
 
 if (process.env.CI !== 'true') {
     console.warn(
diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.tsx b/packages/lib/src/components/Card/components/CardInput/CardInput.tsx
index 9af98137c2..c08d19a2ed 100644
--- a/packages/lib/src/components/Card/components/CardInput/CardInput.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/CardInput.tsx
@@ -15,7 +15,7 @@ import StoreDetails from '../../../internal/StoreDetails';
 import Address from '../../../internal/Address/Address';
 import getImage from '../../../../utils/get-image';
 import { CardInputProps, CardInputValidState, CardInputErrorState, CardInputDataState } from './types';
-import { CVC_POLICY_REQUIRED } from '../../../internal/SecuredFields/lib/configuration/constants';
+import { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED } from '../../../internal/SecuredFields/lib/configuration/constants';
 import { BinLookupResponse } from '../../types';
 import { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';
 import CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';
@@ -45,7 +45,7 @@ function CardInput(props: CardInputProps) {
 
     const [focusedElement, setFocusedElement] = useState('');
     const [isSfpValid, setIsSfpValid] = useState(false);
-    const [hideDateForBrand, setHideDateForBrand] = useState(false);
+    const [expiryDatePolicy, setExpiryDatePolicy] = useState(DATE_POLICY_REQUIRED);
     const [cvcPolicy, setCvcPolicy] = useState(CVC_POLICY_REQUIRED);
     const [issuingCountryCode, setIssuingCountryCode] = useState(null);
 
@@ -136,7 +136,7 @@ function CardInput(props: CardInputProps) {
         // Values relating to /binLookup response
         setCvcPolicy(sfState.cvcPolicy);
         setShowSocialSecurityNumber(sfState.showSocialSecurityNumber);
-        setHideDateForBrand(sfState.hideDateForBrand);
+        setExpiryDatePolicy(sfState.expiryDatePolicy);
     };
 
     // Farm the handlers for binLookup related functionality out to another 'extensions' file
@@ -328,7 +328,7 @@ function CardInput(props: CardInputProps) {
                                 onFocusField={setFocusOn}
                                 hasCVC={props.hasCVC}
                                 cvcPolicy={cvcPolicy}
-                                hideDateForBrand={hideDateForBrand}
+                                expiryDatePolicy={expiryDatePolicy}
                                 errors={sfpState.errors}
                                 valid={sfpState.valid}
                                 dualBrandingElements={dualBrandSelectElements.length > 0 && dualBrandSelectElements}
diff --git a/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx b/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx
index fcbce01199..987c2ff5d5 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/CardFields.tsx
@@ -6,6 +6,7 @@ import useCoreContext from '../../../../../core/Context/useCoreContext';
 import { CardFieldsProps } from './types';
 import classNames from 'classnames';
 import styles from '../CardInput.module.scss';
+import { DATE_POLICY_HIDDEN } from '../../../../internal/SecuredFields/lib/configuration/constants';
 
 export default function CardFields({
     brand,
@@ -17,7 +18,7 @@ export default function CardFields({
     focusedElement,
     hasCVC,
     cvcPolicy,
-    hideDateForBrand,
+    expiryDatePolicy,
     onFocusField,
     showBrandIcon,
     valid
@@ -43,7 +44,7 @@ export default function CardFields({
 
             <div
                 className={classNames('adyen-checkout__card__exp-cvc adyen-checkout__field-wrapper', {
-                    [styles['adyen-checkout__card__exp-cvc__exp-date__input--hidden']]: hideDateForBrand
+                    [styles['adyen-checkout__card__exp-cvc__exp-date__input--hidden']]: expiryDatePolicy === DATE_POLICY_HIDDEN
                 })}
             >
                 <ExpirationDate
@@ -54,7 +55,7 @@ export default function CardFields({
                     label={i18n.get('creditCard.expiryDateField.title')}
                     onFocusField={onFocusField}
                     className={'adyen-checkout__field--50'}
-                    hideDateForBrand={hideDateForBrand}
+                    expiryDatePolicy={expiryDatePolicy}
                 />
 
                 {hasCVC && (
diff --git a/packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx b/packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx
index 7342f27eec..24184a9139 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/ExpirationDate.tsx
@@ -5,18 +5,23 @@ import useCoreContext from '../../../../../core/Context/useCoreContext';
 import { ExpirationDateProps } from './types';
 import styles from '../CardInput.module.scss';
 import DataSfSpan from './DataSfSpan';
+import { DATE_POLICY_HIDDEN, DATE_POLICY_OPTIONAL, DATE_POLICY_REQUIRED } from '../../../../internal/SecuredFields/lib/configuration/constants';
 
 export default function ExpirationDate(props: ExpirationDateProps) {
-    const { label, focused, filled, onFocusField, className = '', error = '', isValid = false, hideDateForBrand = false } = props;
+    const { label, focused, filled, onFocusField, className = '', error = '', isValid = false, expiryDatePolicy = DATE_POLICY_REQUIRED } = props;
     const { i18n } = useCoreContext();
 
     const fieldClassnames = classNames(className, {
-        [styles['adyen-checkout__card__exp-date__input--hidden']]: hideDateForBrand
+        'adyen-checkout__field__exp-date': true,
+        [styles['adyen-checkout__card__exp-date__input--hidden']]: expiryDatePolicy === DATE_POLICY_HIDDEN,
+        'adyen-checkout__field__exp-date--optional': expiryDatePolicy === DATE_POLICY_OPTIONAL
     });
 
+    const fieldLabel = expiryDatePolicy !== DATE_POLICY_OPTIONAL ? label : `${label} ${i18n.get('field.title.optional')}`;
+
     return (
         <Field
-            label={label}
+            label={fieldLabel}
             classNameModifiers={['expiryDate']}
             className={fieldClassnames}
             focused={focused}
diff --git a/packages/lib/src/components/Card/components/CardInput/components/types.ts b/packages/lib/src/components/Card/components/CardInput/components/types.ts
index 195a546357..70acd7e7a7 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/types.ts
+++ b/packages/lib/src/components/Card/components/CardInput/components/types.ts
@@ -1,6 +1,7 @@
 import { PaymentAmount } from '../../../../../types';
 import { CardBrandsConfiguration } from '../../../types';
 import { ComponentChildren } from 'preact';
+import { CVCPolicyType, DatePolicyType } from '../../../../internal/SecuredFields/lib/core/AbstractSecuredField';
 
 export interface BrandIconProps {
     brand: string;
@@ -16,8 +17,8 @@ export interface CardFieldsProps {
     errors?: any;
     focusedElement?: any;
     hasCVC?: any;
-    cvcPolicy?: string;
-    hideDateForBrand?: any;
+    cvcPolicy?: CVCPolicyType;
+    expiryDatePolicy?: DatePolicyType;
     onFocusField?: any;
     showBrandIcon?: boolean;
     valid?: any;
@@ -55,7 +56,7 @@ export interface CVCProps {
     filled?: any;
     focused?: any;
     frontCVC?: boolean;
-    cvcPolicy?: string;
+    cvcPolicy?: CVCPolicyType;
     isValid?: any;
     label?: any;
     onFocusField: (field: string) => void;
@@ -82,7 +83,7 @@ export interface ExpirationDateProps {
     isValid?: boolean;
     label?: string;
     onFocusField: (fieldName: string) => {};
-    hideDateForBrand?: boolean;
+    expiryDatePolicy?: DatePolicyType;
 }
 
 export interface InstallmentsProps {
@@ -137,7 +138,7 @@ export interface StoredCardFieldsProps {
     expiryYear?: string;
     focusedElement: string;
     hasCVC: boolean;
-    cvcPolicy: string;
+    cvcPolicy: CVCPolicyType;
     lastFour?: string;
     onFocusField: any;
     valid: any;
diff --git a/packages/lib/src/components/Card/components/CardInput/types.ts b/packages/lib/src/components/Card/components/CardInput/types.ts
index 42ec1fdd81..640733e98d 100644
--- a/packages/lib/src/components/Card/components/CardInput/types.ts
+++ b/packages/lib/src/components/Card/components/CardInput/types.ts
@@ -3,6 +3,7 @@ import { CardBrandsConfiguration, CardConfiguration, DualBrandSelectElement, Soc
 import { PaymentAmount } from '../../../../types';
 import { InstallmentOptions } from './components/types';
 import { ValidationResult } from '../../../internal/PersonalDetails/types';
+import { CVCPolicyType, DatePolicyType } from '../../../internal/SecuredFields/lib/core/AbstractSecuredField';
 
 export interface CardInputValidState {
     holderName?: boolean;
@@ -47,7 +48,7 @@ export interface CardInputProps {
     brandsConfiguration?: CardBrandsConfiguration;
     configuration?: CardConfiguration;
     countryCode?: string;
-    cvcPolicy?: string;
+    cvcPolicy?: CVCPolicyType;
     data?: CardInputDataState;
     enableStoreDetails?: boolean;
     fundingSource?: string;
@@ -85,8 +86,8 @@ export interface CardInputState {
     data?: object;
     errors?: object;
     focusedElement: string;
-    cvcPolicy: string;
-    hideDateForBrand: boolean;
+    cvcPolicy: CVCPolicyType;
+    expiryDatePolicy: DatePolicyType;
     isValid: boolean;
     status: string;
     valid?: object;
diff --git a/packages/lib/src/components/Card/types.ts b/packages/lib/src/components/Card/types.ts
index 28ac44dc5e..ca1a129b6f 100644
--- a/packages/lib/src/components/Card/types.ts
+++ b/packages/lib/src/components/Card/types.ts
@@ -10,7 +10,7 @@ import {
     CbObjOnLoad,
     CbObjOnBinLookup
 } from '../internal/SecuredFields/lib/types';
-import { CVCPolicyType } from '../internal/SecuredFields/lib/core/AbstractSecuredField';
+import { CVCPolicyType, DatePolicyType } from '../internal/SecuredFields/lib/core/AbstractSecuredField';
 
 export interface CardElementProps extends UIElementProps {
     /**
@@ -142,6 +142,7 @@ export interface BrandObject {
     cvcPolicy: CVCPolicyType;
     enableLuhnCheck: boolean;
     showExpiryDate: boolean;
+    expiryDatePolicy?: DatePolicyType;
     showSocialSecurityNumber?: boolean;
     supported: boolean;
     brandImageUrl?: string;
diff --git a/packages/lib/src/components/internal/SecuredFields/SecuredFieldsProvider.ts b/packages/lib/src/components/internal/SecuredFields/SecuredFieldsProvider.ts
index d1d2634439..d187220d3d 100644
--- a/packages/lib/src/components/internal/SecuredFields/SecuredFieldsProvider.ts
+++ b/packages/lib/src/components/internal/SecuredFields/SecuredFieldsProvider.ts
@@ -19,7 +19,7 @@ import {
 import { AddressData } from '../../../types';
 import { CVC_POLICY_REQUIRED, ENCRYPTED_CARD_NUMBER, ENCRYPTED_PWD_FIELD } from './lib/configuration/constants';
 import { BinLookupResponse } from '../../Card/types';
-import { CVCPolicyType } from './lib/core/AbstractSecuredField';
+import { CVCPolicyType, DatePolicyType } from './lib/core/AbstractSecuredField';
 import { getError } from '../../../core/Errors/utils';
 
 export interface SFPState {
@@ -35,7 +35,7 @@ export interface SFPState {
     hasUnsupportedCard?: boolean;
     hasKoreanFields?: boolean;
     showSocialSecurityNumber?: boolean;
-    hideDateForBrand?: boolean;
+    expiryDatePolicy?: DatePolicyType;
     socialSecurityNumber?: string;
 }
 
@@ -51,7 +51,7 @@ export interface SingleBrandResetObject {
 class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
     private originKeyErrorTimeout: number;
     private originKeyTimeoutMS: number;
-    private numCharsInCVC: number;
+    private numCharsInField: object;
     private rootNode;
     private numDateFields: number;
     private csf: CSFReturnObject;
@@ -86,7 +86,7 @@ class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
         this.originKeyErrorTimeout = null;
         this.originKeyTimeoutMS = 15000;
 
-        this.numCharsInCVC = 0;
+        this.numCharsInField = {};
 
         // Handlers
         this.handleOnLoad = handlers.handleOnLoad.bind(this);
@@ -122,6 +122,11 @@ class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
 
         this.setState({ valid });
 
+        // Populate numCharsInField object
+        fields.forEach(field => {
+            this.numCharsInField[field] = 0;
+        });
+
         // Store how many dateFields we are dealing with visually
         this.numDateFields = fields.filter(f => f.match(/Expiry/)).length;
 
diff --git a/packages/lib/src/components/internal/SecuredFields/SecuredFieldsProviderHandlers.ts b/packages/lib/src/components/internal/SecuredFields/SecuredFieldsProviderHandlers.ts
index 58b81ba017..79e5b79899 100644
--- a/packages/lib/src/components/internal/SecuredFields/SecuredFieldsProviderHandlers.ts
+++ b/packages/lib/src/components/internal/SecuredFields/SecuredFieldsProviderHandlers.ts
@@ -2,10 +2,13 @@ import { getCardImageUrl } from './utils';
 import {
     ENCRYPTED_SECURITY_CODE,
     ENCRYPTED_CARD_NUMBER,
-    CVC_POLICY_OPTIONAL,
-    CVC_POLICY_HIDDEN,
     CVC_POLICY_REQUIRED,
-    DATE_POLICY_HIDDEN
+    DATE_POLICY_REQUIRED,
+    ENCRYPTED_EXPIRY_DATE,
+    OPTIONAL,
+    HIDDEN,
+    ENCRYPTED_EXPIRY_MONTH,
+    ENCRYPTED_EXPIRY_YEAR
 } from './lib/configuration/constants';
 import {
     CbObjOnError,
@@ -102,6 +105,10 @@ function handleOnFieldValid(field: CbObjOnFieldValid): boolean {
     return true;
 }
 
+function fieldIsInError(fieldType: string, policy: string, numCharsObj: object, errorsObj) {
+    return (policy === OPTIONAL || policy === HIDDEN) && numCharsObj[fieldType] === 0 ? false : errorsObj[fieldType];
+}
+
 /**
  * Saves the card brand in state
  * Emits the onBrand event
@@ -109,12 +116,30 @@ function handleOnFieldValid(field: CbObjOnFieldValid): boolean {
 function handleOnBrand(cardInfo: CbObjOnBrand): void {
     this.setState(
         prevState => {
-            // If we change brand to one where the cvc field is not required & is empty - then the cvc field cannot be in error...
-            // ...else propagate the existing error
-            const cvcFieldInError =
-                (cardInfo.cvcPolicy === CVC_POLICY_OPTIONAL || cardInfo.cvcPolicy === CVC_POLICY_HIDDEN) && this.numCharsInCVC === 0
-                    ? false
-                    : prevState.errors[ENCRYPTED_SECURITY_CODE];
+            /**
+             * If we change brand to one where the cvc or date field(s) are not required & are empty - then these fields cannot be in error
+             * (scenario: have validated empty form, then choose brand w. optional/hidden cvc or date)...
+             * ...else propagate the existing error.
+             */
+            const cvcFieldInError = fieldIsInError(ENCRYPTED_SECURITY_CODE, cardInfo.cvcPolicy, this.numCharsInField, prevState.errors);
+
+            const dateFieldInError =
+                this.numDateFields === 1
+                    ? fieldIsInError(ENCRYPTED_EXPIRY_DATE, cardInfo.expiryDatePolicy, this.numCharsInField, prevState.errors)
+                    : null;
+
+            // For custom card comp
+            const monthFieldInError =
+                this.numDateFields === 2
+                    ? fieldIsInError(ENCRYPTED_EXPIRY_MONTH, cardInfo.expiryDatePolicy, this.numCharsInField, prevState.errors)
+                    : null;
+
+            const yearFieldInError =
+                this.numDateFields === 2
+                    ? fieldIsInError(ENCRYPTED_EXPIRY_YEAR, cardInfo.expiryDatePolicy, this.numCharsInField, prevState.errors)
+                    : null;
+            // --
+            /** end */
 
             return {
                 brand: cardInfo.brand,
@@ -122,9 +147,12 @@ function handleOnBrand(cardInfo: CbObjOnBrand): void {
                 showSocialSecurityNumber: cardInfo.showSocialSecurityNumber,
                 errors: {
                     ...prevState.errors,
-                    ...(existy(cvcFieldInError) && { [ENCRYPTED_SECURITY_CODE]: cvcFieldInError })
+                    ...(existy(cvcFieldInError) && { [ENCRYPTED_SECURITY_CODE]: cvcFieldInError }),
+                    ...(existy(dateFieldInError) && { [ENCRYPTED_EXPIRY_DATE]: dateFieldInError }),
+                    ...(existy(monthFieldInError) && { [ENCRYPTED_EXPIRY_MONTH]: monthFieldInError }),
+                    ...(existy(yearFieldInError) && { [ENCRYPTED_EXPIRY_YEAR]: yearFieldInError })
                 },
-                hideDateForBrand: cardInfo.datePolicy === DATE_POLICY_HIDDEN
+                expiryDatePolicy: cardInfo.expiryDatePolicy ?? DATE_POLICY_REQUIRED
             };
         },
         () => {
@@ -161,9 +189,7 @@ function handleOnError(cbObj: CbObjOnError, hasUnsupportedCard: boolean = null):
 }
 
 function handleFocus(cbObj: CbObjOnFocus): void {
-    if (cbObj.fieldType === ENCRYPTED_SECURITY_CODE) {
-        this.numCharsInCVC = cbObj.numChars;
-    }
+    this.numCharsInField[cbObj.fieldType] = cbObj.numChars;
 
     this.props.onFocus(cbObj);
 }
diff --git a/packages/lib/src/components/internal/SecuredFields/defaultProps.ts b/packages/lib/src/components/internal/SecuredFields/defaultProps.ts
index 9d71a9533e..f66306f830 100644
--- a/packages/lib/src/components/internal/SecuredFields/defaultProps.ts
+++ b/packages/lib/src/components/internal/SecuredFields/defaultProps.ts
@@ -1,4 +1,5 @@
 import { Language } from '../../../language/Language';
+import { CVCPolicyType } from './lib/core/AbstractSecuredField';
 
 export interface SFPProps {
     /**
@@ -47,7 +48,7 @@ export interface SFPProps {
     billingAddressRequiredFields: string[];
     brand: string;
     createFromAction: () => {};
-    cvcPolicy: string;
+    cvcPolicy: CVCPolicyType;
     data: object;
     details: object[];
     enableStoreDetails: boolean;
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/configuration/constants.ts b/packages/lib/src/components/internal/SecuredFields/lib/configuration/constants.ts
index 52ccd805b3..b1ca2425b5 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/configuration/constants.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/configuration/constants.ts
@@ -1,3 +1,5 @@
+import { CVCPolicyType, DatePolicyType } from '../core/AbstractSecuredField';
+
 export const ENCRYPTED_CARD_NUMBER = 'encryptedCardNumber';
 export const ENCRYPTED_EXPIRY_DATE = 'encryptedExpiryDate';
 export const ENCRYPTED_EXPIRY_MONTH = 'encryptedExpiryMonth';
@@ -14,7 +16,7 @@ export const GIFT_CARD = 'giftcard';
 export const ENCRYPTED_BANK_ACCNT_NUMBER_FIELD = 'encryptedBankAccountNumber';
 export const ENCRYPTED_BANK_LOCATION_FIELD = 'encryptedBankLocationId';
 
-export const SF_VERSION = '3.5.4';
+export const SF_VERSION = '3.7.1';
 
 export const DEFAULT_CARD_GROUP_TYPES = ['amex', 'mc', 'visa'];
 
@@ -28,12 +30,17 @@ export const CSF_FIELDS_ARRAY = [
     ENCRYPTED_SECURITY_CODE
 ];
 
-export const CVC_POLICY_REQUIRED = 'required';
-export const CVC_POLICY_OPTIONAL = 'optional';
-export const CVC_POLICY_HIDDEN = 'hidden';
+export const REQUIRED = 'required';
+export const OPTIONAL = 'optional';
+export const HIDDEN = 'hidden';
+
+export const CVC_POLICY_REQUIRED: CVCPolicyType = REQUIRED;
+export const CVC_POLICY_OPTIONAL: CVCPolicyType = OPTIONAL;
+export const CVC_POLICY_HIDDEN: CVCPolicyType = HIDDEN;
 
-export const DATE_POLICY_REQUIRED = CVC_POLICY_REQUIRED;
-export const DATE_POLICY_HIDDEN = CVC_POLICY_HIDDEN;
+export const DATE_POLICY_REQUIRED: DatePolicyType = REQUIRED;
+export const DATE_POLICY_OPTIONAL: DatePolicyType = OPTIONAL;
+export const DATE_POLICY_HIDDEN: DatePolicyType = HIDDEN;
 
 export const DATA_ENCRYPTED_FIELD_ATTR = 'data-cse';
 export const DATA_INFO = 'data-info';
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/AbstractCSF.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/AbstractCSF.ts
index c6959cdfaa..7cb09304b6 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/AbstractCSF.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/AbstractCSF.ts
@@ -1,4 +1,4 @@
-import { CSFSetupObject, CSFConfigObject, CSFCallbacksConfig, CSFStateObject, SFFeedbackObj, SendBrandObject } from '../types';
+import { CSFSetupObject, CSFConfigObject, CSFCallbacksConfig, CSFStateObject, SFFeedbackObj, SendBrandObject, SendExpiryDateObject } from '../types';
 import { createSecuredFields } from './createSecuredFields';
 import { handleProcessBrand } from './utils/processBrand';
 import { handleBrandFromBinLookup } from './utils/handleBrandFromBinLookup';
@@ -31,6 +31,7 @@ abstract class AbstractCSF {
     protected processAutoComplete: (pFeedbackObj: SFFeedbackObj) => void;
     protected processBrand: typeof handleProcessBrand;
     protected sendBrandToCardSF: (brandObj: SendBrandObject) => void;
+    protected sendExpiryDatePolicyToSF: (dateObj: SendExpiryDateObject) => void;
     protected setFocusOnFrame: (pFieldType: string, doLog?: boolean) => void;
     protected setupSecuredField: (pItem: HTMLElement) => void;
     protected touchendListener: (e: Event) => void;
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/AbstractSecuredField.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/AbstractSecuredField.ts
index 38f39511e4..5c618aab31 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/AbstractSecuredField.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/AbstractSecuredField.ts
@@ -17,7 +17,7 @@ export type RtnType_postMessageListener = (event: Event) => void;
 export type RtnType_callbackFn = (feedbackObj: SFFeedbackObj) => void;
 
 export type CVCPolicyType = 'required' | 'optional' | 'hidden';
-export type DatePolicyType = 'required' | 'hidden';
+export type DatePolicyType = 'required' | 'optional' | 'hidden';
 
 /**
  * Base interface, props common to both SFSetupObject & IframeConfigObject
@@ -33,6 +33,7 @@ export interface SFInternalConfig {
     isCreditCardType: boolean;
     showWarnings: boolean;
     cvcPolicy: CVCPolicyType;
+    expiryDatePolicy: DatePolicyType;
     legacyInputMode: boolean;
     minimumExpiryDate: string;
     uid: string;
@@ -43,7 +44,7 @@ export interface SFInternalConfig {
  * The object passed from createSecuredFields to a new instance of SecuredField.ts
  */
 export interface SFSetupObject extends SFInternalConfig {
-    datePolicy: DatePolicyType;
+    expiryDatePolicy: DatePolicyType;
     iframeSrc: string;
     loadingContext: string;
     holderEl: HTMLElement;
@@ -98,7 +99,7 @@ abstract class AbstractSecuredField {
     protected _hasError: boolean;
     protected _isValid: boolean;
     protected _cvcPolicy: CVCPolicyType;
-    protected _datePolicy: DatePolicyType;
+    protected _expiryDatePolicy: DatePolicyType;
     protected _iframeContentWindow: Window;
     protected _isEncrypted: boolean;
     protected _numKey: number;
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/CSF.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/CSF.ts
index a968af64aa..1a8d758bde 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/CSF.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/CSF.ts
@@ -13,7 +13,7 @@ import { handleIframeConfigFeedback } from './utils/iframes/handleIframeConfigFe
 import { isConfigured } from './utils/isConfigured';
 import { assessFormValidity } from './utils/validateForm';
 import { handleBinValue } from './utils/handleBinValue';
-import { handleBrandFromBinLookup, sendBrandToCardSF } from './utils/handleBrandFromBinLookup';
+import { handleBrandFromBinLookup, sendBrandToCardSF, sendExpiryDatePolicyToSF } from './utils/handleBrandFromBinLookup';
 import handleAdditionalFields from './utils/registerAdditionalField';
 import tabHandlers from './utils/tabbing/handleTab';
 import postMessageToIframe from './utils/iframes/postMessageToIframe';
@@ -22,6 +22,7 @@ import { CSFReturnObject, CSFSetupObject, StylesObject, CbObjOnAdditionalSF, CSF
 import * as logger from '../utilities/logger';
 import { selectOne } from '../utilities/dom';
 import { BinLookupResponse } from '../../../../Card/types';
+import { hasOwnProperty } from '../../../../../utils/hasOwnProperty';
 
 const notConfiguredWarning = (str = 'You cannot use secured fields') => {
     logger.warn(`${str} - they are not yet configured. Use the 'onConfigSuccess' callback to know when this has happened.`);
@@ -97,6 +98,7 @@ class CSF extends AbstractCSF {
 
         this.brandsFromBinLookup = handleBrandFromBinLookup;
         this.sendBrandToCardSF = sendBrandToCardSF;
+        this.sendExpiryDatePolicyToSF = sendExpiryDatePolicyToSF;
 
         // Populate config & callbacks objects & create securedFields
         this.init();
@@ -142,7 +144,7 @@ class CSF extends AbstractCSF {
             // function as a way to notify the CSF that a field is in error
             isValidated: (pFieldType: string, code: string): void => {
                 if (this.state.isConfigured) {
-                    if (Object.prototype.hasOwnProperty.call(this.state.securedFields, pFieldType)) {
+                    if (hasOwnProperty(this.state.securedFields, pFieldType)) {
                         this.state.securedFields[pFieldType].hasError = true;
 
                         // If there's not already an errorType, set one
@@ -168,7 +170,7 @@ class CSF extends AbstractCSF {
             },
             hasUnsupportedCard: (pFieldType: string, code: string): void => {
                 if (this.state.isConfigured) {
-                    if (Object.prototype.hasOwnProperty.call(this.state.securedFields, pFieldType)) {
+                    if (hasOwnProperty(this.state.securedFields, pFieldType)) {
                         //
                         this.state.securedFields[pFieldType].hasError = !!code;
                         this.state.securedFields[pFieldType].errorType = code;
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/SecuredField.test.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/SecuredField.test.ts
index eb56268b12..bb7ac71817 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/SecuredField.test.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/SecuredField.test.ts
@@ -54,7 +54,7 @@ const setupObj = {
     //
     fieldType: ENCRYPTED_CARD_NUMBER,
     cvcPolicy: CVC_POLICY_REQUIRED as CVCPolicyType,
-    datePolicy: DATE_POLICY_REQUIRED as DatePolicyType,
+    expiryDatePolicy: DATE_POLICY_REQUIRED as DatePolicyType,
     iframeSrc: null,
     loadingContext: null,
     holderEl: nodeHolder,
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/SecuredField.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/SecuredField.ts
index 2b156584b9..88f7906cfe 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/SecuredField.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/SecuredField.ts
@@ -8,7 +8,10 @@ import {
     CVC_POLICY_OPTIONAL,
     ENCRYPTED_SECURITY_CODE,
     ENCRYPTED_EXPIRY_DATE,
-    DATE_POLICY_HIDDEN
+    DATE_POLICY_HIDDEN,
+    DATE_POLICY_OPTIONAL,
+    ENCRYPTED_EXPIRY_MONTH,
+    ENCRYPTED_EXPIRY_YEAR
 } from '../configuration/constants';
 import { generateRandomNumber } from '../utilities/commonUtils';
 import { SFFeedbackObj } from '../types';
@@ -28,6 +31,7 @@ import { pick, reject } from '../../utils';
 import { processAriaConfig } from './utils/init/processAriaConfig';
 import { processPlaceholders } from './utils/init/processPlaceholders';
 import Language from '../../../../../language/Language';
+import { hasOwnProperty } from '../../../../../utils/hasOwnProperty';
 
 const logPostMsg = false;
 const doLog = false;
@@ -38,7 +42,7 @@ class SecuredField extends AbstractSecuredField {
         super();
 
         // List of props from setup object not required, or not directly required (e.g. cvcPolicy), in the iframe config object
-        const deltaPropsArr: string[] = ['fieldType', 'iframeSrc', 'cvcPolicy', 'datePolicy', 'loadingContext', 'holderEl'];
+        const deltaPropsArr: string[] = ['fieldType', 'iframeSrc', 'cvcPolicy', 'expiryDatePolicy', 'loadingContext', 'holderEl'];
 
         // Copy passed setup object values to this.config...
         const configVarsFromSetUpObj = reject(deltaPropsArr).from(pSetupObj);
@@ -51,7 +55,7 @@ class SecuredField extends AbstractSecuredField {
 
         this.fieldType = thisVarsFromSetupObj.fieldType;
         this.cvcPolicy = thisVarsFromSetupObj.cvcPolicy;
-        this.datePolicy = thisVarsFromSetupObj.datePolicy;
+        this.expiryDatePolicy = thisVarsFromSetupObj.expiryDatePolicy;
         this.iframeSrc = thisVarsFromSetupObj.iframeSrc;
         this.loadingContext = thisVarsFromSetupObj.loadingContext;
         this.holderEl = thisVarsFromSetupObj.holderEl;
@@ -133,6 +137,7 @@ class SecuredField extends AbstractSecuredField {
         const configObj: IframeConfigObject = {
             fieldType: this.fieldType,
             cvcPolicy: this.cvcPolicy,
+            expiryDatePolicy: this.expiryDatePolicy,
             numKey: this.numKey,
             txVariant: this.config.txVariant,
             extraFieldData: this.config.extraFieldData,
@@ -203,8 +208,7 @@ class SecuredField extends AbstractSecuredField {
         }
 
         // CHECK FOR EXPECTED PROPS
-        const hasMainProps: boolean =
-            Object.prototype.hasOwnProperty.call(feedbackObj, 'action') && Object.prototype.hasOwnProperty.call(feedbackObj, 'numKey');
+        const hasMainProps: boolean = hasOwnProperty(feedbackObj, 'action') && hasOwnProperty(feedbackObj, 'numKey');
 
         if (!hasMainProps) {
             if (this.config.showWarnings) logger.warn('WARNING SecuredField :: postMessage listener for iframe :: data mismatch!');
@@ -376,11 +380,17 @@ class SecuredField extends AbstractSecuredField {
             }
         }
 
-        if (this.fieldType === ENCRYPTED_EXPIRY_DATE) {
-            if (this.datePolicy === DATE_POLICY_HIDDEN) {
-                return true;
+        if (this.fieldType === ENCRYPTED_EXPIRY_DATE || this.fieldType === ENCRYPTED_EXPIRY_MONTH || this.fieldType === ENCRYPTED_EXPIRY_YEAR) {
+            switch (this.expiryDatePolicy) {
+                case DATE_POLICY_HIDDEN:
+                    // If date is hidden then the field is always valid
+                    return true;
+                case DATE_POLICY_OPTIONAL:
+                    // If date is optional then the field is always valid UNLESS it has an error
+                    return !this.hasError;
+                default:
+                    return this._isValid;
             }
-            return this._isValid;
         }
 
         return this._isValid;
@@ -412,20 +422,25 @@ class SecuredField extends AbstractSecuredField {
         }
     }
 
-    get datePolicy(): DatePolicyType {
-        return this._datePolicy;
+    get expiryDatePolicy(): DatePolicyType {
+        return this._expiryDatePolicy;
     }
 
-    set datePolicy(value: DatePolicyType) {
-        // Only set if this is a date field
-        if (this.fieldType !== ENCRYPTED_EXPIRY_DATE) return;
+    set expiryDatePolicy(value: DatePolicyType) {
+        // Only set if this is a date field type of securedField
+        if (this.fieldType !== ENCRYPTED_EXPIRY_DATE && this.fieldType !== ENCRYPTED_EXPIRY_MONTH && this.fieldType !== ENCRYPTED_EXPIRY_YEAR) return;
 
         // Only set if value has changed
-        if (value === this.datePolicy) return;
+        if (value === this.expiryDatePolicy) return;
+
+        if (process.env.NODE_ENV === 'development' && doLog) logger.log(this.fieldType, '### SecuredField:expiryDatePolicy:: value=', value);
 
-        if (process.env.NODE_ENV === 'development' && doLog) logger.log(this.fieldType, '### SecuredField:datePolicy:: value=', value);
+        this._expiryDatePolicy = value;
 
-        this._datePolicy = value;
+        // If the field has changed status (required <--> not required) AND it's error state was due to an isValidated call
+        if (this.hasError && this.errorType === 'isValidated') {
+            this.hasError = false;
+        }
     }
 
     get iframeContentWindow(): Window {
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/createSecuredFields.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/createSecuredFields.ts
index 07805734ea..18542df498 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/createSecuredFields.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/createSecuredFields.ts
@@ -149,7 +149,7 @@ export function setupSecuredField(pItem: HTMLElement): void {
         sfLogAtStart: this.config.sfLogAtStart,
         trimTrailingSeparator: this.config.trimTrailingSeparator,
         cvcPolicy,
-        datePolicy: DATE_POLICY_REQUIRED,
+        expiryDatePolicy: DATE_POLICY_REQUIRED,
         isCreditCardType: this.config.isCreditCardType,
         iframeSrc: this.config.iframeSrc,
         loadingContext: this.config.loadingContext,
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/handleEncryption.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/handleEncryption.ts
index 5a1181c84b..fdd1707991 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/handleEncryption.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/handleEncryption.ts
@@ -5,6 +5,7 @@ import { processErrors } from './utils/processErrors';
 import { truthy } from '../utilities/commonUtils';
 import { SFFeedbackObj, CbObjOnFieldValid, EncryptionObj } from '../types';
 import postMessageToIframe from './utils/iframes/postMessageToIframe';
+import { hasOwnProperty } from '../../../../../utils/hasOwnProperty';
 
 export function handleEncryption(pFeedbackObj: SFFeedbackObj): void {
     // EXTRACT VARS
@@ -55,7 +56,7 @@ export function handleEncryption(pFeedbackObj: SFFeedbackObj): void {
 
     // For standalone month field
     if (fieldType === ENCRYPTED_EXPIRY_MONTH) {
-        if (Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_EXPIRY_YEAR)) {
+        if (hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_YEAR)) {
             const dataObj: object = {
                 txVariant: this.state.type,
                 code: pFeedbackObj.code,
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/handleValidation.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/handleValidation.ts
index 1595799773..114e0fc486 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/handleValidation.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/handleValidation.ts
@@ -4,6 +4,7 @@ import { processErrors } from './utils/processErrors';
 import { existy } from '../utilities/commonUtils';
 import { ENCRYPTED_SECURITY_CODE, ENCRYPTED_CARD_NUMBER } from '../configuration/constants';
 import { SFFeedbackObj, CbObjOnFieldValid } from '../types';
+import { hasOwnProperty } from '../../../../../utils/hasOwnProperty';
 
 export function handleValidation(pFeedbackObj: SFFeedbackObj): void {
     // --
@@ -20,9 +21,9 @@ export function handleValidation(pFeedbackObj: SFFeedbackObj): void {
     // (re)set the property that indicates this (in the CVC SecuredField instance)
     if (
         isGenericCard &&
-        Object.prototype.hasOwnProperty.call(pFeedbackObj, 'cvcPolicy') &&
+        hasOwnProperty(pFeedbackObj, 'cvcPolicy') &&
         existy(pFeedbackObj.cvcPolicy) &&
-        Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_SECURITY_CODE)
+        hasOwnProperty(this.state.securedFields, ENCRYPTED_SECURITY_CODE)
     ) {
         this.state.securedFields[ENCRYPTED_SECURITY_CODE].cvcPolicy = pFeedbackObj.cvcPolicy;
     }
@@ -68,7 +69,7 @@ export function handleValidation(pFeedbackObj: SFFeedbackObj): void {
     /**
      * PROCESS & BROADCAST CARD BRANDS
      */
-    if (Object.prototype.hasOwnProperty.call(pFeedbackObj, 'brand')) {
+    if (hasOwnProperty(pFeedbackObj, 'brand')) {
         this.processBrand(pFeedbackObj);
     }
 }
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/initCSF.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/initCSF.ts
index 735bc52c91..b04e03f17b 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/initCSF.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/initCSF.ts
@@ -4,6 +4,7 @@ import * as logger from '../utilities/logger';
 import { falsy } from '../utilities/commonUtils';
 import { findRootNode } from '../ui/domUtils';
 import { CSFReturnObject, CSFSetupObject } from '../types';
+import { hasOwnProperty } from '../../../../../utils/hasOwnProperty';
 
 const initCSF = (pSetupObj: CSFSetupObject): CSFReturnObject => {
     if (!pSetupObj) {
@@ -17,7 +18,7 @@ const initCSF = (pSetupObj: CSFSetupObject): CSFReturnObject => {
     setupObj.type = isGenericCardType ? 'card' : setupObj.type;
 
     // //////// 1. Check passed config object has minimum expected properties //////////
-    if (!Object.prototype.hasOwnProperty.call(setupObj, 'rootNode')) {
+    if (!hasOwnProperty(setupObj, 'rootNode')) {
         logger.error('ERROR: SecuredFields configuration object is missing a "rootNode" property');
         return null;
     }
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/handleBrandFromBinLookup.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/handleBrandFromBinLookup.ts
index d0d5516cc8..0c4414f207 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/handleBrandFromBinLookup.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/handleBrandFromBinLookup.ts
@@ -3,14 +3,17 @@ import {
     ENCRYPTED_CARD_NUMBER,
     DATE_POLICY_REQUIRED,
     DATE_POLICY_HIDDEN,
-    ENCRYPTED_EXPIRY_DATE
+    ENCRYPTED_EXPIRY_DATE,
+    ENCRYPTED_EXPIRY_MONTH,
+    ENCRYPTED_EXPIRY_YEAR
 } from '../../configuration/constants';
 import postMessageToIframe from './iframes/postMessageToIframe';
-import { SFFeedbackObj, SendBrandObject } from '../../types';
+import { SFFeedbackObj, SendBrandObject, SendExpiryDateObject } from '../../types';
 import { BinLookupResponse, BrandObject } from '../../../../../Card/types';
+import { hasOwnProperty } from '../../../../../../utils/hasOwnProperty';
 
 export function sendBrandToCardSF(brandObj: SendBrandObject): void {
-    if (Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_CARD_NUMBER)) {
+    if (hasOwnProperty(this.state.securedFields, ENCRYPTED_CARD_NUMBER)) {
         const dataObj: object = {
             txVariant: this.state.type,
             ...brandObj,
@@ -21,20 +24,40 @@ export function sendBrandToCardSF(brandObj: SendBrandObject): void {
     }
 }
 
+export function sendExpiryDatePolicyToSF(expiryDateObj: SendExpiryDateObject): void {
+    const separateDateFields =
+        hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_MONTH) && hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_YEAR);
+
+    const dateIframesArr = separateDateFields ? [ENCRYPTED_EXPIRY_MONTH, ENCRYPTED_EXPIRY_YEAR] : [ENCRYPTED_EXPIRY_DATE];
+
+    dateIframesArr.forEach((key: string) => {
+        const dataObj: object = {
+            txVariant: this.state.type,
+            ...expiryDateObj,
+            fieldType: key,
+            numKey: this.state.securedFields[key].numKey
+        };
+        postMessageToIframe(dataObj, this.getIframeContentWin(key), this.config.loadingContext);
+    });
+}
+
 export function handleBrandFromBinLookup(binLookupResponse: BinLookupResponse): void {
     const isGenericCard: boolean = this.state.type === 'card';
 
-    // The number of digits in number field has dropped below threshold for BIN lookup (or the bin wasn't found in the db)
-    // - so tell SF to reset & republish the brand it detects
+    /**
+     * The number of digits in number field has dropped below threshold for BIN lookup (or the bin wasn't found in the DB)
+     * - so tell SF to reset & republish the brand it detects
+     */
     if (!binLookupResponse || !Object.keys(binLookupResponse).length) {
         if (isGenericCard) {
             // This will be sent to CardNumber SF which will trigger the brand to be re-evaluated and broadcast (which will reset cvcPolicy)
             this.sendBrandToCardSF({ brand: 'reset' });
+            this.sendExpiryDatePolicyToSF({ expiryDatePolicy: DATE_POLICY_REQUIRED });
         }
 
-        // Reset datePolicy - which never comes from SF
-        if (this.state.type === 'card' && Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_EXPIRY_DATE)) {
-            this.state.securedFields[ENCRYPTED_EXPIRY_DATE].datePolicy = DATE_POLICY_REQUIRED;
+        // Reset expiryDatePolicy - which never comes from SF
+        if (this.state.type === 'card' && hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_DATE)) {
+            this.state.securedFields[ENCRYPTED_EXPIRY_DATE].expiryDatePolicy = DATE_POLICY_REQUIRED;
         }
         return;
     }
@@ -43,17 +66,19 @@ export function handleBrandFromBinLookup(binLookupResponse: BinLookupResponse):
 
     const passedBrand: string = binBrandObj.brand;
 
-    const datePolicy = binBrandObj.showExpiryDate === true ? DATE_POLICY_REQUIRED : DATE_POLICY_HIDDEN;
+    // Look first for expiryDatePolicy string otherwise use showExpiryDate boolean
+    const expiryDatePolicy = binBrandObj.expiryDatePolicy ?? (binBrandObj.showExpiryDate === true ? DATE_POLICY_REQUIRED : DATE_POLICY_HIDDEN);
 
     const brandObj: object = {
         brand: passedBrand,
         cvcPolicy: binBrandObj.cvcPolicy,
-        datePolicy,
+        expiryDatePolicy,
         cvcText: 'Security code',
         showSocialSecurityNumber: binBrandObj.showSocialSecurityNumber ?? false,
         fieldType: ENCRYPTED_CARD_NUMBER
     };
 
+    // Take advantage of function used to handle brand messages from SF in order to process this new brand information
     this.processBrand(brandObj as SFFeedbackObj);
 
     if (isGenericCard) {
@@ -62,6 +87,10 @@ export function handleBrandFromBinLookup(binLookupResponse: BinLookupResponse):
             brand: passedBrand,
             enableLuhnCheck: binLookupResponse.supportedBrands[0].enableLuhnCheck !== false
         });
+
+        // Inform the date related securedFields
+        // - if expiryDatePolicy is 'optional' or 'hidden' they need to set the aria-required attribute / hide themselves
+        this.sendExpiryDatePolicyToSF({ expiryDatePolicy });
     }
 
     /**
@@ -69,22 +98,25 @@ export function handleBrandFromBinLookup(binLookupResponse: BinLookupResponse):
      */
 
     /**
-     * Set the cvcPolicy value on the relevant SecuredFields instance (which will reflect in the cvc field being considered valid,
+     * First set the cvcPolicy value on the relevant SecuredFields instance (which will reflect in the cvc field being considered valid,
      *  as long as it is not in error)...
      */
-    if (Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_SECURITY_CODE)) {
+    if (hasOwnProperty(this.state.securedFields, ENCRYPTED_SECURITY_CODE)) {
         this.state.securedFields[ENCRYPTED_SECURITY_CODE].cvcPolicy = binBrandObj.cvcPolicy;
     }
 
     /**
-     * ...and set the datePolicy...
+     * ...then set the expiryDatePolicy...
      */
-    if (Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_EXPIRY_DATE)) {
-        this.state.securedFields[ENCRYPTED_EXPIRY_DATE].datePolicy = datePolicy;
+    if (hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_DATE)) {
+        this.state.securedFields[ENCRYPTED_EXPIRY_DATE].expiryDatePolicy = expiryDatePolicy;
+    } else if (hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_MONTH) && hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_YEAR)) {
+        this.state.securedFields[ENCRYPTED_EXPIRY_MONTH].expiryDatePolicy = expiryDatePolicy;
+        this.state.securedFields[ENCRYPTED_EXPIRY_YEAR].expiryDatePolicy = expiryDatePolicy;
     }
 
     /**
-     * ...and re-check if all SecuredFields are valid
+     * ...and now re-check if form i.e all the SecuredFields, are valid
      */
     this.assessFormValidity();
 }
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/iframes/setFocusOnFrame.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/iframes/setFocusOnFrame.ts
index dda2f56e52..40b35b4715 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/iframes/setFocusOnFrame.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/iframes/setFocusOnFrame.ts
@@ -1,8 +1,9 @@
 import postMessageToIframe from './postMessageToIframe';
+import { hasOwnProperty } from '../../../../../../../utils/hasOwnProperty';
 
 export function setFocusOnFrame(pFieldType: string, doLog?: boolean): void {
     // Check destroySecuredFields hasn't been called (thus clearing the state's securedFields object)
-    if (!Object.prototype.hasOwnProperty.call(this.state.securedFields, pFieldType)) return;
+    if (!hasOwnProperty(this.state.securedFields, pFieldType)) return;
 
     if (process.env.NODE_ENV === 'development' && doLog) console.log('\n### setFocusOnFrame:: (SHIFT_TAB) place focus on:', pFieldType);
 
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processAutoComplete.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processAutoComplete.ts
index 84100098a4..b6cb8e6f2e 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processAutoComplete.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processAutoComplete.ts
@@ -1,6 +1,7 @@
 import postMessageToIframe from './iframes/postMessageToIframe';
 import { ENCRYPTED_EXPIRY_DATE, ENCRYPTED_EXPIRY_MONTH, ENCRYPTED_EXPIRY_YEAR } from '../../configuration/constants';
 import { SFFeedbackObj, CbObjOnAutoComplete } from '../../types';
+import { hasOwnProperty } from '../../../../../../utils/hasOwnProperty';
 
 export function processAutoComplete(pFeedbackObj: SFFeedbackObj): void {
     // Specifically for cc-name (but no reason not to propagate all AC objects to the merchant)
@@ -25,7 +26,7 @@ export function processAutoComplete(pFeedbackObj: SFFeedbackObj): void {
         const acYearVal: string = dateValArr[1].substr(2); // take last 2 digits of year
         const acDateVal = `${acMonthVal}/${acYearVal}`;
 
-        if (Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_EXPIRY_DATE)) {
+        if (hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_DATE)) {
             const dataObj: object = {
                 txVariant: this.state.type,
                 fieldType: ENCRYPTED_EXPIRY_DATE,
@@ -36,7 +37,7 @@ export function processAutoComplete(pFeedbackObj: SFFeedbackObj): void {
             return;
         }
 
-        if (Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_EXPIRY_MONTH)) {
+        if (hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_MONTH)) {
             const dataObj: object = {
                 txVariant: this.state.type,
                 fieldType: ENCRYPTED_EXPIRY_MONTH,
@@ -46,7 +47,7 @@ export function processAutoComplete(pFeedbackObj: SFFeedbackObj): void {
             postMessageToIframe(dataObj, this.getIframeContentWin(ENCRYPTED_EXPIRY_MONTH), this.config.loadingContext);
         }
 
-        if (Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_EXPIRY_YEAR)) {
+        if (hasOwnProperty(this.state.securedFields, ENCRYPTED_EXPIRY_YEAR)) {
             // Dirty! - Need to wait til next page draw if setting month and year at the same time, otherwise only year gets set
             setTimeout(() => {
                 const dataObj: object = {
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processBrand.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processBrand.ts
index 61c49b1935..c07595bc2d 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processBrand.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processBrand.ts
@@ -3,14 +3,19 @@ import postMessageToIframe from './iframes/postMessageToIframe';
 import { objectsDeepEqual } from '../../utilities/commonUtils';
 import { BrandStorageObject, CbObjOnBrand, SFFeedbackObj } from '../../types';
 import { pick } from '../../../utils';
+import { hasOwnProperty } from '../../../../../../utils/hasOwnProperty';
 
 const checkForBrandChange = (pBrand: BrandStorageObject, storedBrand: BrandStorageObject): boolean => {
     // if the objects aren't the same - then return true = brandChange has happened
     return !objectsDeepEqual(pBrand, storedBrand);
 };
 
-// If generic card type AND passed brand doesn't equal stored brand - send the new brand to the cvc input
-// Create object for onBrand callback
+/**
+ * - If generic card type AND passed brand doesn't equal stored brand - send the new brand to the cvc input
+ *    (so it can reassess what length it should be and if any value it contains is now valid)
+ *
+ * - Create object for onBrand callback aka SFPHandlers.handleOnBrand
+ */
 export function handleProcessBrand(pFeedbackObj: SFFeedbackObj): boolean {
     const fieldType: string = pFeedbackObj.fieldType;
 
@@ -19,6 +24,7 @@ export function handleProcessBrand(pFeedbackObj: SFFeedbackObj): boolean {
         const newBrandObj: BrandStorageObject = {
             brand: pFeedbackObj.brand,
             cvcPolicy: pFeedbackObj.cvcPolicy,
+            expiryDatePolicy: pFeedbackObj.expiryDatePolicy,
             showSocialSecurityNumber: pFeedbackObj.showSocialSecurityNumber
         };
         const newBrand: boolean = checkForBrandChange(newBrandObj, this.state.brand);
@@ -37,7 +43,7 @@ export function handleProcessBrand(pFeedbackObj: SFFeedbackObj): boolean {
 
             // Perform postMessage to send brand to CVC field - this also needs to happen for BCMC, single branded cards,
             // because it needs to know the cvcPolicy (to set the aria-required attribute & to show the iframe)
-            if (Object.prototype.hasOwnProperty.call(this.state.securedFields, ENCRYPTED_SECURITY_CODE)) {
+            if (hasOwnProperty(this.state.securedFields, ENCRYPTED_SECURITY_CODE)) {
                 const dataObj: object = {
                     txVariant: this.state.type,
                     brand: newBrandObj.brand,
@@ -51,7 +57,7 @@ export function handleProcessBrand(pFeedbackObj: SFFeedbackObj): boolean {
 
         // Create object with brand related properties
         const brandInfoObj = treatAsGenericCard
-            ? pick(['brand', 'cvcPolicy', 'cvcText', 'datePolicy', 'showSocialSecurityNumber']).from(pFeedbackObj)
+            ? pick(['brand', 'cvcPolicy', 'cvcText', 'expiryDatePolicy', 'showSocialSecurityNumber']).from(pFeedbackObj)
             : null;
 
         if (brandInfoObj && brandInfoObj.brand) {
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processErrors.ts b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processErrors.ts
index 8c13919e10..7b2e10c616 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processErrors.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/core/utils/processErrors.ts
@@ -1,6 +1,7 @@
 import { CbObjOnError, SFFeedbackObj } from '../../types';
 import SecuredField from '../../../../../../components/internal/SecuredFields/lib/core/SecuredField';
 import { ERROR_CODES, ERROR_MSG_UNSUPPORTED_CARD_ENTERED } from '../../../../../../core/Errors/constants';
+import { hasOwnProperty } from '../../../../../../utils/hasOwnProperty';
 
 type RtnType_callbackFn = (obj: CbObjOnError) => void;
 
@@ -11,7 +12,7 @@ export const processErrors = (
     rootNode: HTMLElement,
     callbackFn: RtnType_callbackFn
 ): CbObjOnError => {
-    if (!Object.prototype.hasOwnProperty.call(pFeedbackObj, 'error')) return null;
+    if (!hasOwnProperty(pFeedbackObj, 'error')) return null;
 
     const fieldType: string = pFeedbackObj.fieldType;
 
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/types.ts b/packages/lib/src/components/internal/SecuredFields/lib/types.ts
index 175c51ab55..56aa9dbab8 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/types.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/types.ts
@@ -6,12 +6,14 @@ import { BrandObject } from '../../../Card/types';
 declare global {
     interface Window {
         _b$dl: boolean;
+        mockBinCount: number;
     }
 }
 
 export interface BrandStorageObject {
     brand: string;
-    cvcPolicy: string;
+    cvcPolicy: CVCPolicyType;
+    expiryDatePolicy: DatePolicyType;
     showSocialSecurityNumber?: boolean;
 }
 
@@ -148,7 +150,7 @@ export interface CardObject {
     pattern: RegExp;
     securityCode?: string;
     displayName?: string;
-    cvcPolicy?: string;
+    cvcPolicy?: CVCPolicyType;
 }
 
 export interface CbObjOnBrand {
@@ -156,7 +158,7 @@ export interface CbObjOnBrand {
     rootNode: HTMLElement;
     brand: string;
     cvcPolicy: CVCPolicyType;
-    datePolicy?: DatePolicyType;
+    expiryDatePolicy?: DatePolicyType;
     cvcText: string;
     showSocialSecurityNumber?: boolean;
     brandImageUrl?: string; // Added by SFP
@@ -250,7 +252,7 @@ export interface SFFeedbackObj {
     code?: string;
     cvcText?: string;
     cvcPolicy?: CVCPolicyType;
-    datePolicy?: DatePolicyType;
+    expiryDatePolicy?: DatePolicyType;
     showSocialSecurityNumber?: boolean;
     maxLength?: number;
     error?: string;
@@ -287,3 +289,7 @@ export interface SendBrandObject {
     brand: string;
     enableLuhnCheck: boolean;
 }
+
+export interface SendExpiryDateObject {
+    expiryDatePolicy: DatePolicyType;
+}
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/utilities/cardType.ts b/packages/lib/src/components/internal/SecuredFields/lib/utilities/cardType.ts
index 1a9e156d8e..2ab0db6d6f 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/utilities/cardType.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/utilities/cardType.ts
@@ -1,4 +1,5 @@
 import { CardObject } from '../types';
+import { hasOwnProperty } from '../../../../../utils/hasOwnProperty';
 
 let shortestPermittedCardLength;
 
@@ -189,7 +190,7 @@ const detectCard = (pCardNumber, pAvailableCards?) => {
         matchedCards = CardType.cards
             .filter(card => pAvailableCards.includes(card.cardType))
             // Further filter them to those with a regEx pattern that matches pCardNumber
-            .filter(card => Object.prototype.hasOwnProperty.call(card, 'pattern') && pCardNumber.match(card.pattern));
+            .filter(card => hasOwnProperty(card, 'pattern') && pCardNumber.match(card.pattern));
 
         // If we have matched cards: if there's only one - return it; else return the one with the longest startingRule
         if (matchedCards.length) {
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/utilities/commonUtils.test.ts b/packages/lib/src/components/internal/SecuredFields/lib/utilities/commonUtils.test.ts
index 2da9f930bf..1f29a7a213 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/utilities/commonUtils.test.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/utilities/commonUtils.test.ts
@@ -1,6 +1,6 @@
 /* global expect, describe, jest, beforeEach */
 
-import { falsy, notFalsy, generateRandomNumber } from './commonUtils';
+import { falsy, notFalsy, generateRandomNumber, objectsDeepEqual } from './commonUtils';
 
 beforeEach(() => {
     console.error = jest.fn(error => {
@@ -49,3 +49,238 @@ describe('Tests for commonUtils', () => {
         expect(typeof generateRandomNumber()).toEqual('number');
     });
 });
+
+/**
+ * Testing objectsDeepEqual
+ */
+
+///////////////// EQUALITY /////////////////
+
+describe('objectsDeepEqual tests - Batch 1: expect equality with objects', () => {
+    test('test empty objects are seen as equal', () => {
+        const objA = {};
+        const objB = {};
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+
+    test('test 2 nulls are seen as equal', () => {
+        const objA = null;
+        const objB = null;
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+
+    test('test empty array & empty object are seen as equal (they are both typeof "object")', () => {
+        const objA = [];
+        const objB = {};
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+
+    test('test objects with same key:values are seen as equal', () => {
+        const objA = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago'
+        };
+        const objB = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago'
+        };
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+
+    test('test objects with same key:values, including nested objects,  are seen as equal', () => {
+        const objA = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago',
+            country: { land: 'US', hemisphere: 'N' }
+        };
+        const objB = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago',
+            country: { land: 'US', hemisphere: 'N' }
+        };
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+});
+
+describe('objectsDeepEqual tests - Batch 2: expect equality with arrays', () => {
+    test('test empty arrays are seen as equal', () => {
+        const objA = [];
+        const objB = [];
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+
+    test('test arrays are seen as equal', () => {
+        const objA = ['af', '+93', 'gz', '+99'];
+        const objB = ['af', '+93', 'gz', '+99'];
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+
+    test('test arrays of objects are seen as equal', () => {
+        const objA = [
+            { id: 'af', name: '+93' },
+            { id: 'gz', name: '+99' }
+        ];
+        const objB = [
+            { id: 'af', name: '+93' },
+            { id: 'gz', name: '+99' }
+        ];
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+
+    test('test arrays of objects, including nested objects, are seen as equal', () => {
+        const objA = [
+            { id: 'af', name: '+93' },
+            { id: 'gz', name: '+99' },
+            { id: 'country', value: { land: 'US' } }
+        ];
+        const objB = [
+            { id: 'af', name: '+93' },
+            { id: 'gz', name: '+99' },
+            { id: 'country', value: { land: 'US' } }
+        ];
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(true);
+    });
+});
+
+///////////////// NON-EQUALITY /////////////////
+describe('objectsDeepEqual tests - Batch 3: expect no equality with objects', () => {
+    test('test null & an empty object are not seen as equal', () => {
+        const objA = {};
+        const objB = null;
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(false);
+    });
+
+    test('test objects with same keys but a different value for one of the keys are not seen as equal', () => {
+        const objA = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago'
+        };
+        const objB = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: null
+        };
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(false);
+    });
+
+    test('test objects with different keys are not seen as equal', () => {
+        const objA = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago',
+            country: 'US'
+        };
+        const objB = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago'
+        };
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(false);
+    });
+
+    test('test objects with nested objects with different values are not seen as equal', () => {
+        const objA = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago',
+            country: { land: 'US', hemisphere: 'N' }
+        };
+        const objB = {
+            street: 'a street',
+            houseNumberOrName: '11',
+            postalCode: '10814',
+            city: 'chicago',
+            country: { land: 'CA', hemisphere: 'N' }
+        };
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(false);
+    });
+});
+
+describe('objectsDeepEqual tests - Batch 3: expect no equality with array', () => {
+    test('test arrays with different lengths are not seen as equal', () => {
+        const objA = ['af', '+93', 'gz', '+99'];
+        const objB = ['af', '+93', 'gz'];
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(false);
+    });
+
+    test('test arrays with different values are not seen as equal', () => {
+        const objA = ['af', '+93', 'gz', '+99'];
+        const objB = ['af', '+93', 'gz', '+91'];
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(false);
+    });
+
+    test('test arrays of different objects are not seen as equal', () => {
+        const objA = [
+            { id: 'af', name: '+93' },
+            { id: 'gz', name: '+99' },
+            { id: 'gb', name: '+90' }
+        ];
+        const objB = [
+            { id: 'af', name: '+93' },
+            { id: 'gz', name: '+99' }
+        ];
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(false);
+    });
+
+    test('test arrays of objects, including nested objects with different values, are not seen as equal', () => {
+        const objA = [
+            { id: 'af', name: '+93' },
+            { id: 'gz', name: '+99' },
+            { id: 'country', value: { land: 'US' } }
+        ];
+        const objB = [
+            { id: 'af', name: '+93' },
+            { id: 'gz', name: '+99' },
+            { id: 'country', value: { land: 'MX' } }
+        ];
+
+        const areEqual = objectsDeepEqual(objA, objB);
+        expect(areEqual).toBe(false);
+    });
+});
diff --git a/packages/lib/src/components/internal/SecuredFields/lib/utilities/commonUtils.ts b/packages/lib/src/components/internal/SecuredFields/lib/utilities/commonUtils.ts
index 40045be14d..79bfc41671 100644
--- a/packages/lib/src/components/internal/SecuredFields/lib/utilities/commonUtils.ts
+++ b/packages/lib/src/components/internal/SecuredFields/lib/utilities/commonUtils.ts
@@ -88,25 +88,19 @@ function isObjectLike(value) {
     return !!value && typeof value === 'object';
 }
 
-function objectsDeepEqual(obj1 = {}, obj2 = {}) {
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-
-    for (const key of keys1) {
-        if (isObjectLike(obj1[key])) {
-            if (!objectsDeepEqual(obj1[key], obj2[key])) {
-                return false;
-            }
-        }
-        if (obj1[key] !== obj2[key]) {
+/**
+ * Recursively compare 2 objects
+ */
+function objectsDeepEqual(x, y) {
+    const xType = typeof x;
+    const yType = typeof y;
+    if (x && y && xType === 'object' && xType === yType) {
+        if (Object.keys(x).length !== Object.keys(y).length) {
             return false;
         }
+        return Object.keys(x).every(key => objectsDeepEqual(x[key], y[key]));
     }
-    return true;
+    return x === y;
 }
 
 /**
diff --git a/packages/lib/src/utils/hasOwnProperty.ts b/packages/lib/src/utils/hasOwnProperty.ts
new file mode 100644
index 0000000000..15370f0e8e
--- /dev/null
+++ b/packages/lib/src/utils/hasOwnProperty.ts
@@ -0,0 +1,3 @@
+export function hasOwnProperty(obj, prop) {
+    return Object.prototype.hasOwnProperty.call(obj, prop);
+}
diff --git a/packages/playground/src/pages/Cards/Cards.js b/packages/playground/src/pages/Cards/Cards.js
index 24cb27be85..6860b5fadd 100644
--- a/packages/playground/src/pages/Cards/Cards.js
+++ b/packages/playground/src/pages/Cards/Cards.js
@@ -97,7 +97,7 @@ getPaymentMethods({ amount, shopperLocale }).then(async paymentMethodsResponse =
     window.kcpCard = checkout
         .create('card', {
             type: 'scheme',
-            brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro'],
+            brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'korean_local_card'],
             configuration: {
                 koreanAuthenticationRequired: true
             },
diff --git a/packages/playground/src/pages/SecuredFields/SecuredFields.html b/packages/playground/src/pages/SecuredFields/SecuredFields.html
index bc0772c56a..f42958b21d 100644
--- a/packages/playground/src/pages/SecuredFields/SecuredFields.html
+++ b/packages/playground/src/pages/SecuredFields/SecuredFields.html
@@ -19,25 +19,25 @@ <h2 class="card-text sf-text">SecuredFields</h2>
                     </div>
                     <div class="merchant-checkout__payment-method__details secured-fields" style="display:none;">
                         <span class="pm-image">
-                            <img
-                                id="pmImage"
-                                width="40"
-                                src="https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/nocard.svg"
-                                alt="card"
-                            />
-                        </span>
+                    <img
+                            class="pm-image-1"
+                            width="40"
+                            src="https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/nocard.svg"
+                            alt="card"
+                    />
+                </span>
                         <span class="pm-image-dual">
-                            <img
-                                id="pmImageDual1"
-                                width="40"
-                                alt=""
-                            />
-                            <img
-                                id="pmImageDual2"
-                                width="40"
-                                alt=""
-                            />
-                        </span>
+                    <img
+                            class="pm-image-dual-1"
+                            width="40"
+                            alt=""
+                    />
+                    <img
+                            class="pm-image-dual-2"
+                            width="40"
+                            alt=""
+                    />
+                </span>
                         <!-- <label class="pm-form-label">
                     <span class="pm-form-label__text">Holder name:</span>
                     <input class="pm-input-field"/>
@@ -54,12 +54,12 @@ <h2 class="card-text sf-text">SecuredFields</h2>
                             <span class="pm-input-field" data-cse="encryptedExpiryDate"></span>
                             <span class="pm-form-label__error-text">Date error text</span>
                         </label>-->
-                        <label class="pm-form-label exp-month">
+                        <label class="pm-form-label pm-form-label--exp-month">
                             <span class="pm-form-label__text">Expiry month:</span>
                             <span class="pm-input-field" data-cse="encryptedExpiryMonth"></span>
                             <span class="pm-form-label__error-text">Date error text</span>
                         </label>
-                        <label class="pm-form-label exp-year">
+                        <label class="pm-form-label pm-form-label--exp-year">
                             <span class="pm-form-label__text">Expiry year:</span>
                             <span class="pm-input-field" data-cse="encryptedExpiryYear"></span>
                             <span class="pm-form-label__error-text">Date error text</span>
diff --git a/packages/playground/src/pages/SecuredFields/securedFields.config.js b/packages/playground/src/pages/SecuredFields/securedFields.config.js
index 998fa8ef12..941057a3bb 100644
--- a/packages/playground/src/pages/SecuredFields/securedFields.config.js
+++ b/packages/playground/src/pages/SecuredFields/securedFields.config.js
@@ -1,5 +1,7 @@
 let hideCVC = false;
+let optionalCVC = false;
 let hideDate = false;
+let optionalDate = false;
 let isDualBranding = false;
 
 function setAttributes(el, attrs) {
@@ -120,7 +122,7 @@ export function onBrand(pCallbackObj) {
      * If not in dual branding mode - add card brand to first image element
      */
     if (!isDualBranding) {
-        const brandLogo1 = pCallbackObj.rootNode.querySelector('#pmImage');
+        const brandLogo1 = pCallbackObj.rootNode.querySelector('.pm-image-1');
         setAttributes(brandLogo1, {
             src: pCallbackObj.brandImageUrl,
             alt: pCallbackObj.brand
@@ -142,26 +144,52 @@ export function onBrand(pCallbackObj) {
         cvcNode.style.display = 'block';
     }
 
+    // Optional cvc fields
+    if (pCallbackObj.cvcPolicy === 'optional' && !optionalCVC) {
+        optionalCVC = true;
+        if (cvcNode) cvcNode.querySelector('.pm-form-label__text').innerText = 'CVV/CVC (optional):';
+    }
+
+    if (optionalCVC && pCallbackObj.cvcPolicy !== 'optional') {
+        optionalCVC = false;
+        if (cvcNode) cvcNode.querySelector('.pm-form-label__text').innerText = 'CVV/CVC:';
+    }
+
     /**
      * Deal with showing/hiding date field(s)
      */
     const dateNode = pCallbackObj.rootNode.querySelector('.pm-form-label--exp-date');
-    const monthNode = pCallbackObj.rootNode.querySelector('.pm-form-label.exp-month');
-    const yearNode = pCallbackObj.rootNode.querySelector('.pm-form-label.exp-year');
+    const monthNode = pCallbackObj.rootNode.querySelector('.pm-form-label--exp-month');
+    const yearNode = pCallbackObj.rootNode.querySelector('.pm-form-label--exp-year');
 
-    if (pCallbackObj.datePolicy === 'hidden' && !hideDate) {
+    if (pCallbackObj.expiryDatePolicy === 'hidden' && !hideDate) {
         hideDate = true;
         if (dateNode) dateNode.style.display = 'none';
         if (monthNode) monthNode.style.display = 'none';
         if (yearNode) yearNode.style.display = 'none';
     }
 
-    if (hideDate && pCallbackObj.datePolicy !== 'hidden') {
+    if (hideDate && pCallbackObj.expiryDatePolicy !== 'hidden') {
         hideDate = false;
         if (dateNode) dateNode.style.display = 'block';
         if (monthNode) monthNode.style.display = 'block';
         if (yearNode) yearNode.style.display = 'block';
     }
+
+    // Optional date fields
+    if (pCallbackObj.expiryDatePolicy === 'optional' && !optionalDate) {
+        optionalDate = true;
+        if (dateNode) dateNode.querySelector('.pm-form-label__text').innerText = 'Expiry date (optional):';
+        if (monthNode) monthNode.querySelector('.pm-form-label__text').innerText = 'Expiry month (optional):';
+        if (yearNode) yearNode.querySelector('.pm-form-label__text').innerText = 'Expiry year (optional):';
+    }
+
+    if (optionalDate && pCallbackObj.expiryDatePolicy !== 'optional') {
+        optionalDate = false;
+        if (dateNode) dateNode.querySelector('.pm-form-label__text').innerText = 'Expiry date:';
+        if (monthNode) monthNode.querySelector('.pm-form-label__text').innerText = 'Expiry month:';
+        if (yearNode) yearNode.querySelector('.pm-form-label__text').innerText = 'Expiry year:';
+    }
 }
 
 function dualBrandListener(e) {
@@ -173,10 +201,10 @@ function resetDualBranding(rootNode) {
 
     setLogosActive(rootNode);
 
-    const brandLogo1 = rootNode.querySelector('#pmImageDual1');
+    const brandLogo1 = rootNode.querySelector('.pm-image-dual-1');
     brandLogo1.removeEventListener('click', dualBrandListener);
 
-    const brandLogo2 = rootNode.querySelector('#pmImageDual2');
+    const brandLogo2 = rootNode.querySelector('.pm-image-dual-2');
     brandLogo2.removeEventListener('click', dualBrandListener);
 }
 
@@ -184,8 +212,8 @@ function resetDualBranding(rootNode) {
  * Implementing dual branding
  */
 function onDualBrand(pCallbackObj) {
-    const brandLogo1 = pCallbackObj.rootNode.querySelector('#pmImageDual1');
-    const brandLogo2 = pCallbackObj.rootNode.querySelector('#pmImageDual2');
+    const brandLogo1 = pCallbackObj.rootNode.querySelector('.pm-image-dual-1');
+    const brandLogo2 = pCallbackObj.rootNode.querySelector('.pm-image-dual-2');
 
     isDualBranding = true;