Credit iframes have width 1px

  • Resolved dzseti

    (@dzseti)


    4 years, 5 months ago

    The Woocommerce Stripe plugin presents iframes with a width of 1px at checkout (simialr to another issue on Apple pay button that is unresolved and may be related to the use of Elementor)

    class-wc-gateway-stripe.php includes the following at around line 300:

    <div id="stripe-card-element" class="wc-stripe-elements-field">
   <!-- a Stripe Element will be inserted here. -->
</div>

    When JS replaces the inner elements the iframe inserted includes style with “width: 1px !important”

    A simple work around is nigh impossible in CSS, because the element style includes “!important”. Even a JS would be very complex, because changes would have to be made only after the inner elements have been inserted

    Any ideas how to sort this; even a workaround would be good

    • This topic was modified 4 years, 5 months ago by dzseti. Reason: typo
Viewing 9 replies - 1 through 9 (of 9 total)

  • I think I may be experiencing a similar issue. Most of the form data isn’t loading in.

    Fields are only a few pixels in height, and upon inspection I’m seeing.

    <!-- a Stripe Element will be inserted here. -->

    Thread Starter dzseti

    (@dzseti)

    How are you inspecting it? Viewing the page source will show you the html before any JS has executed; if you use the developer tool (ctrl+shift+i) you can inspect the element as modified

    In my case the post insertion html was a div and an iframe: the iframe contained the the style attribute “width: 1px;’

    My issue was related to the Async JavaScript plugin. I disabled it on the checkout page and it fixed my issue. Not entirely sure if our problems are related.

    Thread Starter dzseti

    (@dzseti)

    I will see what happens when switching off other plugins. I don’t use the one you mentioned, but another plugin might be causing this

    Thread Starter dzseti

    (@dzseti)

    By turning on the option to display the credit card details inline I have at least got a workaround for the problem

    Plugin Support AW a11n

    (@slash1andy)

    Automattic Happiness Engineer

    Hey there!

    This error is something we only see when there’s something conflicting, causing JS errors.

    This kind of problem is usually caused by either a conflict with your theme or with another plugin.
    ?
    The best way to determine this is to:

    • Temporarily switch your theme to Storefront
    • Disable all plugins except for WooCommerce
    • Repeat the action that is causing the problem

    If you’re not seeing the same problem after completing the conflict test, then you know the problem was with the plugins and/or theme you deactivated. To figure out which plugin is causing the problem, reactivate your other plugins one by one, testing after each, until you find the one causing conflict. You can find a more detailed explanation on how to do a conflict test here.

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    – Joey

    Above all solutions didn’t resolve my problem but below css resolved my problem.

    <style>.StripeElement {width: 100%;}</style>

    This last solution didn’t work for me either. But thanks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Credit iframes have width 1px’ is closed to new replies.