@wearejh/m2-pwa-adyen 0.39.0 → 0.45.0

package/CHANGELOG.md

@@ -3,6 +3,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+
+
+
+
+# [0.44.0](https://github.com/WeareJH/mage-mono/compare/v0.39.1...v0.44.0) (2026-01-08)
+
+
+### Bug Fixes
+
+* only use node 12 and regenerate lockfiles ([61356b5](https://github.com/WeareJH/mage-mono/commit/61356b514f6dfc99814f7c108115c4c24bcc0a57))
+
+
+### Features
+
+* **WOOD-3014:** Adyen upgrade ([e22eca3](https://github.com/WeareJH/mage-mono/commit/e22eca391e293d0241e031e3769e5a27078af99e))
+
+
+
+
+
+# [0.43.0](https://github.com/WeareJH/mage-mono/compare/v0.39.1...v0.43.0) (2026-01-08)
+
+
+### Bug Fixes
+
+* only use node 12 and regenerate lockfiles ([61356b5](https://github.com/WeareJH/mage-mono/commit/61356b514f6dfc99814f7c108115c4c24bcc0a57))
+
+
+### Features
+
+* **WOOD-3014:** Adyen upgrade ([e22eca3](https://github.com/WeareJH/mage-mono/commit/e22eca391e293d0241e031e3769e5a27078af99e))
+
+
+
+
+
+# [0.42.0](https://github.com/WeareJH/mage-mono/compare/v0.39.1...v0.42.0) (2026-01-08)
+
+
+### Bug Fixes
+
+* only use node 12 and regenerate lockfiles ([61356b5](https://github.com/WeareJH/mage-mono/commit/61356b514f6dfc99814f7c108115c4c24bcc0a57))
+
+
+### Features
+
+* **WOOD-3014:** Adyen upgrade ([e22eca3](https://github.com/WeareJH/mage-mono/commit/e22eca391e293d0241e031e3769e5a27078af99e))
+
+
+
+
+
+# [0.41.0](https://github.com/WeareJH/mage-mono/compare/v0.39.1...v0.41.0) (2026-01-08)
+
+
+### Bug Fixes
+
+* only use node 12 and regenerate lockfiles ([61356b5](https://github.com/WeareJH/mage-mono/commit/61356b514f6dfc99814f7c108115c4c24bcc0a57))
+
+
+### Features
+
+* **WOOD-3014:** Adyen upgrade ([e22eca3](https://github.com/WeareJH/mage-mono/commit/e22eca391e293d0241e031e3769e5a27078af99e))
+
+
+
+
+
+# [0.40.0](https://github.com/WeareJH/mage-mono/compare/v0.39.1...v0.40.0) (2026-01-08)
+
+
+### Bug Fixes
+
+* only use node 12 and regenerate lockfiles ([61356b5](https://github.com/WeareJH/mage-mono/commit/61356b514f6dfc99814f7c108115c4c24bcc0a57))
+
+
+### Features
+
+* **WOOD-3014:** Adyen upgrade ([e22eca3](https://github.com/WeareJH/mage-mono/commit/e22eca391e293d0241e031e3769e5a27078af99e))
+
+
+
+
+
+## [0.39.1](https://github.com/WeareJH/mage-mono/compare/v0.39.0...v0.39.1) (2025-11-12)
+
+**Note:** Version bump only for package @wearejh/m2-pwa-adyen
+
+
+
+
+
 # [0.39.0](https://github.com/WeareJH/mage-mono/compare/v0.38.0...v0.39.0) (2025-11-07)
 
 **Note:** Version bump only for package @wearejh/m2-pwa-adyen

package/lib/AdyenProvider.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { AppendState as CheckoutState } from '@wearejh/m2-pwa-checkout/lib/checkout.actions';
+import { Core, CoreConfiguration } from '@adyen/adyen-web';
 
 import { ActionTypes, AdyenMessage } from './adyen.actions';
 import { initialState as initialStoreState } from './adyen.reducer';
@@ -134,7 +135,7 @@ export function AdyenProvider(props: AdyenProviderProps) {
     const currency = checkoutTotalsState?.base_currency_code ?? 'GBP';
     const price = checkoutTotalsState?.grand_total ?? 0;
 
-    const adyenCheckoutConfig = useMemo(
+    const adyenCheckoutConfig = useMemo<CoreConfiguration>(
         () => ({
             ...checkoutConfig,
             amount: {
@@ -174,39 +175,38 @@ export function AdyenProvider(props: AdyenProviderProps) {
         [checkoutConfig, currency, price],
     );
 
-    /**
-     * The Adyen NPM package needs to fetched
-     * client-side only, as it doesn't work
-     * with server-side rendering.
-     *
-     * @link https://github.com/Adyen/adyen-web/issues/902
-     */
-    // const AdyenCheckout = useMemo(() => {
-    //     const AdyenCheckout = new (window as any).AdyenCheckout;
-    //     return AdyenCheckout;
-    // }, []);
-
     /**
      * `AdyenCheckout` singleton instance.
+     * In v6, AdyenCheckout() is async and accessed via window.AdyenWeb
      *
-     * @link https://docs.adyen.com/online-payments/components-web/#step-2-add-components
+     * @link https://docs.adyen.com/online-payments/upgrade-your-integration/upgrade-to-web-v6/from-v4?tab=component-step1_2
      */
-    const adyenCheckout: AdyenCheckout | undefined = useMemo(() => {
-        // const hasSettings = Object.keys(checkoutConfig).length > 0;
+    const [adyenCheckout, setAdyenCheckout] = useState<AdyenCheckout | undefined>(undefined);
 
-        const AdyenCheckout = (window as any).AdyenCheckout;
+    useEffect(() => {
+        const initAdyenCheckout = async () => {
+            const AdyenCheckout = (window as any).AdyenWeb?.AdyenCheckout as
+                | ((props: CoreConfiguration) => Promise<Core>)
+                | undefined;
 
-        if (!AdyenCheckout) {
-            return null;
-        }
+            if (!AdyenCheckout) {
+                return;
+            }
+
+            dispatch(AdyenMessage(ActionTypes.SetStep, AdyenSteps.CreatingAdyenCheckoutInstance));
 
-        dispatch(AdyenMessage(ActionTypes.SetStep, AdyenSteps.CreatingAdyenCheckoutInstance));
+            try {
+                const checkout = await AdyenCheckout(adyenCheckoutConfig);
 
-        const adyenCheckout = new AdyenCheckout(adyenCheckoutConfig);
+                dispatch(AdyenMessage(ActionTypes.SetStep, AdyenSteps.Ready));
 
-        dispatch(AdyenMessage(ActionTypes.SetStep, AdyenSteps.Ready));
+                setAdyenCheckout(checkout);
+            } catch (error) {
+                console.error('Failed to initialize Adyen Checkout:', error);
+            }
+        };
 
-        return adyenCheckout;
+        initAdyenCheckout();
     }, [adyenCheckoutConfig, dispatch]);
 
     const paymentFormSubmit = useCallback(() => {
@@ -233,36 +233,42 @@ export function AdyenProvider(props: AdyenProviderProps) {
 
     const [availiablePaymentMethods, setAvailiablePaymentMethods] = useState<any[]>([]);
 
-    const getAvailiablePaymentMethods = useCallback(
-        async () =>
-            Promise.all(
-                supportedPaymentMethods.map(async (paymentMethod) => {
-                    switch (paymentMethod.type) {
-                        case PaymentMethodTypes.ApplePay:
-                            try {
-                                await adyenCheckout?.create('applepay').isAvailable();
-
-                                return paymentMethod;
-                            } catch {}
-                            break;
+    const getAvailiablePaymentMethods = useCallback(async () => {
+        if (!adyenCheckout) {
+            return [];
+        }
 
-                        case PaymentMethodTypes.GooglePay:
-                            try {
-                                await adyenCheckout?.create('paywithgoogle').isAvailable();
+        const { ApplePay, GooglePay } = (window as any).AdyenWeb;
 
+        return Promise.all(
+            supportedPaymentMethods.map(async (paymentMethod) => {
+                switch (paymentMethod.type) {
+                    case PaymentMethodTypes.ApplePay:
+                        try {
+                            if (ApplePay) {
+                                await new ApplePay(adyenCheckout).isAvailable();
+                                return paymentMethod;
+                            }
+                        } catch {}
+                        break;
+
+                    case PaymentMethodTypes.GooglePay:
+                        try {
+                            if (GooglePay) {
+                                await new GooglePay(adyenCheckout).isAvailable();
                                 return paymentMethod;
-                            } catch {}
-                            break;
+                            }
+                        } catch {}
+                        break;
 
-                        default:
-                            return paymentMethod;
-                    }
+                    default:
+                        return paymentMethod;
+                }
 
-                    return undefined;
-                }),
-            ),
-        [adyenCheckout, supportedPaymentMethods],
-    );
+                return undefined;
+            }),
+        );
+    }, [adyenCheckout, supportedPaymentMethods]);
 
     useEffect(() => {
         getAvailiablePaymentMethods()
@@ -355,11 +361,3 @@ export function useAdyen() {
 // ======
 // Hook End
 // ======
-
-// ======
-// Utils Start
-// ======
-
-// ======
-// Utils End
-// ======

package/lib/PaymentMethodHandler.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { GiftCardTypes, PaymentMethodTypes } from './adyen.types';
 import { ApplePay } from './paymentMethods/ApplePay/ApplePay';
 import { Card } from './paymentMethods/Card/Card';
-import { GooglePayMethod } from './paymentMethods/GooglePay/GooglePay';
+import { GooglePay } from './paymentMethods/GooglePay/GooglePay';
 import { Klarna } from './paymentMethods/Klarna/Klarna';
 import { KlarnaOverTime } from './paymentMethods/Klarna/KlarnaOverTime';
 import { KlarnaPayNow } from './paymentMethods/Klarna/KlarnaPayNow';
@@ -38,7 +38,7 @@ export function PaymentMethodHandler(props: PaymentMethodHandlerProps) {
                 return <Card />;
 
             case PaymentMethodTypes.GooglePay:
-                return <GooglePayMethod />;
+                return <GooglePay />;
 
             case PaymentMethodTypes.Klarna:
                 return <Klarna />;

package/lib/adyen.types.ts

@@ -1,7 +1,5 @@
-import Core from '@adyen/adyen-web/dist/types/core';
-import type { PaymentMethodsResponse } from '@adyen/adyen-web/dist/types/core/ProcessResponse/PaymentMethodsResponse/types';
-import type { CoreOptions } from '@adyen/adyen-web/dist/types/core/types';
-import type { PaymentAction, PaymentMethod } from '@adyen/adyen-web/dist/types/types';
+import { Core, CoreConfiguration } from '@adyen/adyen-web';
+import type { PaymentAction, PaymentMethodsResponse, RawPaymentMethod } from '@adyen/adyen-web';
 import { DataStatus, Message } from '@wearejh/m2-pwa-engine/lib/types';
 
 /**
@@ -30,7 +28,7 @@ export type AdyenCheckout = Core;
 /**
  * Options used to configure the `AdyenCheckout`
  */
-export type AdyenCheckoutConfig = CoreOptions;
+export type AdyenCheckoutConfig = CoreConfiguration;
 
 /**
  * The internal Adyen error action.
@@ -327,7 +325,7 @@ export interface Store {
      */
     selectedPaymentMethod: PaymentMethodTypes;
 
-    supportedPaymentMethods: PaymentMethod[];
+    supportedPaymentMethods: RawPaymentMethod[];
 
     status: DataStatus;
 
@@ -353,6 +351,6 @@ export interface MagentoAdyenPaymentMethodsQueryResponse {
     paymentMethodsResponse: MagentoAdyenPaymentMethodsResponseObject;
 }
 
-export type AdyenPaymentMethod = PaymentMethod & {
+export type AdyenPaymentMethod = RawPaymentMethod & {
     brand?: GiftCardTypes | string;
 };

package/lib/docs/ADYEN_DOCS.md

@@ -0,0 +1,107 @@
+# Adyen Docs
+
+## AdyenProvider
+
+A React context provider that initializes and manages the Adyen checkout instance, payment methods, and payment flow state.
+
+### Key Features
+* Adyen Checkout Initialization: Creates singleton AdyenCheckout instance with configuration from Redux store
+* Dynamic Pricing: Automatically converts checkout totals to minor units (e.g., £42.99 → 4299)
+* Payment Method Availability: Filters supported payment methods based on browser/device compatibility (Apple Pay, Google Pay)
+* Auto-reset on Error: Resets form submission state when payment is cancelled or encounters an error
+* Client-side Only: Adyen Web SDK loaded client-side to avoid SSR issues
+
+### Context Values
+Provides access to:
+
+* adyenCheckout - Adyen checkout instance
+* attemptPayment() - Submit payment with method-specific data
+* checkoutConfig - Adyen configuration with currency and amount
+* orderId - Current order ID
+* step - Current payment flow step (Ready, Error, Cancelled, etc.)
+* supportedPaymentMethods - Filtered list of available payment methods
+* paymentFormSubmit() / paymentFormSubmitted - Form submission state
+* waitForPaymentFormSubmit() - Async form submission handler
+
+### State Management
+* Connects to Redux for Adyen state (action, checkoutConfig, orderId, etc.)
+* Connects to Redux for checkout totals (base_currency_code, grand_total)
+* Dispatches step changes during initialization
+
+### useAdyen
+Custom hook to access the Adyen context.
+
+---
+
+## PaymentMethodHandler
+
+A wrapper component that determines which Adyen payment method component should be rendered.
+
+### Behavior
+* Uses a switch statement to map payment method types to their corresponding components:
+* ApplePay → <ApplePay />
+* Card → <Card />
+* GooglePay → <GooglePay />
+* Klarna variants → <Klarna />, <KlarnaOverTime />, <KlarnaPayNow />
+* PayPal → <PayPal />
+* Giftcard → <Giftcard brand={brand} /> (requires brand prop)
+
+Returns null for unsupported or missing payment methods.
+
+---
+
+## Reducer, Actions, and Register
+These three files form the Redux architecture for managing Adyen payment state in the application.
+
+### adyen.reducer.ts
+Defines how the Adyen Redux store state changes in response to actions.
+
+### adyen.actions.ts
+Defines all possible actions that can be dispatched to modify Adyen state.
+
+### adyen.register.ts
+Registers the Adyen module with the Redux store.
+
+---
+
+## Epics
+
+The `epics` directory contains Redux-Observable middleware that handles asynchronous side effects for the Adyen payment flow.
+
+### Purpose
+Epics listen for specific Redux actions and perform async operations (API calls, redirects, etc.) before dispatching new actions to update the state.
+
+### Key Responsibilities
+- **API Communication**: Handles all interactions with Magento and Adyen APIs
+- **Payment Processing**: Manages the complete payment lifecycle from initialization to completion
+- **Error Handling**: Catches and dispatches errors during async operations
+- **State Transitions**: Orchestrates step changes during payment flows (3DS2, redirects, etc.)
+
+### Registered Epics
+- `adyenPayment` - Processes final payment results
+- `attemptPayment` - Initiates payment attempts with Magento
+- `getAdyenConfig` - Fetches Adyen configuration and supported methods
+- `getRedirectData` - Handles redirect return flows
+- `paymentDetails` - Submits additional payment details (3DS2, redirect results)
+- `onCancel` / `onError` - Manages payment cancellation and error states
+
+These epics work together to handle the complex async flows required for different Adyen payment methods while keeping components focused on rendering UI.
+
+---
+
+## AdyenRedirect
+A React component that handles the redirect flow when users return to the application after completing payment with redirect-based methods (e.g., iDEAL, Klarna, PayPal).
+
+### Payment Flow
+* Initialize (AdyenSteps.Init): Component mounts and dispatches GetRedirectData action with the redirect result
+* Process (AdyenSteps.ProcessRedirect): Once order ID is restored from session, dispatches ProcessPaymentDetails action with redirect parameters
+* The getRedirectData and paymentDetails epics handle the actual API communication with Adyen
+
+### Key Features
+* Two-stage processing: Waits for order restoration before processing payment details
+* State-driven: Uses step from useAdyen to control flow progression
+* Automatic: Executes on mount without user interaction
+* Empty render: Displays nothing (parent handles loading states)
+
+### Use Case
+This component is rendered on the redirect return URL (e.g., /checkout/adyen/return) after users complete payment in a third-party interface and are redirected back to your application.

package/lib/docs/ADYEN_OVERVIEW.md

@@ -0,0 +1,138 @@
+```mermaid
+---
+config:
+  theme: redux
+---
+sequenceDiagram
+    participant User
+    participant PaymentMethodHandler
+    participant PaymentComponent as Payment Component<br/>(e.g., ApplePay, Card, PayPal)
+    participant AdyenProvider
+    participant AdyenCheckout as Adyen Web SDK
+    participant Redux
+    participant Epic as Redux Epic
+    participant MagentoAPI as Magento API
+    participant AdyenAPI as Adyen API
+
+    Note over User,AdyenAPI: 1. INITIALIZATION PHASE
+    
+    User->>PaymentMethodHandler: Navigate to checkout
+    PaymentMethodHandler->>Redux: Dispatch GetAdyenConfig
+    Redux->>Epic: getAdyenConfig epic triggered
+    Epic->>MagentoAPI: Fetch Adyen configuration
+    MagentoAPI-->>Epic: Return config + supported methods
+    Epic->>Redux: Store config & methods
+    
+    Redux->>AdyenProvider: Subscribe to state changes
+    AdyenProvider->>AdyenProvider: Create AdyenCheckout instance
+    AdyenProvider->>Redux: Dispatch SetStep(CreatingAdyenCheckoutInstance)
+    AdyenProvider->>AdyenCheckout: new AdyenCheckout(config)
+    AdyenCheckout-->>AdyenProvider: Return checkout instance
+    AdyenProvider->>Redux: Dispatch SetStep(Ready)
+    
+    AdyenProvider->>AdyenProvider: Filter payment methods<br/>(check Apple Pay/Google Pay availability)
+    AdyenProvider->>PaymentMethodHandler: Provide supportedPaymentMethods
+    
+    PaymentMethodHandler->>PaymentComponent: Render available methods
+    PaymentComponent->>AdyenCheckout: create('applepay'|'card'|etc.)
+    AdyenCheckout-->>PaymentComponent: Return component instance
+    PaymentComponent->>PaymentComponent: Mount payment UI
+    PaymentComponent-->>User: Display payment button/form
+
+    Note over User,AdyenAPI: 2. PAYMENT ATTEMPT PHASE
+
+    User->>PaymentComponent: Click Pay button
+    PaymentComponent->>PaymentComponent: Validate input
+    
+    alt Apple Pay / Google Pay (Redirect Flow)
+        PaymentComponent->>AdyenCheckout: Show Apple Pay sheet
+        User->>AdyenCheckout: Authorize payment
+        AdyenCheckout-->>PaymentComponent: onAuthorized(data)
+        PaymentComponent->>AdyenProvider: paymentFormSubmit()
+        AdyenProvider->>Redux: Trigger parent form submit
+        PaymentComponent->>AdyenProvider: waitForPaymentFormSubmit()
+        AdyenProvider-->>PaymentComponent: Promise resolves
+        PaymentComponent->>AdyenProvider: attemptPayment({state, magentoPaymentType})
+    else Card / Standard Flow
+        PaymentComponent->>PaymentComponent: onSubmit handler
+        PaymentComponent->>AdyenProvider: attemptPayment({state, magentoPaymentType})
+    end
+
+    Note over User,AdyenAPI: 3. ORDER CREATION PHASE
+
+    AdyenProvider->>Redux: Dispatch AttemptPayment action
+    Redux->>Epic: attemptPayment epic triggered
+    Epic->>MagentoAPI: POST /checkout/payment<br/>(create order with payment data)
+    MagentoAPI->>MagentoAPI: Create order
+    MagentoAPI->>AdyenAPI: Submit payment to Adyen
+    AdyenAPI-->>MagentoAPI: Return payment response
+    MagentoAPI-->>Epic: Return { action, orderId, resultCode }
+    Epic->>Redux: Store orderId & action
+
+    Note over User,AdyenAPI: 4. PAYMENT PROCESSING PHASE
+
+    alt 3DS2 Authentication Required
+        Epic->>Redux: Dispatch SetStep(ThreeDS2)
+        Redux->>AdyenProvider: step = ThreeDS2
+        AdyenProvider->>PaymentComponent: Re-render with action
+        PaymentComponent->>AdyenCheckout: createFromAction(action)
+        AdyenCheckout-->>User: Display 3DS2 challenge
+        User->>AdyenCheckout: Complete authentication
+        AdyenCheckout->>PaymentComponent: onAdditionalDetails(data)
+        PaymentComponent->>Redux: Dispatch ProcessPaymentDetails
+        Redux->>Epic: paymentDetails epic triggered
+        Epic->>MagentoAPI: POST /payment-details<br/>(submit 3DS2 result)
+        MagentoAPI->>AdyenAPI: Submit details to Adyen
+        AdyenAPI-->>MagentoAPI: Return final result
+        MagentoAPI-->>Epic: Return resultCode
+        Epic->>Redux: Dispatch AdyenPayment(response)
+    
+    else Redirect Payment (Klarna, iDEAL, PayPal)
+        Epic->>Redux: Dispatch SetStep(Redirect)
+        Redux->>User: Redirect to Adyen/Partner URL
+        User->>AdyenAPI: Complete payment externally
+        AdyenAPI-->>User: Redirect back with redirectResult
+        User->>PaymentMethodHandler: Return to /checkout/adyen/return
+        PaymentMethodHandler->>PaymentComponent: Render AdyenRedirect
+        PaymentComponent->>Redux: Dispatch GetRedirectData(redirectResult)
+        Redux->>Epic: getRedirectData epic triggered
+        Epic->>MagentoAPI: Restore order session
+        MagentoAPI-->>Epic: Return orderId
+        Epic->>Redux: Store orderId
+        Redux->>AdyenProvider: step = ProcessRedirect
+        AdyenProvider->>PaymentComponent: Re-render
+        PaymentComponent->>Redux: Dispatch ProcessPaymentDetails
+        Epic->>MagentoAPI: POST /payment-details<br/>(submit redirect result)
+        MagentoAPI->>AdyenAPI: Verify payment
+        AdyenAPI-->>MagentoAPI: Return final result
+        MagentoAPI-->>Epic: Return resultCode
+        Epic->>Redux: Dispatch AdyenPayment(response)
+    
+    else Instant Payment (No additional steps)
+        Epic->>Redux: Dispatch AdyenPayment(response)
+    end
+
+    Note over User,AdyenAPI: 5. FINALIZATION PHASE
+
+    Redux->>Epic: adyenPayment epic triggered
+    Epic->>Epic: Process resultCode
+    
+    alt Payment Authorized
+        Epic->>Redux: Dispatch SetStep(Success)
+        Redux->>User: Redirect to success page
+    else Payment Refused/Error
+        Epic->>Redux: Dispatch SetStep(Error)
+        Epic->>Redux: Store error message
+        Redux->>AdyenProvider: step = Error
+        AdyenProvider->>AdyenProvider: setHasFormSubmitted(false)
+        AdyenProvider->>PaymentComponent: Re-render
+        PaymentComponent-->>User: Display error message
+        PaymentComponent-->>User: Allow retry
+    else Payment Cancelled
+        Epic->>Redux: Dispatch SetStep(Cancelled)
+        Redux->>AdyenProvider: step = Cancelled
+        AdyenProvider->>AdyenProvider: setHasFormSubmitted(false)
+        AdyenProvider->>PaymentComponent: Re-render
+        PaymentComponent-->>User: Allow retry
+    end                                                
+```

package/lib/epics/getAdyenConfig.epic.ts

@@ -32,7 +32,7 @@ const adyenWebComponentsApiUrl = 'https://checkoutshopper-live.adyen.com/checkou
  *
  * @url https://github.com/Adyen/adyen-web
  */
-const adyenWebComponentsVersion = '4.5.0';
+const adyenWebComponentsVersion = '6.27.1';
 
 const CSS_FILE = `${adyenWebComponentsApiUrl}/${adyenWebComponentsVersion}/adyen.css`;
 const JS_FILE = `${adyenWebComponentsApiUrl}/${adyenWebComponentsVersion}/adyen.js`;
@@ -199,6 +199,7 @@ export function getAdyenConfig(action$: Observable<any>, state$: Observable<any>
                         }
 
                         const configuration: AdyenCheckoutConfig = {
+                            countryCode: shippingAddress?.country_code || 'IE',
                             clientKey,
                             environment,
                             paymentMethodsResponse,

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

@@ -1,6 +1,7 @@
 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';
@@ -63,7 +64,7 @@ export function ThreeDS2Challenge() {
      * from the `adyenCheckout` instance, so are
      * not necessary to redefine here.
      */
-    const adyenChallengeConfig = useMemo(() => {
+    const adyenChallengeConfig = useMemo<ThreeDS2ChallengeConfiguration | undefined>(() => {
         if (paymentData && token) {
             return {
                 onComplete,
@@ -92,12 +93,10 @@ export function ThreeDS2Challenge() {
      * The submit function which is called automatically
      * when the user has completed the challenge.
      */
-    const adyenChallenge = useMemo(() => {
-        if (adyenCheckout && adyenChallengeConfig) {
-            return adyenCheckout.create('threeDS2Challenge', adyenChallengeConfig);
-        }
+    const adyenChallenge = useMemo<ThreeDS2ChallengeElement>(() => {
+        const { ThreeDS2Challenge } = (window as any).AdyenWeb;
 
-        return null;
+        return new ThreeDS2Challenge(adyenCheckout, adyenChallengeConfig) as ThreeDS2ChallengeElement;
     }, [adyenChallengeConfig, adyenCheckout]);
 
     /**

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
-import type ThreeDS2DeviceFingerprint from '@adyen/adyen-web/dist/types/components/ThreeDS2/ThreeDS2DeviceFingerprint';
+import type { ThreeDS2DeviceFingerprint, ThreeDS2DeviceFingerprintConfiguration } from '@adyen/adyen-web';
 
 import { useAdyen } from '../../AdyenProvider';
 import { AdyenSteps } from '../../adyen.types';
@@ -51,7 +51,7 @@ export function ThreeDS2Fingerprint() {
      * from the `adyenCheckout` instance, so are
      * not necessary to redefine here.
      */
-    const deviceFingerprintConfig = useMemo(() => {
+    const deviceFingerprintConfig = useMemo<ThreeDS2DeviceFingerprintConfiguration | undefined>(() => {
         if (paymentData && token) {
             return {
                 onComplete,
@@ -69,6 +69,7 @@ export function ThreeDS2Fingerprint() {
                  * newer flow.
                  */
                 useOriginalFlow: true,
+                showSpinner: true,
             };
         }
     }, [onError, onComplete, paymentData, token]);
@@ -76,28 +77,10 @@ export function ThreeDS2Fingerprint() {
     /**
      * Adyen device fingerprint component instance.
      */
-    const deviceFingerprint = useMemo(() => {
-        if (adyenCheckout && deviceFingerprintConfig) {
-            /**
-             * The `adyenCheckout` instance needs to be cast
-             * as `any`, because the Adyen NPM package types
-             * don't accept `onComplete` as a prop, which is
-             * in consistent with the API.
-             */
-            const adyenCheckoutInstance = adyenCheckout as any;
+    const deviceFingerprint = useMemo<ThreeDS2DeviceFingerprint>(() => {
+        const { ThreeDS2DeviceFingerprint } = (window as any).AdyenWeb;
 
-            const adyen3DSFingerprint = adyenCheckoutInstance.create(
-                'threeDS2DeviceFingerprint',
-                deviceFingerprintConfig,
-            );
-
-            /**
-             * Recast the device fingerprint component as
-             * `ThreeDS2DeviceFingerprint`, so that
-             * its typed.
-             */
-            return adyen3DSFingerprint as ThreeDS2DeviceFingerprint;
-        }
+        return new ThreeDS2DeviceFingerprint(adyenCheckout, deviceFingerprintConfig) as ThreeDS2DeviceFingerprint;
     }, [adyenCheckout, deviceFingerprintConfig]);
 
     /**

package/lib/paymentMethods/ApplePay/ApplePay.tsx

@@ -1,5 +1,4 @@
-import type ApplePayElement from '@adyen/adyen-web/dist/types/components/ApplePay/ApplePay';
-import type { ApplePayElementProps } from '@adyen/adyen-web/dist/types/components/ApplePay/types';
+import type { ApplePay as ApplePayElement, ApplePayConfiguration } from '@adyen/adyen-web';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -90,7 +89,7 @@ export function ApplePay() {
      *
      * The Partial type sets all properties to optional.
      */
-    const config: Partial<ApplePayElementProps> = useMemo(
+    const adyenApplePayConfig = useMemo<ApplePayConfiguration>(
         () => ({
             buttonColor: 'black',
             buttonType: 'buy',
@@ -105,22 +104,11 @@ export function ApplePay() {
      *
      * @link Adyen ApplePay Component Documentation: https://docs.adyen.com/payment-methods/apple-pay/web-component
      */
-    const adyenApplePay = useMemo(() => {
-        /**
-         * The `adyenCheckout` instance needs to be cast
-         * as `any`, because the Apple Pay props require
-         * properties which will be automatically inherited
-         * from the Adyen checkout instance.
-         */
-        const adyenCheckoutInstance = adyenCheckout as any;
+    const adyenApplePay = useMemo<ApplePayElement>(() => {
+        const { ApplePay } = (window as any).AdyenWeb;
 
-        const adyenApplePay = adyenCheckoutInstance?.create('applepay', config);
-
-        /**
-         * Recast the component so that it's typed.
-         */
-        return adyenApplePay as ApplePayElement;
-    }, [adyenCheckout, config]);
+        return new ApplePay(adyenCheckout, adyenApplePayConfig) as ApplePayElement;
+    }, [adyenCheckout, adyenApplePayConfig]);
 
     /**
      * Mount the Adyen ApplePay instance, when ready and availiable.

package/lib/paymentMethods/Card/Card.tsx

@@ -1,4 +1,4 @@
-import type { CardElementProps } from '@adyen/adyen-web/dist/types/components/Card/types';
+import type { CardConfiguration, Card as CardElement } from '@adyen/adyen-web';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -72,7 +72,7 @@ export function Card() {
      *
      * @link Adyen Card Component Documentation - https://docs.adyen.com/payment-methods/cards/web-component#page-introduction
      */
-    const adyenCardConfig: CardElementProps = useMemo(
+    const adyenCardConfig: CardConfiguration = useMemo(
         () => ({
             onError,
             onSubmit,
@@ -85,7 +85,11 @@ export function Card() {
      *
      * @link Adyen Card Component Documentation - https://docs.adyen.com/payment-methods/cards/web-component#page-introduction
      */
-    const adyenCard = useMemo(() => adyenCheckout?.create('card', adyenCardConfig), [adyenCheckout, adyenCardConfig]);
+    const adyenCard = useMemo<CardElement>(() => {
+        const { Card } = (window as any).AdyenWeb;
+
+        return new Card(adyenCheckout, adyenCardConfig).mount('#card') as CardElement;
+    }, [adyenCheckout, adyenCardConfig]);
 
     /**
      * Mount the Adyen card instance, when ready.

package/lib/paymentMethods/Giftcard/Giftcard.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
+import type { Redirect as RedirectElement, RedirectConfiguration } from '@adyen/adyen-web';
 
 import { useAdyen } from '../../AdyenProvider';
 import { AdyenBrandCodes, AdyenSteps, GiftCardTypes, MagentoPaymentTypes } from '../../adyen.types';
@@ -71,6 +72,15 @@ export function Giftcard(props: GiftCardProps) {
         }
     }, [attemptPayment, paymentFormSubmitted, props.brand]);
 
+    const redirectConfig = useMemo<RedirectConfiguration | undefined>(() => {
+        if (action?.url) {
+            return {
+                type: 'redirect',
+                url: action.url,
+            };
+        }
+    }, [action?.url]);
+
     /**
      * Pass Magento's submit reponse to an Adyen Redirect component.
      *
@@ -80,14 +90,16 @@ export function Giftcard(props: GiftCardProps) {
      */
     useEffect(() => {
         if (action?.url && adyenCheckout && step === AdyenSteps.GiftCardRedirect && redirectContainer.current) {
-            const redirect = adyenCheckout?.create('redirect');
+            const { Redirect } = (window as any).AdyenWeb;
+
+            const redirect: RedirectElement = new Redirect(adyenCheckout, redirectConfig);
 
             if (redirect) {
                 redirect.mount(redirectContainer.current);
                 redirect?.handleAction(action);
             }
         }
-    }, [action, adyenCheckout, step]);
+    }, [action, adyenCheckout, redirectConfig, step]);
 
     /**
      * Return our component

package/lib/paymentMethods/GooglePay/GooglePay.tsx

@@ -1,5 +1,4 @@
-import type GooglePay from '@adyen/adyen-web/dist/types/components/GooglePay/GooglePay';
-import type { GooglePayProps } from '@adyen/adyen-web/dist/types/components/GooglePay/types';
+import type { GooglePay as GooglePayElement, GooglePayConfiguration } from '@adyen/adyen-web';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -28,7 +27,7 @@ import { ThreeDS2Fingerprint } from '../3DS/ThreeDS2Fingerprint';
  * @link https://docs.adyen.com/payment-methods/google-pay/web-component
  */
 
-export function GooglePayMethod() {
+export function GooglePay() {
     const { adyenCheckout, attemptPayment, waitForPaymentFormSubmit, step } = useAdyen();
 
     /**
@@ -93,7 +92,7 @@ export function GooglePayMethod() {
      *
      * The Partial type sets all properties to optional.
      */
-    const config: Partial<GooglePayProps> = useMemo(
+    const adyenGooglePayConfig: Partial<GooglePayConfiguration> = useMemo(
         () => ({
             onSubmit,
             buttonSizeMode: 'fill',
@@ -106,22 +105,11 @@ export function GooglePayMethod() {
      *
      * @link Adyen GooglePay Component Documentation: https://docs.adyen.com/payment-methods/google-pay/web-component
      */
-    const adyenGooglePay = useMemo(() => {
-        /**
-         * The `adyenCheckout` instance needs to be cast
-         * as `any`, because the Apple Pay props require
-         * properties which will be automatically inherited
-         * from the Adyen checkout instance.
-         */
-        const adyenCheckoutInstance = adyenCheckout as any;
+    const adyenGooglePay = useMemo<GooglePayElement>(() => {
+        const { GooglePay } = (window as any).AdyenWeb;
 
-        const adyenGooglePay = adyenCheckoutInstance?.create('paywithgoogle', config);
-
-        /**
-         * Recast the component so that it's typed.
-         */
-        return adyenGooglePay as GooglePay;
-    }, [adyenCheckout, config]);
+        return new GooglePay(adyenCheckout, adyenGooglePayConfig) as GooglePayElement;
+    }, [adyenCheckout, adyenGooglePayConfig]);
 
     /**
      * Mount the Adyen GooglePay instance, when ready and availiable.

package/lib/paymentMethods/Klarna/Klarna.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import type { Klarna as KlarnaElement, KlarnaConfiguration } from '@adyen/adyen-web';
 
 import { useAdyen } from '../../AdyenProvider';
 import { AdyenBrandCodes, AdyenSteps, MagentoPaymentTypes } from '../../adyen.types';
@@ -64,8 +65,9 @@ export function Klarna() {
      * from the `adyenCheckout` instance, so are
      * not necessary to redefine here.
      */
-    const adyenKlarnaConfig = useMemo(
+    const adyenKlarnaConfig = useMemo<KlarnaConfiguration>(
         () => ({
+            type: 'klarna',
             onError,
             onSubmit,
         }),
@@ -77,10 +79,11 @@ export function Klarna() {
      *
      * @link Adyen Klarna Component Documentation: https://docs.adyen.com/payment-methods/klarna/web-component
      */
-    const adyenKlarna = useMemo(() => adyenCheckout?.create('klarna', adyenKlarnaConfig), [
-        adyenCheckout,
-        adyenKlarnaConfig,
-    ]);
+    const adyenKlarna = useMemo<KlarnaElement>(() => {
+        const { Klarna } = (window as any).AdyenWeb;
+
+        return new Klarna(adyenCheckout, adyenKlarnaConfig) as KlarnaElement;
+    }, [adyenCheckout, adyenKlarnaConfig]);
 
     /**
      * Mount the Adyen Klarna instance, when ready.
@@ -118,9 +121,20 @@ export function Klarna() {
      */
     useEffect(() => {
         if (action && adyenKlarna && step === AdyenSteps.KlarnaRedirect) {
-            adyenKlarna?.handleAction(action);
+            // adyenKlarnaOverTime?.handleAction(action);
+            if (
+                action.sdkData &&
+                typeof action.sdkData === 'object' &&
+                'client_token' in action.sdkData &&
+                'payment_method_category' in action.sdkData
+            ) {
+                adyenKlarna.handleAction(action as any);
+            } else {
+                console.error('Invalid Klarna action structure:', action);
+                onError({ message: 'Invalid Klarna payment action received' });
+            }
         }
-    }, [action, adyenKlarna, step]);
+    }, [action, adyenKlarna, onError, step]);
 
     return (
         <div ref={klarnaContainer}>

package/lib/paymentMethods/Klarna/KlarnaOverTime.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import type { Klarna as KlarnaElement, KlarnaConfiguration } from '@adyen/adyen-web';
 
 import { useAdyen } from '../../AdyenProvider';
 import { AdyenBrandCodes, AdyenSteps, MagentoPaymentTypes } from '../../adyen.types';
@@ -74,8 +75,9 @@ export function KlarnaOverTime() {
      * from the `adyenCheckout` instance, so are
      * not necessary to redefine here.
      */
-    const adyenKlarnaConfig = useMemo(
+    const adyenKlarnaConfig = useMemo<KlarnaConfiguration>(
         () => ({
+            type: 'klarna_account',
             onError,
             onSubmit,
         }),
@@ -87,19 +89,20 @@ export function KlarnaOverTime() {
      *
      * @link Adyen Klarna Component Documentation: https://docs.adyen.com/payment-methods/klarna/web-component
      */
-    const adyenKlarna = useMemo(() => adyenCheckout?.create('klarna_account', adyenKlarnaConfig), [
-        adyenCheckout,
-        adyenKlarnaConfig,
-    ]);
+    const adyenKlarnaOverTime = useMemo<KlarnaElement>(() => {
+        const { Klarna } = (window as any).AdyenWeb;
+
+        return new Klarna(adyenCheckout, adyenKlarnaConfig) as KlarnaElement;
+    }, [adyenCheckout, adyenKlarnaConfig]);
 
     /**
      * Mount the Adyen Klarna instance, when ready.
      */
     useEffect(() => {
-        if (adyenCheckout && adyenKlarna && klarnaContainer.current) {
-            adyenKlarna.mount(klarnaContainer.current);
+        if (adyenCheckout && adyenKlarnaOverTime && klarnaContainer.current) {
+            adyenKlarnaOverTime.mount(klarnaContainer.current);
         }
-    }, [adyenCheckout, adyenKlarna, klarnaContainer]);
+    }, [adyenCheckout, adyenKlarnaOverTime, klarnaContainer]);
 
     /**
      * When the payment form has been submitted,
@@ -127,10 +130,21 @@ export function KlarnaOverTime() {
      * payment, before redirecting the user back to PWA.
      */
     useEffect(() => {
-        if (action && adyenKlarna && step === AdyenSteps.KlarnaRedirect) {
-            adyenKlarna?.handleAction(action);
+        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
+            ) {
+                adyenKlarnaOverTime.handleAction(action as any);
+            } else {
+                console.error('Invalid Klarna action structure:', action);
+                onError({ message: 'Invalid Klarna payment action received' });
+            }
         }
-    }, [action, adyenKlarna, step]);
+    }, [action, adyenKlarnaOverTime, onError, step]);
 
     return (
         <div ref={klarnaContainer}>

package/lib/paymentMethods/Klarna/KlarnaPayNow.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import type { Klarna as KlarnaElement, KlarnaConfiguration } from '@adyen/adyen-web';
 
 import { useAdyen } from '../../AdyenProvider';
 import { AdyenBrandCodes, AdyenSteps, MagentoPaymentTypes } from '../../adyen.types';
@@ -64,8 +65,9 @@ export function KlarnaPayNow() {
      * from the `adyenCheckout` instance, so are
      * not necessary to redefine here.
      */
-    const adyenKlarnaConfig = useMemo(
+    const adyenKlarnaConfig = useMemo<KlarnaConfiguration>(
         () => ({
+            type: 'klarna_paynow',
             onError,
             onSubmit,
         }),
@@ -77,19 +79,20 @@ export function KlarnaPayNow() {
      *
      * @link Adyen Klarna Component Documentation: https://docs.adyen.com/payment-methods/klarna/web-component
      */
-    const adyenKlarna = useMemo(() => adyenCheckout?.create('klarna_paynow', adyenKlarnaConfig), [
-        adyenCheckout,
-        adyenKlarnaConfig,
-    ]);
+    const adyenKlarnaPayNow = useMemo<KlarnaElement>(() => {
+        const { Klarna } = (window as any).AdyenWeb;
+
+        return new Klarna(adyenCheckout, adyenKlarnaConfig) as KlarnaElement;
+    }, [adyenCheckout, adyenKlarnaConfig]);
 
     /**
      * Mount the Adyen Klarna instance, when ready.
      */
     useEffect(() => {
-        if (adyenCheckout && adyenKlarna && klarnaContainer.current) {
-            adyenKlarna.mount(klarnaContainer.current);
+        if (adyenCheckout && adyenKlarnaPayNow && klarnaContainer.current) {
+            adyenKlarnaPayNow.mount(klarnaContainer.current);
         }
-    }, [adyenCheckout, adyenKlarna, klarnaContainer]);
+    }, [adyenCheckout, adyenKlarnaPayNow, klarnaContainer]);
 
     /**
      * When the payment form has been submitted,
@@ -117,10 +120,21 @@ export function KlarnaPayNow() {
      * payment, before redirecting the user back to PWA.
      */
     useEffect(() => {
-        if (action && adyenKlarna && step === AdyenSteps.KlarnaRedirect) {
-            adyenKlarna?.handleAction(action);
+        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
+            ) {
+                adyenKlarnaPayNow.handleAction(action as any);
+            } else {
+                console.error('Invalid Klarna action structure:', action);
+                onError({ message: 'Invalid Klarna payment action received' });
+            }
         }
-    }, [action, adyenKlarna, step]);
+    }, [action, adyenKlarnaPayNow, onError, step]);
 
     return (
         <div ref={klarnaContainer}>

package/lib/paymentMethods/PayPal/PayPal.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import type { PayPal as PayPalElement, PayPalConfiguration } from '@adyen/adyen-web';
 
 import { useAdyen } from '../../AdyenProvider';
 import { AdyenSteps, MagentoPaymentTypes } from '../../adyen.types';
@@ -98,7 +99,7 @@ export function PayPal() {
      * from the `adyenCheckout` instance, so are
      * not necessary to redefine here.
      */
-    const adyenPayPalConfig = useMemo(
+    const adyenPayPalConfig = useMemo<PayPalConfiguration>(
         () => ({
             onAdditionalDetails,
             onCancel,
@@ -124,10 +125,11 @@ export function PayPal() {
      *
      * @link Adyen PayPal Component Documentation: https://docs.adyen.com/payment-methods/paypal/web-component
      */
-    const adyenPayPal = useMemo(() => adyenCheckout?.create('paypal', adyenPayPalConfig), [
-        adyenCheckout,
-        adyenPayPalConfig,
-    ]);
+    const adyenPayPal = useMemo<PayPalElement>(() => {
+        const { PayPal } = (window as any).AdyenWeb;
+
+        return new PayPal(adyenCheckout, adyenPayPalConfig) as PayPalElement;
+    }, [adyenCheckout, adyenPayPalConfig]);
 
     /**
      * Mount the Adyen PayPal instance, when ready.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wearejh/m2-pwa-adyen",
-    "version": "0.39.0",
+    "version": "0.45.0",
     "description": "> TODO: description",
     "author": "Shane Osbourne <shane.osbourne8@gmail.com>",
     "homepage": "",
@@ -21,14 +21,14 @@
         "@reach/dialog": "0.8.2"
     },
     "dependencies": {
-        "@adyen/adyen-web": "5.59.0",
-        "@wearejh/m2-pwa-cart": "^0.39.0",
-        "@wearejh/m2-pwa-checkout": "^0.39.0",
-        "@wearejh/m2-pwa-engine": "^0.39.0",
-        "@wearejh/react-hooks": "^0.39.0",
-        "@wearejh/rx-form": "^0.39.0",
-        "@wearejh/swagger-rxjs": "^0.39.0",
+        "@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",
         "load-js": "^3.0.3"
     },
-    "gitHead": "5ddc698e301ec2ca5df42fc298bf2ba57497f95d"
+    "gitHead": "f22c9f8583c85902860ec49590cae76752f8d227"
 }