alphax

Hi Clayton,

Thank you for the guidance!

I have followed that as best as I could and came up with the following:

add_filter('wc_stripe_get_custom_forms', 'x_stripe_custom_font');
function x_stripe_custom_font() {
        array(
            'rounded'    => array(
                'elementStyles'  => array(
                    'base'    => array(

                        'fontFamily'          => '"Muli", sans-serif',
                    ),

                ),
                'elementOptions' => array(
                    'fonts' => array( array( 'cssSrc' => 'https://fonts.googleapis.com/css2?family=Muli:wght@300;700&display=swap&ver=5.5.1' ) ),
                ),
            ),
        );
};

But for some reason it’s not working, it produces an error when I load the checkout page (and the cc fields are not visible):

Warning
: Invalid argument supplied for foreach() in
/home/customer/www/auraly.de/public_html/wp-includes/class-wp-list-util.php
on line
157

Could you help me a bit further how to fix the code, so I can load the Muli font?

Thanks a lot in advance!

• This reply was modified 3 years, 8 months ago by alphax.

Hi,

thanks a lot for your response.

For developing purposes it would indeed helpful to force a language as I don’t want to change my browser language from English to German. Would that be something you could easily integrate?

However, most importantly, could you please clarify how I can adjust the translation? I understand there is some translation already in German and I’d like to tailor it to my needs.

Many thanks
David

In addition to my last reply, I also have a CSS that any text field in :focus gets a box shadow and border. However, for the cc fields, this isn’t applied/working.

How would I apply this to the cc fields as well?

Thanks a lot!!

input:focus, textarea:focus {
    box-shadow: 0 0 5px rgb(251 185 171 / 75%);
    border: 1px solid rgba(251,185,171,.5);
}

Solved it myself. Given it was showing a German text, I was able to just change the woocommerce .po file and translated it differently.

Thank you Clayton, that’s very helpful!

I also came across this guide, which refers to JavaScript amendments but the attributes should be the same, so I was able to also set different styles for valid and invalid input: https://stripe.com/docs/js/appendix/style

The only 2 things I couldn’t get to works is the font-family and font-weight. I’m using ‘Muli’ google font, but when I set it:

‘fontFamily’ => ‘Muli, Sans-serif’,
or
‘fontFamily’ => ‘”Muli”, Sans-serif’,

nothing happens.

Same when I apply the font-weight:
‘font-weight’ => ‘bold’,

While the font-weight is not as criticial, it would be essential to have the same font-family across the page. I could imagine, the issue may be with the iFrame (?). I there any solution to use Google Fonts? If it has to be loaded again in the iFrame, I’d probably just use another standard font to keep it lean from a performance perspective.

Also grateful if you could kindly help me on this additional ask (I added it yesterday as an update to my reply but our replies where then overlapping and I believe you didn’t see it anymore):

—
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.

Okay great. I sent you an email via the Help Tool in the plugin, I hope that reached you. Thx

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.

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.

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!

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).

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!

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.

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

So this worked well! I uploaded the icons to here:
/wp-content/themes/listify-child/woo-stripe-payment/icons/

and then changed the code in the php file to the following:

src="<?php echo '/wp-content/themes/listify-child/woo-stripe-payment/icons/' . $id . '.png' ?>"/>

Note that I changed the .svg to .png to reflect the correct file type.

Thanks again Clayton!