Unable to set Card Number placeholder value on CardField

[ChristianLippaGoodfood]

Describe the bug Cannot set the placeholder value for the number field on CardField component, it defaults to 4242 4242 4242 4242 even when a string is provided. After upgrading from 0.2.1 to 0.18.1 and following the change logs recommendation on the breaking change for the placeholder prop to be changed from placeholder={} to placeholders={} it seems that we cannot get a placeholder anymore.

To Reproduce Use <CardField /> Component Set placeholder as such

                <CardField
                    style={styles.field}
                    placeholders={{
                        number: `${translate('signupScreen.form.step_3.cardNumber')}                                      `, // Note: This extra space is to force the numeric field to be long enough (Android issue).
                        cvc: translate('signupScreen.form.step_3.cvc'),
                        expiration: translate('signupScreen.form.step_3.mmyy'),
                    }}

Expected behavior The number placeholder to be set correctly.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information): iOS 15+, Android 12+

Additional context Only started occuring after upgrade from version 0.2.1 -> 0.18.1

[charliecruzan-stripe]

Hm, this code is working in our example app. Are you using Expo, and maybe the native code isn't matching the JS version?

[Ibad9]

@charliecruzan-stripe

My issue got deleted without any response

[charliecruzan-stripe]

@Ibad9 I responded to you in your issue: https://github.com/stripe/stripe-react-native/issues/1314#issuecomment-1448987194

Please don't post in other unrelated issues, it'll cause notification spam for the original issue poster

[ChristianLippaGoodfood]

@charliecruzan-stripe Thank you for the response, we're not using Expo and the JS/native versions do match. It seems to be an intermittent issue that I currently can't reproduce. So was hoping that maybe someone here had seen it before. It all looks correct to me and can't reproduce even on the same device/OS so I'm working through trying to find the cause. Will update here if I get more info, thanks.

[charliecruzan-stripe]

@ChristianLippaGoodfood I haven't been able to reproduce this behavior. Could you lay out the steps for me to reproduce this myself? Including installation steps

[ChristianLippaGoodfood]

@charliecruzan-stripe This issue kind of got pushed back in priority for us but I will try to get the steps to you as soon as possible.

[jacobsood]

Currently working on a PoC with the Card Form component and experienced this happening.

Installation steps:

npx react-native init stripePoC --template react-native-template-typescript
yarn add @stripe/[email protected] // or yarn add @stripe/stripe-react-native

We're using the following dependencies:

"react": "18.1.0",
"react-native": "0.70.10",
"@stripe/stripe-react-native": "0.19.0", // also tried with the latest version

These placeholders work for the CardField, just not for CardForm.

<CardField
        placeholders={{
          number: 'This is a card',
          cvc: 'Something',
          expiration: 'When the card expires',
        }}
        countryCode="TH"
        postalCodeEnabled={false}
        onCardChange={cardDetails => {
          setComplete(cardDetails.complete);
        }}
        style={{
          height: 30,
        }}
      />

<CardForm
        defaultValues={{countryCode: 'TH'}}
        placeholders={{
          number: 'This is a card',
          cvc: 'Something',
          expiration: 'When the card expires',
        }}
        style={{height: '100%'}}
      />

[charliecruzan-stripe]

This is working for me on Android- are you trying on iOS? This prop is Android-only: https://stripe.dev/stripe-react-native/api-reference/interfaces/CardFormProps.html#placeholders