credit card field customisations

Hi @alphax,

a. The place holder text is translatable using any WordPress translation plugin. The custom forms display the language determined by WordPress.
b. Currently you can’t customize the icon style because it’s not reachable via an filters. I’ll take a look at adding that in the next release.
c. Stripe does not have a way to customize the card icons that appear in the card number field.

Kind Regards,

Hi Clayton,

Thanks for the prompt response!

a) I’ll take a look in my translation plugin Loco Translate. My website language is already set to German in WP, so I would have expected this to be picked up and already be translated in a certain way. Hopefully via Loco Translate I can replace the placeholders.

b) Okay, that would be great, because I used the “rounded” design and applied a white background to the input fields, but then the default icon isn’t visible anymore. https://ibb.co/dBsNwrR

c) that’s a shame, I was basically hoping to replicate the apple checkout design https://ibb.co/WD0SB7C

@alphax,

a. My bad, the placeholders are generated automatically by Stripe and the locale is auto determined based on the browser and some other settings that Stripe looks at. I was confusing this plugin’s placeholders with another plugin I developed. Stripe Locale. The placeholder text can be customized but I would have to add that as a new feature for the custom credit card forms.

c. You can always submit your feedback to Stripe so they can potentially implement those options.

Kind Regards

a) no worries. Would you have time to look into this anytime soon or what would be your plan on this? I would really need this.

d) new question: with regards to the security code/CVC, most websites have a ? icon and a tooltip when you hover and/or click on it, to explain to the user what is required and where to find it. Is there a way to show this easily via your plugin? If not, I’d add this manually in the round.php with a hover effect.

a) Stripe auto-determing locale and thus translations is the most dependable way to render translations in my opinion. Don’t you want your customers to see the placeholders in the language that their browser is set to display?

d) Ya you would need to add your own hover affect for that as it’s not something the plugin renders currently.

Kind Regards,

a) ah I believe, I misunderstood then. I read your previous message in a way that changing the cc placeholder can only be done via a customization from your side, but re-reading it, it sounds that it can be achieved via translation. I guess at least for the German translation, which is the default language of my website, it should be possible that way then.

d) not a problem!

@alphax If your browser’s default language setting is set to German then you should be seeing the placeholder text displayed in German. What language are you currently seeing the custom forms placeholder text displayed in?

my browser language is English and the forms are shown in English.

However, the website language is set to German (WP admin -> site language = German). Normally, when I visit checkout pages of other German websites the forms are in German as well, which is what I expected here as well, i.e. the forms pick up the site language (not the browser’s).

@alphax I see. The stripe plug-in allows stripe to internally select the best locale/language to display based on the user’s browser settings.

That is why you are seeing the placeholder text in English instead of German. If you want to customize that I’ll take a look and see if there are any filters in the plug-in to accommodate such a request.

That would be indeed super helpful!

Just to avoid any potential confusion: it would not suffice if the plugin would only pick-up the WP site language setting, i.e. forms would be then in German. I’d like to go a step beyond, and actually customise the text. The shortcut would be to not even worry about what language it’s picking up and just to customise the text, regardless of what language has been picked up for the forms (so it could be a German customised text, even though the forms are set to English because of the browser’s language).

Thanks a lot for your great support!

@alphax

I will have to add a new filter so you can provide your own custom placeholder text. The ability to do that does not currently exist in the plug-in. If you provide your own placeholder text you will also have to add the locale from the website.

If you let stripe automatically determine the language based on the user’s browser settings it will not use your custom placeholders because there is no way for stripe to dynamically translate your custom text.

Reach out to me via the help button located in the stripe plugin settings and I can give you an advanced copy of a version that includes the required filter to accomplish this.

Kind regards,

I’m slightly confused – could you kindly explain what you mean with “you will also have to add the locale from the website”?

Yes, sure happy to turn-off the automatic detection of the language based on the user’s browser.

———————-

One additional question related to the cc fields:

how do you actually change the font-size and font-type of the fields (placeholder & input)?

I have now tried targeting various different elements via chrome inspector, but I’m unable to make any changes.

@alphax

Sorry if my last reply was confusing. Basically you need to provide your own custom placeholder text which you will do through a filter provided by the plug-in.

That filter does not currently exist in the plug-in so I have to add it. I don’t want to release a new version of the stripe plug-in for one filter so you will need to reach out to me via the help button so I can provide you with an updated plug-in version.

I am going to set this request to resolved.

Kind regards

All clear now, thanks. Yes, of course, I’m all thankful anyway, so whatever works best, I’m fully flexible.

Ps. the version I currently have is already an advanced/customized version, I believe. Perhaps you remember, I had the issue after first installation back then that I couldn’t use the plugin without a manual setup (plugin version back then only had an automatic connect to stripe). So I’m not sure if I’d loose that functionality by manually installing another customised version? You had added several fields and a “connection test” to test the manual connection. Perhaps that’s already part of the public / latest version anyway, so potentially nothing to worry here.

Ya all that functionality is already part of the core plugin.