@zonos/elements 1.1.2 → 1.2.1

package/dist/components/zonos-banner.js

@@ -4,5 +4,3 @@ const ZonosBanner = ZonosBanner$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosBanner, defineCustomElement };
-
-//# sourceMappingURL=zonos-banner.js.map

package/dist/components/zonos-banner2.js

@@ -86,5 +86,3 @@ function defineCustomElement() {
 }
 
 export { ZonosBanner as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-banner2.js.map

package/dist/components/zonos-button.js

@@ -4,5 +4,3 @@ const ZonosButton = ZonosButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosButton, defineCustomElement };
-
-//# sourceMappingURL=zonos-button.js.map

package/dist/components/zonos-button2.js

@@ -140,5 +140,3 @@ function defineCustomElement() {
 }
 
 export { ZonosButton as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-button2.js.map

package/dist/components/zonos-card.js

@@ -4,5 +4,3 @@ const ZonosCard = ZonosCard$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCard, defineCustomElement };
-
-//# sourceMappingURL=zonos-card.js.map

package/dist/components/zonos-card2.js

@@ -47,5 +47,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCard as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-card2.js.map

package/dist/components/zonos-cart-items.js

@@ -4,5 +4,3 @@ const ZonosCartItems = ZonosCartItems$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCartItems, defineCustomElement };
-
-//# sourceMappingURL=zonos-cart-items.js.map

package/dist/components/zonos-cart-items2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore } from './stripe.js';
+import { c as cartStore } from './cart.js';
 import { f as formatCurrency } from './formatCurrency.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
@@ -53,5 +53,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCartItems as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-cart-items2.js.map

package/dist/components/zonos-cart-subtotal.js

@@ -4,5 +4,3 @@ const ZonosCartSubtotal = ZonosCartSubtotal$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCartSubtotal, defineCustomElement };
-
-//# sourceMappingURL=zonos-cart-subtotal.js.map

package/dist/components/zonos-cart-subtotal2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { c as cartStore } from './stripe.js';
+import { c as cartStore } from './cart.js';
 import { t as translate } from './localization.js';
 import { f as formatCurrency } from './formatCurrency.js';
 import { d as defineCustomElement$3 } from './zonos-badge2.js';
@@ -12,7 +12,7 @@ const InfoIcon = `<svg viewBox="0 0 17 16" fill="none" xmlns="https://www.w3.org
 </svg>
 `;
 
-const zonosCartSubtotalCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-20) var(--amino-space-8);vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--amino-gray-200)}:host .zonos--cart-subtotal-price{text-align:right}";
+const zonosCartSubtotalCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-20) var(--amino-space-8);vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--amino-gray-200)}:host .zonos--cart-duty-tax-price{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;gap:5px}:host .zonos--cart-subtotal-price{text-align:right}";
 
 const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtotal extends HTMLElement {
   constructor() {
@@ -22,6 +22,7 @@ const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtot
   }
   render() {
     const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+    const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
     const renderShippingInfo = () => {
       if (!cartStore.selectedShippingOption) {
         return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
@@ -36,12 +37,12 @@ const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtot
         amount: cartStore.shipping,
         currency: cartStore.currency,
       })
-      : '-')), cartStore.step === 'payment' && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-icon", { content: InfoIcon, size: 16 })), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { color: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.dutiesTaxFees
+      : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-icon", { content: InfoIcon, size: 16 })), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { color: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
       ? formatCurrency({
         amount: cartStore.dutiesTaxFees,
         currency: cartStore.currency,
       })
-      : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed')))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+      : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
       amount: 
       // show total without taxes when step is shipping, show total with taxes when step is payment
       cartStore.step === 'shipping'
@@ -83,5 +84,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCartSubtotal as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-cart-subtotal2.js.map

package/dist/components/zonos-checkout-finish.js

@@ -4,5 +4,3 @@ const ZonosCheckoutFinish = ZonosCheckoutFinish$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCheckoutFinish, defineCustomElement };
-
-//# sourceMappingURL=zonos-checkout-finish.js.map

