Drop in Android blocks async\await operation (Android Only)

[badredaha]

Describe the bug
The Drop-in is started, and I enter the card information. After pressing the “Pay” button in the Drop-in, I observe the following behavior in the debug process:
1. The call to our API is made.
2. I receive the response, either indicating success or an error.
3. Despite receiving the response, the loading view remains visible and does not disappear.

Smartphone (please complete the following information):

• Device: Emulator Or Device Android SDK 30

[descorp]

Hey @badredaha

Could you provide more info:

1. The call to our API is made.

Is it a \payments call?

2. I receive the response, either indicating success or an error.

Do you mean network response from your backend API, right?

Despite receiving the response, the loading view remains visible and does not disappear.

How is this behaviour different from iOS?

[badredaha]

Hi @descorp
Hope you are good :)
For iOS for now no problem. For Android the spinner loading and when I make the app in background and I return the spinner is hiding :/ and all works good.
What do you think ? Thread UI ? I tried a lot setTimeout nothing work (the only hack work is go background and return forgroud).

[descorp]

@badredaha

How is you onSubmit looks like?
Do you call component.hide(response.result); when you have outcome from backend?

[badredaha]

@descorp the problem is when the drop-in is shown and I call my API with async to fetch data the return seem to be blocked ! I can see that I get response from my monitoring network (Reactotron or Flipper) but my app don't receive a response!

For iOS it's works good (until now) the same code :/

[badredaha]

@descorp we are a Little bit blocked

[descorp]

Sorry @badredaha

I am not sure if this is related to the SDK.
Could be unhandled exception or unexpected backend response on your network layer?

Could you determine what line of code is causing "hanging"?

[badredaha]

Hello @descorp
Mainly is the async function with await ? this why I'm asking if I need add something to manager the UI Thread (For iOS the same code works good)

I found a hack, In Submit I call component.hide(true/or false) and I can manage the response returned from the API no problem! but It's weird and not stable :/

[descorp]

Not sure if I follow you. How is your onSubmit looks like? With and without the "hack" ?

[badredaha]

Yes @descorp

AdyenCheckout

<AdyenCheckout
        paymentMethods={adyenPaymentMethodsResponse}
        config={setupAdyenConfiguration(
          getTotalAmountToPay(amount)
          appSettingsReducer.currency
        )}
        onComplete={(data, component) => {
          useCallback(() => {
            handleOnCompleteAdyenPayment(data, component);
          }, []);
        }}
        onError={(error, component) => {
          useCallback(() => {
            handleErrorAdyenPayment(error, component);
          }, []);
        }}
        onSubmit={onSubmitRequest}
      >

onSubmitRequest Method

const onSubmitRequest = useCallback(
    async (data: PaymentMethodData, component: AdyenActionComponent) => {
      const inputsBookingProcess = prepareInputsCheckoutPaymentProcess(
        data,
        component
      );
      try {
        startCheckoutPaymentProcess(inputsBookingProcess, {
          onError: (error) => {
            component.hide(false);
            Logger.error("Error on payment", error);
            showError();
          },
          onSuccess: (data: MbBookingProcessType) => {
            component.hide(true);
            goToPaymentConfirmation(data.confirmationNumber);
          },
          onChallenge: (data) => {
            component.handle(data);
            Logger.error("onChallenge Data", data);
          },
        });
      } catch (error) {
        Logger.error("Unhandled error on payment", error);
        showError();
      }
    },
    []
  );

startCheckoutPaymentProcess

export function startCheckoutPaymentProcess(
  processRequestInput: MbBookingProcessRequestInputType,
  result?: CheckoutPaymentResult
) {
  mutationBookingProcess(processRequestInput)
    .then((response) => {
      const error = handlePaymentErrors(response.error);
      if (error) {
        result?.onError(error);
        return;
      }
      const checkoutPaymentResponse = response.data.bookingProcess;

      if (
        checkoutPaymentResponse?.status === CreateBookingStatus.ActionRequired
      ) {
        result?.onChallenge(checkoutPaymentResponse.adyenAction);
        return;
      }

      if (checkoutPaymentResponse?.status === CreateBookingStatus.Success) {

        const checkoutSuccessResponse = {
          confirmationNumber: checkoutPaymentResponse?.confirmationNumber,
          transactionId: checkoutPaymentResponse?.transactionId,
        };

        result?.onSuccess(checkoutSuccessResponse);
        return;
      }

      result?.onError(getDefaultError());
    })
    .catch((error) => {
      result?.onError(handlePaymentErrors(error) ?? getDefaultError());
    });}

[descorp]

At first glance, the code looks fine.

Is this before "hack" or after?

[badredaha]

Yes before! the Hack is when the submit call, I force component.hide(true)! and when I get the response from API the call is triggered.