Fixing issue with actions in onAdditionalDetails, in the core

packages/lib/src/components/Dropin/Dropin.tsx

@@ -167,7 +167,6 @@ class DropinElement extends UIElement<DropinConfiguration> implements IDropin {
         const paymentAction: UIElement = this.core.createFromAction(action, {
             ...props,
             elementRef: this.elementRef, // maintain elementRef for 3DS2 flow
-            onAdditionalDetails: this.handleAdditionalDetails,
             isDropin: true
         });
 

packages/lib/src/components/ThreeDS2/components/utils.ts

@@ -206,6 +206,7 @@ export const get3DS2FlowProps = (actionSubtype, props) => {
     // Challenge
     return {
         statusType: 'custom',
-        i18n: props.i18n
+        i18n: props.i18n,
+        elementRef: props.elementRef
     };
 };

packages/lib/src/components/internal/UIElement/UIElement.tsx

@@ -372,8 +372,7 @@ export abstract class UIElement<P extends UIElementProps = UIElementProps> exten
 
         const paymentAction = this.core.createFromAction(action, {
             ...this.elementRef.props,
-            ...props,
-            onAdditionalDetails: this.handleAdditionalDetails
+            ...props
         });
 
         if (paymentAction) {

packages/lib/src/core/ProcessResponse/PaymentAction/actionTypes.ts

@@ -20,7 +20,7 @@ const getActionHandler = statusType => {
         const config = {
             ...props,
             ...action,
-            onComplete: props.onAdditionalDetails,
+            onComplete: props.onComplete,
             onError: props.onError,
             statusType,
             originalAction: action
@@ -57,7 +57,7 @@ const actionTypes = {
             token: action.token,
             paymentData,
             onActionHandled: props.onActionHandled,
-            onComplete: props.isMDFlow ? props.onComplete : props.onAdditionalDetails,
+            onComplete: props.onComplete,
             onError: props.onError,
             isDropin: !!props.isDropin,
             loadingContext: props.loadingContext,

packages/lib/src/core/core.test.ts

@@ -163,6 +163,70 @@ describe('Core', () => {
             // @ts-ignore showSpinner should be undefined for threeDS2Challenge
             expect(actionComponent.props.showSpinner).not.toBeDefined();
         });
+
+        test('should call onAdditionalDetails with correct params when the action object calls onComplete', async () => {
+            const onAdditionalDetails = jest.fn().mockName('onAdditionalDetailsGlobal');
+            const checkout = new AdyenCheckout({
+                countryCode: 'US',
+                environment: 'test',
+                clientKey: 'test_123456',
+                onAdditionalDetails
+            });
+            await checkout.initialize();
+
+            AdyenCheckout.register(BCMCMobileElement);
+            const paymentAction = checkout.createFromAction({
+                paymentMethodType: 'bcmc_mobile_QR',
+                qrCodeData: 'BEP://1bcmc-test.adyen.com/pal/bep$ZTHYT3DHKVXYJ3GHBQNNCX4M',
+                type: 'qrCode',
+                paymentData: 'test'
+            });
+
+            // @ts-ignore onComplete is not public method, although we call it here to test the callback
+            paymentAction.onComplete({});
+            expect(onAdditionalDetails).toHaveBeenCalledWith(
+                {},
+                expect.any(BCMCMobileElement),
+                expect.objectContaining({
+                    resolve: expect.any(Function),
+                    reject: expect.any(Function)
+                })
+            );
+        });
+
+        test('should call submitDetails with correct params when the action object calls onComplete and no component is defined', async () => {
+            const onAdditionalDetails = jest.fn().mockName('onAdditionalDetailsGlobal');
+            const checkout = new AdyenCheckout({
+                countryCode: 'US',
+                environment: 'test',
+                clientKey: 'test_123456',
+                onAdditionalDetails
+            });
+            await checkout.initialize();
+
+            // Overwrite core.submitDetails
+            const submitDetails = jest.fn(() => {});
+            checkout.submitDetails = submitDetails;
+
+            AdyenCheckout.register(BCMCMobileElement);
+            const paymentAction = checkout.createFromAction({
+                paymentMethodType: 'bcmc_mobile_QR',
+                qrCodeData: 'BEP://1bcmc-test.adyen.com/pal/bep$ZTHYT3DHKVXYJ3GHBQNNCX4M',
+                type: 'qrCode',
+                paymentData: 'test'
+            });
+
+            // @ts-ignore onComplete is not public method - we need to overwrite UIElement.onComplete to test this edge-case scenario
+            paymentAction.onComplete = state => {
+                if (paymentAction.props.onComplete) paymentAction.props.onComplete(state, null);
+            };
+
+            // @ts-ignore onComplete is not public method, although we call it here to test the callback
+            paymentAction.onComplete({ data: { foo: 'bar' } });
+
+            // should be called with state.data
+            expect(submitDetails).toHaveBeenCalledWith({ foo: 'bar' });
+        });
     });
 
     describe('Props order', () => {
@@ -264,7 +328,15 @@ describe('Core', () => {
 
             // @ts-ignore onComplete is not public method, although we call it here to test the callback
             paymentAction.onComplete({});
-            expect(onAdditionalDetailsCreateFromAction).toHaveBeenCalledWith({}, expect.any(BCMCMobileElement));
+
+            expect(onAdditionalDetailsCreateFromAction).toHaveBeenCalledWith(
+                {},
+                expect.any(BCMCMobileElement),
+                expect.objectContaining({
+                    resolve: expect.any(Function),
+                    reject: expect.any(Function)
+                })
+            );
         });
     });
 

packages/lib/src/core/core.ts

@@ -269,7 +269,16 @@ class Core implements ICore {
 
             const props = {
                 ...this.getCorePropsForComponent(),
-                ...options
+                onComplete: (state: AdditionalDetailsData, component?: UIElement) => {
+                    if (component) {
+                        // We use a type assertion to call the protected 'handleAdditionalDetails' method from the UIElement.
+                        // This is safe because this is internal framework code.
+                        (component as unknown as { handleAdditionalDetails: (state: AdditionalDetailsData) => void }).handleAdditionalDetails(state);
+                    } else {
+                        this.submitDetails(state.data); // Fallback. Not sure if there are circumstances in which this will ever fire? But we have a unit test for it, just in case.
+                    }
+                },
+                ...options // allow for any passed options to overwrite the mapped onComplete fn, above e.g. in the MDFlow we want to use the original, passed, onComplete fn
             };
 
             return getComponentForAction(this, registry, action, props);

packages/playground/src/pages/ThreeDS/ThreeDS.html

@@ -13,13 +13,59 @@
             <form class="merchant-checkout__form" method="post">
                 <div class="merchant-checkout__payment-method">
                     <div class="merchant-checkout__payment-method__header">
+                        <div style="display:flex;justify-content:space-between;">
                         <h2>ThreeDS2</h2>
+                        <span style="margin-top:-3px;font-size:0.9em">
+                            <label for="useCreateFromAction">Handle 3DS2 using <i>createFromAction</i></label>
+                            <input type="checkbox" id="useCreateFromAction" name="useCreateFromAction" value="compat">
+                        </span>
+                        </div>
                     </div>
                     <div class="merchant-checkout__payment-method__details">
-                        <div class="threeds-field"></div>
+                        <div class="card-field"></div>
                     </div>
                 </div>
             </form>
+            <div class="merchant-checkout__form">
+                <div class="threeds-field"></div>
+            </div>
+            <div class="info">
+                <h2>3DS2:</h2>
+                <table style="margin-bottom: 0">
+                    <caption>
+                        3DS2 test cards
+                    </caption>
+                    <thead>
+                    <tr>
+                        <th scope="col">3DS2 Action</th>
+                        <th scope="col">Card Number</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>Frictionless flow (mc)</td>
+                        <td>5201281505129736</td>
+                    </tr>
+                    <tr>
+                        <td>Challenge-only flow (visa)</td>
+                        <td>4212345678910006</td>
+                    </tr>
+                    <tr>
+                        <td>Full flow (maestro)</td>
+                        <td>5000550000000029</td>
+                    </tr>
+                    </tbody>
+                </table>
+                <p>
+                    <a
+                            href="https://docs.adyen.com/development-resources/testing/3d-secure-2-authentication/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                    >
+                        More information →
+                    </a>
+                </p>
+                </div>
         </main>
 
         <script type="text/javascript">