package/dist/components/zonos-checkout-finish2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { s as stripeStore, l as stripeStoreRetrievePayment, j as stripeStoreReset } from './stripe.js';
+import { s as stripeStore, p as stripeStoreRetrievePayment, o as stripeStoreReset } from './cart.js';
 import { t as translate } from './localization.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { s as submitGtag } from './submitGtag.js';
@@ -38,6 +38,12 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
         }
         else {
           submitGtag('zonos-checkout-success');
+          const successEvent = new CustomEvent('zonos-checkout-success', {
+            detail: {
+              message: 'Zonos Checkout successfully processed order',
+            },
+          });
+          document.dispatchEvent(successEvent);
         }
       }
       stripeStoreReset();
@@ -60,6 +66,7 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
       this.notificationType = this.overrideNotification.type;
       this.notificationTitle = this.overrideNotification.title;
       this.notificationMessages = this.overrideNotification.messages;
+      this.isLoading = false;
       return;
     }
     void this.checkPaymentStatus();
@@ -115,5 +122,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCheckoutFinish as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-checkout-finish2.js.map

package/dist/components/zonos-checkout-payment.js

@@ -4,5 +4,3 @@ const ZonosCheckoutPayment = ZonosCheckoutPayment$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCheckoutPayment, defineCustomElement };
-
-//# sourceMappingURL=zonos-checkout-payment.js.map

package/dist/components/zonos-checkout-payment2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, c as cartStore } from './stripe.js';
+import { s as stripeStore, c as cartStore } from './cart.js';
 import { t as translate } from './localization.js';
 import { f as formatCurrency } from './formatCurrency.js';
 import { s as submitGtag } from './submitGtag.js';
@@ -9,7 +9,7 @@ import { d as defineCustomElement$3 } from './zonos-payment2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:Inter;display:block}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:0 5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{width:100%}";
+const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:Inter;display:block}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:calc(100% - 10px)}";
 
 const ZonosCheckoutPayment = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutPayment extends HTMLElement {
   constructor() {
@@ -40,12 +40,12 @@ const ZonosCheckoutPayment = /*@__PURE__*/ proxyCustomElement(class ZonosCheckou
       return null;
     }
     this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-    return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+    return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
       // use primary type when on mobile mode
       variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
       amount: cartStore.total,
       currency: cartStore.currency,
-    }))));
+    })))));
   }
   static get watchers() { return {
     "disabled": ["watchFormComplete"]
@@ -100,5 +100,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCheckoutPayment as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-checkout-payment2.js.map

package/dist/components/zonos-checkout.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { i as initStripeElements, c as cartStore, b as cartStoreUpdateItems, d as cartStoreReset, s as stripeStore, e as stripeStoreInitCheckoutSession, f as cartStoreUpdateToErrorState, a as stripeStorePrefetchLandedCost, g as cartStoreNextStep, h as stripeStoreConfirmPayment, j as stripeStoreReset, k as cartStorePreviousStep } from './stripe.js';
-import { b as log, a as localizationStore, t as translate } from './localization.js';
+import { l as initStripeElements, c as cartStore, h as cartStoreUpdateItems, g as cartStoreReset, s as stripeStore, m as stripeStoreInitCheckoutSession, j as cartStoreUpdateToErrorState, k as stripeStorePrefetchLandedCost, d as cartStoreNextStep, n as stripeStoreConfirmPayment, o as stripeStoreReset, e as cartStorePreviousStep } from './cart.js';
+import { b as localizationStore, a as log, t as translate } from './localization.js';
 import { z as zonosStore, m as mergeConfig } from './zonosStore.js';
 import { i as isCheckoutMobile, d as defineCustomElement$7 } from './zonos-review2.js';
 import { c as classes } from './classes.js';
@@ -55,6 +55,19 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         overrideTheme: this.isMobile ? theme : undefined,
       });
     };
