diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.tsx index e64fd6f5d..1782df1e0 100644 --- a/packages/lib/src/components/Klarna/KlarnaPayments.tsx +++ b/packages/lib/src/components/Klarna/KlarnaPayments.tsx @@ -52,8 +52,8 @@ class KlarnaPayments extends UIElement { } 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() { @@ -61,9 +61,7 @@ class KlarnaPayments extends UIElement { { - 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 index 19cdd0408..ee3694dba 100644 --- 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({ sdkData: props.sdkData, paymentMethodType: props.paymentMethodType, paymentData: props.paymentData }); const [status, setStatus] = useState('ready'); - this.setAction = setAction; - this.setStatus = setStatus; + const klarnaContainerRef = useRef({}); + // 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 ( { setStatus('loading'); try { diff --git a/packages/lib/src/components/Klarna/types.ts b/packages/lib/src/components/Klarna/types.ts index dbbf8155d..1c113cdcd 100644 --- 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; +}