Improve redirect action handling for embedded components

[kubeeek]

Describe the bug
During a card payment that triggers a 3DS challenge, when nativeThreeDS is set to disabled, it is possible to close the web view using the standard “X” button. This action does not trigger the onError callback.

This is problematic because we cannot call hide on the native component, and the user has to manually cancel the pending component:

It is also inconsistent with the iOS behavior, where the callback is triggered after browser has been closed.

To Reproduce
Steps to reproduce the behavior:

1. Do a payment with 3DS card and 3DS native disabled
2. Click on X to close the browser
3. See the awaiting component

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: Samsung S25
• OS: Android 16
• Adyen RN 2.11.1

[descorp]

Thank you for feedback @kubeeek

This is indeed a limitation on the SDK side for web-redirect 3DS. We will look into improving this in the next major version, but for now, we recommend using native 3DS.

There is a way to work around this by using standalone action handling on the Advanced flow:

• Once the /payments request is completed and you have the action, dismiss <CardView> and call AdyenAction.handle().

Unfortunately, there is no workaround for the Sessions flow.

[kubeeek]

Once the /payments request is completed and you have the action, dismiss and call AdyenAction.handle().

I see, and I can confirm this works. This is helpful, thank you for providing this workaround! However, in my initial list of reproduction steps, there is no possibility for the /payments request to happen if the user clicks the “X” close button without taking any other action. 😃 Looking forward to v3.

[descorp]

there is no possibility for the /payments request to happen if the user clicks the “X” close button without taking any other action

What I mean is to handle action via AdyenAction.handle() :

        const result = await ApiClient.payments(
          data,
          configuration,
          data.returnUrl
        );
        if (result.action) {
-          nativeComponent.handle(result.action);
+          // do UI modification to hide <CardView>
+          const actionData = await AdyenAction.handle(result.action, {
+             environment: ENVIRONMENT.environment,
+             clientKey: ENVIRONMENT.clientKey,
+          });
+          result = await ApiClient.paymentDetails(actionData);
        } else {
          processResult(result, nativeComponent);
        }

[kubeeek]

Okay, I see a mistake in my code 😅 Yep, that’s correct. Thank you!