+    this.isShippableCountry = (showLog = true) => {
+      if (!localizationStore.localizationLoaded) {
+        return false;
+      }
+      // if localization is loaded and the localization is not a shippable country, keep the original click event
+      if (!localizationStore.isShippableCountry) {
+        if (showLog) {
+          log(`Checkout: not shippable country`);
+        }
+        return false;
+      }
+      return true;
+    };
     this.getCurrentLocalePageEnum = () => {
       switch (cartStore.step) {
         case 'customer-info':
@@ -70,7 +83,6 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
     this.appearanceSettingsOverride = undefined;
     this.preview = false;
     this.mobile = false;
-    this.buttonAnchorElements = null;
     this.defaultAddress = null;
     this.forceDialogOpen = false;
     this.open = this.forceDialogOpen;
@@ -112,6 +124,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
     // if client secret doesn't exist, request a new one.
     if (!stripeStore.clientSecret) {
       const success = await stripeStoreInitCheckoutSession();
+      log(`stripeStoreInitCheckoutSession: ${success}`);
       if (!success) {
         return false;
       }
@@ -121,41 +134,46 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
     return true;
   }
   attachCheckout() {
-    if (!this.buttonAnchorElements) {
+    const buttonAnchorSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
+    if (!buttonAnchorSelector) {
       // do nothing if button element is not found
       return;
     }
+    const buttonAnchorElements = document.querySelectorAll(buttonAnchorSelector);
     // only attach event once, and looping through all of the button elements
-    this.buttonAnchorElements.forEach(button => {
+    buttonAnchorElements.forEach(button => {
       const isEventAttached = button.getAttribute('data-zonos-checkout-attached');
-      if (!isEventAttached) {
-        button.addEventListener('click', async (e) => {
-          if (!localizationStore.localizationLoaded) {
-            return;
-          }
-          // if localization is loaded and the localization is not a shippable country, keep the original click event
-          if (!localizationStore.isShippableCountry) {
-            log(`not shippable country`);
-            return;
-          }
-          e.preventDefault();
-          e.stopPropagation();
-          log('zonos checkout button clicked');
-          this.open = true;
+      if (isEventAttached) {
+        // do nothing if event is already attached
+        return;
+      }
+      button.addEventListener('click', async (e) => {
+        // do nothing if it's not shippable country
+        if (!this.isShippableCountry()) {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        log('zonos checkout button clicked');
+        this.open = true;
+        try {
+          // buildCartDetail need to be catch since it may throw error
           const result = await this.buildCartAndInit();
           if (!result) {
-            cartStoreUpdateToErrorState({
-              messages: [
-                translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
-              ],
-              title: translate('Error creating Checkout'),
-            });
-            return;
+            throw new Error('Error building cart');
           }
           submitGtag('zonos-checkout-start');
-        });
-        button.setAttribute('data-zonos-checkout-attached', 'true');
-      }
+        }
+        catch (err) {
+          cartStoreUpdateToErrorState({
+            messages: [
+              translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
+            ],
+            title: translate('Error creating Checkout'),
+          });
+        }
+      });
+      button.setAttribute('data-zonos-checkout-attached', 'true');
     });
   }
   appearanceSettingsOverrideChanged() {
@@ -171,20 +189,39 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
   async init() {
     stripeStore.stripe = window.Zonos.stripe;
     this.stripe = window.Zonos.stripe;
-    // only init checkout if visitor's country is in the shipping zones.
-    const interval = setInterval(() => {
-      stripeStore.stripe = window.Zonos.stripe;
-      this.stripe = window.Zonos.stripe;
-      if (!localizationStore.localizationLoaded) {
+    const hideInternationalOrderInterval = setInterval(() => {
+      const internationalSelector = window.Zonos.internationalHideSelector;
+      if (!internationalSelector) {
+        // cleanup right away if selector is not found
+        clearInterval(hideInternationalOrderInterval);
         return;
       }
-      // if localization is loaded and the localization is not a shippable country, stop the interval and don't init checkout
-      // No need to check localization if it's preview mode
-      if (!localizationStore.isShippableCountry && !this.preview) {
-        log('not shippable country');
-        clearInterval(interval);
+      // hide the selector if it's international
+      const isInternationalOrder = this.isShippableCountry(false);
+      const selector = document.querySelectorAll(internationalSelector);
+      if (!isInternationalOrder) {
+        // show the selector when it's domestic
+        selector === null || selector === void 0 ? void 0 : selector.forEach(el => {
+          const element = el;
+          const display = element.getAttribute('data-zonos-checkout-original-display') ||
+            getComputedStyle(element).display;
+          // fallback to initial (browser value) if "display" is not found
+          element.style.display = display || 'initial';
+        });
         return;
       }
+      selector === null || selector === void 0 ? void 0 : selector.forEach(el => {
+        const element = el;
+        const display = element.style.display;
+        // save the display state so we can restore it later
+        element.setAttribute('data-zonos-checkout-original-display', display);
+        element.style.display = 'none';
+      });
+    }, 100);
+    // only init checkout if visitor's country is in the shipping zones.
+    const interval = setInterval(() => {
+      stripeStore.stripe = window.Zonos.stripe;
+      this.stripe = window.Zonos.stripe;
       if (!this.stripe) {
         log('waiting for stripe to be loaded');
         return;
@@ -199,9 +236,13 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
       }
       else {
         this.attachCheckout();
+        // keep checking for checkout selector every 50ms just in case the selector is not loaded in the DOM yet
+        setInterval(() => {
+          this.attachCheckout();
+        }, 50);
       }
       clearInterval(interval);
-    }, 100);
+    }, 50);
     setTimeout(() => {
       // if localization is not loaded after 10 seconds, stop the interval and don't init checkout
       clearInterval(interval);
@@ -307,7 +348,9 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
     var _a;
     const dialogLoading = 
     // if it's last step, don't need to check stripe elements
-    (cartStore.step !== 'finish' && !stripeStore.stripeElements) ||
+    (cartStore.step !== 'finish' &&
+      cartStore.step !== 'error' &&
+      !stripeStore.stripeElements) ||
       stripeStore.isFetchingSession;
     const { colorPrimary, colorSecondary, logoUrl, style } = mergeConfig(zonosStore.appearance, this.appearanceSettingsOverride);
     const hasFooter = zonosStore.appearance.zonosAttribution === 'ENABLED';
@@ -335,7 +378,13 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
           '--border-radius': getBorderRadius(style),
         } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
           '--primary-color': !this.isMobile ? colorPrimary : '',
-        } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor, submitBtnType: submitBtnType }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-collapse", { collapseSize: reviewElementSize, collapsed: this.collapseReviewMobile }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+        } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor, submitBtnType: submitBtnType }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-collapse", { collapseSize: reviewElementSize,
+        // only collapse on mobile
+        collapsed: this.collapseReviewMobile && this.isMobile }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+          // do nothing if it's not mobile
+          if (!this.isMobile) {
+            return;
+          }
           this.collapseReviewMobile =
             !this.collapseReviewMobile;
         }, ref: el => (this.zonosReviewRef = el) }), h("zonos-cart-items", null))), h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))), !this.isMobile && renderFooter()), this.isMobile && renderFooter())), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
