CSS Fixes

@taxick thanks for reaching out. upon looking at your link this CSS will probably work for you:

.charitable-donation-form .custom-donation-input {
  color: black;
}

div#charitable_stripe_card_field {
  color: #white !important;
}

Because the Stripe CC fields are within an iFrame, this might make it more difficult, although the above SHOULD work as you can see in the screenshot. The CSS actually makes the div that contains the CC white. For donation forms – especially CC info – we do find that a light background with dark text works best and prevents the most input errors. In any case, hope the above helps!

• This reply was modified 1 year, 11 months ago by WPCharitable.

Hi @wpcharitable

Thanks for your reply. – I really appreciate it! I can get the Card number to work for me…

1. I have cleared all my cache on the server!
2. I have try to go the page in “private mode”
3. Try using my mobile
4. use edge browser with all data cleared

What can be wrong???

I have used this:

.charitable-donation-form .custom-donation-input {
  color: black;
}

div#charitable_stripe_card_field {
  color: #white !important;
}

Regards:

Thomas

• This reply was modified 1 year, 11 months ago by Thomas Due Halfdaner.

Hi @taxick,

We took a look at that same link and noticing there is no more Credit/Debit Card textbox field – doesn’t appear to be populated. Not sure what happened on your end – double check your Stripe Connection settings (make sure you aren’t using test or live if your Charitable isn’t set to test or live).

There might have been a typo in the CSS we supplied, so let’s try this next: remove the # from #white. Thanks!

HI @wpcharitable

Thanks for you reply…

My css now look like this:

.charitable-donation-form .custom-donation-input {
  color: black;
}

div#charitable_stripe_card_field {
  color: white !important;
}

I have tried to disconnect Stripe and activate it again. Both Charitable and stripe are set to live.

I have reloaded my cache on the server

Did it still not show up on your side???

EDIT: BTW:. You are welcome to take a look at my admincp.. (If needed)

• This reply was modified 1 year, 11 months ago by Thomas Due Halfdaner.

@taxick the good news is that we now see it – it might have been a caching issue on our side or something you did.

the bad news is that it appears some CSS tricks that worked before adjusting the Stripe iframe which is added by JavaScript don’t appear to be working. the color CAN be passed to Stripe through their API but it’s something that Charitable currently doesn’t provide an easy way for users. It would require switching to a debug mode so you can edit a javascript file and either recompile the JavaScript file or leave your website in test mode. We can walk you through those instructions if you want to give it a try.

In the meantime, I’ll communicate the changes to Stripe customization to our team and see if we can get some sort of better method to customize this particular field of Stripe’s iframe to users.

Thanks! Let me know if there’s any other questions.

Hi..

Im sorry but the solution got a little bit to hard for me… (Im a noob)

I found another plugin!

Sounds good @taxick. I’ll still rely this conversation to our team to see in the future how we can get customizations through their API.