KlarnaPayments component tells KlarnaWidget to re-initialise the Klar…

…naSDK widget if it is re-shown
Adyen · Nov 28, 2024 · f7fd597 · f7fd597
1 parent cd3c4d8
commit f7fd597
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.tsx
@@ -52,18 +52,16 @@ class KlarnaPayments extends UIElement<KlarnConfiguration> {
     }
 
     protected onPaymentMethodActive() {
-        // TODO do something to reinit the PM
-        console.log('\n### KlarnaPayments::onPaymentMethodActive:: do something to reinit the PM');
+        // Reinit the KlarnaSDK widget
+        this.componentRef.initWidget();
     }
 
     render() {
         return (
             <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>
                 <KlarnaContainer
                     {...this.props}
-                    ref={ref => {
-                        this.componentRef = ref;
-                    }}
+                    setComponentRef={this.setComponentRef}
                     displayName={this.displayName}
                     onComplete={state => this.handleAdditionalDetails(state)}
                     onError={this.props.onError}

diff --git a/packages/lib/src/components/Klarna/components/KlarnaContainer/KlarnaContainer.tsx b/packages/lib/src/components/Klarna/components/KlarnaContainer/KlarnaContainer.tsx
@@ -1,21 +1,29 @@
 import { h } from 'preact';
 import { KlarnaWidget } from '../KlarnaWidget/KlarnaWidget';
-import { useState } from 'preact/hooks';
+import { useState, useRef } from 'preact/hooks';
+import { KlarnaAction, KlarnaContainerRef } from '../../types';
 
 export function KlarnaContainer(props) {
-    const [action, setAction] = useState({
+    const [action, setAction] = useState<KlarnaAction>({
         sdkData: props.sdkData,
         paymentMethodType: props.paymentMethodType,
         paymentData: props.paymentData
     });
     const [status, setStatus] = useState('ready');
 
-    this.setAction = setAction;
-    this.setStatus = setStatus;
+    const klarnaContainerRef = useRef<KlarnaContainerRef>({});
+    // Just call once to create the object by which we expose the members expected by the parent comp
+    if (!Object.keys(klarnaContainerRef.current).length) {
+        props.setComponentRef(klarnaContainerRef.current);
+    }
+
+    klarnaContainerRef.current.setAction = setAction;
+    klarnaContainerRef.current.setStatus = setStatus;
 
     if (action.sdkData) {
         return (
             <KlarnaWidget
+                containerRef={klarnaContainerRef.current}
                 sdkData={action.sdkData}
                 paymentMethodType={action.paymentMethodType}
                 paymentData={action.paymentData}
@@ -36,7 +44,7 @@ export function KlarnaContainer(props) {
             status,
             disabled: status === 'loading',
             classNameModifiers: ['standalone'],
-            label: `${this.props.i18n.get('continueTo')} ${props.displayName}`
+            label: `${props.i18n.get('continueTo')} ${props.displayName}`
         });
     }
 

diff --git a/packages/lib/src/components/Klarna/components/KlarnaWidget/KlarnaWidget.tsx b/packages/lib/src/components/Klarna/components/KlarnaWidget/KlarnaWidget.tsx
@@ -1,7 +1,7 @@
 import Script from '../../../../utils/Script';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { h } from 'preact';
-import { KlarnaWidgetAuthorizeResponse, KlarnaWidgetProps } from '../../types';
+import { KlarnaContainerRef, KlarnaWidgetAuthorizeResponse, KlarnaWidgetProps } from '../../types';
 import { KLARNA_WIDGET_URL } from '../../constants';
 import './KlarnaWidget.scss';
 
@@ -44,6 +44,8 @@ export function KlarnaWidget({ sdkData, paymentMethodType, payButton, ...props }
         );
     };
 
+    (props.containerRef as KlarnaContainerRef).initWidget = initializeKlarnaWidget;
+
     const authorizeKlarna = () => {
         setStatus('loading');
         try {

diff --git a/packages/lib/src/components/Klarna/types.ts b/packages/lib/src/components/Klarna/types.ts
@@ -1,4 +1,4 @@
-import { UIElementProps } from '../internal/UIElement/types';
+import { ComponentMethodsRef, UIElementProps } from '../internal/UIElement/types';
 
 declare global {
     interface Window {
@@ -37,6 +37,7 @@ export interface KlarnaWidgetProps extends KlarnaPaymentsShared {
 
     onComplete: (detailsData) => void;
     onError: (error) => void;
+    containerRef: any;
 }
 
 export type KlarnConfiguration = UIElementProps &
@@ -50,3 +51,17 @@ export interface KlarnaWidgetAuthorizeResponse {
     authorization_token: string;
     error?: any;
 }
+
+export interface KlarnaAction {
+    sdkData: {
+        client_token: string;
+        payment_method_category: string;
+    };
+    paymentMethodType: string;
+    paymentData: string;
+}
+
+export interface KlarnaContainerRef extends ComponentMethodsRef {
+    initWidget?: () => void;
+    setAction?(action: KlarnaAction): void;
+}