vitor-paixo_unexpected

[feral kite]

👋 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/1296378873990090796

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

[empty pivot]

Hi there. I will send some images so you can get a better ideia.

[lean sail]

At the left side, it looks like there is an extra (MM/YY) in the expiry label 🤔

[empty pivot]

yap but this is payment elements

[lean sail]

Could you share your website, so that I can take a look?

[empty pivot]

so the layout creation is by the stripe rules.

yap e will send a client site

https://seaalgarve.com/

Click on Book Now at upper right corner

Choose in dropbox - Benagil Cave and Coastline
On date input, please choose some day in dezember (due booking since this is live) and then click book

Add some pax -> next
Go to summary

Add some data in mandatory inputs, check box to accept terms and "book now", then it will appear payments

[empty pivot]

Another curious piece of information, this happens in google chrome, but not in firefox

[red wraith]

👋 taking over for my colleague. Let me catch up.

[empty pivot]

good morning tarzan, yap sure

let me know if you need any more info

[red wraith]

it's correct

which version of chrome are you using?

[empty pivot]

you used chrome for the website i send?

v129.0.6668.91

you can try on this one:

https://algarexperience.com/experiencias/grutas-de-benagil-e-costa/

and do the same process

Click on Book Now at upper right corner

Choose in dropbox - Benagil Cave and Coastline
On date input, please choose some day in dezember (due booking since this is live) and then click book

Add some pax -> next
Go to summary

Add some data in mandatory inputs, check box to accept terms and "book now", then it will appear payments

i updated chrome, but its still happening

[red wraith]

you used chrome for the website i send?
yes

I was using chrome v129.0.6668.101

[empty pivot]

i will search for that version and try again

meanwhile, you can see there

[red wraith]

ok the reason why this happens is because of a policy violation of payment

[empty pivot]

Actually after update the new version is 130.0.6723.59

ok

but why it happens only in some websites?

[red wraith]

you need to add allow="payment" to the iframe

[empty pivot]

we distribute this to several clients, and only some of them have it.

[red wraith]

hmmm yes it's the same error on the first website (where you need the allow="payment" as well

[empty pivot]

Ok. It was already on the list to add, but we deployed yesterday so I was exploring options because it's strange that in some cases it happens and in others it doesn't.

[red wraith]

but the layout is correct

let me debug further

[empty pivot]

ok, but can you see the layout "error" right? is with placeholders that then deform layout

[red wraith]

yes

[empty pivot]

for example, with this one it doens't happen

and its the same iframe config

without allow="payment"

[red wraith]

yes I agree

the issue is in the label/placeholder of Expiration date

in some cases it's Expiration Date and when the layout is not correct it's Expiration Date (MM/YY)

[empty pivot]

yes and when this happens all the place holders are not injected and the date is injected into the input title

its a bit odd the situation

so, you think using allow will fix this?

I'm asking because on some sites this problem occurs and on others it doesn't

[red wraith]

no I don't think so

[red wraith]

yes I'm looking into this right now

[empty pivot]

ok thanks

[fiery ember]

Hi there 👋 apologies for the delay. I'm jumping in to lend a hand, please bear with me a moment while I catch up on the context here.

@empty pivot May I invite you to try to reproduce on this official quickstart please?
https://docs.stripe.com/payments/quickstart

Open the preview

and share with me the browser and its version

[empty pivot]

Hi, sure

i'm using google chrome | v 130.0.6723.59

[empty pivot]

i already opened, what specifically do you need?

[fiery ember]

OK I've just got updated internally

What you're seeing here is an experiment that we're currently running in PaymentElement, where we're changing the placeholder text/position on a certain percentage of loads, to analyse the conversion improvement that change might have.

[empty pivot]

I'm not sure if I'm getting this right. Does this mean that this situation with the layout is being ‘caused’ by this experiment?

[fiery ember]

Yes

In your case you are facing an issue, because there is no enough widht for the Element

otherwise, you should see something like this

What you can/need to do actually is to increate the width of the popup/ Element container

[empty pivot]

Are you considering implementing this change in the Stripe Elements? Honestly, the previous design with placeholders in the input fields provided a better user experience. We implemented the Payment Elements because their current layout and sizes are compatible with our configurations. Additionally, it would make more sense if this layout change could be implemented as a property during the creation of the Elements.

[fiery ember]

Are you considering implementing this change in the Stripe Elements?
Yes, it's currently in experiments, and testing multiple UIs displays

[empty pivot]

Ok, thank you for your assistance.