#alainux_unexpected

1 messages · Page 1 of 1 (latest)

faint sandalBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1306975484667494440

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

robust zenith
jolly whale
#

hi! do you have a link/instructions on how I can reproduce this?

robust zenith
#

It happens for me on production too. You could create a free user in https://www.kittl.com, log in to the editor, and then click on your account -> Upgrade Plan. The payment left block is fully controlled by Stripe Elements.

As you can see in the recording, it loads briefly and then collapses and leaves a blank space. There are no errors in the console.

jolly whale
#

any chance you can give me some credentials of a test account or a more self-contained repro?

robust zenith
#

The direct link to the editor is https://app.kittl.com but you can also navigate by clicking on the header button

image.png
Kittl - Join the design revolution

Kittl is the most intuitive and easy-to-use design platform which helps you to create stunning designs that impress everyone. Easily learn new design techniques and improve yourself to become a better creator.

jolly whale
#

thanks, I'll have a look in a bit

#

I had a look and it doesn't happen for me, I've tried a few times and the PaymentElement always loads. Is there something more specific or a specific browser I need to reproduce this?

#

my only guess would be that you have a change in your React state or a useEffect call that results in that part of your component hierarchy getting conditionally excluded (like you have {{shouldShowPayment && <PaymentElement> ...}} and shouldShowPayment is flipping back to false for some reason

open rivet
#

Hey! I'm Bruno, working together with Alain. Nice to meet you 🙂

We noticed that the issue happens on Google Chrome with an active Google Pay wallet with an active card

#

And apparently it doesn't happen on Android devices, only on Desktop

#

Is there any other information I could give to help you reproducing the problem? Maybe a stripe cookie, or customer id?

jolly whale
#

on Google Chrome with an active Google Pay wallet with an active card
hmm that is my exact set up.
As I said I can't reproduce it. How do you know it's a not a logic bug like I described? Or that it's not caused by a browser extension perhaps?
I don't think IDs/cookies would tell us much, ideally we could reproduce it on our end.

#

like I can see that you have a loading spinner so you do conditionally render the part of the DOM that the PaymentElement is in, so you do have the possibility of bugs there that end up with that not rendered. It's hard to say without seeing your exact code (like presumably you listen to our ready event https://docs.stripe.com/js/element/events/on_ready or something, or maybe not) and a reproduction locally

open rivet
#

I'll do a bit more investigation, but we thought it could be related to Stripe since it only occurs when Google Pay gets involved somehow 🤔

The page works fine on Safari with Apple Pay being enabled, Firefox and also on Chrome when G Pay is not activated