v6 Passing config to allow SF to expose unencrypted expiryDate (#2659)

* Passing config to allow SF to expose unencrypted expiryDate; and propagating this to onFieldValid * Fixing unit test. Using correct version of SecuredFields * Added prop to unit test
Adyen · May 2, 2024 · 825bae8 · 825bae8
1 parent 68dd958
commit 825bae8
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 4 deletions.
diff --git a/packages/lib/src/components/Card/components/CardInput/defaultProps.ts b/packages/lib/src/components/Card/components/CardInput/defaultProps.ts
@@ -22,6 +22,7 @@ export default {
     isPayButtonPrimaryVariant: true,
     disableIOSArrowKeys: false,
     showContextualElement: true,
+    exposeExpiryDate: false,
 
     // Events
     onLoad: (): any => {},

diff --git a/packages/lib/src/components/Card/components/CardInput/types.ts b/packages/lib/src/components/Card/components/CardInput/types.ts
@@ -135,6 +135,7 @@ export interface CardInputProps {
     trimTrailingSeparator?: boolean;
     type?: string;
     maskSecurityCode?: boolean;
+    exposeExpiryDate?: boolean;
     disclaimerMessage?: DisclaimerMsgObject;
     onValidationErrorAnalytics?: (obj: FieldErrorAnalyticsObject) => {};
 }

diff --git a/packages/lib/src/components/Card/components/CardInput/utils.ts b/packages/lib/src/components/Card/components/CardInput/utils.ts
@@ -149,6 +149,7 @@ export const extractPropsForSFP = (props: CardInputProps) => {
         legacyInputMode: props.legacyInputMode,
         loadingContext: props.loadingContext,
         maskSecurityCode: props.maskSecurityCode,
+        exposeExpiryDate: props.exposeExpiryDate,
         minimumExpiryDate: props.minimumExpiryDate,
         onAdditionalSFConfig: props.onAdditionalSFConfig,
         onAdditionalSFRemoved: props.onAdditionalSFRemoved,

diff --git a/packages/lib/src/components/Card/types.ts b/packages/lib/src/components/Card/types.ts
@@ -281,6 +281,11 @@ export interface CardConfiguration extends UIElementProps {
      */
     expiryMonth?: string;
 
+    /**
+     * Allows SF to return an unencrypted expiryDate
+     */
+    exposeExpiryDate?: boolean;
+
     // forceCompat?: boolean, // TODO - probably drop, if Checkout won't support IE then SF doesn't need to
 }
 

diff --git a/packages/lib/src/components/internal/SecuredFields/SFP/SecuredFieldsProvider.ts b/packages/lib/src/components/internal/SecuredFields/SFP/SecuredFieldsProvider.ts
@@ -183,6 +183,7 @@ class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
             implementationType: this.props.implementationType || 'components', // to distinguish between 'regular' and 'custom' card component
             forceCompat: this.props.forceCompat,
             maskSecurityCode: this.props.maskSecurityCode,
+            exposeExpiryDate: this.props.exposeExpiryDate,
             shouldDisableIOSArrowKeys: !!this.props.disableIOSArrowKeys, // convert whether function has been defined into a boolean
             placeholders: this.props.placeholders ?? {},
             showContextualElement: this.props.showContextualElement

diff --git a/packages/lib/src/components/internal/SecuredFields/SFP/types.ts b/packages/lib/src/components/internal/SecuredFields/SFP/types.ts
@@ -48,6 +48,7 @@ export interface SFPProps {
     render: () => {};
     resources: Resources;
     maskSecurityCode: boolean;
+    exposeExpiryDate: boolean;
     disableIOSArrowKeys: (obj: TouchStartEventObj) => void | null;
     placeholders?: Placeholders;
     showContextualElement?: boolean;

diff --git a/packages/lib/src/components/internal/SecuredFields/lib/CSF/extensions/createSecuredFields.ts b/packages/lib/src/components/internal/SecuredFields/lib/CSF/extensions/createSecuredFields.ts
@@ -214,6 +214,7 @@ export function setupSecuredField(pItem: HTMLElement, cvcPolicy?: CVCPolicyType,
             minimumExpiryDate: this.config.minimumExpiryDate,
             // from this.props (passed straight thru)
             maskSecurityCode: this.props.maskSecurityCode,
+            exposeExpiryDate: this.props.exposeExpiryDate,
             disableIOSArrowKeys: this.props.shouldDisableIOSArrowKeys,
             implementationType: this.props.implementationType,
             showContextualElement: this.props.showContextualElement,

diff --git a/...ges/lib/src/components/internal/SecuredFields/lib/CSF/extensions/handleEncryption.test.ts b/...ges/lib/src/components/internal/SecuredFields/lib/CSF/extensions/handleEncryption.test.ts
@@ -78,6 +78,7 @@ const feedbackObj_encryptedDate: any = {
         }
     ],
     fieldType: 'encryptedExpiryDate',
+    expiryDate: '03/2030',
     numKey: 2083655694
 };
 
@@ -142,7 +143,8 @@ const expected_callbackObj_onFieldValid_Year = {
     valid: true,
     type: 'card',
     rootNode: 'div',
-    blob: 'eyJhbGc_'
+    blob: 'eyJhbGc_',
+    expiryDate: '03/2030'
 };
 
 const expected_callbackObj_onFieldValid_PAN = {

diff --git a/packages/lib/src/components/internal/SecuredFields/lib/CSF/extensions/handleEncryption.ts b/packages/lib/src/components/internal/SecuredFields/lib/CSF/extensions/handleEncryption.ts
@@ -1,5 +1,11 @@
 import { makeCallbackObjectsEncryption } from '../utils/callbackUtils';
-import { ENCRYPTED_EXPIRY_MONTH, ENCRYPTED_EXPIRY_YEAR, ENCRYPTED_SECURITY_CODE, ENCRYPTED_CARD_NUMBER } from '../../constants';
+import {
+    ENCRYPTED_EXPIRY_MONTH,
+    ENCRYPTED_EXPIRY_YEAR,
+    ENCRYPTED_SECURITY_CODE,
+    ENCRYPTED_CARD_NUMBER,
+    ENCRYPTED_EXPIRY_DATE
+} from '../../constants';
 import { processErrors } from '../utils/processErrors';
 import { truthy } from '../../utilities/commonUtils';
 import { SFFeedbackObj, CbObjOnFieldValid, EncryptionObj } from '../../types';
@@ -74,6 +80,11 @@ export function handleEncryption(pFeedbackObj: SFFeedbackObj): void {
         callbackObjectsArr[0].issuerBin = +pFeedbackObj.issuerBin;
     }
 
+    // Add expiryDate to "encryptedExpiryYear" field. It will only be present if the correct config has been sent to SF
+    if (fieldType === ENCRYPTED_EXPIRY_DATE && truthy(pFeedbackObj.expiryDate)) {
+        callbackObjectsArr[1].expiryDate = pFeedbackObj.expiryDate;
+    }
+
     // BROADCAST VALID STATE OF INDIVIDUAL INPUTS - passing the encryption objects
     for (i = 0, len = callbackObjectsArr.length; i < len; i += 1) {
         this.callbacks.onFieldValid(callbackObjectsArr[i]);

diff --git a/packages/lib/src/components/internal/SecuredFields/lib/CSF/types.ts b/packages/lib/src/components/internal/SecuredFields/lib/CSF/types.ts
@@ -70,6 +70,7 @@ export interface CSFSetupObject extends CSFCommonProps {
     placeholders?: Placeholders;
     showContextualElement: boolean;
     maskSecurityCode: boolean;
+    exposeExpiryDate: boolean;
     shouldDisableIOSArrowKeys: boolean;
 }
 

diff --git a/packages/lib/src/components/internal/SecuredFields/lib/constants.ts b/packages/lib/src/components/internal/SecuredFields/lib/constants.ts
@@ -17,7 +17,7 @@ export const ENCRYPTED_SECURITY_CODE_4_DIGITS = 'encryptedSecurityCode4digits';
 
 export const GIFT_CARD = 'giftcard';
 
-export const SF_VERSION = '5.0.4';
+export const SF_VERSION = '5.1.0';
 
 export const DEFAULT_CARD_GROUP_TYPES = ['amex', 'mc', 'visa'];
 

diff --git a/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.test.ts b/packages/lib/src/components/internal/SecuredFields/lib/securedField/SecuredField.test.ts
@@ -81,7 +81,8 @@ const setupObj = {
     implementationType: null,
     maskSecurityCode: false,
     disableIOSArrowKeys: false,
-    placeholders: cardPlaceholders
+    placeholders: cardPlaceholders,
+    exposeExpiryDate: false
 };
 
 /**

diff --git a/packages/lib/src/components/internal/SecuredFields/lib/types.ts b/packages/lib/src/components/internal/SecuredFields/lib/types.ts
@@ -133,6 +133,7 @@ export interface CbObjOnFieldValid {
     rootNode: HTMLElement;
     blob?: string;
     endDigits?: string;
+    expiryDate?: string;
     issuerBin?: number;
 }
 
@@ -213,6 +214,7 @@ export interface SFFeedbackObj {
     error?: string;
     endDigits?: string;
     issuerBin?: string;
+    expiryDate?: string;
     type?: string;
     binValue?: string;
     focus?: boolean;
@@ -304,6 +306,7 @@ export interface SecuredFieldCommonProps {
     // originally from CSF->this.props
     implementationType: string;
     maskSecurityCode: boolean;
+    exposeExpiryDate: boolean;
     disableIOSArrowKeys: boolean;
 }