f3bruary_code

[gritty sinew]

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

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

[cloud bobcat]

Um I don't think of any cautions here but to clarify which risk are you thinking of?

[wanton walrus]

When the shipping address element loads, the country is already selected in the select field. I'm using this change event to calculate shipping fees based on the country and then I update the UI.

It works, without having to change the select option, so I'm assuming Stripe is doing something in the background to get the visitor's country and then pre-selecting the correct option. And therefore the change event is firing (cause I haven't changed anything myself).

I'm worried about this background process to fail, and the change event won't trigger and won't update/show the shipping fees.

Not often do visitors have to change the country I reckon, so I just want to make sure the correct shipping fees are being displayed if the country select field isn't being interacted with.

Now, when the visitor submits the order, I calculate the shipping fees anyways in a server side endpoint, so there's no risk of incorrect payment amounts, but I just don't want to accidentally be displaying the wrong shipping fees.

[cloud bobcat]

I see, so you are worrying that the first change event not firing. If you listen to the ready event instead, can you perform the same logic?

[wanton walrus]

Yes, having both feels safer, but I wanted to check with you guys first

Cause it's working with just the change event, even on page load without interacting with it. But if that fails for whatever reason, having a ready event would make sure that in case the change event didn't fire like it does now, the function call with trigger anyways.

And the change event will surely fire afterwards, when I actually interact with the select field.

But if you, or a colleague, happens to know for a fact that this change event will always fire in this scenario (on page load), then I could just leave it like it is

[cloud bobcat]

No I would say don't rely on that fact. Please consider the ready event

There is no guarantee we will keep calling change at page load

[wanton walrus]

Gotcha! Thanks

So I'm using this code to listen for the change event:

addressShippingElement.on("change", function (event) {
  if (event.value.address.country) {
    recalculateShippingFees(event.value.address.country);
  }
});

But when I use the ready event, the event doesn't hold the address details. Do you know how I can get the country and call my function using the ready event?

Getting this error in vscode: Property 'address' does not exist on type '{ elementType: "address"; }'

Nevermind, I was able to solve it with this code:

addressShippingElement.on("ready", function () {
    addressShippingElement.getValue().then(function (result) {
        if (result.value.address && result.value.address.country) {
            console.log("Shipping address ready:", result.value.address);
            recalculateShippingFees(result.value.address.country);
        }
    });
});

Thanks for your help. Goodnight!

[cloud bobcat]

Yes!

[wanton walrus]

ugh I spoke too soon. The code works, but it invalidates my fields right away

[cloud bobcat]

Hmm wdym by invalidate?

[wanton walrus]

It's as if I submitted the checkout form, but I didn't

So it displays a validation error below each input.
It doesn't happen when I remove the ready event

[cloud bobcat]

When does this happy? When you push the submit button?

[wanton walrus]

No, on page load

If it happened on submit it would make sense 🙂

[cloud bobcat]

IF you just comment out recalculateShippingFees will that disappear?

[wanton walrus]

Nope. Still happens

[cloud bobcat]

Hmm if you just listen to ready and do nothing (just console.log)?

[wanton walrus]

Yep, Triggers the issue.

this works though:

// Function to safely get the country code and recalculate shipping
function updateShippingFees(result) {
    const country = result?.value?.address?.country;
    if (country) {
        recalculateShippingFees(country);
    }
}

// On change event
addressShippingElement.on("change", updateShippingFees);

// Initial calculation
addressShippingElement.getValue().then(updateShippingFees);

Not using the ready event, but just getting the value right away

Not sure if that's a good practice though

[cloud bobcat]

So you mean just inputting

addressShippingElement.on("ready", function () {
  console.log("ready");
});

Also trigger the validation?

[wanton walrus]

No sorry, I meant this:

addressShippingElement.on("ready", function () {
    addressShippingElement.getValue().then(function (result) {
        if (result.value.address && result.value.address.country) {
            console.log("Ready");
        }
    });
});

Does that mean the getValue() triggers it?

if getValue waits for complete then it makes sense

[cloud bobcat]

Not sure, can you try removing getValue()? We just want to see if it is causing the validation first

[wanton walrus]

I appreciate ya, but it's working and it's 3:30AM here. Gotta go to sleep 💤

Thanks for your help!