How to customise stripe gateway fields

Hello,

can you please tell me how I can customise the credit card fields of stripe (font color, padding)?

Right now it is white on white background. In the payment methods module (created an own layout for the checkout) there is no option for that.

So I tried CSS but it is not working:
.Input, .p-FauxInput {
background-color: #1a1a1a!important;
font-size: 16px!important;
padding-bottom: 10px!important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 10px!important;
}

What I want to change:
1. Change font color to #1a1a1a
2. Add padding top and bottom of 10px
3. Hide images of the payment providers (visa, master, …)

Thanks,
Christian

Attachments:

You must be logged in to view attached files.

Hello Christian |cswebdesigns,

Thanks for reaching to us.

Fields are inside iframe tag and you cannot directly style the iframe content.

For instance, you could add a border, background color, or other styling to the containing element to make the input fields stand out more. You can find more information about here https://woocommerce.com/document/woopayments/customization-and-translation/customize-payments-appearance/

Regards,

Thank you, I could fix it with this documentation 🙂

Hi Christian |cswebdesigns,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts