Snipcart.api.cart.fetchShippingRates() - Not refreshing Rates

[Ayo]

I have a set of custom Radio Buttons in my snip cart shipping rates. When changes the option that is selected, I want snipcart to call the “Snipcart.api.cart.fetchShippingRates()” method so that the shipping options that are displayed are refreshed based on my webhook.

This is what I have so far:

The radio buttons

<fieldset class="snipcart-form__set">
                <div class="snipcart-form__field">

                    <h1 class="snipcart-cart-summary__title snipcart__font--subtitle">Delivery or Collection</h1>

                    <hr class="snipcart-form__separator" />
                    <snipcart-radio @change.native="window.refreshDeliveryOptions()" name="deliveryType" value="DeliveryOrder">
                        I want my order to be deliverd.
                    </snipcart-radio>
                    <br />
                    <snipcart-radio @change.native="window.refreshDeliveryOptions()" name="deliveryType" value="CollectionOrder">
                        I will collect my order.
                    </snipcart-radio>

                </div>
            </fieldset>

And this is the JS

document.addEventListener("snipcart.ready", () => {

window.refreshDeliveryOptions = async () => {
                try {
                    const response = await Snipcart.api.cart.fetchShippingRates();
                    console.log(response);
                    console.log("testing");
                } catch (error) {
                    console.log(error);
                }
            };
});

I know that my javascript is being called because I can see the output in the “testing” in the browser console.

However the rates are not being refreshed in the UI.

Snipcart is not calling the webhook (its not getting to my breakpoint in my backend code) and the response object that is output in to the console has not changed.

I have tried to do what Dominic advised in this post:

Defult option selected in custom radio buttons

Hey @Ayo Set initial value of custom field Custom fields get their state from the global store in cart.customFields. This mean you can set a value for your custom fields as soon as Snipcart is ready. Here is a working example: Select default checkbox/radio field - CodeSandbox Refetch shipping rates on option change You could try adding these radio fields to the shipping step and adding an event listener to each fields and use this SDK method. JavaScript SDK API – Snipcart Documentation A ve…

Maybe I have misunderstood how this works? can anyone give me an example of how to do this?