Card Form, Card Field customization (styles, label, placeholder)

[tanloiit2010]

Is your feature request related to a problem? Please describe. I'm using CardField and CardForm in my application. Everything work like a charm But I want to do customizations the styles, label and place holder and I do not find the way to do that Exactly like this:

Describe the solution you'd like Currently do we have any option to achieve this? If not, I hope you can provide some props for CardField/CardForm to support the customization

Describe alternatives you've considered N/A

Additional context N/A

[arekkubaczkowski]

These options are not available at the moment due to limitations of stripe-ios and stripe-android but there are plans to implement it in the future.

[AlexSirenko]

These options are not available at the moment due to limitations of stripe-ios and stripe-android but there are plans to implement it in the future.

But some of the options are available now for the CardField component, like cardStyle (in CardForm component there is only backgroundColor but in the CardField a lot of props), placeholders. Could you add those to the CardForm too, please?

[AlexSirenko]

@arekkubaczkowski any thoughts?

[simona-iuliana]

any update on this? @arekkubaczkowski

[dqii]

Is it not possible to create a form like this in stripe-ios / stripe-android? (I haven't used either library before, so just wondering!)

[abdoerrahiem]

any updates?

[absingh927]

Any updates? <CardFrom> is quite ideal for many use cases but if you can't style it, it's quite a useless component

[charliecruzan-stripe]

We can add this feature on Android, but unfortunately it is blocked on iOS until https://github.com/stripe/stripe-ios/issues/1932 is resolved.

[ftzi]

We can add this feature on Android, but unfortunately it is blocked on iOS until stripe/stripe-ios#1932 is resolved.

Thanks for the feedback. I really want it so I can make it have my Look and Feel. Feels pretty odd right now.

[dqii]

Are custom font families possible? @charliecruzan-stripe

[charliecruzan-stripe]

see the linked PR 😄

[dqii]

Got it! So only for Android (almost)

[SasLuca]

Would it be possible to enable it just for Android now and later for ios? Unless I am misunderstanding the roadblock right now is simply that stripe-ios still has some work that needs to be done so the feature can be enabled on both platforms.

[charliecruzan-stripe]

It will now be enabled on Android in the next release, happening next week :)

[bhayatus]

Any update on the iOS side?

[charliecruzan-stripe]

Still blocked on iOS by https://github.com/stripe/stripe-ios/issues/1932

Although you can now customize the Payment Sheet to match your app's own UI, so you may want to explore that option :) docs here- https://stripe.com/docs/elements/appearance-api?platform=react-native

[charliecruzan-stripe]

Added a few more customization options to CardForm in #1048. If you want more control over the look and feel, I would recommend using the PaymentSheet, as that is much more extensible in terms of payment methods, and now allows for intricate UI customization (with a lot more on the way), or the CardField component.

I may close this issue soon, since there are other possibilities besides CardForm that are newer and more recommended. If you have a use case that is only addressed by CardForm and not the the Payment Sheet or CardField, please let me know :)

[dqii]

I would like to advocate for keeping this issue open, since this issue covers both CardField and CardForm. From my understanding, CardField still provides customizability that the PaymentSheet does not? For example, having checkout appear inline in an app.

[charliecruzan-stripe]

Could you clarify- what's the additional customization you'd like added to CardField?

[dqii]

I'd like to be able to use a custom font mostly.

I'd also like to be able to separate out the Card Number, CVV, and Zip Code into three components. I'm able to do this on web. My memory is that you can get this with CardForm, but there's no way to remove the country (in our case, our app is only used in the US).

[charliecruzan-stripe]

Separating out into 3 separately customizable components isn't feasible with CardForm or CardField, that'd require 3 new components :/ but we can investigate custom font

[dqii]

Understood, no worries. Thank you! :)

[wcastand]

would it be possible to pre-filled CardForm or even hide them?

My app only use France so expecting the user to scroll through all countries to find it without a search is a pain and i can't pre-fill the input even if i already have their country and postal code :/

being able to force dark/light scheme directly as a prop would be nice too.

[charliecruzan-stripe]

https://github.com/stripe/stripe-react-native/pull/1044 will add default values

You can force light or dark scheme in your app entirely, but not just for the CardForm component

[estiventhneira]

any update at this to achieve the styles here https://github.com/stripe/stripe-react-native/issues/563#issue-988415912?

[carlosagcp]

Hi! Is there any way to change the color of the placeholder in the CardField?

[charliecruzan-stripe]

@carlosagcp - yes! you can use placeholderColor

[carlosagcp]

It is a property of the component? Because it doesn't recognize the property. I'm using version 0.22.1 of @stripe/stripe-react-native".

[carlosagcp]

@charliecruzan-stripe I already understand it! Thanks a lot!

[aidinb]

How to remove the zip code and country from <CardForm ??