#microchungus_unexpected
drifting locustBOT
👋 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/1354878439500419162
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- microchungus_unexpected, 18 minutes ago, 6 messages
- microchungus_best-practices, 5 days ago, 26 messages
gritty ruin
#dev-help message original thread
austere tusk
I'm actually not a bot, we just close idle threads after a half hour or so.
gritty ruin
Sorry for calling you a bot.
austere tusk
No worries. Some days I feel like a bot.
Just so I'm clear, you are saying that when the shippingratechange event first, you are not receiving the value the rate changed to
You are receiving the shipping rate value the change is from?
Are you currently logging this to the console and can I test this behavior anywhere?
Those were my colleague's questions for you.
gritty ruin
That's right by my understanding
I can share the dev branch, though it requires ngrok and a bunch of secrets, etc
Alright, now i can't repro it. This has come up several times and has been really difficult to debut because apple pay is pretty opaque from what i can tell
austere tusk
You're talking abvout this event, right? https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event
gritty ruin
Can I ask a maybe related question? In this screenshot we see the events firing:
- on load pickup is selected (shipping rate change event). We see the line items and order total being updated, but this is no change in the values on the order.
- I select shipping. This triggers a new shipping + tax line item value and a new total
- We use that total to
resolve({lineItems})andelements.update({amount: newTotal}).
But since these are set from different calls we get the error that things don't match. I worry that could be a source of some of the bugs we are seeing.
Also maybe i am misunderstanding, but calling elements.update({amount}) should update the main number in the apple pay window, right?
austere tusk
That's a great question.
gritty ruin
If i get that total not matching error at the bottom, it does not update in the amount. So that is probably the reason.
I think i'm starting to understand my original issue too - if apple pay's shipping rate change hook doesn't update things correctly but also doesn't throw an error that completely closes it, it seems to wind up in a bad state that is associated with the shipping rate changes going off.
austere tusk
Can you share the code that includes the expressCheckoutElement.on('shippingaddresschange',handler) part?
gritty ruin
Can i send you a link?
austere tusk
Yes.
drifting locustBOT
gritty ruin
👋
analog radish
Hello my colleague had to step out but I can help here. They forwarded me your github link so I am taking a look at that code
Do you know where the promise rejection is getting thrown from?
I am assuming the resolve call but wanted to double check.
One thing that I am worried this is is that our elements.update call isn't synchronous, but you can't await it. I have seen other issues caused by making elements calls before the update has completed. That is especially rough because you are doing what our docs show to do for handling this event. Looking deeper in to that
gritty ruin
Hi and thank you! The addition of await (and putting an await Promise.resolve() after the elements.update() call to make it async) was my hacky idea for trying to make sure that update settled before the resolve() call. I've since reverted that part. and tried the elements update both before and after the resolve()
drifting locustBOT
analog radish
With this, it is more that elements.update itself is asynchronous. So even if you wait for your promise to resolve, the async stuff that update starts might not be done yet. I feel like this would never work for react users if that was the issue, so I am doubting that that is it, but I'm still not finding much on this issue. Can you do me a favor and add a sleep for like half a second in your handler before resolving to try to rule out my theory? I know that isn't the real way to handle things but it could be a good quick test
gritty ruin
for sure
well i'll be
it seems to be working
i can change shipping rate and i can change address and it all seems to work
analog radish
Thanks for testing, but uh oh. And then when taking away the sleep it breaks again? I just got my test site up working and am checking something myself
gritty ruin
Are you using our branch?
analog radish
This was my own test site. Weirdly I am not seeing this error with our code from the doc, which I was expecting to be the case when the error went away for you. Trying to repro by using something closer to what you are doing
gritty ruin
yeah, we are adapting this to a legacy flow and building new routes as we go
if anything jumps out as a big no no i'd be happy to hear it 🥺
Hard to say with 100% certainty but i think i broke it again when i reduced the timeout to 250ms
Latest commit from my dev branch is working on my end 👍
analog radish
Gotcha. That is surprising. One thing I realized that we haven't double checked is your calculations. Can you double check that the line items add up to the correct amount and that that wasn't somehow changing between the sleeps? My colleague and I can't reproduce this when copying your original code into our code but we were using dummy hardcoded values
gritty ruin
yes, in our backend buyerTotal is the sum of items + shipping + tax. If not, we've got much bigger problems
analog radish
Hmm, I'm trying to think of what else we can do here. If we can reproduce it on my side, I can escalate it to my colleagues as a bug. But we haven't been able to do that yet. Can you try taking elements off of your page to just the essential stuff around this and see if the error is still present (without the timeout of course)?
And if it can get simple enough that I can just run the full thing and reproduce that could be how we can move forward.
gritty ruin
Could you describe what you mean?
analog radish
Basically try to make a page that is just the ECE that collects a shipping address, with as few other things being imported or used as possible. Basically the idea is check if there is some other weird interaction that is happening between things on this page. If the error disappears when something is removed, that means it narrows down that may be involved here. If the issue stays all the way until there is pretty much just our code, that makes it much easier for me to recreate things on my side and escalate. I get that it is an ask, but because we haven't been able to reproduce on our side so far it would be very helpful.
gritty ruin
To resolve some random lines+ total you could do something like this:
const generateRandomLineItems = (count = 3) => Array.from({ length: count }, (_, index) => ({
name: "Item " + (index+1),
amount: Math.floor(Math.random() * 5000) + 500, // Random amount between 500 and 5500
}))
lineItems = generateRandomLineItems()
total = lines.reduce((acc, line) => acc + line.amount, 0)
return {total, lineItems}
ah, i understand 👍
drifting locustBOT
analog radish
Oh are you only seeing this on certain totals? My assumption was that this was for any update basically I wasn't seeing it with any combo of them on my test site
gritty ruin
hard to say what the exact case was except that it was consistent enough to feel broken. we're implementing apple pay for some of our order types now and then rebuilding our main checkout flow, so the legacy code & its limitations are very tied to this view along with the new future-facing apis we are building for express checkout
That plus the limitations of testing apple pay locally have meant i've been discovering a good amount of bugs only on the client, so that might also be messing things up
analog radish
Gotcha, it can definitely be a bear. Also, are you seeing this error consistently across devices or do you know if it is more prominent on certain devices/safari versions? I am wondering if it may be an environmental thing