Woocommerce Stripe - CC fields too small

Support
#1

I’m using X with Woocommerce and the (genuine) Stripe plugin.
If I use theme Twenty Seven then the Credit Card fields are OK but using X the credit card fields are all collapsed (vertically).
I’ve tried adding some CSS to fix but I’m not a CSS guru.

Any ideas?

#2

Hi jinda,

Please consider that you are talking about a 3rd party plugin conflict which is outside of our support scope. We will do our best to find out the problem cause but we will not be able to help you fixing it and you will need to contact the original developer of the plugin.

Actually it is not a matter of CSS. What you see on the checkout page is a placeholder for the actual tripe code which is embedded via Javascript:

So acutally the problem is that there are many Javascript errors on your website which might cause the issue. Please follow the steps below:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  3. Remove custom CSS and Javascript from the options and/or Child Theme and test the case.
  4. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

#3

Thanks Christopher,

I did suspect a rogue plugin but I’m using just Woocommerce and the Stripe plugin provided by Woocommerce. I’ve now deactivated all other plugins apart from Cornerstone.
And, my site is 100% up-to-date.
I’ve tried a few themes and the Stripe interface does work on others … for example Twenty Seventeen. But when I swap to X theme the credit card fields become unusable.
I’ve tried Edge, Chrome and Firefox … all exactly the same so I don’t think I have a cache issue.
Anything you can do to help is appreciated.
Regards,
Richard

#4

Hello Richard,

I can confirmed the issue. This could be a bug in the latest release. I’ve submitted this to our issue tracker so the developers will be made aware of it. Once they’ll have it fixed, it will be updated and rolled out in the next release update cycle.

Thank you for your understanding.

#5

OK, that’s great Thank-you.

Is there a short-term fix we could apply via “Additional CSS” ?

#6

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.wc-stripe-elements-field {
min-height: 30px;
}

Hope it helps :slight_smile:

#7

That makes the height correct but the fields are unable to accept inpout (can’t click or tab into them).

Thanks,
Richard

#8

Hey Richard,

We’re sorry about that. CSS won’t solve this issue because the Stripe field isn’t loaded. What you see is just the container. The payment form won’t be usable.

Regretfully, we would not be able to test this as support staff because this could not be investigated quickly so our development team will need to check this.

We just wanted to confirm if you’re using the WooCommerce Stripe Payment Gateway plugin? The access level you gave us wasn’t enough so we could see the plugins you’re using.

Thanks.

#9

Hi,

Yes, That’s the right plugin.
I changed your access but I’ve restored it again now.

I’m looking forward to outcome.

Thanks,
Richard

#10

Thanks, Richard. I’ve added the details to my report so it might help our development team with the investigation.

For now, may we ask the you use PayPal temporarily?

We’re sorry for the inconvenience.

#12

Hi,

Do you have approximate time for a fix? Is it days? Weeks? Months?
Just interested to know so that we can plan best course of action.

Thanks,
Richard

#13

Hi Richard,

I can confirm that the issue has been submitted to our issue tracker. However we cannot provide any ETA, but rest assured that our developers will look into it.

Thanks for understanding.

#14

Any update on this? Same issue here.

#15

Hi dlfx,

Please consider that we will not update this thread regarding the bug report. You will need to follow the Changelog which will show if the problem is fixed or not.

Thank you for your understanding.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.