v6 Allowing 3DS2 in checkoutshopper demo to work on localhost (#2688)

* Allowing 3DS2 in checkoutshopper demo to work on localhost * Adding fix for iDeal playwright e2e test
Adyen · May 17, 2024 · 82e1b57 · 82e1b57
1 parent c80ab6a
commit 82e1b57
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 27 deletions.
diff --git a/packages/e2e-playwright/tests/issuerList/issuer-list.spec.ts b/packages/e2e-playwright/tests/issuerList/issuer-list.spec.ts
@@ -37,7 +37,7 @@ test.describe('Issuer List', () => {
         await pressKeyboardToNextItem(page);
         await pressKeyboardToSelectItem(page);
 
-        await expect(issuerList.submitButton).toHaveText('Continue to Test Issuer 4');
+        await expect(issuerList.submitButton).toHaveText('Continue to iDeal Test Issuer');
     });
 
     test('it should load a default when pressing enter', async ({ issuerListPage }) => {

diff --git a/packages/lib/src/components/ThreeDS2/components/Challenge/PrepareChallenge3DS2.tsx b/packages/lib/src/components/ThreeDS2/components/Challenge/PrepareChallenge3DS2.tsx
@@ -74,14 +74,20 @@ class PrepareChallenge3DS2 extends Component<PrepareChallenge3DS2Props, PrepareC
         const hasChallengeData = !isErrorObject(this.state.challengeData);
 
         if (hasChallengeData) {
+            const shouldAllowHttpDomains =
+                /** Allow http urls if in development and testing against localhost:8080 */
+                (process.env.NODE_ENV === 'development' && process.env.__CLIENT_ENV__?.indexOf('localhost:8080') > -1) ||
+                /**
+                 * Allows the checkoutshopper demo on localhost:8080 to work -
+                 *  requires a configuration in localhost of environment: 'test', _environmentUrls: {api: 'http://localhost:8080/'}
+                 */
+                (this.props.environment === 'test' && this.props._environmentUrls?.api?.includes('http://localhost:8080'));
+
             /**
              * Check the structure of the created challengeData
              */
             const { acsURL } = this.state.challengeData as ChallengeData;
-            const hasValidAcsURL = isValidHttpUrl(
-                acsURL,
-                process.env.NODE_ENV === 'development' && process.env.__CLIENT_ENV__?.indexOf('localhost:8080') > -1 // allow http urls if in development and testing against localhost:8080);
-            );
+            const hasValidAcsURL = isValidHttpUrl(acsURL, shouldAllowHttpDomains);
 
             // Only render component if we have an acsURL.
             if (!hasValidAcsURL) {

diff --git a/packages/lib/src/components/ThreeDS2/components/Challenge/types.ts b/packages/lib/src/components/ThreeDS2/components/Challenge/types.ts
@@ -18,7 +18,15 @@ export interface DoChallenge3DS2State {
 export interface PrepareChallenge3DS2Props extends ThreeDS2ChallengeConfiguration {
     onComplete?: (data: ChallengeResolveData) => void;
     onSubmitAnalytics: (aObj: SendAnalyticsObject) => void;
-    isMDFlow: boolean;
+    environment?: string;
+    _environmentUrls?: {
+        api?: string;
+        analytics?: string;
+        cdn?: {
+            images?: string;
+            translations?: string;
+        };
+    };
 }
 
 export interface PrepareChallenge3DS2State {

diff --git a/packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/PrepareFingerprint3DS2.tsx b/packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/PrepareFingerprint3DS2.tsx
@@ -71,7 +71,14 @@ class PrepareFingerprint3DS2 extends Component<PrepareFingerprint3DS2Props, Prep
         const hasFingerPrintData = !isErrorObject(this.state.fingerPrintData);
 
         if (hasFingerPrintData) {
-            const shouldAllowHttpDomains = process.env.NODE_ENV === 'development' && process.env.__CLIENT_ENV__?.indexOf('localhost:8080') > -1; // allow http urls if in development and testing against localhost:8080
+            const shouldAllowHttpDomains =
+                /** Allow http urls if in development and testing against localhost:8080 */
+                (process.env.NODE_ENV === 'development' && process.env.__CLIENT_ENV__?.indexOf('localhost:8080') > -1) ||
+                /**
+                 * Allows the checkoutshopper demo on localhost:8080 to work -
+                 *  requires a configuration in localhost of environment: 'test', _environmentUrls: {api: 'http://localhost:8080/'}
+                 */
+                (this.props.environment === 'test' && this.props._environmentUrls?.api?.includes('http://localhost:8080'));
 
             /**
              * Check the structure of the created fingerPrintData

diff --git a/packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/types.ts b/packages/lib/src/components/ThreeDS2/components/DeviceFingerprint/types.ts
@@ -18,7 +18,15 @@ export interface DoFingerprint3DS2State {
 export interface PrepareFingerprint3DS2Props extends ThreeDS2DeviceFingerprintConfiguration {
     onComplete: (data: FingerprintResolveData) => void;
     onSubmitAnalytics: (aObj: SendAnalyticsObject) => void;
-    isMDFlow: boolean;
+    environment?: string;
+    _environmentUrls?: {
+        api?: string;
+        analytics?: string;
+        cdn?: {
+            images?: string;
+            translations?: string;
+        };
+    };
 }
 
 export interface PrepareFingerprint3DS2State {

diff --git a/packages/lib/src/components/ThreeDS2/types.ts b/packages/lib/src/components/ThreeDS2/types.ts
@@ -3,37 +3,32 @@ import { ActionHandledReturnObject, AnalyticsModule } from '../../types/global-t
 import Language from '../../language';
 import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError';
 import { Analytics3DS2Errors } from '../../core/Analytics/constants';
+import { SendAnalyticsObject } from '../../core/Analytics/types';
 
-export interface ThreeDS2DeviceFingerprintConfiguration {
+interface ThreeDS2Configuration {
     dataKey?: string;
-    token?: string;
+    environment?: string;
+    isMDFlow?: boolean;
+    loadingContext?: string;
+    modules?: { analytics: AnalyticsModule };
     notificationURL?: string;
+    onActionHandled: (rtnObj: ActionHandledReturnObject) => void;
     onError?: (error: AdyenCheckoutError, element?: UIElement) => void;
     paymentData?: string;
-    showSpinner: boolean;
+    token?: string;
     type?: string;
-    isMDFlow?: boolean;
-    loadingContext?: string;
+}
+
+export interface ThreeDS2DeviceFingerprintConfiguration extends ThreeDS2Configuration {
     clientKey?: string;
     elementRef?: UIElement;
-    onActionHandled: (rtnObj: ActionHandledReturnObject) => void;
-    modules?: { analytics: AnalyticsModule };
+    showSpinner: boolean;
 }
 
-export interface ThreeDS2ChallengeConfiguration {
-    token?: string;
-    dataKey?: string;
-    notificationURL?: string;
-    onError?: (error: AdyenCheckoutError, element?: UIElement) => void;
-    paymentData?: string;
-    size?: string;
+export interface ThreeDS2ChallengeConfiguration extends ThreeDS2Configuration {
     challengeWindowSize?: '01' | '02' | '03' | '04' | '05';
-    type?: string;
-    loadingContext?: string;
-    isMDFlow?: boolean;
     i18n?: Language;
-    onActionHandled: (rtnObj: ActionHandledReturnObject) => void;
-    modules?: { analytics: AnalyticsModule };
+    size?: string;
 }
 
 /**

diff --git a/packages/lib/src/core/config.ts b/packages/lib/src/core/config.ts
@@ -8,6 +8,7 @@ export const GENERIC_OPTIONS = [
     'secondaryAmount',
     'countryCode',
     'environment',
+    '_environmentUrls',
     'loadingContext',
     'i18n',
     'modules',