@wearejh/m2-pwa-adyen 0.45.0 → 0.50.0

package/CHANGELOG.md

@@ -3,6 +3,73 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.50.0](https://github.com/WeareJH/mage-mono/compare/v0.49.0...v0.50.0) (2026-01-14)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
+# [0.49.0](https://github.com/WeareJH/mage-mono/compare/v0.48.0...v0.49.0) (2026-01-14)
+
+
+### Bug Fixes
+
+* **m2-pwa-adyen:** add tips sections to 3ds documentation ([6711d27](https://github.com/WeareJH/mage-mono/commit/6711d27dc2c6ec1295568853458b7045f939be4b))
+* **m2-pwa-adyen:** re-add documentation for 3ds & card ([3cfbf5f](https://github.com/WeareJH/mage-mono/commit/3cfbf5f5aa1c3ebc3c20435a761fd9bc60db3103))
+* **m2-pwa-adyen:** update Card & 3DSecure payment components (WOOD-3014) ([0c05135](https://github.com/WeareJH/mage-mono/commit/0c05135bcd64af7c9314a76990ca0e518698244d))
+* **WOOD-3014:** Adyen Klarna bug fixes ([39ba2f8](https://github.com/WeareJH/mage-mono/commit/39ba2f821683fad38e4b6935432eea7aae43b7fb))
+* **WOOD-3014:** Adyen Klarna handleAction bug fixe ([169d428](https://github.com/WeareJH/mage-mono/commit/169d428990b9048ce949ec9c6754d5f2ab630f2d))
+* **WOOD-3014:** Adyen onCancel bug fix - no longer used ([2015520](https://github.com/WeareJH/mage-mono/commit/201552013f3ddc4dc1744239d98b1fcc5da69196))
+* lint fixes ([81634f6](https://github.com/WeareJH/mage-mono/commit/81634f638c9e1f8c677da31dd2199fd911041428))
+
+
+
+
+
+# [0.48.0](https://github.com/WeareJH/mage-mono/compare/v0.47.0...v0.48.0) (2026-01-13)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
+# [0.47.0](https://github.com/WeareJH/mage-mono/compare/v0.46.0...v0.47.0) (2026-01-13)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
+# [0.46.0](https://github.com/WeareJH/mage-mono/compare/v0.45.1...v0.46.0) (2026-01-13)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
+## [0.45.1](https://github.com/WeareJH/mage-mono/compare/v0.45.0...v0.45.1) (2026-01-13)
+
+
+### Bug Fixes
+
+* **m2-pwa-adyen:** Card payment input placeholder config  (WOOD-3014) ([bb6c1e8](https://github.com/WeareJH/mage-mono/commit/bb6c1e89a99fe403db256cdc94b5df520cc10ef8))
+* **m2-pwa-adyen:** hide Card payment button in favour of Woodies custom button (WOOD-3014) ([156526f](https://github.com/WeareJH/mage-mono/commit/156526ff8b3059f4a6dc4ff8d90e6122843de1cd))
+* **m2-pwa-adyen:** remove early mounting of the Adyen card component. Wait for parent component (WOOD-3014) ([7f90ed9](https://github.com/WeareJH/mage-mono/commit/7f90ed9d625a654e83149c26c35581fb114dad9b))
+
+
+### Features
+
+* **WOOD-3014:** Adyen card validation ([e7619d5](https://github.com/WeareJH/mage-mono/commit/e7619d519c6b6f925aa0f8eb45512ecc3cc96f53))
+
+
+
+
+
 # [0.45.0](https://github.com/WeareJH/mage-mono/compare/v0.44.0...v0.45.0) (2026-01-08)
 
 **Note:** Version bump only for package @wearejh/m2-pwa-adyen

package/lib/AdyenProvider.tsx

@@ -44,6 +44,7 @@ interface AdyenContext
     children?: any;
     paymentFormSubmit(): void;
     paymentFormSubmitted: boolean;
+    resetPaymentFormSubmitted(): void;
 
     /**
      * A promise that resolves/rejects depending on
@@ -60,6 +61,7 @@ const initialState: AdyenContext = {
     checkoutConfig: initialStoreState.checkoutConfig,
     paymentFormSubmit: () => {},
     paymentFormSubmitted: false,
+    resetPaymentFormSubmitted: () => {},
     selectedPaymentMethod: initialStoreState.selectedPaymentMethod,
     step: initialStoreState.step,
     supportedPaymentMethods: initialStoreState.supportedPaymentMethods,
@@ -213,6 +215,17 @@ export function AdyenProvider(props: AdyenProviderProps) {
         paymentFormSubmitProp();
     }, [paymentFormSubmitProp]);
 
+    /**
+     * Reset the payment form submitted state.
+     * Called by Card component after triggering adyenCard.submit()
+     * to allow subsequent submit button clicks to work.
+     */
+    const resetPaymentFormSubmitted = useCallback(() => {
+        if (setHasFormSubmitted) {
+            setHasFormSubmitted(false);
+        }
+    }, [setHasFormSubmitted]);
+
     const attemptPayment = useCallback(
         (props: AttemptPaymentProps) => {
             const newState = {
@@ -287,6 +300,7 @@ export function AdyenProvider(props: AdyenProviderProps) {
             orderId,
             paymentFormSubmit,
             paymentFormSubmitted,
+            resetPaymentFormSubmitted,
             selectedPaymentMethod,
             step,
             supportedPaymentMethods: availiablePaymentMethods,
@@ -303,6 +317,7 @@ export function AdyenProvider(props: AdyenProviderProps) {
             orderId,
             paymentFormSubmit,
             paymentFormSubmitted,
+            resetPaymentFormSubmitted,
             selectedPaymentMethod,
             step,
             waitForPaymentFormSubmit,

package/lib/adyen.actions.ts

@@ -33,8 +33,7 @@ export enum ActionTypes {
     ActionKlarnaRedirect = 'Adyen.Action.Klarna.Redirect',
     ActionSDKPayPal = 'Adyen.Action.SDK.PayPal',
     ActionGiftCardRedirect = 'Adyen.Action.GiftCard.Redirect',
-    ActionThreeDS2Challenge = 'Adyen.Action.3DS2.Challenge',
-    ActionThreeDS2Fingerprint = 'Adyen.Action.3DS2.Fingerprint',
+    ActionThreeDS2 = 'Adyen.Action.3DS2',
     Cancel = 'Adyen.Cancel',
     Error = 'Adyen.Error',
     GetConfig = 'Adyen.GetConfig',
@@ -55,8 +54,7 @@ export type ActionsObject = {
     [ActionTypes.ActionKlarnaRedirect]: AdyenPaymentAction;
     [ActionTypes.ActionSDKPayPal]: AdyenPaymentAction;
     [ActionTypes.ActionGiftCardRedirect]: AdyenPaymentAction;
-    [ActionTypes.ActionThreeDS2Challenge]: AdyenPaymentAction;
-    [ActionTypes.ActionThreeDS2Fingerprint]: AdyenPaymentAction;
+    [ActionTypes.ActionThreeDS2]: AdyenPaymentAction;
     [ActionTypes.Cancel]: undefined;
     [ActionTypes.Error]: AdyenErrorAction;
     [ActionTypes.GetConfig]: undefined;

package/lib/adyen.reducer.ts

@@ -52,14 +52,9 @@ export function reducer(state = initialState, action: Actions): Store {
             newState.step = AdyenSteps.GiftCardRedirect;
             break;
 
-        case ActionTypes.ActionThreeDS2Challenge:
+        case ActionTypes.ActionThreeDS2:
             newState.action = action.payload;
-            newState.step = AdyenSteps.ThreeDS2Challenge;
-            break;
-
-        case ActionTypes.ActionThreeDS2Fingerprint:
-            newState.action = action.payload;
-            newState.step = AdyenSteps.ThreeDS2Fingerprint;
+            newState.step = AdyenSteps.ThreeDS2;
             break;
 
         case ActionTypes.Cancel:

package/lib/adyen.types.ts

@@ -13,8 +13,6 @@ export enum AdyenActionTypes {
     Redirect = 'redirect',
     SDK = 'sdk',
     ThreeDS2 = 'threeDS2',
-    ThreeDS2Challenge = 'threeDS2Challenge',
-    ThreeDS2Fingerprint = 'threeDS2Fingerprint',
     Voucher = 'voucher',
 }
 
@@ -51,21 +49,7 @@ export interface AdyenErrorAction {
 }
 
 export interface AdyenPayload {
-    additional_data: {
-        brand_code?: AdyenBrandCodes;
-        cc_type: string;
-        cvc: string;
-        expiryMonth: string;
-        expiryYear: string;
-        java_enabled: boolean;
-        language: string;
-        number: string;
-        screen_color_depth: number;
-        screen_height: number;
-        screen_width: number;
-        stateData: string;
-        timezone_offset: number;
-    };
+    additional_data: Record<string, unknown>;
     method: string;
 }
 
@@ -122,9 +106,10 @@ export enum AdyenSDKTypes {
 }
 
 export type AdyenSubmitParams = {
-    brandCode?: AdyenBrandCodes;
-    browserInfo: Record<string, any>;
-    paymentMethod: Record<string, any>;
+    browserInfo: Record<string, unknown>;
+    clientStateDataIndicator: boolean;
+    origin: string;
+    paymentMethod: Record<string, unknown>;
     type: string;
 };
 
@@ -134,15 +119,6 @@ export enum AdyenStorageKey {
     CartVariant = 'adyen.cartvariant',
 }
 
-/**
- * Subtypes of actions defined in the Adyen
- * response from Magento.
- */
-export enum AdyenActionSubTypes {
-    Fingerprint = 'fingerprint',
-    Challenge = 'challenge',
-}
-
 /**
  * Possible steps within the Adyen flow.
  */
@@ -165,8 +141,7 @@ export enum AdyenSteps {
     Ready = 'Ready',
     SDKPayPal = 'SDK.PayPal',
     GiftCardRedirect = 'GiftCard.Redirect',
-    ThreeDS2Challenge = '3DS2.Challenge',
-    ThreeDS2Fingerprint = '3DS2.Fingerprint',
+    ThreeDS2 = '3DS2',
     ThreeDSDismiss = '3DS.Dismiss',
 }
 

package/lib/epics/adyenPayment.epic.ts

@@ -92,21 +92,19 @@ export function adyenPayment(action$: Observable<any>, state$: Observable<any>,
                 return EMPTY;
             }
 
+            // Note
+            // It's important to make sure this payload matches the payload
+            // sent by the Luma integration. Use a local instance of Magento
+            // to compare.
             const payloadComposed: AdyenPayload = {
                 additional_data: {
-                    brand_code: payload?.brandCode,
                     cc_type: payload?.paymentMethod?.brand,
-                    cvc: payload?.paymentMethod?.encryptedSecurityCode,
-                    expiryMonth: payload?.paymentMethod?.encryptedExpiryMonth,
-                    expiryYear: payload?.paymentMethod?.encryptedExpiryYear,
-                    java_enabled: payload?.browserInfo?.javaEnabled || false,
-                    language: payload?.browserInfo?.language || '',
-                    number: payload?.paymentMethod?.encryptedCardNumber,
-                    screen_color_depth: payload?.browserInfo?.colorDepth || 0,
-                    screen_height: payload?.browserInfo?.screenHeight || 0,
-                    screen_width: payload?.browserInfo?.screenWidth || 0,
-                    stateData: JSON.stringify(payload),
-                    timezone_offset: payload?.browserInfo?.timeZoneOffset || 0,
+                    frontendType: 'default',
+                    guestEmail: pendingPayment.billingAddress?.email,
+                    stateData: JSON.stringify({
+                        ...payload,
+                        type: undefined,
+                    }),
                 },
                 method: payload?.type,
             };

package/lib/epics/attemptPayment.epic.ts

@@ -20,10 +20,11 @@ export function attemptPayment(action$: Observable<any>, _state$: Observable<any
 
         mergeMap(({ payload }) => {
             const output: AdyenSubmitParams = {
-                brandCode: payload?.brandCode,
-                browserInfo: payload?.browserInfo,
-                paymentMethod: payload?.paymentMethod,
-                type: payload?.type,
+                browserInfo: payload.browserInfo,
+                clientStateDataIndicator: payload.clientStateDataIndicator,
+                origin: payload.origin,
+                paymentMethod: payload.paymentMethod,
+                type: payload.type,
             };
 
             return of(AdyenMessage(ActionTypes.PaymentSubmit, output));

package/lib/epics/getAdyenConfig.epic.ts

@@ -30,9 +30,12 @@ const adyenWebComponentsApiUrl = 'https://checkoutshopper-live.adyen.com/checkou
 /**
  * Adyen web components version.
  *
+ * This version matches the version used by the Magento 2 module
+ * @link https://github.com/Adyen/adyen-magento2/blob/main/view/base/web/js/adyen.js
+ *
  * @url https://github.com/Adyen/adyen-web
  */
-const adyenWebComponentsVersion = '6.27.1';
+const adyenWebComponentsVersion = '6.21.0';
 
 const CSS_FILE = `${adyenWebComponentsApiUrl}/${adyenWebComponentsVersion}/adyen.css`;
 const JS_FILE = `${adyenWebComponentsApiUrl}/${adyenWebComponentsVersion}/adyen.js`;

package/lib/epics/utils/processAdyenResponse.ts

@@ -3,7 +3,6 @@ import { of, throwError } from 'rxjs';
 
 import { ActionTypes, AdyenMessage } from '../../adyen.actions';
 import {
-    AdyenActionSubTypes,
     AdyenActionTypes,
     AdyenResponseParams,
     AdyenResultCodeTypes,
@@ -95,7 +94,6 @@ export function processAdyenResponse(response?: AdyenResponseParams, config?: Pr
                         );
 
                     case PaymentMethodTypes.Klarna:
-                    case PaymentMethodTypes.KlarnaOverTime:
                         return of(
                             /**
                              * Klarna uses a redirect to process payment, so
@@ -121,6 +119,58 @@ export function processAdyenResponse(response?: AdyenResponseParams, config?: Pr
                             AdyenMessage(ActionTypes.ActionKlarnaRedirect, action),
                         );
 
+                    case PaymentMethodTypes.KlarnaOverTime:
+                        return of(
+                            /**
+                             * Klarna Over Time (klarna_account) uses a redirect to process payment, so
+                             * we need to store the users order id in
+                             * localstorage, so that it can be restored when
+                             * the user is returned to the site.
+                             */
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.OrderId,
+                                value: orderId,
+                            }),
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.CartId,
+                                value: cartId,
+                            }),
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.CartVariant,
+                                value: cartVariant,
+                            }),
+                            AdyenMessage(ActionTypes.ActionKlarnaOverTimeRedirect, action),
+                        );
+
+                    case PaymentMethodTypes.KlarnaPayNow:
+                        return of(
+                            /**
+                             * Klarna Over Time (klarna_account) uses a redirect to process payment, so
+                             * we need to store the users order id in
+                             * localstorage, so that it can be restored when
+                             * the user is returned to the site.
+                             */
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.OrderId,
+                                value: orderId,
+                            }),
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.CartId,
+                                value: cartId,
+                            }),
+                            StorageMsg(StorageActions.Set, {
+                                expiry: storageExpiry,
+                                key: AdyenStorageKey.CartVariant,
+                                value: cartVariant,
+                            }),
+                            AdyenMessage(ActionTypes.ActionKlarnaPayNowRedirect, action),
+                        );
+
                     default:
                         break;
                 }
@@ -144,23 +194,7 @@ export function processAdyenResponse(response?: AdyenResponseParams, config?: Pr
                 break;
 
             case AdyenActionTypes.ThreeDS2:
-                /**
-                 * Adyen 3DS2 actions use a `subType` to
-                 * determine the next step.
-                 */
-                const subType = action?.subtype;
-
-                switch (subType) {
-                    case AdyenActionSubTypes.Fingerprint:
-                        return of(AdyenMessage(ActionTypes.ActionThreeDS2Fingerprint, action));
-
-                    case AdyenActionSubTypes.Challenge:
-                        return of(AdyenMessage(ActionTypes.ActionThreeDS2Challenge, action));
-
-                    default:
-                        break;
-                }
-                break;
+                return of(AdyenMessage(ActionTypes.ActionThreeDS2, action));
 
             default:
                 break;

package/lib/paymentMethods/3DS/README.md

@@ -0,0 +1,56 @@
+<br/>
+
+<!-- Title -->
+<h1 align="center">
+  3D Secure 2 (3DS2)
+</h1>
+
+<!-- Description -->
+<p align="center">Adyen 3D Secure 2 Authentication Component</p>
+
+<br/>
+
+## :lock: Payment Verification Flow
+
+1. User submits payment via the Card component.
+2. Payment details are sent to Magento for processing.
+3. If the card requires 3DS2 verification, Magento returns an action payload.
+4. The 3DS2 component creates a verification modal from the action payload.
+5. User completes the 3DS2 challenge (e.g., biometric, OTP, or bank redirect).
+6. Verification result is sent back to Magento for final payment processing.
+
+<br/>
+
+## Tips
+
+- Use the Magento 2 Adyen module as a reference for how native Magento integrates Adyen Web Components:
+  - Adyen Magento 2 module: https://github.com/Adyen/adyen-magento2
+  - Card/3DS2 renderer reference: https://github.com/Adyen/adyen-magento2/blob/main/view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js
+- Compare behavior against Magento’s Luma storefront to validate UX and flows (field validation, 3DS challenge, error states). Testing on Luma helps ensure parity with the native integration:
+  - Magento Open Source: https://github.com/magento/magento2
+  - Sample Data (includes Luma assets): https://github.com/magento/magento2-sample-data
+
+<br/>
+
+## FAQ
+
+### "Challenge Failed - No creq" Error
+
+**Problem:** You receive a "Challenge Failed - No creq" error during 3DS2 verification.
+
+**Cause:** The 3DS action data isn't being passed to the Adyen iframes. When inspecting the network tab, you'll see requests to HTML documents such as `challenge.html` that are missing their POST payload.
+
+**Solution:** This error occurs when the 3DS2 iframe is loaded within an existing `<form>` element. Adyen's 3DS2 flow uses its own form and multiple form submissions to run the challenge. Nested forms break this process.
+
+**Fix:** Ensure the 3DS2 component is rendered in an isolated area, outside of any existing form elements. The modal approach used in this implementation prevents this issue by rendering the component in a portal.
+
+<br/>
+
+## :vulcan_salute: Useful Resources
+
+- Adyen 3D Secure 2 Documentation: https://docs.adyen.com/online-payments/3d-secure/api-reference#threeDS2
+- Adyen 3DS2 Web Component Source Code: https://github.com/Adyen/adyen-web/tree/main/packages/lib/src/components/ThreeDS2
+- Adyen Test Cards with 3DS2: https://docs.adyen.com/development-resources/test-cards/test-card-numbers#test-3d-secure-2-authentication
+- 3D Secure 2 Overview: https://docs.adyen.com/online-payments/3d-secure
+
+<br/>

package/lib/paymentMethods/3DS/ThreeDS2.scss

@@ -0,0 +1,16 @@
+.threeDS2Modal {
+    // Ensure the 3DS2 challenge iframe takes up the full height
+    // of the modal, without needing to use overflow scrolling.
+    :global(.adyen-checkout__threeds2__challenge--01),
+    :global(.adyen-checkout__threeds2__challenge--02),
+    :global(.adyen-checkout__threeds2__challenge--03),
+    :global(.adyen-checkout__threeds2__challenge--04),
+    :global(.adyen-checkout__threeds2__challenge--05),
+    :global(.adyen-checkout__threeds2__challenge--01 .adyen-checkout__iframe--threeDSIframe),
+    :global(.adyen-checkout__threeds2__challenge--02 .adyen-checkout__iframe--threeDSIframe),
+    :global(.adyen-checkout__threeds2__challenge--03 .adyen-checkout__iframe--threeDSIframe),
+    :global(.adyen-checkout__threeds2__challenge--04 .adyen-checkout__iframe--threeDSIframe),
+    :global(.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe) {
+        min-height: inherit;
+    }
+}

package/lib/paymentMethods/3DS/ThreeDS2.tsx

@@ -0,0 +1,130 @@
+import React, { useCallback, useEffect, useRef, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { SimpleModal } from '@wearejh/m2-pwa-checkout/lib/components/Modal/SimpleModal';
+import { PaymentAction } from '@adyen/adyen-web';
+
+import { AdyenSteps } from '../../adyen.types';
+import { ActionTypes, AdyenMessage } from '../../adyen.actions';
+import { useAdyen } from '../../AdyenProvider';
+
+import classes from './ThreeDS2.scss';
+
+/**
+ * React wrapper component for the Adyen 3DS2 (3D Secure 2)
+ * authentication component.
+ *
+ * Payment Verification Flow:
+ * 1. After the user submits payment via the Card component, Magento
+ *    processes the payment.
+ * 2. If the card requires 3DS2 verification, Magento returns an action
+ *    payload with type 'threeDS2'.
+ * 3. This component creates the 3DS2 component from that action and
+ *    mounts it in a modal.
+ * 4. Adyen handles the 3DS2 challenge flow (e.g., biometric, OTP,
+ *    or bank redirect).
+ * 5. Once verification completes, `onAdditionalDetails` sends the result
+ *    back to Magento.
+ * 6. Magento finalizes the payment based on the verification result.
+ *
+ * @see Adyen 3DS2 Component Documentation - https://docs.adyen.com/online-payments/3d-secure/api-reference#threeDS2
+ * @see Adyen Web Component Source - https://github.com/Adyen/adyen-web/tree/main/packages/lib/src/components/ThreeDS2
+ * @see Adyen Magento 2 module Card with 3DS2 - https://github.com/Adyen/adyen-magento2/blob/main/view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js
+ *
+ * @returns {JSX.Element | null} The 3DS2 modal when verification is required, otherwise null.
+ */
+export function ThreeDS2() {
+    const { action, adyenCheckout, step } = useAdyen();
+    const dispatch = useDispatch();
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const componentRef = useRef<any>(null);
+
+    /**
+     * Handle the additional details event from Adyen 3DS2 component.
+     */
+    const onAdditionalDetails = useCallback(
+        (state) => {
+            dispatch(AdyenMessage(ActionTypes.ProcessPaymentDetails, state.data));
+        },
+        [dispatch],
+    );
+
+    /**
+     * Handle the errors.
+     */
+    const onError = useCallback(
+        ({ message }) => {
+            dispatch(
+                AdyenMessage(ActionTypes.Error, {
+                    cancelPayment: true,
+                    message,
+                }),
+            );
+        },
+        [dispatch],
+    );
+
+    const is3DS2Action = useMemo(() => {
+        return action && action.type === 'threeDS2' && adyenCheckout;
+    }, [action, adyenCheckout]);
+
+    const unMount = useCallback(() => {
+        if (componentRef.current) {
+            componentRef.current.unmount();
+            componentRef.current = null;
+        }
+    }, []);
+
+    useEffect(() => {
+        if (!is3DS2Action || !containerRef.current) {
+            return;
+        }
+
+        unMount();
+
+        try {
+            /**
+             * Create the 3DS component from the Action payload that comes
+             * from Magento. Adyen will handle the rest and call `onAdditionalDetails` when it needs more information from Magento or the verification is complete.
+             */
+            const actionComponent = adyenCheckout?.createFromAction(action as PaymentAction, {
+                onAdditionalDetails,
+                onError,
+            });
+
+            actionComponent?.mount(containerRef.current);
+            componentRef.current = actionComponent;
+        } catch (error) {
+            onError(error);
+        }
+
+        return () => {
+            unMount();
+        };
+    }, [action, adyenCheckout, is3DS2Action, onAdditionalDetails, onError, unMount]);
+
+    if (step === AdyenSteps.ThreeDS2) {
+        return (
+            <SimpleModal
+                alwaysRender={true}
+                dismiss={() => {}}
+                hideModalFooter={true}
+                id="adyen_cc_3ds2_modal"
+                title="Payment Verification"
+                className={classes.threeDS2Modal}
+            >
+                <div
+                    ref={containerRef}
+                    style={{
+                        // The Adyen 3DS2 has a minimum height of 400px,
+                        // but it causes a overflow scrollbar to appear on modals.
+                        // This values adds a bit of padding to prevent that.
+                        minHeight: '450px',
+                    }}
+                />
+            </SimpleModal>
+        );
+    }
+
+    return null;
+}

package/lib/paymentMethods/ApplePay/ApplePay.tsx

@@ -104,7 +104,11 @@ export function ApplePay() {
      *
      * @link Adyen ApplePay Component Documentation: https://docs.adyen.com/payment-methods/apple-pay/web-component
      */
-    const adyenApplePay = useMemo<ApplePayElement>(() => {
+    const adyenApplePay = useMemo<ApplePayElement | undefined>(() => {
+        if (!adyenCheckout) {
+            return undefined;
+        }
+
         const { ApplePay } = (window as any).AdyenWeb;
 
         return new ApplePay(adyenCheckout, adyenApplePayConfig) as ApplePayElement;
@@ -128,7 +132,7 @@ export function ApplePay() {
 
     return (
         <>
-            <div ref={container}></div>
+            <div ref={container} />
             <button
                 aria-hidden={true}
                 ref={hiddenFormSubmitButton}

package/lib/paymentMethods/Card/Card.tsx

@@ -4,26 +4,24 @@ import { useDispatch } from 'react-redux';
 
 import { useAdyen } from '../../AdyenProvider';
 import { ActionTypes, AdyenMessage } from '../../adyen.actions';
-import { AdyenSteps, MagentoPaymentTypes } from '../../adyen.types';
-import { ThreeDS2Challenge } from '../3DS/ThreeDS2Challenge';
-import { ThreeDS2Fingerprint } from '../3DS/ThreeDS2Fingerprint';
+import { MagentoPaymentTypes } from '../../adyen.types';
+import { ThreeDS2 } from '../3DS/ThreeDS2';
 
 /**
- * React warapper component for the Adyen Card component.
+ * React wrapper component for the Adyen Card component.
  *
  * Payment Process:
  * 1. Mount Card component
- * 2. User enters card details, then presseds submit button.
+ * 2. User enters card details, then presses submit button.
  * 3. Payment details are sent to Magento for processing.
  * 4. If the payment card supports 3DS2 (security check),
- *    the user is shown a verification popup.
+ *    the ThreeDS2 component handles the verification flow.
  *      - The verification result is passed back to Magento for processing.
  *
  * @link Adyen Card Component Documentation - https://docs.adyen.com/payment-methods/cards/web-component#show-the-available-cards-in-your-payment-form
  */
 export function Card() {
-    const { adyenCheckout, attemptPayment, paymentFormSubmitted, step } = useAdyen();
-
+    const { adyenCheckout, attemptPayment, paymentFormSubmitted, resetPaymentFormSubmitted } = useAdyen();
     const dispatch = useDispatch();
 
     /**
@@ -36,13 +34,15 @@ export function Card() {
      * Handle the errors.
      */
     const onError = useCallback(
-        ({ message }) =>
+        ({ message }) => {
             dispatch(
                 AdyenMessage(ActionTypes.Error, {
                     cancelPayment: true,
                     message,
                 }),
-            ),
+            );
+            dispatch(AdyenMessage(ActionTypes.Cancel));
+        },
         [dispatch],
     );
 
@@ -76,6 +76,12 @@ export function Card() {
         () => ({
             onError,
             onSubmit,
+            placeholders: {
+                cardNumber: '1234 5678 9012 3456',
+                expiryDate: 'MM/YY',
+                securityCodeThreeDigits: '3 digits',
+            },
+            showPayButton: false,
         }),
         [onError, onSubmit],
     );
@@ -85,10 +91,13 @@ export function Card() {
      *
      * @link Adyen Card Component Documentation - https://docs.adyen.com/payment-methods/cards/web-component#page-introduction
      */
-    const adyenCard = useMemo<CardElement>(() => {
-        const { Card } = (window as any).AdyenWeb;
+    const adyenCard = useMemo<CardElement | undefined>(() => {
+        if (!adyenCheckout) {
+            return undefined;
+        }
 
-        return new Card(adyenCheckout, adyenCardConfig).mount('#card') as CardElement;
+        const { Card } = (window as any).AdyenWeb;
+        return new Card(adyenCheckout, adyenCardConfig) as CardElement;
     }, [adyenCheckout, adyenCardConfig]);
 
     /**
@@ -98,7 +107,7 @@ export function Card() {
         if (adyenCheckout && adyenCard && cardContainer.current) {
             adyenCard.mount(cardContainer.current);
         }
-    }, [adyenCheckout, adyenCard, cardContainer]);
+    }, [adyenCheckout, adyenCard]);
 
     /**
      * When the payment form has been submitted,
@@ -108,14 +117,14 @@ export function Card() {
     useEffect(() => {
         if (adyenCard && paymentFormSubmitted) {
             adyenCard.submit();
+            resetPaymentFormSubmitted();
         }
-    }, [adyenCard, paymentFormSubmitted]);
+    }, [adyenCard, paymentFormSubmitted, resetPaymentFormSubmitted]);
 
     return (
         <>
-            <div ref={cardContainer}></div>
-            {step === AdyenSteps.ThreeDS2Challenge && <ThreeDS2Challenge />}
-            {step === AdyenSteps.ThreeDS2Fingerprint && <ThreeDS2Fingerprint />}
+            <div ref={cardContainer} />
+            <ThreeDS2 />
         </>
     );
 }

package/lib/paymentMethods/GooglePay/GooglePay.tsx

@@ -4,9 +4,8 @@ import { useDispatch } from 'react-redux';
 
 import { useAdyen } from '../../AdyenProvider';
 import { ActionTypes, AdyenMessage } from '../../adyen.actions';
-import { AdyenSteps, MagentoPaymentTypes } from '../../adyen.types';
-import { ThreeDS2Challenge } from '../3DS/ThreeDS2Challenge';
-import { ThreeDS2Fingerprint } from '../3DS/ThreeDS2Fingerprint';
+import { MagentoPaymentTypes } from '../../adyen.types';
+import { ThreeDS2 } from '../3DS/ThreeDS2';
 
 /**
  * React warapper component for the Adyen Google Pay component.
@@ -28,7 +27,7 @@ import { ThreeDS2Fingerprint } from '../3DS/ThreeDS2Fingerprint';
  */
 
 export function GooglePay() {
-    const { adyenCheckout, attemptPayment, waitForPaymentFormSubmit, step } = useAdyen();
+    const { adyenCheckout, attemptPayment, waitForPaymentFormSubmit } = useAdyen();
 
     /**
      * The HTML Div element reference the Adyen Apple Pay
@@ -105,7 +104,11 @@ export function GooglePay() {
      *
      * @link Adyen GooglePay Component Documentation: https://docs.adyen.com/payment-methods/google-pay/web-component
      */
-    const adyenGooglePay = useMemo<GooglePayElement>(() => {
+    const adyenGooglePay = useMemo<GooglePayElement | undefined>(() => {
+        if (!adyenCheckout) {
+            return undefined;
+        }
+
         const { GooglePay } = (window as any).AdyenWeb;
 
         return new GooglePay(adyenCheckout, adyenGooglePayConfig) as GooglePayElement;
@@ -129,7 +132,7 @@ export function GooglePay() {
 
     return (
         <>
-            <div ref={container}></div>
+            <div ref={container} />
             <button
                 aria-hidden={true}
                 ref={hiddenFormSubmitButton}
@@ -138,8 +141,7 @@ export function GooglePay() {
                 }}
                 type="submit"
             />
-            {step === AdyenSteps.ThreeDS2Challenge && <ThreeDS2Challenge />}
-            {step === AdyenSteps.ThreeDS2Fingerprint && <ThreeDS2Fingerprint />}
+            <ThreeDS2 />
         </>
     );
 }

package/lib/paymentMethods/Klarna/Klarna.tsx

@@ -79,7 +79,11 @@ export function Klarna() {
      *
      * @link Adyen Klarna Component Documentation: https://docs.adyen.com/payment-methods/klarna/web-component
      */
-    const adyenKlarna = useMemo<KlarnaElement>(() => {
+    const adyenKlarna = useMemo<KlarnaElement | undefined>(() => {
+        if (!adyenCheckout) {
+            return undefined;
+        }
+
         const { Klarna } = (window as any).AdyenWeb;
 
         return new Klarna(adyenCheckout, adyenKlarnaConfig) as KlarnaElement;
@@ -121,13 +125,7 @@ export function Klarna() {
      */
     useEffect(() => {
         if (action && adyenKlarna && step === AdyenSteps.KlarnaRedirect) {
-            // adyenKlarnaOverTime?.handleAction(action);
-            if (
-                action.sdkData &&
-                typeof action.sdkData === 'object' &&
-                'client_token' in action.sdkData &&
-                'payment_method_category' in action.sdkData
-            ) {
+            if (action.paymentMethodType === 'klarna') {
                 adyenKlarna.handleAction(action as any);
             } else {
                 console.error('Invalid Klarna action structure:', action);
@@ -137,7 +135,8 @@ export function Klarna() {
     }, [action, adyenKlarna, onError, step]);
 
     return (
-        <div ref={klarnaContainer}>
+        <>
+            <div ref={klarnaContainer} />
             <button
                 aria-hidden={true}
                 ref={hiddenFormSubmitButton}
@@ -146,6 +145,6 @@ export function Klarna() {
                 }}
                 type="submit"
             />
-        </div>
+        </>
     );
 }

package/lib/paymentMethods/Klarna/KlarnaOverTime.tsx

@@ -89,7 +89,11 @@ export function KlarnaOverTime() {
      *
      * @link Adyen Klarna Component Documentation: https://docs.adyen.com/payment-methods/klarna/web-component
      */
-    const adyenKlarnaOverTime = useMemo<KlarnaElement>(() => {
+    const adyenKlarnaOverTime = useMemo<KlarnaElement | undefined>(() => {
+        if (!adyenCheckout) {
+            return undefined;
+        }
+
         const { Klarna } = (window as any).AdyenWeb;
 
         return new Klarna(adyenCheckout, adyenKlarnaConfig) as KlarnaElement;
@@ -130,14 +134,8 @@ export function KlarnaOverTime() {
      * payment, before redirecting the user back to PWA.
      */
     useEffect(() => {
-        if (action && adyenKlarnaOverTime && step === AdyenSteps.KlarnaRedirect) {
-            // adyenKlarnaOverTime?.handleAction(action);
-            if (
-                action.sdkData &&
-                typeof action.sdkData === 'object' &&
-                'client_token' in action.sdkData &&
-                'payment_method_category' in action.sdkData
-            ) {
+        if (action && adyenKlarnaOverTime && step === AdyenSteps.KlarnaOverTimeRedirect) {
+            if (action.paymentMethodType === 'klarna_account') {
                 adyenKlarnaOverTime.handleAction(action as any);
             } else {
                 console.error('Invalid Klarna action structure:', action);
@@ -147,7 +145,8 @@ export function KlarnaOverTime() {
     }, [action, adyenKlarnaOverTime, onError, step]);
 
     return (
-        <div ref={klarnaContainer}>
+        <>
+            <div ref={klarnaContainer} />
             <button
                 aria-hidden={true}
                 ref={hiddenFormSubmitButton}
@@ -156,6 +155,6 @@ export function KlarnaOverTime() {
                 }}
                 type="submit"
             />
-        </div>
+        </>
     );
 }

package/lib/paymentMethods/Klarna/KlarnaPayNow.tsx

@@ -79,7 +79,11 @@ export function KlarnaPayNow() {
      *
      * @link Adyen Klarna Component Documentation: https://docs.adyen.com/payment-methods/klarna/web-component
      */
-    const adyenKlarnaPayNow = useMemo<KlarnaElement>(() => {
+    const adyenKlarnaPayNow = useMemo<KlarnaElement | undefined>(() => {
+        if (!adyenCheckout) {
+            return undefined;
+        }
+
         const { Klarna } = (window as any).AdyenWeb;
 
         return new Klarna(adyenCheckout, adyenKlarnaConfig) as KlarnaElement;
@@ -120,14 +124,8 @@ export function KlarnaPayNow() {
      * payment, before redirecting the user back to PWA.
      */
     useEffect(() => {
-        if (action && adyenKlarnaPayNow && step === AdyenSteps.KlarnaRedirect) {
-            // adyenKlarnaOverTime?.handleAction(action);
-            if (
-                action.sdkData &&
-                typeof action.sdkData === 'object' &&
-                'client_token' in action.sdkData &&
-                'payment_method_category' in action.sdkData
-            ) {
+        if (action && adyenKlarnaPayNow && step === AdyenSteps.KlarnaPayNowRedirect) {
+            if (action.paymentMethodType === 'klarna_paynow') {
                 adyenKlarnaPayNow.handleAction(action as any);
             } else {
                 console.error('Invalid Klarna action structure:', action);
@@ -137,7 +135,8 @@ export function KlarnaPayNow() {
     }, [action, adyenKlarnaPayNow, onError, step]);
 
     return (
-        <div ref={klarnaContainer}>
+        <>
+            <div ref={klarnaContainer} />
             <button
                 aria-hidden={true}
                 ref={hiddenFormSubmitButton}
@@ -146,6 +145,6 @@ export function KlarnaPayNow() {
                 }}
                 type="submit"
             />
-        </div>
+        </>
     );
 }

package/lib/paymentMethods/PayPal/PayPal.tsx

@@ -64,13 +64,15 @@ export function PayPal() {
      * Handle the errors.
      */
     const onError = useCallback(
-        ({ message }) =>
+        ({ message }) => {
             dispatch(
                 AdyenMessage(ActionTypes.Error, {
                     cancelPayment: true,
                     message,
                 }),
-            ),
+            );
+            dispatch(AdyenMessage(ActionTypes.Cancel));
+        },
         [dispatch],
     );
 
@@ -125,7 +127,11 @@ export function PayPal() {
      *
      * @link Adyen PayPal Component Documentation: https://docs.adyen.com/payment-methods/paypal/web-component
      */
-    const adyenPayPal = useMemo<PayPalElement>(() => {
+    const adyenPayPal = useMemo<PayPalElement | undefined>(() => {
+        if (!adyenCheckout) {
+            return undefined;
+        }
+
         const { PayPal } = (window as any).AdyenWeb;
 
         return new PayPal(adyenCheckout, adyenPayPalConfig) as PayPalElement;
@@ -168,7 +174,8 @@ export function PayPal() {
     }, [action, adyenPayPal, step]);
 
     return (
-        <div ref={payPalContainer}>
+        <>
+            <div ref={payPalContainer} />
             <button
                 aria-hidden={true}
                 ref={hiddenFormSubmitButton}
@@ -177,6 +184,6 @@ export function PayPal() {
                 }}
                 type="submit"
             />
-        </div>
+        </>
     );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wearejh/m2-pwa-adyen",
-    "version": "0.45.0",
+    "version": "0.50.0",
     "description": "> TODO: description",
     "author": "Shane Osbourne <shane.osbourne8@gmail.com>",
     "homepage": "",
@@ -22,13 +22,13 @@
     },
     "dependencies": {
         "@adyen/adyen-web": "6.27.1",
-        "@wearejh/m2-pwa-cart": "^0.45.0",
-        "@wearejh/m2-pwa-checkout": "^0.45.0",
-        "@wearejh/m2-pwa-engine": "^0.45.0",
-        "@wearejh/react-hooks": "^0.45.0",
-        "@wearejh/rx-form": "^0.45.0",
-        "@wearejh/swagger-rxjs": "^0.45.0",
+        "@wearejh/m2-pwa-cart": "^0.50.0",
+        "@wearejh/m2-pwa-checkout": "^0.50.0",
+        "@wearejh/m2-pwa-engine": "^0.50.0",
+        "@wearejh/react-hooks": "^0.50.0",
+        "@wearejh/rx-form": "^0.50.0",
+        "@wearejh/swagger-rxjs": "^0.50.0",
         "load-js": "^3.0.3"
     },
-    "gitHead": "f22c9f8583c85902860ec49590cae76752f8d227"
+    "gitHead": "d60d77034a7a62d49b970725d8e07c6d706f1f30"
 }

package/lib/paymentMethods/3DS/ThreeDS2Challenge.tsx

@@ -1,141 +0,0 @@
-import { SimpleModal } from '@wearejh/m2-pwa-checkout/lib/components/Modal/SimpleModal';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import type { ThreeDS2Challenge as ThreeDS2ChallengeElement, ThreeDS2ChallengeConfiguration } from '@adyen/adyen-web';
-
-import { useAdyen } from '../../AdyenProvider';
-import { ActionTypes, AdyenMessage } from '../../adyen.actions';
-
-/**
- * React warapper component for the Adyen
- * `threeDS2Challenge` component.
- */
-export function ThreeDS2Challenge() {
-    const [isModalReady, setIsModalReady] = useState(false);
-
-    const { action, adyenCheckout, paymentFormSubmitted } = useAdyen();
-
-    const dispatch = useDispatch();
-
-    /**
-     * The HTML Div element reference the adyen 3DS2 challenge
-     * component will be mounted on.
-     */
-    const challengeContainer = useRef<HTMLDivElement>(null);
-
-    const paymentData = action?.paymentData;
-    const token = action?.token;
-
-    /**
-     * Cancel 3DS2 Authentication
-     * (Not needed at the moment for the Adyen Bug)
-     */
-    // const dismiss = useCallback(() => dispatch(AdyenMessage(ActionTypes.Cancel)), [dispatch]);
-
-    /**
-     * The submit function which is called automatically
-     * when the user has completed the challenge.
-     */
-    const onComplete = useCallback(
-        (state) => {
-            dispatch(AdyenMessage(ActionTypes.ProcessPaymentDetails, state.data));
-        },
-        [dispatch],
-    );
-
-    /**
-     * Handle the errors.
-     */
-    const onError = useCallback(
-        ({ message }) =>
-            dispatch(
-                AdyenMessage(ActionTypes.Error, {
-                    cancelPayment: true,
-                    message,
-                }),
-            ),
-        [dispatch],
-    );
-
-    /**
-     * Adyen `threeDS2Challenge`` component configuration.
-     *
-     * Note: Some configuration options are inherited
-     * from the `adyenCheckout` instance, so are
-     * not necessary to redefine here.
-     */
-    const adyenChallengeConfig = useMemo<ThreeDS2ChallengeConfiguration | undefined>(() => {
-        if (paymentData && token) {
-            return {
-                onComplete,
-                onError,
-                paymentData,
-                token,
-
-                /**
-                 * `useOriginalFlow` indicates we're using the
-                 * threeDS2Challenge' component which is part
-                 * of the old Adyen 3DS2 flow.
-                 *
-                 * By default the challenge data will be created
-                 * in the way that the Adyen `/details` - in the
-                 * v67 API - endpoint expects.
-                 * `useOriginalFlow` adapts the challenge data to
-                 * be compatible with the v66 API, which is what
-                 * we need for Magento.
-                 */
-                useOriginalFlow: true,
-            };
-        }
-    }, [onComplete, onError, paymentData, token]);
-
-    /**
-     * The submit function which is called automatically
-     * when the user has completed the challenge.
-     */
-    const adyenChallenge = useMemo<ThreeDS2ChallengeElement>(() => {
-        const { ThreeDS2Challenge } = (window as any).AdyenWeb;
-
-        return new ThreeDS2Challenge(adyenCheckout, adyenChallengeConfig) as ThreeDS2ChallengeElement;
-    }, [adyenChallengeConfig, adyenCheckout]);
-
-    /**
-     * Wait for the modal 3DS2 form to be ready.
-     */
-    useEffect(() => {
-        const poll = setInterval(() => {
-            if (!isModalReady && challengeContainer.current) {
-                setIsModalReady(true);
-                clearInterval(poll);
-            }
-        }, 100);
-
-        return () => clearInterval(poll);
-    }, [isModalReady, setIsModalReady, challengeContainer]);
-
-    /**
-     * Mount the Adyen 3DS2 Challenge instance, when ready.
-     */
-    useEffect(() => {
-        if (adyenChallenge && adyenCheckout && challengeContainer.current && isModalReady) {
-            adyenChallenge.mount(challengeContainer.current);
-        }
-    }, [adyenChallenge, adyenCheckout, challengeContainer, isModalReady]);
-
-    /**
-     * When the payment form has been submitted,
-     * trigger the submit function of the
-     * Adyen card component.
-     */
-    useEffect(() => {
-        if (adyenChallenge && paymentFormSubmitted) {
-            adyenChallenge.submit();
-        }
-    }, [adyenChallenge, paymentFormSubmitted]);
-
-    return (
-        <SimpleModal dismiss={() => {}} title="3DS" hideModalFooter={true}>
-            <div ref={challengeContainer} />
-        </SimpleModal>
-    );
-}

package/lib/paymentMethods/3DS/ThreeDS2Fingerprint.tsx

@@ -1,101 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useDispatch } from 'react-redux';
-import type { ThreeDS2DeviceFingerprint, ThreeDS2DeviceFingerprintConfiguration } from '@adyen/adyen-web';
-
-import { useAdyen } from '../../AdyenProvider';
-import { AdyenSteps } from '../../adyen.types';
-import { ActionTypes, AdyenMessage } from '../../adyen.actions';
-
-/**
- * React warapper component for the Adyen
- * `threeDS2Fingerprint` component.
- */
-export function ThreeDS2Fingerprint() {
-    const { action, adyenCheckout, step } = useAdyen();
-
-    const dispatch = useDispatch();
-
-    /**
-     * The HTML Div element reference the adyen card
-     * component will be mounted on.
-     */
-    const fingerprintContainer = useRef<HTMLDivElement>(null);
-
-    const paymentData = action?.paymentData;
-    const token = action?.token;
-
-    /**
-     * The submit function which is called automatically
-     * when the component has generated a fingerprint.
-     */
-    const onComplete = useCallback(
-        (result) => {
-            dispatch(AdyenMessage(ActionTypes.ProcessPaymentDetails, result.data));
-        },
-        [dispatch],
-    );
-
-    const onError = useCallback(
-        (error) => {
-            if (error.errorCode !== 'timeout') {
-                dispatch(AdyenMessage(ActionTypes.ProcessPaymentDetails, error.message));
-            }
-        },
-        [dispatch],
-    );
-
-    /**
-     * Adyen `threeDS2DeviceFingerprint`` component configuration.
-     *
-     * Note: Some configuration options are inherited
-     * from the `adyenCheckout` instance, so are
-     * not necessary to redefine here.
-     */
-    const deviceFingerprintConfig = useMemo<ThreeDS2DeviceFingerprintConfiguration | undefined>(() => {
-        if (paymentData && token) {
-            return {
-                onComplete,
-                onError,
-                paymentData,
-                token,
-
-                /**
-                 * `useOriginalFlow` indicates we're using the
-                 * threeDS2Fingerprint' component which is part
-                 * of the old Adyen 3DS2 flow.
-                 *
-                 * By using the original flow, we'll be interacting
-                 * with different API endpoints compared to the
-                 * newer flow.
-                 */
-                useOriginalFlow: true,
-                showSpinner: true,
-            };
-        }
-    }, [onError, onComplete, paymentData, token]);
-
-    /**
-     * Adyen device fingerprint component instance.
-     */
-    const deviceFingerprint = useMemo<ThreeDS2DeviceFingerprint>(() => {
-        const { ThreeDS2DeviceFingerprint } = (window as any).AdyenWeb;
-
-        return new ThreeDS2DeviceFingerprint(adyenCheckout, deviceFingerprintConfig) as ThreeDS2DeviceFingerprint;
-    }, [adyenCheckout, deviceFingerprintConfig]);
-
-    /**
-     * Mount the Adyen device fingerprint instance, when ready.
-     */
-    useEffect(() => {
-        if (
-            adyenCheckout &&
-            deviceFingerprint &&
-            fingerprintContainer.current &&
-            step === AdyenSteps.ThreeDS2Fingerprint
-        ) {
-            deviceFingerprint.mount(fingerprintContainer.current);
-        }
-    }, [adyenCheckout, deviceFingerprint, fingerprintContainer, step]);
-
-    return <div ref={fingerprintContainer}></div>;
-}