[BUG] "Enter address manually" button has an unexpected color

[kit0kat]

Hi,

I'm using the following appearance for my address sheet:

PaymentSheet.Appearance(
    colorsLight = PaymentSheet.Colors(
        surface = Color(0xFFFEFBFF), // almost white
        component = Color(0xFFE2E1EC), // grey
        // ...
    ),
    colorsDark = PaymentSheet.Colors(
        surface = Color(0xFF1B1B1F),
        component = Color(0xFF45464F),
        // ...
    ),
)

In dark mode this works fine:

In light mode the "Enter address manually" button is shown in pink, but not I'm not even using this color in my theme.

I found the follow code in the SDK:

val background = if (isSystemInDarkTheme()) {
    MaterialTheme.stripeColors.component
} else {
    MaterialTheme.stripeColors.materialColors.surface.darken(0.07f)
}

Source: https://github.com/stripe/stripe-android/blob/ddc344ee2e80eb35f84b28a3bb3501377b9de840/paymentsheet/src/main/java/com/stripe/android/paymentsheet/addresselement/AutocompleteScreen.kt#L96C13-L100C14

This is very unexpected.

If a component color is set in the appearance configuration, why is it only applied in dark mode?

[tillh-stripe]

Hi @kit0kat 👋 Yep, that doesn’t look right.

I reached out to the folks that built this screen. We apparently use this custom logic to make sure that the button stands out in light mode, as surface and component colors are usually the same in light mode. That being said, the button should obviously not turn pink like this.

Can you provide some more context about your usage? If you can provide a small sample app where the issue is reliably reproducible, that would be ideal. I’m trying to have this issue show up in our AddressElementExampleActivity, but I’m not seeing it.

[kit0kat]

Hi @tillh-stripe

our surface color is 0xFFFEFBFF which is "white with a little bit of red" (see example above). Using the darken() method turns this to pink.

You can test it here: https://pinetools.com/darken-color

[...] as surface and component colors are usually the same in light mode.

The assumption that surface and component color are the same is not true for every app since devs can choose whatever color they want.

A possible solution might be:

val background = if (isSystemInDarkTheme() || MaterialTheme.stripeColors.materialColors.surface != MaterialTheme.stripeColors.materialColors.component) {
    MaterialTheme.stripeColors.component
} else {
    MaterialTheme.stripeColors.materialColors.surface.darken(0.07f)
}

(not tested)

Hope this helps & sorry for the late reply

Kind regards

[tjclawson-stripe]

Hey @kit0kat! We've implemented a fix here that will simply add a black or white background with low opacity to the "Enter address manually" button. This will visually emphasize the button without changing the color.