Bug on Cardfield default text color style and Samsung S24 with Android 14

[almighty972]

Describe the bug When using the CardField component, the default cardStyle text color is white on Samsung Galaxy S24 (Android 14) On an emulator with Android 8, the CardField text color is white only when you select the desired network (see attached videos)

To Reproduce Steps to reproduce the behavior:

1. Install Stripe sdk "@stripe/stripe-react-native": "0.38.6"
2. Add <CardField/> to your screen
3. Launch the application on a Samsung Galaxy S24 with Android 14
4. You can see that initial CardField text color is white in preferred networks dropdown list

Expected behavior The CardField has initially the proper text color, the default grey icon should show up, and the text color of the differents networks should not be white.

Screenshots

You can find 2 videos below, one from a Samsung Galaxy S24 on Android 14, and a video from an Android Emulator with Android 8.

https://github.com/user-attachments/assets/44b7d04e-6297-465a-9eb1-5637b26f0557 https://github.com/user-attachments/assets/619d0887-72d5-4631-944b-5f7a4d24b081

Desktop (please complete the following information):

• OS: Android 14

Smartphone (please complete the following information):

• Device: Samsung S24, Android 8 emulator

Additional context

Stripe sdk -> "@stripe/stripe-react-native": "0.38.6"

Here is the code of the CardField :

<CardField
    style={styles.cardField}
    cardStyle={styles.cardStyle}
    onCardChange={setCardDetails}
    postalCodeEnabled={false}
    autofocus
    preferredNetworks={[
      CardBrand.Mastercard,
      CardBrand.Visa,
      CardBrand.CartesBancaires,
    ]}
/>

And here is the styles object used by the CardField:

const styles = StyleSheet.create({
  container: {
    marginTop: 15,
    marginHorizontal: 15,
  },
  label: {
    color: theme.secondaryColor,
    fontSize: 16,
    fontWeight: '500',
  },
  cardField: {
    marginTop: 20,
    width: '100%',
    height: 50,
  },
  cardStyle: {
    textColor: '#5E5E5E',
    backgroundColor: '#FAFAFA',
    borderColor: '#9B9B9B',
    borderWidth: 1,
  },
  button: {
    marginTop: 20,
  },
});

[almighty972]

It seems that the issue comes from whether the dark mode is enabled or not in the Android settings... My apps doesn't handle the dark mode, but it seems the Stripe sdk does.

Can you disable the dark mode on the Stripe React Native SDK ?

[almighty972]

The issue seems to come from whether or not the system is in dark or light mode. The Stripe CardField component seems to adapt its style accordingly.

My Application is always in light mode. So I forced the app to be in light mode with this line:

Appearance.setColorScheme('light');

That way, the Stripe SDK will always be in light mode. However I still have a bug in the selected network dropdown. The text color is white on a white background as you cann see on the video below.

https://github.com/user-attachments/assets/21fe4a74-60f6-4e60-b796-62340a41d904

[almighty972]

Hello, I can confirm that there is a bug in the SDk with the light mode (Android only) when you select the payment network, as you can see on the video. The selected network text color stays in white color. The cardStyle acts only on the CardField component style, but not on the network selection dropdown style.

https://github.com/user-attachments/assets/48754430-edcc-47a1-a9fb-4426118a84ec

[skoolaidl]

I am using CardField as well. Have not implemented dark mode into my app, it's in the plans but for now I am just trying to get it up and running. I am able to make the text at least visible when I have my CardStyles set to the following:

<CardField
    postalCodeEnabled={true}
    placeholders={{
        number: '4242 4242 4242 4242',
    }}
    cardStyle={{
        backgroundColor: Platform.OS === 'ios' ? '#ffffff' : Appearance.getColorScheme() === 'dark' ? '#000000' : '#ffffff', 
        textColor: Platform.OS === 'ios' ? '#000000' : undefined,
        borderColor: ...,
        borderWidth: 1,
    }}
    style={{
        width: '90%',
        height: 50,
        marginVertical: 30,
    }}
/>

Result is this in Android with dark mode enabled:

Android dark mode disabled:

iOS dark mode (notice icon missing)

iOS light mode

iOS seems to work except for the icon disappears in dark mode in this case. Definitely should not need to do this much workaround to get the element to be viewable to the user.

[ammar-madni]

I've also run into this, the brand and placeHolder text on Android are styled as though dark mode is enabled when it is not.

Using the placeholderColor prop fixes the placeholder text color for me. But the initial card icon remains impossible to see in light mode.

[tianzhao-stripe]

Hi @almighty972 Thank you for the suggestion! At this time, we are not planning on adding any new features to the Card Element. We are encouraging all users to instead use the Mobile Payment Element, which we launched in 2021. You can find the docs here. If there are any reasons the MPE doesn't support your use case, we'd love to hear your feedback!