@@ -358,7 +407,6 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
     "appearanceSettingsOverride": [16],
     "preview": [4],
     "mobile": [4],
-    "buttonAnchorElements": [16],
     "defaultAddress": [16],
     "forceDialogOpen": [4, "force-dialog-open"],
     "open": [32],
@@ -510,5 +558,3 @@ const ZonosCheckout = ZonosCheckout$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCheckout, defineCustomElement };
-
-//# sourceMappingURL=zonos-checkout.js.map

package/dist/components/zonos-collapse.js

@@ -4,5 +4,3 @@ const ZonosCollapse = ZonosCollapse$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCollapse, defineCustomElement };
-
-//# sourceMappingURL=zonos-collapse.js.map

package/dist/components/zonos-collapse2.js

@@ -53,5 +53,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCollapse as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-collapse2.js.map

package/dist/components/zonos-component.js

@@ -45,5 +45,3 @@ const ZonosComponent = ZonosComponent$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosComponent, defineCustomElement };
-
-//# sourceMappingURL=zonos-component.js.map

package/dist/components/zonos-controller.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore } from './stripe.js';
-import { h as handleFetch, l as logError, i as isValidSelector, b as log, c as initLocalizationStore, d as localizationStoreUpdateSelectedCountryCode } from './localization.js';
+import { s as stripeStore } from './cart.js';
+import { h as handleFetch, l as logError, i as isValidSelector, a as log, c as initLocalizationStore, d as localizationStoreUpdateSelectedCountryCode } from './localization.js';
 import { z as zonosStore, d as zonosStoreInitSetting } from './zonosStore.js';
 import { d as defineCustomElement$3 } from './zonos-notification2.js';
 import { d as defineCustomElement$2 } from './zonos-text2.js';
