custom colors for text in basic form?

[GalushkoVasiliy]

Have this plugin setting for change text color? the default is black, I need white

[RobertGardner]

Stripe does support some theming, but there is no explicit cross-platform support for it in the plugin. You will need to write platform-specific code to enable this theming.

Stripe's documentation for theming on iOS is here: https://stripe.com/docs/mobile/ios/standard#theming

I could not find documentation for theming on Android. I do not know if they support it.

[sebj54]

Hi there! Just passing by as I need also to theme my Stripe input (font size especially).

I checked the documentation and found theming for Android: https://stripe.com/docs/mobile/android#styling-the-card-widget

I don't understand very well where all the files needed should go and if it is already possible with current plugin version.

If it is, I would be very happy to write some docs about it in a PR! Given on the iOS documentation, I'm not sure there will be a cross platform way to do theme the widget by the way.

[RobertGardner]

Theming is not currently supported in the plugin in a cross-platform manner. However, it should be fairly easy to add theming for the iOS "standard integration" with the current plugin.

The Stripe iOS documentation outlines the process. In NativeScript you'd do something like:

if (ios) {
  STPTheme.defaultTheme().font = UIFont.fontWithNameSize("fontName", 20);
  // and so forth
}

The Android documentation you point to appears to be only for the "custom integration" and only for the CardInputWidget. If that's what you are trying to style, you could try what's documented there, though it may require a PR to get it to work. I haven't found documentation on how to style the dialogs in the "standard integration".

I'm happy to answer any questions, though unfortunately I'm not currently in a position to do much more than that.

[sebj54]

Thank you for your quick answer!

I should tell you that I have actually no knowledge about Android or iOS native development. So I don't understand very well the code in Stripe documentation.

I didn't know there were different ways to integrate Stripe in an Android app, what is the "standard" integration?

On the Stripe Android repo, they also mention the CardInputWidget and specify that it has a minimum width of 320dp. Maybe that is my problem and it cannot be solved by reducing font-size:

Except by removing the page padding or reducing font-size, I don't know how to fix this issue. What do you think?

PS: As this may be off-topic, I can edit my comments and maybe post a new issue for this.

[RobertGardner]

The Stripe Android documentation says it supports Android themes, documents here. In the "Apply a style as a theme" section it suggests you can create a theme that applies only to a single view. I don't know how to do what they are outlining there in NativeScript, but you can probably find documentation on it.

However, if the documentation says it needs at least 320dp then you may not have any choice but to widen your dialog.

Otherwise, all I can suggest is getting in touch with Stripe support since it is their code that is handling the card input widget. They are pretty responsive.

FYI- the standard integration manages the UI for collecting and storing credit cards, shipping information, etc. It will take care of making sure your card input widget draws correctly. On the other hand, it is less customizable and takes over the entire screen. It is what I use in my app and I'm quite happy with it. You can read about it here. There's a screen shot toward the bottom of the page.

[sebj54]

I tried to make it work but all my attempts didn't change anything. So I followed your advice and reduce some padding to make the input fit.

I'll be glad to know how to style the input anyway, as I may need it for other projects.

Thank you for your time and your hints on this problem!

[standevo]

Theming is not currently supported in the plugin in a cross-platform manner. However, it should be fairly easy to add theming for the iOS "standard integration" with the current plugin.

The Stripe iOS documentation outlines the process. In NativeScript you'd do something like:

if (ios) {
  STPTheme.defaultTheme().font = UIFont.fontWithNameSize("fontName", 20);
  // and so forth
}

The Android documentation you point to appears to be only for the "custom integration" and only for the CardInputWidget. If that's what you are trying to style, you could try what's documented there, though it may require a PR to get it to work. I haven't found documentation on how to style the dialogs in the "standard integration".

I'm happy to answer any questions, though unfortunately I'm not currently in a position to do much more than that.

@RobertGardner I really appreciate your work. I tried your fix on iOS but it has no any effect. I placed the code in component where I use the plugin and also in first component app.component.ts

...
declare const STPTheme: any;
...

 if (isIOS) {
      STPTheme.defaultTheme().primaryBackgroundColor = UIColor.whiteColor;
      STPTheme.defaultTheme().secondaryBackgroundColor = UIColor.grayColor;
      STPTheme.defaultTheme().secondaryForegroundColor = UIColor.greenColor;
      STPTheme.defaultTheme().primaryForegroundColor = UIColor.cyanColor;
      STPTheme.defaultTheme().accentColor = UIColor.yellowColor;
    }

One more thing:
In development environment by default (in dark mode) the input's background is black with white text but in production when I try to compile with tns build ios --release --for-device --env.production --env.sourceMap --env.uglify the background and text is white. So, the previous fix can be handy in this cases, but is not working.

[RobertGardner]

Unfortunately, I know very little about Stripe's theming. The documentation for iOS is here. The docs suggest it works for CreditCardView also, but I can't find a diagram like this that shows how the fields apply.
The Stripe API docs for [STPTheme](https://stripe.dev/stripe-ios/docs/Classes/STPTheme.html#/c:objc(cs)STPTheme(cm)defaultTheme) say that the components will pick up the default theme if you don't supply a theme in the constructor. The plugin does not supply a theme, so that should apply here. Make sure you set thedefaultThemebefore creating theStripePaymentSession` for the first time.

I would try this on non-dark mode as well. I've found strange CSS behavior in iOS with dark mode in my NS app. It seems to automatically change black-to-white and white-to-black in dark mode. So it may be working, but you're seeing strange effects in dark mode.

Finally, if you can't get this to work in your own components, you could play around with the plugin code. Try creating an STPTheme, setting your properties in it, and adding it as a constructor parameter. (You can examine the Stripe iOS docs to see how to call the constructor.) You can modify standard.ios.js in your node_modules folder directly. If it works, I can show you how to update the plugin to take an optional theme.

[standevo]

@RobertGardner, ok thank you for the hints. I will look at this asap and come back with the updates. Hope my clients will have only light mode for a while :D