[BUG] PaymentSheet gets forced into dark mode on Xiaomi devices

[VinuPolly-Bonnet]

Summary

So Xiaomi devices tend to inject darkMode and invert true black and true white colors, while I have controlled this using <item name="android:forceDarkAllowed">false</item> in App theme and AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) in the Application class, this somehow isn't reflected on the payment sheet.

Also to note, I have supplied the same set of colours to darkMode and lightMode as per docs for PaymentSheet

Code to reproduce

paymentSheet.presentWithSetupIntent(
            setupIntentClientSecret = setUpIntentSecret,
            configuration = PaymentSheet.Configuration(
                merchantDisplayName = "Temp Company",
                customer = null,
                googlePay = PaymentSheet.GooglePayConfiguration(
                    environment = getPaymentSheetGooglePayEnvironment(),
                    countryCode = "GB",
                    currencyCode = currencyCode
                ),
                billingDetailsCollectionConfiguration = billingDetailsCollectionConfiguration,
                defaultBillingDetails = userSelectedRegion?.alphaTwoCode?.let {
                    PaymentSheet.BillingDetails(
                        address = PaymentSheet.Address(country = it)
                    )
                },
                primaryButtonColor = ColorStateList.valueOf(ContextCompat.getColor(context, R.color.stripe_primary_color)),
                primaryButtonLabel = "Add Card",
                appearance = paymentSheetAppearance
            )
        )

Android version

Android 10

Impacted devices

Xiaomi - Redmi Note 9

Installation method

gradle

Dependency Versions

For kotlin: Kotlin: 1.8.10

For stripe-android: implementation 'com.stripe:stripe-android:20.25.1' implementation 'com.stripe:stripecardscan:20.25.1'

For Android Gradle Plugin: 8.0.0

Gradle 8.0

Kotlin: 1.8.10 Groovy: 3.0.13 Ant: Apache Ant(TM) version 1.10.11 compiled on July 10 2021 JVM: 17.0.1 (BellSoft 17.0.1+12-LTS) OS: Mac OS X 13.2.1 aarch64

Video

https://github.com/stripe/stripe-android/assets/90182632/7e4a6051-16f1-4707-b716-7c75c85d0efd

Other information

MIUI version: MIUI Global 12.0.6

[tillh-stripe]

Hi @VinuPolly-Bonnet 👋 Are you able to reproduce this in a standard emulator with the developer options? That would help us be able to reproduce and fix this issue.

Also, looking at your Payment Sheet integration, I think your app might be a good candidate for our upcoming Customer Sheet. It’s a new prebuilt-UI where your customers can manage their payment methods. If you’re interested, click the Contact us link on that page and we’ll get you set up.

[MassimoDjungle]

The bug is still present on Android 11, Xiaomi Redmi Note 10 Pro. https://github.com/stripe/stripe-android/assets/107140931/dcaae229-d8f7-4d62-8199-3ca541731e8f

When enabling the dark mode, also whether it is forced to be disabled in the app, the Stripe bottom sheet does not work as expected. I'm not able to reproduce the issue on an Android Studio emulated device since Xiaomi images are not available.

[tillh-stripe]

We haven’t heard about dark mode not working correctly on devices of other manufacturers, and we unfortunately don’t have a Xiaomi device for testing.

Can you show me how you construct paymentSheetAppearance?

[tillh-stripe]

@MassimoDjungle Do you have any updates on your end?

[masmil1988]

Yes, I still have problems with the dark mode on Xiaomi devices. Please see the attached video to understand what I see. It is a Xiaomi Redmi Note 8 Pro with Android 11 (API level 30).

I'm using com.stripe:stripe-android:20.36.1.

https://github.com/stripe/stripe-android/assets/6042561/0005819f-6be9-482e-8578-c9da2b53f321

[tillh-stripe]

I tried this on a colleague’s phone (Xiaomi Redmi A1) and wasn’t able to reproduce your issue.

Can you provide a full code snippet of how you construct PaymentSheet.Appearance?

[masmil1988]

Yes, this is how we construct the PaymentSheet.Appearance:

PaymentSheet.Appearance(
    primaryButton = PaymentSheet.PrimaryButton(
        shape = PaymentSheet.PrimaryButtonShape(
            cornerRadiusDp = resources.getDimensionDpSize(R.dimen.button_corner_radius),
        ),
    ),
)

[tillh-stripe]

Hmm, nothing wrong there. And just to confirm, do you see the same issue when you run our sample app on a Xiaomi device?

[MassimoDjungle]

This is what I see with your sample app, it seems good.

I succeeded in seeing the Payment sheet activity with the dark mode, also in my app, only by explicitly telling to your activity to use the dark mode:

registerActivityLifecycleCallbacks(object: ActivityLifecycleCallbacks {
    override fun onActivityCreated(activity: Activity, savedInstanceState: Bundle?) {
        (activity as? AppCompatActivity)?.delegate?.localNightMode = AppCompatDelegate.MODE_NIGHT_YES
    }

    override fun onActivityStarted(activity: Activity) {
    }

    override fun onActivityResumed(activity: Activity) {
    }

    override fun onActivityPaused(activity: Activity) {
    }

    override fun onActivityStopped(activity: Activity) {
    }

    override fun onActivitySaveInstanceState(activity: Activity, outState: Bundle) {
    }

    override fun onActivityDestroyed(activity: Activity) {
    }
})

Anyway, the app has the default night mode set on MODE_NIGHT_NO: AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) this seems to be the origin of the bad management...