[BUG] PaymentOption icon is blank

[RicardoBelchior]

Summary

In our app we want to always display the icon of the Payment Option and the entire payment sheet in light mode. That is a design choice. What happens is that because our background is white, when the user selects dark mode, then the actual icon is not visible.

Context

The payment sheet configuration allows clients to provide colors for both light and dark mode. And it seems the SDK is then deciding which one to use based on the device settings (ie. https://support.google.com/android/answer/9730472?hl=en).

The screenshot on the left was taken when the user is using light mode.
The screenshot on the right was taken when the user is using dark mode.

As you can see, the actual icon is different, depending on whether the user chooses light or dark mode for the entire device. If you try to put the icon on the right, on a white background, it will appear as an empty space.

The solution implemented by the iOS sdk is great because it allows clients to override the style of the Payment Sheet. I understand that on Android, we could call AppCompatDelegate.setDefaultNightMode, but that requires clients to declare a fixed theme for the entire app which will most likely have unintended consequences in other parts of the app -- which are not related to the payment sheet. Note that, most of our app has a dark layout (except some UI elements) and therefore, having our app "request" the Android system to use light mode everywhere has a high risk of conflicts.

As an alternative, I have tried to call AppCompatDelegate.setDefaultNightMode right before flowController.presentPaymentOptions(), but that causes the underlying activity to be recreated, which is not a good user experience.

Even when setting AppCompatDelegate.setDefaultNightMode as a global setting (at Application#onCreate), the icon that is included in the PaymentOption received through the PaymentOptionCallback, does not seem to "respect" the AppCompaDelegate setting, in the sense that, it's still a different icon depending on the user's setting of light and dark mode. In the video below there is a VISA icon, but it's full white on a white background -- ie. invisible to the user.

The best solution for us would be to align the Android SDK with the iOS one and provide a "style" setting when configuring the payment sheet appearance. And making sure that the icons returned in the PaymentOptionCallback respect that option:

var configuration = PaymentSheet.Configuration()
configuration.style = .alwaysLight

If you could look into this, we would very much appreciate it.

Android version

Android 16. But it's not specific to the android version.

Impacted devices

All devices.

Installation method

Gradle dependency.

Dependency Versions

kotlin: 2.2.20
stripe-android: 21.19.0
Android Gradle Plugin: 8.13.0
Gradle: 8.14.3

SDK classes

PaymentOption
PaymentSheet.Appearance

Video

Screen_recording_20251127_163744.mp4

[cttsai-stripe]

Hi @RicardoBelchior, we are looking into this. Could you provide more details about how you initialize the FlowController? For example, did you pass in any custom Appearance and Colors when setting up PaymentSheet.Configuration?

[RicardoBelchior]

Hi @RicardoBelchior, we are looking into this. Could you provide more details about how you initialize the FlowController? For example, did you pass in any custom Appearance and Colors when setting up PaymentSheet.Configuration?

Hi 👋 Thanks for looking into it. Yes, we pass the appearance object, to enforce the usage of light colors, always. Our setup is something like this:

@Composable
fun Sample(paymentIntentDetails: PaymentIntentDetails) {
    val resources = LocalResources.current
    val flowController = rememberFlowController(
        paymentOptionCallback = { paymentOption ->
            val iconDrawable = paymentOption?.icon()    // The issue is with this drawable.
                                                        // Different drawables are returned, depending on the system settings
                                                        // Would be nice for devs to be able to configure it.
            // ...
        },
        paymentResultCallback = { /* ... */ }
    )

    PaymentSummaryScreen(
        onPaymentMethodClicked = {
            flowController.presentPaymentOptions()
        },
        onPurchaseButtonClicked = {
            flowController.confirm()
        }
    )

    LaunchedEffect(paymentIntentDetails) {
        flowController.configureWithPaymentIntent(
            paymentIntentClientSecret = paymentIntentDetails.paymentIntentSecret,
            configuration = PaymentSheet.Configuration.Builder(resources.getString(resourcesR.string.dice_app_name))
                .appearance(createAppearance())
                // ...
                .build(),
            callback = { _, _ -> /* ... */ }
        )
    }
}

private fun createAppearance(): PaymentSheet.Appearance {
    return PaymentSheet.Appearance.Builder()
        .shapes(PaymentSheet.Shapes(cornerRadiusDp = 10f, borderStrokeWidthDp = 1.5f))
        .typography(
            Typography(
                sizeScaleFactor = 1F,
                fontResId = metronomeR.font....
            )
        )
        .colorsLight(createColorsLight())

        // Note that we're forcing light colors on the dark mode. 
        // This approach is not perfect though. For example in this scenario, the cursor becomes invisible.
        .colorsDark(createColorsLight())
        .primaryButton(createPrimaryButton())
        .build()
}

private fun createPrimaryButton() = PaymentSheet.PrimaryButton(
    colorsLight = createLightButtonColors(),
    colorsDark = createLightButtonColors(), 
    shape = PaymentSheet.PrimaryButtonShape(
        cornerRadiusDp = 45f,
        borderStrokeWidthDp = 0f
    ),
    typography = PaymentSheet.PrimaryButtonTypography(
        fontResId = metronomeR.font...,
        fontSizeSp = 13f
    )
)

private fun createLightButtonColors(): PaymentSheet.PrimaryButtonColors = PaymentSheet.PrimaryButtonColors(
    background = Mt.Sys.Color.Interactive.OnLight.Accent,
    onBackground = Mt.Sys.Color.Content.OnLight.Primary,
    border = Color.Transparent,
    successBackgroundColor = Mt.Sys.Color.Interactive.OnLight.Accent,
    onSuccessBackgroundColor = Mt.Sys.Color.Content.OnLight.Primary
)

private fun createColorsLight() = PaymentSheet.Colors(
    primary = Mt.Sys.Color.Content.OnLight.Primary,
    surface = Mt.Sys.Color.Background.Light.Default,
    component = Mt.Sys.Color.Background.Light.Default,
    componentBorder = Mt.Sys.Color.Border.OnLight.Default,
    componentDivider = Mt.Sys.Color.Border.OnLight.Default,
    onComponent = Mt.Sys.Color.Interactive.OnLight.Primary,
    subtitle = Mt.Sys.Color.Content.OnLight.Primary,
    placeholderText = Mt.Sys.Color.Content.OnLight.Secondary,
    onSurface = Mt.Sys.Color.Content.OnLight.Primary,
    appBarIcon = Mt.Sys.Color.Interactive.OnLight.Primary,
    error = Mt.Sys.Color.Sentiment.OnLight.Negative
)

[cttsai-stripe]

Thank you @RicardoBelchior, we are able to identify the cause. We'll keep the issue open while working on the fix.

[mariusmorabosch]

Hi @cttsai-stripe I have a similar problem but in reverse. We want to force dark mode colors, so following the suggestion in the docs i just do:

paymentSheet.presentWithPaymentIntent(
                    state.paymentIntent.paymentIntentSecret,
                    PaymentSheet.Configuration.Builder(merchantDisplayName = merchantName)
                        .appearance(PaymentSheet.Appearance(colorsDark = PaymentSheet.Colors.defaultDark))
                        .customer(customerConfig)
                        .allowsDelayedPaymentMethods(false)
                        .build()
                )

Now, that seems to work fine but at some point the UI displays a very weird transition from the loading 'purchasing' button to a full white button. Am I doing the correct thing to force a dark theme always? This white button state seems to also appear if the phone is in dark mode. In light mode this is not noticeable as the button turns white as well, blending into the background.