#rdsdaw2022-elements-browser
novel lava
no errors
I do see Failed to load resource: the server responded with a status of 401 () but it is for https://play.google.com/log?format=json&hasfast=true&authuser=0
So should not be related
thin socket
looking
novel lava
thank you
thin socket
what version of Chrome are you on?
For context, I just tried on
Version 100.0.4896.60
and PaymentElement (as well as CardElements) render just fine for me
thin socket
yeah v99.x should be fine too.
Can you add log lines to your JS code to see how far it even gets?
like e.g. is a PaymentIntent client_secret created and returned to your webpage?
Is an instance of Stripe.js initialized and Elements too?
is your code getting to the point of mounting the PaymentElement on a div?
novel lava
Yes, I can see the client secret correctly (the same one that is returned on Firefox as well) after paymentElement.mount("#payment-element");
thin socket
can you add a breakpoint after PaymentElement is mounted and then find it in the DOM using the browser console? trying to see if it has a width/height and has the internal iframed Stripe components (e.g. in my case, upe-element is my div with PaymentElement stuff bundled into it)
novel lava
yes I see it too. Sending the screenshot now
payment-element is the div where Stripe.js injects the Payment Element
thin socket
ah gotcha ok so PaymentElement does look like it is being mounted. Not showing up still
what are the dimensions of payment-elemnet div on your end?
novel lava
No defined dimensions.
<div id="payment-element">
<!--Stripe.js injects the Payment Element-->
</div>
thin socket
I meant when you hover over it, do you see the width / height ?
thin socket
and if you log out your payment-element html element, is it hidden/invisible by any chance?
novel lava
I do not see any hidden classes etc on the div.
I do see this on colsole right after 5 dynamic actions to load 5 palyment element fields.
could it be because of this? But the error is from some play.google.com
I do not see this on Frirefox
Also found that the payment element fails to load on Edge as well
It only loads on Firefox since Friday
novel lava
just did...same issue in incognito Chrome as well
thin socket
is your page publicly accessible that I can try it out on my end?
novel lava
It is not accessed publicly right now. But I have more screenshot I think might help.
The failed to load resource error we were seeing above in the screeshot point to these. Looks like there is error loading elements-inner-payment
thin socket
AFAIK not loading GPay shouldn't fail to load PaymentElement in its entirety but let me check.
In Edge when you can't load, are there errors as well? Or nothing?
novel lava
Nothing on Edge
thin socket
are you able to publicly tunnel your local page through a tool like ngrok? That would help to have a look
also mind checking if it works here for you: https://stripe.com/docs/payments/payment-element
and also renders here: http://4242.io/payment-element/
that helps rule out that it isn't an issue on your browser / GPay
novel lava
It rendered on both the links you gave on Chrome for me
I will give a username/pwd to login to my site
zealous briar
👋 @thin socket had to hop out, but I'm around to help!
Just checking in - are you going to send over directions to use your site?
novel lava
yes
https://nc.dev.promote.incircuit.com/amd193a/f?p=2103:4034:9312515369833:::4034::
username: PUBLICUSER1@TEST.COM
pwd: alt_15GGPmCJ7YA
you will need to click on the shopping cart icon on upper left corner and click on proceed to checkout.
You will see that on Firefox you get the payment elements loaded. Thanks for checking.
zealous briar
👍 Give me a few minutes to take a look
novel lava
ok
zealous briar
When I go into chrome, I see that everything is loading correctly, but the div + iframe are too small to actually show anything
novel lava
It is the same code on Firefox as well
it is strange that suddenly on Chrome we are seeing the difference
Because I did suspect that and make the payment-element full page wide, but still I was not able to get the elements loaded
so I switched it back to how it was supposed to be
novel lava
I see that the height of the iframe is 2px. But I did not manually make it 2px...that is supposed to be loaded from stripe, which it does correctly on Firefox and has height of 313.867px
zealous briar
Yeah I'm not exactly sure what about your specific integration is resulting in the 2px height - do you have any css styling that may be affecting this?
novel lava
No. it would have affected Firefox as well.
zealous briar
When I delete the below stylesheet it allowed Stripe.js to show up full height - I don't know specifically what that stylesheet does, but I'd suggest your start there to pinpoint what may be the issue
<link rel="stylesheet" href="/i/themes/theme_42/1.4/css/Core.min.css?v=21.2.5" type="text/css">
novel lava
from where did you delete?
zealous briar
I just opened the chrome inspector and removed that line while I was testing on my end
novel lava
I see
zealous briar
I need to head out, but if you have other questions @median lichen can help