Add support for configuring ThreeDSRequestorAppURL

[StefanWallin]

First up I'd like to publicly thank you all at Adyen for writing this react native bridging library and for all the great support we've received as we try to implement the Adyen subscription card service in our app!

🙏 💐 🌟 👏

Is your feature request related to a problem? Please describe. Yes, our users get frustrated when adding cards which require 3DS-authentication. This is related to all Swedish banks 3DS2-flows requiring the merchant customer to deviate manually from the merchant app to a third party 3DS-app called "Bank-ID" (iOS and Android) and then manually navigate back to the merchant app. On android navigating back is extra tricky for the less technically adept merchant customers because of #163.

Describe the solution you'd like I'd like a solution that automates step 3 and 5 in the above image as much as possible. The image above outlines a user journey "TODAY" that shows how it works for our Swedish users and a "FUTURE" user journey we wish to arrive at.

The best solution we can think of reaching this target, is adding ThreeDSRequestorAppURL so that the bank dialog in step 4 knows what redirectURI to pass on to the bankid-app, if we get this to work, then #163 will be alleviated for probably all of our customers.

Describe alternatives you've considered

• We've tried to use redirect flow instead of native flow for 3DS, but that just changes how the third screen looks.
• We've looked at getting #163 fixed somehow (currently we <Alert> our customers before calling start('dropin') that they must use the app switcher when navigating back to the app from bankid).
• Asked support for help.
• We are passing redirectUri as one should (#334)

Additional context This is two responses from our sales manager, quoting an Adyen internal technical colleague knowledgeable of the Swedish Ecosystem:

Response number 1

threeDSRequestorAppURL and oobAppURL will facilitate a smooth transition between Merchant App and Issuer App during OOB Challenge flow and help boost shopper experience.

1. threeDSRequestorAppURL can be configured by merchants in 3DS Component (iOS, Android), it automatically redirects shoppers back to the merchant app after OOB Challenge.
2. https://docs.adyen.com/online-payments/3d-secure/native-3ds2/ios-drop-in/#show-the-available-cards-in-your-payment- form
3. https://docs.adyen.com/online-payments/3d-secure/native-3ds2/android-drop-in/#optional-configuration
4. oobAppURL is set by ACS and not something the merchant has to configure, it automatically redirects shopper to issuer app to perform OOB challenge. oobAppURL is only launched recently and not many ACSs/issuers are supporting this. oobAppUrl requires the SDK versions mentioned below. Because the SDK needs to trigger the push (shopper) from merchant app to defined oobAppURL hence, the need for a new SDK version: Although latest version is always recommended. The following versions start supporting oobAppURL

Android v 4.11.0 iOS version 4.10.4 / 5.2.0 Merchants should take the followings into account:

1. threeDSRequestorAppURL and oobAppURL are only available for 3DS 2.2. There is no way to force v2.2 as it depends on Issuer adaptation, meaning not all Issuers support v2.2. Based on issuer support (BIN enrolment) and issuer performance (if a certain BIN performs better on a given version etc), Adyens auth engine decides the best version.
2. Set threeDSRequestorAppURL as universal link ([https:]https://). Many ACS are rejecting custom links (my-apps://), which leads to failed authentication
3. Set threeDSRequestorAppURL in components (check our Adyen Docs). threeDSRequestorAppURL is different from returnURL.
4. React Native library v1 does not extend Android SDK v5+ which supports native 3DS2. React Native v2 (Alpha version) will contain Android SDK v5+ thereby enabling native 3ds2, it will be released by end of January 2024 (can be delayed). More information follow/ask questions here: https://github.com/Adyen/adyen-react-native

To which we responded the following:

1. That 'react-native-adyen' should document this in v2 how to achieve this since only returnURL is documented in 'react-native-adyen' and not threeDSRequestorAppURL.
2. Should this threeDSRequestorAppURL parameter be passed to the payments endpoint somehow?
3. What confuses me is that this parameter threeDSRequestorAppURL is described in the docs as a customer service website and not part of the flow: https://docs.adyen.com/api-explorer/Checkout/71/post/payments#request-threeDS2RequestData-threeDSRequestorURL. Can you please explain this to me?

And got back response number 2:

To begin with, threeDSRequestorAppURL is something that is configured in the client, as described in the previous iOS example. https://docs.adyen.com/online-payments/3d-secure/native-3ds2/ios-drop-in/#show-the-available-cards-in-your-payment-form. Not to be confused with threeDSRequestorURL parameter in the /payments request.

In essence the react native SDK simply utilises the underlying iOS and Android SDKs, so any configuration available in the iOS and Android SDK can be utilised in react native. That being said after some more investigation I see that we don't yet propagate the threeDSRequestorAppURL in React Native v1.2, as it is missing here: https://github.com/Adyen/adyen-react-native/blob/develop/docs/Configuration.md. threeDSRequestorAppURL already exist on native iOS and Android native SDKs, but we would need to add a bridge between the React Native public API and native code for it to be available. Now this is something you could even do yourselves since the React Native SDK is open source. Although it is not recommended, since forked code can't be supported from Adyen side. But any contribution is always welcome.

That being said, as previously mentioned we plan to release react native v2 by end of January, which would include the threeDSRequestorAppURL parameter. From what I currently see there are no apparent causes to delay that release time frame, but to set expectations properly it has happened in the past.

Lastly, with this in mind I have requested our tech writers to add a specific Cross Platform 3DS page in our public docs similar to what we have for web, iOS, and Android. No ETA on this.

You can probably find more context in Adyen Support tickets: 03444509 & 03258239

[descorp]

We just released 2.0.0-rc.1 with requestorAppURL

[descorp]

I am going to close this ticket for now. Feel free to continue discussion here.

[StefanWallin]

Thank you for your work! Haven't had time to try this out yet due to other priorities. And since there's a bunch of moving parts(universal links et.c.) it's taking some time, but am looking into this now.

It doesn't seem like threeDS2.requestorAppUrl is exposed in the current typescript-types in this folder: https://github.com/Adyen/adyen-react-native/tree/2.4.1/src/core/configurations. Where's this supposed to go? I'm guessing in here as a sibling to card, dropin, applepay, returnUrl et.c...

As in something like this:

  {
    environment: 'live-eu',
    clientKey: config.payment.clientKey,
    returnUrl: returnUrl,
    countryCode: 'SE',
    locale,
    amount: { currency: 'SEK', value: 0 },
    threeDS2: {
      requestorAppUrl: requestorAppUrl,
    },
    dropin: {
      showPreselectedStoredPaymentMethod: true,
    },
    ...
  }

[descorp]

Thanks for feedback @StefanWallin 💚

Added in this PR #539

[StefanWallin]

Solved for iOS with Universal links. Still an issue for Android due to #163

[descorp]

Thanks for confirming @StefanWallin

Will check with Android 3DS2 team and get back to you!