Font + background color combination in CC fields are unreadable

[rcroman]

Describe the Bug

Font/background color in credit card fields is light yellow on white, making it unreadable.

To Reproduce

• Visit https://www.rc-astro.com
• Click on "Purchase" for any product
• Navigate to checkout page – credit card via PayPal will be the first payment option
• Enter a few (valid) random digits for the CC number. Invalid entries are readable (red on white). Valid entries are unreadable.

Screenshots

Expected Behavior

Font/background color choices should result in readable entries.

Actual Behavior

Font/background color result in unreadable entries.

Environment

• WordPress Version: 6.5.5
• WooCommerce Version: 9.0.2
• Plugin Version: 2.8.1
• Browser [e.g. Chrome, Safari] and Version: Safari latest. Chrome latest.
• Any other plugins installed

[rcroman]

It looks like my theme base text color is being used as the color for these fields. If I could simply change the background color to something other than white, the text would be readable.

[InpsydeNiklas]

Hi @rcroman, as you noticed, your theme controls parts of the card field styling for Advanced Card Processing. That said, as far as I am aware, PayPal currently does not support changing the background color of the card fields. Here is a list of the supported CSS properties: https://developer.paypal.com/docs/checkout/advanced/customize/card-field-style/#link-supportedcssproperties

So you could use custom CSS to modify the text color, and maybe add some padding to normalize the field height:

#ppcp-credit-card-gateway-card-number, 
#ppcp-credit-card-gateway-card-expiry, 
#ppcp-credit-card-gateway-card-cvc {
    color: #0e1116; 
    padding: 10px;
}

More details on how to customize the look of the card fields can be found here: https://woocommerce.com/document/woocommerce-paypal-payments/#customizing-hosted-fields

Considering this is not directly a bug in the plugin but more a compatibility issue with the default theme styling, I'll close this issue. If you need additional guidance on finding the right styling configuration for your setup, I recommend contacting our support team directly from here: https://woocommerce.com/document/woocommerce-paypal-payments/#get-help I hope this helps!

[rcroman]

Perfect... thank you!