Providing a method to close the payment UI from outside AdyenCheckout

[RyanLinXiang]

Describe the bug
When I finish a PayPal / Klarna / ... payment and get redirected back to the app, in case I want to do a checkout again, the drop in does not open and Xcode reports the following:

Attempt to present <Adyen.DropInNavigationController: 0x109ae9c00> on <RNSScreen: 0x10912cc00> (from <RNSScreen: 0x10912cc00>) whose view is not in the window hierarchy.

This happened in version 2.0.0-rc1 when I updated from version 1, including react-native-screens, updating from 3.18.2 to 3.27.0

Only a app restart (kill the app and restart) helps.

Any ideas?

[descorp]

Hey @RyanLinXiang

Are you calling nativeComponent.hide(xxx) when finished?

We always attempting to present using topViewController of keyWindow.

The only way currentPresenter could be out of window hierarchy is when root ViewController was changed (aka "deep navigation happened") but currentPresenter was not cleaned prior to this.

[RyanLinXiang]

Hey @descorp

I debugged this by myself - and you are right! But there is no way of us closing the drop-in. Because if you do it directly after nativeComponent.handle, no redirection will take place to the payment provider as the drop-in will be immediately close the redirect window. When Adyen redirects back to the app, we currently just use a work around by navigating to a screen navigator (see #205). As pointed out in #205 our BE does not append a redirectResult param in the returnUrl so that when redirecting back, onAdditionalDetails callback is NOT called where it is supposed to close the drop-in. Unfortunately there is no way to close the drop-in from outside the AdyenCheckout component.

So our newest workaround is just to append a redirectResult=no as query param so that onAdditionalDetails is triggered.

Please, is it possible to fix the redirect flow by

• either providing a method to close the drop-in from outside AdyenCheckout or
• by awaiting nativeComponent.handle and then close the drop-in with nativeComponent.hide or
• by nativeComponent.handle automatically closing the drop-in or
• by calling onAdditionalDetails even when there is no redirectResult
  ?

I mean in Android this has not been an issue - so why not having the same behaviour here for iOS?

[descorp]

Hey @RyanLinXiang

So our newest workaround is just to append a redirectResult=no as query param so that onAdditionalDetails is triggered.

This sounds like a right moment to call nativeComponent.hide(isSuccess). I expect this to resolve your issue.

Unfortunately there is no way to close the drop-in from outside the AdyenCheckout component.

This may be something we address in the future. As a quick fix you can create a local native module that look for DropInNavigationController in viewController hierarchy and dismisses it 🤔

our BE does not append a redirectResult param in the returnUrl

Out of curiosity: why do you need to run a redirect back via your BE?

[RyanLinXiang]

Since I am not a native iOS developer, I don't know what to do with writing native module for DropInNavigationController 😃

Regarding the returnUrl I mean PayPal/Klarna/... redirects back based on the returnUrl we pass to our BE

[descorp]

So our newest workaround is just to append a redirectResult=no as query param so that onAdditionalDetails is triggered.

Can you try calling nativeComponent.hide(isSuccess) when onAdditionalDetails triggered ?

[descorp]

@RyanLinXiang any luck?

[RyanLinXiang]

@descorp I appended redirectResult=no to the returnUrl and to trigger onAdditionalDetails. And then yes, nativeComponent.hide(isSuccessful) is the way to go.

[descorp]

Thanks @RyanLinXiang

Is this an adequate workaround for you?
We will look into providing a method to close the payment UI from outside AdyenCheckout in future versions.

[RyanLinXiang]

@descorp thanks for asking. So far the workaround is sufficient, yes. But the improvement you suggested would be awesome to have 😎