|
Vittorio Pennazio
|
October 9, 2023 at 5:52 pm
Hi,
When going to the checkout page the 3 fields for credit card payment with Stripe don’t appear if using a mobile browser – they work normally on desktop
screenshot: https://paste.pics/a11d9fa1228a0226f0407534169ac962
Here is how the code looks like when inspecting element on desktop:
<div id="stripe-card-element" class="StripeElement StripeElement--empty"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: medium !important; display: block !important; background: none !important; position: relative !important; opacity: 1 !important;"><iframe name="__privateStripeFrame0046" frameborder="0" allowtransparency="true" scrolling="no" role="presentation" allow="payment *" src="https://js.stripe.com/v3/elements-inner-card-5d51f4bc9cfaf543da2318b91759a1c9.html#wait=false&mids[guid]=e3bfee06-4eee-443f-b457-7313612d244281b3bc&mids[muid]=958cb21a-c361-4b93-9da2-2f7181f88583c15041&mids[sid]=f213d3ff-68ae-4f37-831e-e6955f4bb3535dd8af&rtl=false&componentName=cardNumber&keyMode=live&apiKey=pk_live_7qujIPz2UyMcFXygUp2oJ315&referrer=https%3A%2F%2Finnovationroundtable.com%2Fregister%2Fevent-registration%2Fregistration-checkout%2F%3Futs%3D1696893908%23checkout&controllerId=__privateStripeController0041" title="Secure card number input frame" style="border: medium !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; transform: translate(0px) !important; color-scheme: only light !important; height: 16.8px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: medium !important; display: block !important; position: absolute !important; height: 1px !important; top: -1px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: none !important; pointer-events: none !important; font-size: 16px !important;"></div></div>
and here inspecting element on mobile
<div id="stripe-card-element"></div>
…like if the field is not loading at all.
Example of payment page where we are experiencing the problem (at check out):
https://innovationroundtable.com/register/summit/summit-dinners-registration/
Thanks for your help!
|
|
Rio
|
October 9, 2023 at 9:35 pm
Did you modify your function.php and do any hooks that restrict some CSS to load on your mobile? it seems the espresso_stripe_payment_css-css is not loading on your mobile screen.
If you did not do any hooks, can you do the following.
You can use https://wordpress.org/plugins/health-check/ or any similar plugin.
You can do the above using Troubleshooting mode:
Tools -> Site Health -> Troubleshooting -> Enabled Troubleshooting mode.
That will disable all plugins and switch to a default theme and then allow you to enable specific plugins for troubleshooting. Once disabled you will revert back to the current state.
you can also test the theme if there’s possible conflict. you can use that plugin to check this.
Thanks
|
