ThreeDSecure Challenge UI is distorted in portrait mode

[Avi29071991]

Braintree SDK Version

4.39.0

Environment

Sandbox

Android Version & Device

Samsung M12 - Android 13

Braintree dependencies

implementation "com.braintreepayments.api:data-collector:4.39.0"

// to offer ThreeDSecure Challenge implementation "com.braintreepayments.api:card:4.39.0" implementation "com.braintreepayments.api:three-d-secure:4.39.0"

Describe the bug

The Cardinal authentication challenge shown using ThreeDSecureActivity doesn't works as expected. The UI shown for Auth challenge is distorted in portrait mode, but works fine in landscape mode. Unable to figure out what went wrong. When trying through a small demo app the UI works fine, but using it in actual payment app causes the UI to distort. Had followed all the steps as mentioned in https://developer.paypal.com/braintree/docs/guides/3d-secure/client-side/android/v4 right from setting up the gradle file, adding ThreeDSecure performVerification and continuePerformVerification methods as defined in the document along with setting up the Manifest files as well. But the issue still persists

To reproduce

1. Initialize BraintreeClient using ClientTokenProvider to get authorization string.
2. Initialize ThreeDSecureClient using BraintreeClient instance and set up it's listener
3. Call made to performVerification function followed by continuePerformVerification fun with the ThreeDSecureRequest (V2) containing card details like nonce (generated using cardnumber, cvv, expiry month and year) and amount.
4. The SDK performs some checks and then navigates user to Cardinal challenge with distorted UI.

Expected behavior

The actual payment app should also provide correct UI for auth challenge as in demo app.

Screenshots

Distorted UI in portrait mode for actual payment app

UI looks fine in actual payment app landscape mode

Expected behaviour which is visible on demo app with same BaseActivity extending Fragment activity

[Avi29071991]

Code of the base class which calls ThreeDSecureClient and performVerification function can be provided if requested

[sarahkoop]

Hi @Avi29071991 - Are you able to provide a simple demo app that reproduces this behavior? We will inquire with Cardinal about the distorted challenge UI, but without steps to reproduce, debugging the issue may not be possible.

[sarahkoop]

Internal investigation determined this issue is due to a duplicate definition of layout parameter fab_margin. To fix in a workaround: in your app, go to: src/main/res/values/dimen.xml file there is resource named fab_margin that needs to be renamed for the app. Alternatively, remove this value if it is unused.

Long term, the Braintree and Cardinal SDKs will work to prefix layout values to avoid future collisions.