bachir_unexpected | Stripe Developers | Page 1

summer raftBOT Mar 13, 2024, 4:14 PM

#

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

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

torpid quailBOT Mar 13, 2024, 4:16 PM

#

bronze timber Mar 13, 2024, 4:17 PM

#

Hi 👋

I'm sorry but your description doesn't give me much to go on. Can you start by explaining what Stripe product you are integrating?

velvet dragon Mar 13, 2024, 4:18 PM

#

Hi, sorry about that, didn't have much place : we are integrating Stripe Express Checkout

bronze timber Mar 13, 2024, 4:19 PM

#

Okay so you are using the ECE https://docs.stripe.com/elements/express-checkout-element

And the issue is with the viewable space in the modal window?

#

Or that the modal doesn't autoscroll to the error content?

velvet dragon Mar 13, 2024, 4:23 PM

#

This is the behaviour when clicking, the view does not go to the errored input

#

This is what is expected (This time we click on the "Donate" button, which triggers the normal handleSubmit of the form)

#

I realize this might be an issue with react-hook-form, but since the issue only happens with ApplePay and not GooglePay, I thought you might have an idea

bronze timber Mar 13, 2024, 4:24 PM

#

Okay, correct me if I'm wrong but that doesn't have to do with launching the Apple/Google pay modal, correct?

velvet dragon Mar 13, 2024, 4:24 PM

#

no, it is expected that the modal doesn't open in this case since the form validation failed (hence I do not call event.resolve in the onClick handler because of that)

bronze timber Mar 13, 2024, 4:25 PM

#

Okay and what are you using for form validation (since that isn't part of the Express Checkout Element)?

velvet dragon Mar 13, 2024, 4:26 PM

#

we use react hook form lib, and I call this function https://react-hook-form.com/docs/useform/trigger in the onClick handler. trigger(undefined, { shouldFocus: true })

bronze timber Mar 13, 2024, 4:28 PM

#

Okay so that scrolling behavior isn't something implemented by Stripe. I suspect you would need to call some function in your on('confirm') event handler to trigger the scrolling. https://docs.stripe.com/elements/express-checkout-element/accept-a-payment#submit-the-payment

velvet dragon Mar 13, 2024, 4:31 PM

#

Okey so this means we would allow the applepay modal to open, then do the form validation in the onConfirm handler of the ECE ? Wouldn't that be less user friendly ?

bronze timber Mar 13, 2024, 4:31 PM

#

Oh wait, sorry no that isn't were you would place the logic. You are right.

#

Your form validation appears to handle this correctly currently (except for the scrolling part). Is there a way you can hook into that logic and add the scolling?

#

At this point I'm just guessing since this isn't code Stripe owns

velvet dragon Mar 13, 2024, 4:37 PM

#

I tried all the tricks I could think of : using setFocus from react-hook-form to focus the errored input, calling the handleSubmit instead of trigger, window.setScroll etc... it just doesn't do 🤷

#

In any case, it's not Stripe related if it's not a known issue on your side, I'll keep investigating, thanks for your help!

bronze timber Mar 13, 2024, 4:39 PM

#

Happy to shed what 💡 I can 🙂

I hope you can get the behavior you are looking for 🤞

velvet dragon Mar 13, 2024, 4:40 PM

#

thanks 🙏

#bachir_unexpected