[Feature] Method to hide the drop-in component / "pay twice" issue while `payment/details`

mortend commented 2 years ago

We need a method to hide the drop-in component (DropInComponent).

Sometimes when opening an external app from the drop-in component and performing payment, the response from our middleware is very slow (implemented in didSubmit) and the drop-in component is still visible and usable while waiting for this response.

The problem is that it is currently possible to start a new payment while in this state and this might confuse the user and cause problems with the payment that is already in progress.

We want to hide the drop-in component while in this state to avoid the problem.

descorp commented 2 years ago

Hey @mortend

Thanks for reaching out!

Could you please share the video or gif? Not sure that I understand what you mean.

mortend commented 2 years ago

Hey @descorp

I am talking about this drawer when I say drop-in component:

If I go to Vipps (external app) and pay there, Vipps will return back to our app still showing the same screen with this drawer. The problem is that our middleware haven't returned it's response yet (sometimes stuck in didSubmit for many seconds), and because the Adyen drawer is still usable and visible, it is possible to start another payment while waiting for the first one to go through. It is currently possible to pay for the same thing twice in our app on iOS.

We're using Adyen SDK via React Native using this module: https://github.com/ancon-labs/react-native-adyen-dropin

We have tried hacking around a bit in this code without success:

Called dismiss on a UIViewController we found. This caused the app to hang probably because we're tearing down Adyen while payments are in progress.
Found a UIView and set isHidden = true. It turns out this will hide the entire app.

So, we think we need a Swift method we can call when we want to hide the Adyen drawer shown on the picture, without breaking payments. We probably want to call this method from didSubmit.

descorp commented 2 years ago

Hey @mortend

Thanks for details. I think I understand now:

Called dismiss on a UIViewController we found. This caused the app to hang probably because we're tearing down Adyen while payments are in progress.

You can try using AdyenActionComponent instead of handling actions via dropInComponent.handle(action), so instance of AdyenActionComponent will be persisted and not affected by DropIn's life cycle.

mortend commented 2 years ago

@descorp Thanks for the pointer.

We tried to implement this in https://github.com/fusetools/react-native-adyen-dropin/commit/b17e58bdbef52ef83d674928125457c56958bcee, but it looks like it isn't enough.

Credit Card payment still works.
Vipps payment no longer works. The drawer closes but the transaction never completes/app seems to hang.

I have a feeling that calling dismiss too early isn't what we want. I wish there was a hide method that just hides the drawer while leaving everything else intact.

mortend commented 2 years ago

Any news on this? Will it be possible to hide the drawer without calling dismiss?

descorp commented 2 years ago

Hey @mortend

sorry, just got back from vacation 😁

Will it be possible to hide the drawer without calling dismiss?

Not on iOS. This is one of the differences between Android and iOS. However, this should not be an issue..

We tried to implement this in fusetools/react-native-adyen-dropin@b17e58b, but it looks like it isn't enough.

I believe you are missing delegate and presentationDelegate:

    internal lazy var actionComponent: AdyenActionComponent = {
        let handler = AdyenActionComponent(apiContext: apiContext)
        handler.delegate = self
        handler.presentationDelegate = self
        return handler
    }()

Not sure if this is React Native issue or SDK issue: I don't know how reliable is bridge between JS and native when app leaves foreground.

I'll try to reproduce on local vanila RN setup.

descorp commented 2 years ago

UPD

On my local RN setup Vipps worked as expected.

Another thing from your fork:

this doesn't sound like a good idea. DropIn have build-in "waiting" UI while Action is expected. If you need to dismiss DropIn after shopper finished payment and redirected back to your app, I would rather move this line to didProvide, before calling apiClient?.perform(request, completionHandler: paymentResponseHandler) (line 400)

descorp commented 2 years ago

Hey @mortend

Were you able to resolve the issue? Do you need any extra help?

descorp commented 2 years ago

I am going to close this ticket due to a lack of activity. Please, feel free to reopen it.

mortend commented 2 years ago

@descorp, I am sorry for the delayed response.

The issue is not yet resolved in our app. I have now attached a video demonstrating the issue.

Press "Vipps" in the drop-in component to open the Vipps app.
Authorize the payment inside the Vipps app.
Notice that the Adyen drop-in component is still visible after returning from the Vipps app.
It's possible to press "Credit card" and start another payment while in this state.
Adyen drop-in component closes eventually when our middleware is finished processing the Vipps payment.

Sometimes the server is even slower in returning its response so the user will have good time to enter the credit card info while we're still processing the earlier Vipps payment.

All changes we have tried so far in https://github.com/fusetools/react-native-adyen-dropin (including the ones you suggested) only results in other errors with the app - i.e. payments not working anymore.

So, we are looking for a method to hide (or disable) the Adyen drop-in component while our middleware is processing the Vipps payment.

https://user-images.githubusercontent.com/247798/149893895-d9a73069-41d1-45f9-9f55-5b773ecf0b9d.mp4

mortend commented 2 years ago

I am going to close this ticket due to a lack of activity. Please, feel free to reopen it.

I am not able to reopen this ticket myself.

descorp commented 2 years ago

I am not able to reopen this ticket myself.

oh, sorry. I didn't know that it is not re-openable 🤔

So, we are looking for a method to hide (or disable) the Adyen drop-in component while our middleware is processing the Vipps payment.

Indeed.. So far I can only suggest one of the following:

Inside of func didProvide(_ data: ActionComponentData, from component: DropInComponent):

a) disable UI for DropIn like component.viewController.view.isUserInteractionEnabled = false OR b) dismiss DropIn before making network call here (this could interfere with Apple Pay flow, if you are going to use one).

We will consider adding some sort of user-friendly waiting UI for this cases.

mortend commented 2 years ago

Thank you @descorp!

Option a) works and now it's blocking input while processing the Vipps payment. This solves the "pay twice" issue for us.

We will consider adding some sort of user-friendly waiting UI for this cases.

Nice - this sounds like a better user experience than blocking input. Keep us updated. :)

Christer-Andre commented 2 years ago

@descorp A client of ours is pushing quite a bit for us to improve the UX here. Anything you can share about prioritization/roadmap for this feature?

descorp commented 2 years ago

Hey @Christer-Andre

Sorry. No feasible timeline at this moment.

Currently our main propriety is Sessions support for v5. We are planning to address UI improvements for Drop-In later this year (~Q3).

Adyen / adyen-ios

[Feature] Method to hide the drop-in component / "pay twice" issue while `payment/details` #714