Adyen latest sdk(2.3.0) Facing issue while opening paypal, ideal like any method that opening webview. can not read the property of undefined (reading AdyenInstant).

[faizantariq1]

Describe the bug facing a crash in Adyen latest sdk(2.3.0). while opening paypal, ideal etc.

To Reproduce Steps to reproduce the behavior: const { start,paymentMethods: paymentMethodsResponse } = useAdyenCheckout();

using start to directly open payment method like paypal

start('paypal');

it's giving error. can not read the property of undefined (reading AdyenInstant).

it's crashing around line no 81 in the above screenshot.

Screenshots

Smartphone (please complete the following information):

• Device: iphone simulator, android emulator

Additional context react native: 0.69 compileSdkVersion = 34 targetSdkVersion = 34 java version = 17

Note: I'm able to open the paypal when i use start('dropin') and click on paypal.

[descorp]

Thanks @faizantariq1

I was able to reproduce - will look into this

[descorp]

Hey @faizantariq1

This is an issue for React Native versions before 73. Our theory is module naming conflict: our file NativeModules got entangled with React Native NativeModules file.

To workaround: move "NativeModules" getters from node_modules/@adyen/react-native/src/modules/NativeModules.tsx to node_modules/@adyen/react-native/src/wrappers/getNativeComponent.tsx

import { NativeModules } from 'react-native';
import { ModuleMock } from '../modules/NativeModules';

export const AdyenInstant: AdyenActionComponent & NativeModule = NativeModules.AdyenInstant ?? ModuleMock;
export const AdyenApplePay: AdyenComponent & NativeModule = NativeModules.AdyenApplePay ?? ModuleMock;
export const AdyenGooglePay: AdyenActionComponent & NativeModule = NativeModules.AdyenGooglePay ?? ModuleMock;

And remove unnecessary imports in getNativeComponent.tsx.

---

524

We will publish 2.4.0 with backward compatibility PR this next week.

[descorp]

2.4.0 released.

@faizantariq1 could you verify if it fixed issue for you?

[faizantariq2]

Hi @descorp, the crash issue has been fixed. but while trying to open the ideal payment method is not working.

start('ideal');

but we did not receive any issuer(mean the issuer test payment methods screen) and onSubmit called automatically. did something get changed? as it's working fine with the older version of adyen. it's happening for both ios and android.

[faizantariq2]

Hi @descorp , One more thing, PayPal redirection is not working in Android after completing the payment or even after clicking on the cancel button. It was working fine in the previous version.

Note: it's working fine on IOS.

[descorp]

Hey @faizantariq2

Ideal

did something get changed?

This is a new thing indeed. Ideal is no longer an "issuer list", it is a simple redirect.

Our SDKs are dealing with this change differently. We are looking to introduce a more holistic solution for this.

to open the ideal payment method is not working.

What is not working?

PayPal redirection

Nothing have changes on this one 🤔

What returnURL you are using? For IDEAL and Cards (see a full list here) it must be "adyencheckout://[YOUR_APP_BUNDLE]" - this value is coming from data.returnUrl inside of didSubmit(data, component) callback. For PayPal you must use any customURL that you set up with intent-filter in AndroidManifest.

The way we expect this to work:

You pass returnUrl in AdyenCheckout configuration and SDK rout your payment to a correct returnUrl by overriding it to "adyencheckout://[YOUR_APP_BUNDLE]" or leaving untouched whenever nececery.

[faizantariq2]

IDEAL:

Note: talking about sandbox environment. const { start,paymentMethods: paymentMethodsResponse } = useAdyenCheckout(); start('ideal'); When I click on the button with start('ideal'), the onSubmit function is called automatically without displaying the issuer screen.

 ` const didSubmit = useCallback(
    async (
      /** @type {import('@adyen/react-native').PaymentMethodData} */ data,
      /** @type {import('@adyen/react-native').AdyenActionComponent} */ nativeComponent,
      /** @type any */ extra
    ) => {
      console.debug(
        `didSubmit: ${data.paymentMethod.type} with extra: ${JSON.stringify(
          extra,
          null,
          ' '
        )}`
      );
      try {
        /** @type {import('./../../Types/index').PaymentResponse} */
        const result = await ApiClient.payments(
          data,
          configuration,
          data.returnUrl
        );
        if (result.action) {
          nativeComponent.handle(result.action);
        } else {
          processResult(result, nativeComponent);
        }
      } catch (error) {
        processError(error, nativeComponent);
      }
    },
    [configuration]
  );`

. As a result, the data response does not include any issuer information, causing the payments API to fail.

[descorp]

When I click on the button with start('ideal'), the onSubmit function is called automatically without displaying the issuer screen.

This is expected behaviour for iDEAL 2.0.

As a result, the data response does not include any issuer information, causing the payments API to fail.

This could be TEST environment configuration issue 🤔 What API version you have? Could you provide us with PSP reference via Support or Account Manager (we trying to avoid sharing PSP references via GitHub) ?

[camil-adyen]

Hey @faizantariq2, due to the new iDEAL 2.0 flow some changes were made to your payment methods setup in the Customer Area. Please enable the new ideal payment method confirgured to your test account and disable the old one to get the correct API response.