@@ -15,12 +15,11 @@ const getZonosSetting = async () => {
   return { errors: [], json };
 };
 
-const injectCheckoutElement = (triggerAnchorElement) => {
+const injectCheckoutElement = () => {
   // append checkout component if doesn't exist
   const checkoutElement = document.querySelector('zonos-checkout');
   if (!checkoutElement) {
     const newCheckoutElement = document.createElement('zonos-checkout');
-    newCheckoutElement.buttonAnchorElements = triggerAnchorElement;
     document.body.appendChild(newCheckoutElement);
   }
 };
@@ -34,8 +33,7 @@ const initCheckout = async (config) => {
     logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
     return;
   }
-  const triggerElement = document.querySelectorAll(config.placeOrderButtonSelector);
-  injectCheckoutElement(triggerElement);
+  injectCheckoutElement();
 };
 
 const injectHelloComponent = (triggerAnchorElement) => {
@@ -121,11 +119,20 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         log('Checkout failed to load -- missing publishable key', 'warn');
         return;
       }
+      if (zonosStore.checkoutSettings.subscriptionStatus === 'INACTIVE') {
+        log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
+        log('zonos controller loaded');
+        return;
+      }
+      if (zonosStore.checkoutSettings.visibilityStatus === 'DISABLED') {
+        log('=== Checkout is disabled by store owner ===', 'warn');
+        log('zonos controller loaded');
+        return;
+      }
       // send publishable key out to load stripe
       this.stripeInitEvent.emit({
         publishableKey: publishableKey.token,
       });
-      // eslint-disable-next-line no-console
       log('zonos controller loaded');
     })();
   }
@@ -196,5 +203,3 @@ const ZonosController = ZonosController$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosController, defineCustomElement };
-
-//# sourceMappingURL=zonos-controller.js.map

package/dist/components/zonos-country-flag.js

@@ -4,5 +4,3 @@ const ZonosCountryFlag = ZonosCountryFlag$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCountryFlag, defineCustomElement };
-
-//# sourceMappingURL=zonos-country-flag.js.map

package/dist/components/zonos-country-flag2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as localizationStore } from './localization.js';
+import { b as localizationStore } from './localization.js';
 import { c as classes } from './classes.js';
 
 const zonosCountryFlagCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
@@ -48,5 +48,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCountryFlag as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-country-flag2.js.map

package/dist/components/zonos-country-select.js

@@ -4,5 +4,3 @@ const ZonosCountrySelect = ZonosCountrySelect$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCountrySelect, defineCustomElement };
-
-//# sourceMappingURL=zonos-country-select.js.map

package/dist/components/zonos-country-select2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as localizationStoreUpdateSelectedCountryCode, t as translate, a as localizationStore } from './localization.js';
+import { d as localizationStoreUpdateSelectedCountryCode, t as translate, b as localizationStore } from './localization.js';
 import { d as defineCustomElement$6 } from './zonos-button2.js';
 import { d as defineCustomElement$5 } from './zonos-country-flag2.js';
 import { d as defineCustomElement$4 } from './zonos-icon2.js';
@@ -1874,5 +1874,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCountrySelect as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-country-select2.js.map

package/dist/components/zonos-custom-message.js

@@ -4,5 +4,3 @@ const ZonosCustomMessage = ZonosCustomMessage$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCustomMessage, defineCustomElement };
-
-//# sourceMappingURL=zonos-custom-message.js.map

package/dist/components/zonos-custom-message2.js

@@ -51,5 +51,3 @@ function defineCustomElement() {
 }
 
 export { ZonosCustomMessage as Z, defineCustomElement as d };
-
-//# sourceMappingURL=zonos-custom-message2.js.map

package/dist/components/zonos-customer-info.js

@@ -4,5 +4,3 @@ const ZonosCustomerInfo = ZonosCustomerInfo$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { ZonosCustomerInfo, defineCustomElement };
-
-//# sourceMappingURL=zonos-customer-info.js.map