@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/collection/components/store/checkout/stripe.js

@@ -11,310 +11,311 @@ import { logError } from "../../utils/logging/logError";
 import { addressRuleStyle } from "../../../styles/stripe/addressRuleStyle";
 import { defaultVariable } from "../../../styles/stripe/defaultVariable";
 const { onChange, reset, state: stripeStore, } = createStore(() => ({
-  clientSecret: sessionStorage.getItem('zonos--client-secret') || null,
-  fetchingLandedCostAbordController: null,
-  isFetchingLandedCost: false,
-  isFetchingSession: false,
-  stripe: null,
-  stripeAddressElement: null,
-  stripeAddressEventData: null,
-  stripeAddressUsedWhenFetchingLC: null,
-  stripeElements: null,
-  stripeElementsOptions: null,
-  stripeLinkElement: null,
-  stripeLinkEventData: null,
-  stripeLinkUsedWhenFetchingLC: null,
-  stripePaymentElement: null,
-  stripePaymentEventData: null,
+    clientSecret: sessionStorage.getItem('zonos--client-secret') || null,
+    fetchingLandedCostAbordController: null,
+    isFetchingLandedCost: false,
+    isFetchingSession: false,
+    stripe: null,
+    stripeAddressElement: null,
+    stripeAddressEventData: null,
+    stripeAddressUsedWhenFetchingLC: null,
+    stripeBillingAddressElement: null,
+    stripeElements: null,
+    stripeElementsOptions: null,
+    stripeLinkElement: null,
+    stripeLinkEventData: null,
+    stripeLinkUsedWhenFetchingLC: null,
+    stripePaymentElement: null,
+    stripePaymentEventData: null,
 }));
 const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideTheme, }) => {
-  const primaryColor = overridePrimaryColor || zonosStore.appearance.colorPrimary;
-  const themeBasedColor = primaryColor && isDarkColor(primaryColor) ? 'night' : 'flat';
-  // if overrideTheme is provided, use it. Otherwise, use theme based on primary color
-  const theme = overrideTheme === 'DARK' ? 'night' : 'flat';
-  return {
-    appearance: {
-      labels: 'floating',
-      rules: Object.assign({}, addressRuleStyle({ theme: 'LIGHT' })),
-      // get contrast theme color base on primary color
-      theme: overrideTheme ? theme : themeBasedColor,
-      variables: Object.assign({}, defaultVariable({
-        borderStyle: overrideBorderRaidus,
-        theme: 'LIGHT',
-      })),
-    },
-    clientSecret,
-    locale: localizationStore.selectedLocale,
-  };
+    const primaryColor = overridePrimaryColor || zonosStore.appearance.colorPrimary;
+    const themeBasedColor = primaryColor && isDarkColor(primaryColor) ? 'night' : 'flat';
+    // if overrideTheme is provided, use it. Otherwise, use theme based on primary color
+    const theme = overrideTheme === 'DARK' ? 'night' : 'flat';
+    return {
+        appearance: {
+            labels: 'floating',
+            rules: Object.assign({}, addressRuleStyle({ theme: 'LIGHT' })),
+            // get contrast theme color base on primary color
+            theme: overrideTheme ? theme : themeBasedColor,
+            variables: Object.assign({}, defaultVariable({
+                borderStyle: overrideBorderRaidus,
+                theme: 'LIGHT',
+            })),
+        },
+        clientSecret,
+        locale: localizationStore.selectedLocale,
+    };
 };
 const initStripeElements = async (props) => {
-  var _a;
-  const clientSecret = stripeStore.clientSecret;
-  if (!stripeStore.stripe) {
-    log('Skip. Stripe is not initialized');
-    return;
-  }
-  if (clientSecret) {
-    const stripeOptions = getStripeOptions({
-      clientSecret,
-      overrideBorderRaidus: props === null || props === void 0 ? void 0 : props.overrideBorderRaidus,
-      overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
-      overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
-    });
-    // compare with the previous options to see if we need to update
-    const isSameOptions = JSON.stringify(stripeOptions) ===
-      JSON.stringify(stripeStore.stripeElementsOptions);
-    if (!stripeStore.stripeElements) {
-      // init stripe elements if it doesn't exist
-      stripeStore.stripeElements = (_a = stripeStore.stripe) === null || _a === void 0 ? void 0 : _a.elements(stripeOptions);
-      // save stripe elements options for later comparison
-      stripeStore.stripeElementsOptions = stripeOptions;
-      log('Stripe elements initialized');
-      return;
+    var _a;
+    const clientSecret = stripeStore.clientSecret;
+    if (!stripeStore.stripe) {
+        log('Skip. Stripe is not initialized');
+        return;
     }
-    if (!isSameOptions) {
-      // update elements with new option if it already exists
-      stripeStore.stripeElements.update(stripeOptions);
-      // save stripe elements options for later comparison
-      stripeStore.stripeElementsOptions = stripeOptions;
+    if (clientSecret) {
+        const stripeOptions = getStripeOptions({
+            clientSecret,
+            overrideBorderRaidus: props === null || props === void 0 ? void 0 : props.overrideBorderRaidus,
+            overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
+            overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
+        });
+        // compare with the previous options to see if we need to update
+        const isSameOptions = JSON.stringify(stripeOptions) ===
+            JSON.stringify(stripeStore.stripeElementsOptions);
+        if (!stripeStore.stripeElements) {
+            // init stripe elements if it doesn't exist
+            stripeStore.stripeElements = (_a = stripeStore.stripe) === null || _a === void 0 ? void 0 : _a.elements(stripeOptions);
+            // save stripe elements options for later comparison
+            stripeStore.stripeElementsOptions = stripeOptions;
+            log('Stripe elements initialized');
+            return;
+        }
+        if (!isSameOptions) {
+            // update elements with new option if it already exists
+            stripeStore.stripeElements.update(stripeOptions);
+            // save stripe elements options for later comparison
+            stripeStore.stripeElementsOptions = stripeOptions;
+        }
+        log('Stripe elements initialized');
     }
-    log('Stripe elements initialized');
-  }
 };
 const stripeStoreReset = () => {
-  // clean clientSecret so that we can start the new one.
-  sessionStorage.removeItem('zonos--client-secret');
-  // cleanup stripe elements
-  reset();
-  // set stripe back to window.Zonos.stripe
-  stripeStore.stripe = window.Zonos.stripe;
+    // clean clientSecret so that we can start the new one.
+    sessionStorage.removeItem('zonos--client-secret');
+    // cleanup stripe elements
+    reset();
+    // set stripe back to window.Zonos.stripe
+    stripeStore.stripe = window.Zonos.stripe;
 };
 /**
  * Check if the address and email info used when fetching landed cost with the current email and address info are different
  * Purpose is to resend the request if the info used when fetching landed cost is different from the current info
  */
 const isPrefetchInfoOutdated = () => {
-  var _a, _b, _c, _d;
-  const hasAbortController = stripeStore.fetchingLandedCostAbordController;
-  if (!hasAbortController) {
-    // if there is no abort controller, this is a new request
-    return false;
-  }
-  const isLinkDataDirty = JSON.stringify((_a = stripeStore.stripeLinkUsedWhenFetchingLC) === null || _a === void 0 ? void 0 : _a.value) !==
-    JSON.stringify((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.value);
-  const isAddressDataDirty = JSON.stringify((_c = stripeStore.stripeAddressUsedWhenFetchingLC) === null || _c === void 0 ? void 0 : _c.value) !==
-    JSON.stringify((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value);
-  return isLinkDataDirty || isAddressDataDirty;
+    var _a, _b, _c, _d;
+    const hasAbortController = stripeStore.fetchingLandedCostAbordController;
+    if (!hasAbortController) {
+        // if there is no abort controller, this is a new request
+        return false;
+    }
+    const isLinkDataDirty = JSON.stringify((_a = stripeStore.stripeLinkUsedWhenFetchingLC) === null || _a === void 0 ? void 0 : _a.value) !==
+        JSON.stringify((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.value);
+    const isAddressDataDirty = JSON.stringify((_c = stripeStore.stripeAddressUsedWhenFetchingLC) === null || _c === void 0 ? void 0 : _c.value) !==
+        JSON.stringify((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value);
+    return isLinkDataDirty || isAddressDataDirty;
 };
 const stripeStorePrefetchLandedCost = async () => {
-  var _a, _b, _c, _d;
-  const stripeAddressReady = !!((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete);
-  const stripeLinkReady = !!((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
-  const shouldRefetch = isPrefetchInfoOutdated();
-  if (shouldRefetch) {
-    // if the info used when fetching landed cost is different from the current info, abort the previous request
-    (_c = stripeStore.fetchingLandedCostAbordController) === null || _c === void 0 ? void 0 : _c.abort();
-    stripeStore.fetchingLandedCostAbordController = null;
-  }
-  // only fetch if we are not fetching or we need to refetch
-  if (stripeAddressReady &&
-    stripeLinkReady &&
-    (shouldRefetch || !stripeStore.isFetchingLandedCost)) {
-    stripeStore.isFetchingLandedCost = true;
-    if (stripeStore.stripeAddressEventData) {
-      stripeStore.stripeAddressUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeAddressEventData);
-    }
-    if (stripeStore.stripeLinkEventData) {
-      stripeStore.stripeLinkUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeLinkEventData);
-    }
-    try {
-      const abortController = new AbortController();
-      stripeStore.fetchingLandedCostAbordController = abortController;
-      const { checkoutSessionWorkflow, shipmentRatingCalculateWorkflow } = await calculateLandedCost(abortController);
-      // reset abort controller after we are done
-      stripeStore.fetchingLandedCostAbordController = null;
-      // update cart store with landed cost info
-      cartStore.landedCostData =
-        (checkoutSessionWorkflow === null || checkoutSessionWorkflow === void 0 ? void 0 : checkoutSessionWorkflow.filter(Boolean)) || null;
-      cartStore.shippingData =
-        (shipmentRatingCalculateWorkflow === null || shipmentRatingCalculateWorkflow === void 0 ? void 0 : shipmentRatingCalculateWorkflow.filter(Boolean)) || null;
-      // apply new subtotal and total, this is mainly to show items in the presentment currency
-      const firstLandedCostData = (_d = cartStore.landedCostData) === null || _d === void 0 ? void 0 : _d.find(Boolean);
-      const subtotals = !!firstLandedCostData
-        ? firstLandedCostData.subtotals
-        : null;
-      if (subtotals) {
-        // prefetch landed cost will not update shipping and taxes since we haven't selected shipping method yet
-        cartStoreApplySubtotals({
-          exchangeRate: subtotals.exchangeRate,
-          items: subtotals.items,
-          landedCostTotal: 0,
-          presentmentCurrencyCode: subtotals.presentmentCurrencyCode,
-          shipping: 0,
-          total: subtotals.items,
-        });
-      }
+    var _a, _b, _c, _d;
+    const stripeAddressReady = !!((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete);
+    const stripeLinkReady = !!((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
+    const shouldRefetch = isPrefetchInfoOutdated();
+    if (shouldRefetch) {
+        // if the info used when fetching landed cost is different from the current info, abort the previous request
+        (_c = stripeStore.fetchingLandedCostAbordController) === null || _c === void 0 ? void 0 : _c.abort();
+        stripeStore.fetchingLandedCostAbordController = null;
     }
-    catch (err) {
-      logError(err);
+    // only fetch if we are not fetching or we need to refetch
+    if (stripeAddressReady &&
+        stripeLinkReady &&
+        (shouldRefetch || !stripeStore.isFetchingLandedCost)) {
+        stripeStore.isFetchingLandedCost = true;
+        if (stripeStore.stripeAddressEventData) {
+            stripeStore.stripeAddressUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeAddressEventData);
+        }
+        if (stripeStore.stripeLinkEventData) {
+            stripeStore.stripeLinkUsedWhenFetchingLC = Object.assign({}, stripeStore.stripeLinkEventData);
+        }
+        try {
+            const abortController = new AbortController();
+            stripeStore.fetchingLandedCostAbordController = abortController;
+            const { checkoutSessionWorkflow, shipmentRatingCalculateWorkflow } = await calculateLandedCost(abortController);
+            // reset abort controller after we are done
+            stripeStore.fetchingLandedCostAbordController = null;
+            // update cart store with landed cost info
+            cartStore.landedCostData =
+                (checkoutSessionWorkflow === null || checkoutSessionWorkflow === void 0 ? void 0 : checkoutSessionWorkflow.filter(Boolean)) || null;
+            cartStore.shippingData =
+                (shipmentRatingCalculateWorkflow === null || shipmentRatingCalculateWorkflow === void 0 ? void 0 : shipmentRatingCalculateWorkflow.filter(Boolean)) || null;
+            // apply new subtotal and total, this is mainly to show items in the presentment currency
+            const firstLandedCostData = (_d = cartStore.landedCostData) === null || _d === void 0 ? void 0 : _d.find(Boolean);
+            const subtotals = !!firstLandedCostData
+                ? firstLandedCostData.subtotals
+                : null;
+            if (subtotals) {
+                // prefetch landed cost will not update shipping and taxes since we haven't selected shipping method yet
+                cartStoreApplySubtotals({
+                    exchangeRate: subtotals.exchangeRate,
+                    items: subtotals.items,
+                    landedCostTotal: 0,
+                    presentmentCurrencyCode: subtotals.presentmentCurrencyCode,
+                    shipping: 0,
+                    total: subtotals.items,
+                });
+            }
+        }
+        catch (err) {
+            logError(err);
+        }
+        stripeStore.isFetchingLandedCost = false;
     }
-    stripeStore.isFetchingLandedCost = false;
-  }
 };
 const getStripeMessageBasedOnStatus = (status) => {
-  let messages = [];
-  let isError = true;
-  // Inspect the PaymentIntent `status` to indicate the status of the payment
-  // to your customer.
-  //
-  // Some payment methods will [immediately succeed or fail][0] upon
-  // confirmation, while others will first enter a `processing` state.
-  //
-  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
-  switch (status) {
-    case 'succeeded': {
-      messages = [
-        translate('Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.'),
-        '',
-        '',
-        translate("We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time."),
-      ];
-      isError = false;
-      break;
-    }
-    case 'requires_capture':
-    case 'processing': {
-      messages = [
-        translate("Payment processing. We'll update you when payment is received."),
-      ];
-      isError = false;
-      break;
-    }
-    case 'requires_payment_method': {
-      messages = [
-        translate('Payment failed. Please try another payment method.'),
-      ];
-      break;
-    }
-    default: {
-      messages = [translate('Something went wrong.')];
-      break;
+    let messages = [];
+    let isError = true;
+    // Inspect the PaymentIntent `status` to indicate the status of the payment
+    // to your customer.
+    //
+    // Some payment methods will [immediately succeed or fail][0] upon
+    // confirmation, while others will first enter a `processing` state.
+    //
+    // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
+    switch (status) {
+        case 'succeeded': {
+            messages = [
+                translate('Your payment went through successfully! Thank you for shopping with us! We hope you had an enjoyable experience and your support means the world to us.'),
+                '',
+                '',
+                translate("We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time."),
+            ];
+            isError = false;
+            break;
+        }
+        case 'requires_capture':
+        case 'processing': {
+            messages = [
+                translate("Payment processing. We'll update you when payment is received."),
+            ];
+            isError = false;
+            break;
+        }
+        case 'requires_payment_method': {
+            messages = [
+                translate('Payment failed. Please try another payment method.'),
+            ];
+            break;
+        }
+        default: {
+            messages = [translate('Something went wrong.')];
+            break;
+        }
     }
-  }
-  return {
-    isError,
-    messages,
-  };
+    return {
+        isError,
+        messages,
+    };
 };
 const stripeStoreRetrievePayment = async ({ clientSecret: _clientSecret, storybookForceStatus, }) => {
-  if (storybookForceStatus) {
-    // return status right away if we are in storybook mode
-    const { isError, messages } = getStripeMessageBasedOnStatus(storybookForceStatus);
+    if (storybookForceStatus) {
+        // return status right away if we are in storybook mode
+        const { isError, messages } = getStripeMessageBasedOnStatus(storybookForceStatus);
+        return { error: isError, messages };
+    }
+    const clientSecret = _clientSecret || stripeStore.clientSecret;
+    if (!stripeStore.stripe || !clientSecret) {
+        logError('Failed to retrieve payment intent. Stripe is not initialized');
+        return { error: true, message: [translate('Something went wrong.')] };
+    }
+    const { paymentIntent } = await stripeStore.stripe.retrievePaymentIntent(clientSecret);
+    const status = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status;
+    const { isError, messages } = getStripeMessageBasedOnStatus(status);
     return { error: isError, messages };
-  }
-  const clientSecret = _clientSecret || stripeStore.clientSecret;
-  if (!stripeStore.stripe || !clientSecret) {
-    logError('Failed to retrieve payment intent. Stripe is not initialized');
-    return { error: true, message: [translate('Something went wrong.')] };
-  }
-  const { paymentIntent } = await stripeStore.stripe.retrievePaymentIntent(clientSecret);
-  const status = paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status;
-  const { isError, messages } = getStripeMessageBasedOnStatus(status);
-  return { error: isError, messages };
 };
 const stripeStoreConfirmPayment = async () => {
-  var _a, _b, _c;
-  const stripePaymentReady = !!((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-  const stripeElements = stripeStore.stripeElements;
-  const stripe = stripeStore.stripe;
-  const stripeClientSecret = stripeStore.clientSecret;
-  if (stripe && stripeElements && stripePaymentReady && stripeClientSecret) {
-    const { error } = await stripe.confirmPayment({
-      confirmParams: {
-        receipt_email: (_c = (_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.email,
-        return_url: window.location.href,
-      },
-      elements: stripeElements,
-      redirect: 'if_required',
-    });
-    if (error) {
-      if (error.type === 'card_error' || error.type === 'validation_error') {
-        throw new Error(error.message);
-      }
-      if (error.type === 'invalid_request_error') {
-        if (error.code === 'payment_intent_unexpected_state') {
-          // PaymentIntent was canceled or expired, or status is `require_capture`.
-          // don't throw error here because we will reset the checkout session last step
-          return;
+    var _a, _b, _c;
+    const stripePaymentReady = !!((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+    const stripeElements = stripeStore.stripeElements;
+    const stripe = stripeStore.stripe;
+    const stripeClientSecret = stripeStore.clientSecret;
+    if (stripe && stripeElements && stripePaymentReady && stripeClientSecret) {
+        const { error } = await stripe.confirmPayment({
+            confirmParams: {
+                receipt_email: (_c = (_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.email,
+                return_url: window.location.href,
+            },
+            elements: stripeElements,
+            redirect: 'if_required',
+        });
+        if (error) {
+            if (error.type === 'card_error' || error.type === 'validation_error') {
+                throw new Error(error.message);
+            }
+            if (error.type === 'invalid_request_error') {
+                if (error.code === 'payment_intent_unexpected_state') {
+                    // PaymentIntent was canceled or expired, or status is `require_capture`.
+                    // don't throw error here because we will reset the checkout session last step
+                    return;
+                }
+            }
+            throw new Error('An unexpected error occurred.');
         }
-      }
-      throw new Error('An unexpected error occurred.');
     }
-  }
 };
 /**
  * Init checkout session
  * @returns {boolean} whether or not the checkout session is successfully created
  */
 const stripeStoreInitCheckoutSession = async () => {
-  var _a;
-  const total = cartStore.items.reduce((amount, item) => amount + item.amount * item.quantity, 0);
-  if (!total || !localizationStore.targetCurrency) {
-    logError('Fail to create checkout session - invalid total or currency');
-    return false;
-  }
-  stripeStore.isFetchingSession = true;
-  const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/create-checkout-session`, {
-    body: {
-      currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
-      itemsAmount: total,
-      presentmentCountryCode: localizationStore.selectedCountryCode || null,
-    },
-    method: 'POST',
-  });
-  stripeStore.isFetchingSession = false;
-  if (errors.length || !json) {
-    logError('Error occurs when creating checkout session', JSON.stringify(errors, null, 2));
-    return false;
-  }
-  const result = json.checkoutSessionCreate;
-  stripeStore.clientSecret = result.clientSecret;
-  // update cart store with updated informations
-  cartStore.checkoutSessionId = result.id;
-  cartStoreApplySubtotals(Object.assign(Object.assign({}, result.subtotals), { landedCostTotal: 0, shipping: 0, total: result.subtotals.items }));
-  log('Exchange rate updated for cart items (checkout session create)', 'info', cartStore.exchangeRate);
-  log('done-init-checkout-session');
-  return true;
+    var _a;
+    const total = cartStore.items.reduce((amount, item) => amount + item.amount * item.quantity, 0);
+    if (!total || !localizationStore.targetCurrency) {
+        logError('Fail to create checkout session - invalid total or currency');
+        return false;
+    }
+    stripeStore.isFetchingSession = true;
+    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/create-checkout-session`, {
+        body: {
+            currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
+            itemsAmount: total,
+            presentmentCountryCode: localizationStore.selectedCountryCode || null,
+        },
+        method: 'POST',
+    });
+    stripeStore.isFetchingSession = false;
+    if (errors.length || !json) {
+        logError('Error occurs when creating checkout session', JSON.stringify(errors, null, 2));
+        return false;
+    }
+    const result = json.checkoutSessionCreate;
+    stripeStore.clientSecret = result.clientSecret;
+    // update cart store with updated informations
+    cartStore.checkoutSessionId = result.id;
+    cartStoreApplySubtotals(Object.assign(Object.assign({}, result.subtotals), { landedCostTotal: 0, shipping: 0, total: result.subtotals.items }));
+    log('Exchange rate updated for cart items (checkout session create)', 'info', cartStore.exchangeRate);
+    log('done-init-checkout-session');
+    return true;
 };
 /**
  * Update checkout session. Use for updating amount with landed cost id, or update session when cart items change
  */
 const stripeStoreUpdateCheckoutSession = async ({ currency, id, itemsAmount, landedCostId, presentmentCountryCode, }) => {
-  // No need to set loading state here because this function will be called under the hood to update
-  // landed cost id for the section.
-  const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/update-checkout-session`, {
-    body: {
-      currency,
-      id,
-      itemsAmount,
-      landedCostId,
-      presentmentCountryCode,
-    },
-    method: 'POST',
-  });
-  if (errors.length || !json) {
-    logError('Error occurs when updating checkout session', JSON.stringify(errors, null, 2));
-    return { errors, json };
-  }
-  return { errors: [], json };
+    // No need to set loading state here because this function will be called under the hood to update
+    // landed cost id for the section.
+    const { errors, json } = await handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/update-checkout-session`, {
+        body: {
+            currency,
+            id,
+            itemsAmount,
+            landedCostId,
+            presentmentCountryCode,
+        },
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        logError('Error occurs when updating checkout session', JSON.stringify(errors, null, 2));
+        return { errors, json };
+    }
+    return { errors: [], json };
 };
 onChange('clientSecret', clientSecret => {
-  // update stripe elements when client secret changes
-  if (clientSecret && stripeStore.stripe) {
-    sessionStorage.setItem('zonos--client-secret', clientSecret);
-  }
-  if (!clientSecret) {
-    sessionStorage.removeItem('zonos--client-secret');
-  }
+    // update stripe elements when client secret changes
+    if (clientSecret && stripeStore.stripe) {
+        sessionStorage.setItem('zonos--client-secret', clientSecret);
+    }
+    if (!clientSecret) {
+        sessionStorage.removeItem('zonos--client-secret');
+    }
 });
 export { initStripeElements, stripeStore, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, stripeStoreRetrievePayment, stripeStoreUpdateCheckoutSession, };