rabi-elements-appearance | Stripe Developers | Page 1

vital vineBOT Aug 23, 2023, 8:51 PM

#

humble mountain Aug 23, 2023, 8:52 PM

#

@flat brook Can you provide a bit more details and context? There are numerous ways to integrate Stripe and many UI components. What are you really trying to do, what does your code look like, what have you tried?

#

rabi-elements-appearance

flat brook Aug 23, 2023, 8:53 PM

#

I'm using wordpress woocommerce.

humble mountain Aug 23, 2023, 8:54 PM

#

that's just a picture

flat brook Aug 23, 2023, 8:54 PM

#

When i try to overwrite css it's not changing te color

humble mountain Aug 23, 2023, 8:55 PM

#

But if you use a third-party system we can't really help here. We don't write or control that code and you can't control that code either. Have you spoken to the developers of that plugin?

flat brook Aug 23, 2023, 8:55 PM

#

I'm using stripe plugin and this is my website i have an access all the files

humble mountain Aug 23, 2023, 8:57 PM

#

Ah gotcha, you mentioned "wordpress woocommerce" without any context I asked so I assumed it was their official plugin

#

So ignoring the picture: What does your code look like, what did you try, what's not working?

flat brook Aug 23, 2023, 8:58 PM

#

sure I am sharing the css and php code as well

humble mountain Aug 23, 2023, 8:58 PM

#

I don't need any PHP. This is a client-side UI, it should be purely Javascript and explaining exactly what integration you're using

flat brook Aug 23, 2023, 9:00 PM

#

#wc-stripe-cc-form input{
color:#fff !important;
}
#stripe-payment-data input{
color:#fff !important;
}
.ElementsApp .InputElement {
color: #fff !important;
font-size: 15px;
}
.ElementsApp .InputElement::after {
color: #fff !important;
font-size: 15px;
}

#

.wc-stripe-elements-field{
border: 1px solid #ddd;
color: #ffff !important;
margin: 5px 0;
padding: 20px 10px !important;
background-color: transparent ;
}

humble mountain Aug 23, 2023, 9:00 PM

#

yeah you can't do that

#

you can't just go and force override our CSS that way

flat brook Aug 23, 2023, 9:01 PM

#

Oh

humble mountain Aug 23, 2023, 9:01 PM

#

Which element are you using? CardElement or PaymentElement?

flat brook Aug 23, 2023, 9:01 PM

#

I'm using credit card option

#

this one

humble mountain Aug 23, 2023, 9:02 PM

#

https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style

#

https://stripe.com/docs/js/appendix/style?type=card

#

you have to use this when you initialize/mount that element

flat brook Aug 23, 2023, 9:04 PM

#

can you simply share the code so i can replace it? it would be very easy for me

humble mountain Aug 23, 2023, 9:06 PM

#

I can not sorry, this is your job as the developer, I can't write your code

flat brook Aug 23, 2023, 9:07 PM

#

do i need to add this code in js?

var element = elements.create('card', {
style: {
base: {
iconColor: '#c4f0ff',
color: '#fff',
fontWeight: '500',
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
':-webkit-autofill': {
color: '#fce883',
},
'::placeholder': {
color: '#87BBFD',
},
},
invalid: {
iconColor: '#FFC7EE',
color: '#FFC7EE',
},
},
});

#

and change the color code only?

humble mountain Aug 23, 2023, 9:07 PM

#

Step 1: try it, see what happens

flat brook Aug 23, 2023, 9:09 PM

#

getting this error Uncaught ReferenceError: elements is not defined

humble mountain Aug 23, 2023, 9:10 PM

#

Did you define that variable anywhere?

flat brook Aug 23, 2023, 9:10 PM

#

no i just copy the code from the link you shared

humble mountain Aug 23, 2023, 9:11 PM

#

Okay then that can;t work right?

flat brook Aug 23, 2023, 9:11 PM

#

yeah

humble mountain Aug 23, 2023, 9:11 PM

#

You're the developer, you said you integrated Stripe yourself adn wrote all the code. Your code must already be creating that card element instance somewhere

#

So what you need to do is find the bit of code that does that elements.create('card',...) and modify it to pass the custom style

flat brook Aug 23, 2023, 9:13 PM

#

i just install the plugin the in wordpress and i'm using woocommerce for my e-com website everything works fine but what i can't do is just change the text color of stripe paymentt input fields

#

I'm trying to find why it's so complicated just to change the text color

humble mountain Aug 23, 2023, 9:14 PM

#

see, now you say you installed a plugin, I asked earlier and you said no

#

It's complicated because you just installed someone else's code they wrote and you don't have control over it

#

if you write your own integration, it's really easy to style. If you use someone else's code you can;t, not unless you read their code and change it

flat brook Aug 23, 2023, 9:16 PM

#

yeah but i'm using stripe offical plugins for woocommerce websites

humble mountain Aug 23, 2023, 9:19 PM

#

I mean sure but the whole point of the plugin is that you install it and it works, not that you are allowed to go and change its code. It was also built by WooCommerce not Stripe (we know nothing about it)

#

Ultimately: what you want to do is impossible. Either you use the plugin as is (and the style options would be a feature request for them to build) or you build this yourself (and then the docs I shared would allow you to do that)
I unfortunately can't think of a better way

flat brook Aug 23, 2023, 9:19 PM

#

can i use this code to modify css
<?php
function my_theme_modify_stripe_fields_styles( $styles ) {
return array(
'base' => array(
'iconColor' => '#666EE8',
'color' => '#31325F',
'fontSize' => '15px',
'::placeholder' => array(
'color' => '#CFD7E0',
),
),
);
}

add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

humble mountain Aug 23, 2023, 9:21 PM

#

no you can't

flat brook Aug 23, 2023, 9:23 PM

#

reason?

humble mountain Aug 23, 2023, 9:24 PM

#

Because it will not work? To style our UI elements, which are in an iframe you have no control over, you need to pass the style when you initialize said UI elements, with the code I shared. For that to work, that third-party WP function needs to get the style and pass this to our UI element.

Maybe this is already implemented in the plugin you use, but I don't know that plugin's code and whether that's what you're trying to say or do.

flat brook Aug 23, 2023, 9:26 PM

#

so when your customer install plugin in wprdpress site they don't edit even input text color ? i think it's so wired cause stripe plugin have millions of activation on wordpress with woocommerce

#rabi-elements-appearance