[BUG]: Stripe autofill invalid color

[cedvdb]

What happened?

When autofilling information in stripe elements in dark mode, chrome sets default stylings, and the fields may look as below:

A solution to this is to allow the css property colorScheme in stripe element styling rules, which would then look like the following

Not perfect, but this at the very least allows the fields to be readable by notifying chrome that inputs are in dark mode.

Environment

No response

Reproduction

No response

[alexlande-stripe]

@cedvdb thanks for reporting this. We have some logic that's meant to prevent this that looks to not be working appropriately in your example. To help us track this down:

1. What platform are the above screenshots from? (Windows, Android, etc)
2. Can you share either a live URL with this issue, or a copy of your Appearance API configuration? That will be helpful in reproducing the issue on our end.

Thanks!

[cedvdb]

We have some logic that's meant to prevent this that looks to not be working appropriately in your example.

Could you give more detail ? Maybe that's something I can resolve on my end. What is the logic exactly ?

What platform are the above screenshots from? (Windows, Android, etc)

It is inside a flutter application running in chrome in ubuntu. Flutter has a community driven wrapper for stripe_js which is used under the hood.

or a copy of your Appearance API configuration

Here is the appearance (it's in dart but compiled to js):

theme

theme: isDark ? ElementTheme.night : ElementTheme.none,

variables

      variables: {
        'fontFamily': 'roboto, system-ui, sans-serif',
        'colorBackground': theme.colorScheme.surface.toRgb(),
        'colorPrimary': theme.colorScheme.onSurface.toRgb(),
        'colorText': theme.colorScheme.onSurface.toRgb(),
        'colorTextSecondary': theme.colorScheme.onSurfaceVariant.toRgb(),
        'colorTextPlaceholder': theme.colorScheme.onSurfaceVariant.toRgb(),
        'colorSuccess': theme.colorScheme.tertiary.toRgb(),
        'colorDanger': theme.colorScheme.error.toRgb(),
      }

Rules

{
        '.AccordionItem': {
          'backgroundColor': 'transparent',
          'border': '0',
          'boxShadow': 'none',
        },
        '.Input': {
          'backgroundColor': 'transparent',
          'borderColor': '#a08d85',
          'borderRadius': '0',
          'borderTop': '0',
          'borderLeft': '0',
          'borderRight': '0',
          'boxShadow': '0',
          'colorScheme': isDark ? 'dark' : 'light' // allowing this property would make this less of an issue
        },
        '.Input:focus': {
          'backgroundColor': 'transparent',
          'borderColor': theme.colorScheme.primary.toRgb(),
          'borderRadius': '0',
          'borderTop': '0',
          'borderLeft': '0',
          'borderRight': '0',
          'boxShadow': '0',
        },
        '.Input--invalid': {
          'backgroundColor': 'transparent',
          'borderColor': theme.colorScheme.error.toRgb(),
          'borderRadius': '0',
          'borderTop': '0',
          'borderLeft': '0',
          'borderRight': '0',
          'boxShadow': '0',
        },
        '.Block': {
          'backgroundColor': 'transparent',
          'boxShadow': 'none',
          'border': '1px solid ${theme.colorScheme.outline.toRgb()}',
        },

PS: officially supporting flutter as a platform would be nice. There is a demand.

[alexlande-stripe]

@cedvdb thanks! I just tested this out. In your case, this is happening because of the backgroundColor: 'transparent' on the Input rules. We override the browser's default autofill background with a box-shadow matching the background color of the input. In this case, because the input's background is transparent, the box-shadow is as well, and the original autofill background is visible:

https://github.com/user-attachments/assets/9adb2de1-8669-4ae6-9d30-e7137c629bcc

For the short term, I'd recommend using a solid background color for the inputs. In the long term, I think we'll need to find a better solution to this problem (ideally one that doesn't require users to set colorScheme themselves, although it's possible we might expose that through the Appearance API as well).

[cedvdb]

@alexlande-stripe Thanks alexandre, note that I contacted stripe support about this earlier in the day. So you might get a notification if you haven't already. I'll close this for now and I agree with you that the current implementation isn't optimal, this one will lead to such issue.

[cedvdb]

@alexlande-stripe Note that the current implementation also has other unexpected behaviors when spellcheck happen

[alexlande-stripe]

Thanks! That's helpful. Hoping to work on improved handling for this sooner rather than later.