diff --git a/.changeset/wet-forks-invite.md b/.changeset/wet-forks-invite.md new file mode 100644 index 0000000000..247b814435 --- /dev/null +++ b/.changeset/wet-forks-invite.md @@ -0,0 +1,5 @@ +--- +'@adyen/adyen-web': patch +--- + +Klarna - Fixed issue where PayLater/PayOverTime payments were not authorized accordingly depending on how the shopper interacted with the Drop-in/Component diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx index f568af284e..d0e48b672a 100644 --- a/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx +++ b/packages/lib/src/components/Klarna/KlarnaPayments.test.tsx @@ -22,40 +22,35 @@ describe('KlarnaPayments', () => { expect(screen.queryByRole('button', { name: 'Continue to Pay By Bank' })).toBeFalsy(); }); - test.skip('should call setStatus if elementRef is a drop-in', async () => { - const KlarnaPaymentsEle = new KlarnaPayments(global.core, { - ...coreProps, - ...{ paymentData: '', paymentMethodType: '', sdkData: undefined, useKlarnaWidget: false, showPayButton: false } + test('should call setStatus if elementRef is a drop-in', async () => { + const klarna = new KlarnaPayments(global.core, { + ...coreProps }); - KlarnaPaymentsEle.elementRef = new Dropin(global.core); - render(KlarnaPaymentsEle.render()); - const spy = jest.spyOn(KlarnaPaymentsEle.elementRef, 'setStatus'); - // @ts-ignore to test - await waitFor(() => KlarnaPaymentsEle.componentRef); + klarna.elementRef = new Dropin(global.core); + render(klarna.render()); + + const spy = jest.spyOn(klarna.elementRef, 'setStatus'); + await waitFor(() => klarna.componentRef); + // @ts-ignore to test - KlarnaPaymentsEle.componentRef.props.onLoaded(); + klarna.onLoaded(); + expect(spy).toHaveBeenCalled(); }); - test.skip('should call handleAdditionalDetails onComplete', async () => { + test('should call handleAdditionalDetails onComplete', async () => { const onAdditionalDetailsMock = jest.fn(() => {}); - - const KlarnaPaymentsEle = new KlarnaPayments(global.core, { + const klarna = new KlarnaPayments(global.core, { ...coreProps, - ...{ - paymentData: '', - paymentMethodType: '', - sdkData: undefined, - useKlarnaWidget: false, - showPayButton: false, - onAdditionalDetails: onAdditionalDetailsMock - } + onAdditionalDetails: onAdditionalDetailsMock }); - render(KlarnaPaymentsEle.render()); - // @ts-ignore to test - await waitFor(() => KlarnaPaymentsEle.componentRef); + + render(klarna.render()); + await waitFor(() => klarna.componentRef); + // @ts-ignore to test - KlarnaPaymentsEle.componentRef.props.onComplete(); + klarna.onComplete(); + expect(onAdditionalDetailsMock).toHaveBeenCalled(); }); }); diff --git a/packages/lib/src/components/Klarna/KlarnaPayments.tsx b/packages/lib/src/components/Klarna/KlarnaPayments.tsx index 6204da7491..653903c6ab 100644 --- a/packages/lib/src/components/Klarna/KlarnaPayments.tsx +++ b/packages/lib/src/components/Klarna/KlarnaPayments.tsx @@ -4,7 +4,7 @@ import { CoreProvider } from '../../core/Context/CoreProvider'; import PayButton from '../internal/PayButton'; import { KlarnaContainer } from './components/KlarnaContainer/KlarnaContainer'; import { TxVariants } from '../tx-variants'; -import type { KlarnaAction, KlarnaComponentRef, KlarnaConfiguration } from './types'; +import type { KlarnaAction, KlarnaAdditionalDetailsData, KlarnaComponentRef, KlarnaConfiguration } from './types'; import type { ICore } from '../../core/types'; class KlarnaPayments extends UIElement { @@ -47,7 +47,7 @@ class KlarnaPayments extends UIElement { this.componentRef.setAction(action); } - onLoaded() { + private onLoaded() { // When action/widget is loaded, set the 'drop-in' back to ready this.setElementStatus('ready'); } @@ -56,6 +56,10 @@ class KlarnaPayments extends UIElement { this.componentRef.reinitializeWidget(); } + protected onComplete(details: KlarnaAdditionalDetailsData): void { + this.handleAdditionalDetails(details); + } + render() { return ( @@ -63,7 +67,7 @@ class KlarnaPayments extends UIElement { {...this.props} setComponentRef={this.setComponentRef} displayName={this.displayName} - onComplete={state => this.handleAdditionalDetails(state)} + onComplete={this.onComplete} onError={this.props.onError} payButton={this.payButton} onLoaded={this.onLoaded} diff --git a/packages/lib/src/components/Klarna/components/KlarnaContainer/KlarnaContainer.tsx b/packages/lib/src/components/Klarna/components/KlarnaContainer/KlarnaContainer.tsx index 3b4e973b34..33d5a9d629 100644 --- a/packages/lib/src/components/Klarna/components/KlarnaContainer/KlarnaContainer.tsx +++ b/packages/lib/src/components/Klarna/components/KlarnaContainer/KlarnaContainer.tsx @@ -3,14 +3,14 @@ import { useEffect, useRef, useState } from 'preact/hooks'; import { KlarnaWidget } from '../KlarnaWidget/KlarnaWidget'; import type { ComponentMethodsRef, PayButtonFunctionProps, UIElementStatus } from '../../../internal/UIElement/types'; import type { ActionHandledReturnObject } from '../../../../types/global-types'; -import type { AdyenCheckoutError, KlarnaAction, KlarnaComponentRef } from '../../../../types'; +import type { AdyenCheckoutError, KlarnaAction, KlarnaAdditionalDetailsData, KlarnaComponentRef } from '../../../../types'; interface KlarnaContainerProps { setComponentRef: (ref: ComponentMethodsRef) => void; displayName: string; showPayButton: boolean; type: string; - onComplete(state: any): void; + onComplete(state: KlarnaAdditionalDetailsData): void; onError(error: AdyenCheckoutError): void; payButton(props?: PayButtonFunctionProps): h.JSX.Element; onLoaded(): void; diff --git a/packages/lib/src/components/Klarna/types.ts b/packages/lib/src/components/Klarna/types.ts index eb86579e0a..95e8fee351 100644 --- a/packages/lib/src/components/Klarna/types.ts +++ b/packages/lib/src/components/Klarna/types.ts @@ -1,5 +1,6 @@ import { type ComponentMethodsRef, UIElementProps } from '../internal/UIElement/types'; import { PaymentAction } from '../../types/global-types'; +import { AdditionalDetailsData } from '../../core/types'; declare global { interface Window { @@ -38,7 +39,7 @@ export interface KlarnaWidgetProps extends KlarnaPaymentsShared { widgetInitializationTime: number; - onComplete: (detailsData) => void; + onComplete: (detailsData: KlarnaAdditionalDetailsData) => void; onError: (error) => void; } @@ -65,3 +66,12 @@ export interface KlarnaAction extends PaymentAction { payment_method_category: string; }; } + +export interface KlarnaAdditionalDetailsData extends AdditionalDetailsData { + data: { + paymentData: string; + details: { + authorization_token?: string; + }; + }; +} diff --git a/packages/lib/storybook/stories/dropin/Dropin.stories.tsx b/packages/lib/storybook/stories/dropin/Dropin.stories.tsx index 3b583aab3e..213c0d24e1 100644 --- a/packages/lib/storybook/stories/dropin/Dropin.stories.tsx +++ b/packages/lib/storybook/stories/dropin/Dropin.stories.tsx @@ -46,23 +46,7 @@ export const Auto: DropinStory = { return ( - {checkout => ( - - )} + {checkout => } ); }