@zonos/elements 1.3.267 → 1.3.269

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-footer/zonos-checkout-footer.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { localizationStore } from "../../../store/hello/localization";
+import { translate } from "../../../store/translationStore";
 import { isCheckoutMobile } from "../../../utils/checkout/isCheckoutMobile";
 import { classes } from "../../../utils/classes";
 import { languages } from "../../../../types/ILanguage";
@@ -9,6 +10,8 @@ import ChevronDownIcon from "./assets/chevronDownIcon.svg";
 import Globe from "./assets/globe.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ZonosIconDark from "./assets/zonosIconDark.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ZonosIconLight from "./assets/zonosIconLight.svg";
 export class ZonosCheckoutFooter {
     constructor() {
         /**
@@ -37,10 +40,12 @@ export class ZonosCheckoutFooter {
         const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
         // reverse color when on desktop. With the coversheet backdrop, the color should be white
         const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1000';
-        return (h(Host, { key: 'ec472ed419e634f96630332398ff6e814dcd0391', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'd29154eb86046ddd440460343b3b115d3e23c87d', class: "zonos--checkout-footer" }, h("div", { key: 'b0bb0fed3cc0b228fb1a80c6b27a3aaa84081b95', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'd6ef4aa2d32a04a5d27c8085471a85970a24dbed', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, h("span", { key: '6e7d935c324465ad501a28388d71ad73fba9c74f', class: "zonos--checkout-locale-label" }, languageLabel, h("zonos-icon", { key: '5041eee50cd91210e6c1d4257f66b63e76ce9e4a', "aria-hidden": "true", class: "zonos--checkout-locale-chevron", content: ChevronDownIcon, iconColor: colorDesktop, size: 18 }))), h("div", { key: '87b4b4b6fe789592d61dd7e69944b433c0bc0cf2', class: classes([
+        return (h(Host, { key: '9bf4e1fae3660eb17d04521c533f52651f9b6153', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: '90b473ca63321395e9fceb48b8d21d90b225c01f', class: "zonos--checkout-footer" }, h("div", { key: '4cd4d63838aae1c26df2b3513cb24f93a497705b', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '2db346594fdf00329a8f4887c4d431ddedc22e40', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, h("span", { key: '55332b4a8d812976333a9f14853d63c94fc2d3b4', class: "zonos--checkout-locale-label" }, languageLabel, h("zonos-icon", { key: '1c27c4b559974ebbcff5470d6fb7a2ace3e204c2', "aria-hidden": "true", class: "zonos--checkout-locale-chevron", content: ChevronDownIcon, iconColor: colorDesktop, size: 18 }))), h("div", { key: '5e87976476c7fb124c308352587643b009bda3df', class: classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: 'de8bd0ba1085564c2fe40c2d261e74ec9f67da90', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '7c3954550c4512b2d83fbafe05b57a44f0501991', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: '7bf2b74683ee81e8aa5ed5c0175ba22b8e8b5d6e', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'c39c00e77f47dbc1d47f69003cdb5c5f17c7a4e4', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '567940865a03b6dce5273d70fb85860c042f9068', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: 'e3a0727029aa676e68c2a9a174c64188f7ab029e', textColor: colorDesktop }, "Powered by"), h("a", { key: '5a7f20a70efee92be700365818004f86827cc373', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'c4a61b660e474064c35626744cad44e598206179', autoHeight: true, content: ZonosIconDark, size: 108 })))))));
+            ]) }, h("zonos-language-select", { key: '3ab16dc27d046bd8a0ebab4fd44ba0a10b53b0a5', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '3d7e9500d281348acb8f6c64f7a792b0248b5347', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: '8b2ba4f4d0e962d94e24b08e69ad53310050049b', href: "https://zonos.com/docs/legal/zonos-privacy-policy", rel: "noopener noreferrer", target: "_blank" }, h("zonos-text", { key: '06c700777036ef3e15b2f8586e96ccb020f06850', textColor: colorDesktop }, translate('Privacy policy'))), h("div", { key: '1af786991ea239d2b40a43de0e5b872350f8e171', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '889819449f802936510bda4f21b1233e76853613', textColor: colorDesktop }, translate('Powered by')), h("a", { key: '1d2f3f924b78e4e8b37b1504e37a2cdb0b0bfb9b', href: "https://zonos.com", rel: "noopener noreferrer", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '2429284234ffcb51ecff0fd3a98f88bbe8c4c1c5', autoHeight: true, content: colorDesktop === 'gray-1000'
+                ? ZonosIconLight
+                : ZonosIconDark, size: 108 })))))));
     }
     static get is() { return "zonos-checkout-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,9 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreNextStep, } from "../../../store/checkout/cart";
 import { paypalStore } from "../../../store/checkout/paypal";
+import { isPolicyConsentRequired, policyConsentStore, } from "../../../store/checkout/policyConsent";
 import { storeCreditStore, storeCreditStoreCoversFullAmount, } from "../../../store/checkout/storeCredit";
-import { stripeStore } from "../../../store/checkout/stripe";
+import { stripeStore, stripeStoreRecordPolicyConsent, } from "../../../store/checkout/stripe";
 import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
@@ -67,6 +68,30 @@ export class ZonosCheckoutPayment {
                 }, 10);
                 return;
             }
+            // Block submit when the merchant requires policy consent and the buyer hasn't accepted.
+            if (isPolicyConsentRequired() && !policyConsentStore.accepted) {
+                policyConsentStore.showError = true;
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.ele
+                        .querySelector('zonos-policy-consent')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+                }, 10);
+                return;
+            }
+            // Lock consent state for the rest of the flow so the buyer can't uncheck
+            // during the async work below (which would create a race where the
+            // metadata builder sees `accepted=false` and skips writing the consent
+            // entry). Cleared on every checkout close.
+            if (isPolicyConsentRequired()) {
+                policyConsentStore.locked = true;
+            }
+            // Persist the buyer's consent into the checkout session metadata BEFORE confirming
+            // payment, so the recorded consent is durable even if Stripe takes a while or fails.
+            // We deliberately don't block payment on a recording failure — a transient network
+            // hiccup shouldn't gate the buyer out, and the failure is logged inside the helper
+            // via `logError` for observability. The buyer's consent intent is also captured
+            // client-side via the checkbox state and `acceptedAt` timestamp.
+            await stripeStoreRecordPolicyConsent();
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
             submitAnalytics({
@@ -106,17 +131,46 @@ export class ZonosCheckoutPayment {
             });
         };
         this.placeTestOrder = async () => {
-            this.internalContinueLoading = true;
-            const { errors } = await placeTestOrder();
-            if (errors.length) {
-                this.stagingOrderCreateErrorMessage =
-                    errors[0] || 'Failed to create staging order. Please try again.';
-                this.internalContinueLoading = false;
+            // Staging "Place test order" still represents the buyer placing an order,
+            // so apply the same consent gate the real Pay button uses. Consistency
+            // matters here: merchants testing the flow should see the same blockers
+            // a real buyer would hit.
+            if (isPolicyConsentRequired() && !policyConsentStore.accepted) {
+                policyConsentStore.showError = true;
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.ele
+                        .querySelector('zonos-policy-consent')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+                }, 10);
                 return;
             }
-            this.internalContinueLoading = false;
-            // continue to the next step
-            cartStoreNextStep();
+            const consentWasRequired = isPolicyConsentRequired();
+            if (consentWasRequired) {
+                policyConsentStore.locked = true;
+            }
+            try {
+                this.internalContinueLoading = true;
+                // Don't block the test order on a consent-record failure — failure is logged
+                // inside the helper and surfaced in Vercel logs for observability.
+                await stripeStoreRecordPolicyConsent();
+                const { errors } = await placeTestOrder();
+                if (errors.length) {
+                    this.stagingOrderCreateErrorMessage =
+                        errors[0] || 'Failed to create staging order. Please try again.';
+                    this.internalContinueLoading = false;
+                    return;
+                }
+                this.internalContinueLoading = false;
+                // continue to the next step
+                cartStoreNextStep();
+            }
+            finally {
+                // Release the consent lock on every terminal exit so a failed test order
+                // doesn't leave the checkbox stuck disabled in the merchant's staging UI.
+                if (consentWasRequired) {
+                    policyConsentStore.locked = false;
+                }
+            }
         };
     }
     continueLoadingWatcher() {
@@ -155,7 +209,7 @@ export class ZonosCheckoutPayment {
                 const theme = this.isMobile
                     ? zonosStore.appearance.theme
                     : themeBasedColor;
-                return (h(Fragment, null, this.stagingOrderCreateErrorMessage && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, this.stagingOrderCreateErrorMessage)), h("zonos-empty-state-payment", { emptyStateText: translate('No payment method needed for staging'), theme: theme }), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.internalContinueLoading, onClick: () => {
+                return (h(Fragment, null, this.stagingOrderCreateErrorMessage && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, this.stagingOrderCreateErrorMessage)), h("zonos-empty-state-payment", { emptyStateText: translate('No payment method needed for staging'), theme: theme }), h("zonos-policy-consent", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.internalContinueLoading, onClick: () => {
                         void this.placeTestOrder();
                     }, size: "lg",
                     // use primary type when on mobile mode
@@ -164,7 +218,7 @@ export class ZonosCheckoutPayment {
             return (h(Fragment, null, this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, stripeStore.customErrorMessage ||
                 translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), cartStore.customerAuthenticationToken &&
                 storeCreditStore.availableBalance != null &&
-                storeCreditStore.availableBalance > 0 && (h("zonos-store-credit", null)), storeCreditCoversFullOrder ? (h("zonos-banner", { intent: "info" }, translate('Store credit covers your full order'))) : (h("zonos-payment", null)), h("div", { class: "zonos--group-btn" }, (!isPaypalTabSelected || storeCreditCoversFullOrder) && (h(Fragment, null, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, isDisabled: this.continueLoading &&
+                storeCreditStore.availableBalance > 0 && (h("zonos-store-credit", null)), storeCreditCoversFullOrder ? (h("zonos-banner", { intent: "info" }, translate('Store credit covers your full order'))) : (h("zonos-payment", null)), h("zonos-policy-consent", null), h("div", { class: "zonos--group-btn" }, (!isPaypalTabSelected || storeCreditCoversFullOrder) && (h(Fragment, null, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, isDisabled: this.continueLoading &&
                     stripeStore.checkoutSettlementCurrency === 'USD', loading: this.continueLoading &&
                     stripeStore.checkoutSettlementCurrency !== 'USD', onClick: async () => {
                     if (!cartStore.checkoutSession) {

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

@@ -1,6 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreClearCheckoutInterval, cartStoreNextStep, cartStoreOnChange, cartStoreReset, cartStoreResetTabItems, cartStoreSetCheckoutSession, cartStoreStartCheckoutInterval, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
 import { paypalInitScript, paypalStore, paypalStoreHasPaypalEnabled, } from "../../store/checkout/paypal";
+import { isPolicyConsentRequired, policyConsentStore, policyConsentStoreReset, } from "../../store/checkout/policyConsent";
 import { storeCreditStoreApplyCredit, storeCreditStoreCoversFullAmount, storeCreditStoreCreateOrder, storeCreditStoreGetEffectiveAmount, } from "../../store/checkout/storeCredit";
 import { getCheckoutSessionBody, initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreGetPaymentIntent, stripeStoreHandleInventoryCheck, stripeStoreHandleInventoryRefund, stripeStoreInitCheckoutSession, stripeStoreOnChange, stripeStorePrefetchLandedCost, stripeStoreReset, stripeStoreRetrievePayment, stripeStoreUpdateCheckoutSessionBaseCurrency, } from "../../store/checkout/stripe";
 import { localizationStore, localizationStoreOnChange, } from "../../store/hello/localization";
@@ -562,6 +563,12 @@ export class ZonosCheckout {
             // reset cart store if it's not preview mode and only when checkout is in the finish step.
             cartStoreReset();
         }
+        // Clear policy consent on every close (not just finish) so a buyer who
+        // checked the box mid-flow and then closed can't carry the prior
+        // acceptance into a new attempt without a fresh checkbox click.
+        if (!this.preview) {
+            policyConsentStoreReset();
+        }
         // reset step to customer info
         cartStore.step = 'customer-info';
         // reset the tab item, so that user needs to click on Continue button to re-quote the landed cost if needed.
@@ -1390,77 +1397,104 @@ export class ZonosCheckout {
             stripeStore.shouldRenderPayInUsdButton &&
             !this.payInUsdConfirmDialogOpen) {
             this.payInUsdConfirmDialogOpen = true;
+            // Don't unlock consent here — the USD-confirm dialog is mid-flow; the
+            // lock should hold until the user resolves the dialog and we re-enter.
             return;
         }
         // Close the dialog after the user confirms to proceed with the payment in USD
         this.payInUsdConfirmDialogOpen = false;
-        // reset paypal error message
-        paypalStore.paypalErrorMessage = null;
-        // reset error state
-        stripeStore.hasPaymentError = false;
-        this.submitLoading = true;
-        // reset inventory check message
-        cartStore.inventoryCheckErrorMessage = null;
-        // Attempt to change settlement currency to USD
-        const baseCurrencyUpdateSuccess = await stripeStoreUpdateCheckoutSessionBaseCurrency();
-        // Should not proceed to confirm payment if base currency update failed
-        if (!baseCurrencyUpdateSuccess) {
-            stripeStore.hasPaymentError = true;
-            stripeStore.customErrorMessage = translate('Unable to complete payment in [currency]. Please try again or select a different currency. If the issue persists, contact our support team for assistance.', {
-                currency: stripeStore.checkoutSettlementCurrency,
-            });
-            this.submitLoading = false;
-            return;
-        }
+        // Track whether consent was required at the start of this flow so we know
+        // whether to release the lock in `finally`. The store reset on checkout
+        // close will catch any stragglers, but releasing here lets the buyer
+        // recover (uncheck / retry) when an async step aborts.
+        const consentWasRequired = isPolicyConsentRequired();
         try {
-            // check inventory before proceeding to payment
-            cartStore.inventoryCheckErrorMessage =
-                await stripeStoreHandleInventoryCheck();
-        }
-        catch (_a) {
-            // If user provide callback and it throw an exception, default to this message and stop the payment.
-            cartStore.inventoryCheckErrorMessage = translate('Unable to check inventory. Please try again.');
-        }
-        // Don't proceed to payment if there's an error message
-        if (cartStore.inventoryCheckErrorMessage) {
-            // stop the submit loading state
-            this.submitLoading = false;
-            return;
-        }
-        // Apply store credit if customer has selected an amount
-        const storeCreditAmount = storeCreditStoreGetEffectiveAmount();
-        if (storeCreditAmount > 0) {
-            const storeCreditResult = await storeCreditStoreApplyCredit();
-            if (!storeCreditResult.success) {
+            // reset paypal error message
+            paypalStore.paypalErrorMessage = null;
+            // reset error state
+            stripeStore.hasPaymentError = false;
+            this.submitLoading = true;
+            // reset inventory check message
+            cartStore.inventoryCheckErrorMessage = null;
+            // Attempt to change settlement currency to USD
+            const baseCurrencyUpdateSuccess = await stripeStoreUpdateCheckoutSessionBaseCurrency();
+            // Should not proceed to confirm payment if base currency update failed
+            if (!baseCurrencyUpdateSuccess) {
                 stripeStore.hasPaymentError = true;
-                stripeStore.customErrorMessage =
-                    storeCreditResult.error ||
-                        translate('Unable to apply store credit. Please try again.');
+                stripeStore.customErrorMessage = translate('Unable to complete payment in [currency]. Please try again or select a different currency. If the issue persists, contact our support team for assistance.', {
+                    currency: stripeStore.checkoutSettlementCurrency,
+                });
                 this.submitLoading = false;
                 return;
             }
-        }
-        // If store credit covers the full order, create order directly without payment
-        if (storeCreditStoreCoversFullAmount()) {
             try {
-                // Validate checkout session (landed cost ID, etc.) before creating order
-                const checkoutSessionStatus = await validateCheckoutSession();
-                if (!checkoutSessionStatus.valid) {
+                // check inventory before proceeding to payment
+                cartStore.inventoryCheckErrorMessage =
+                    await stripeStoreHandleInventoryCheck();
+            }
+            catch (_a) {
+                // If user provide callback and it throw an exception, default to this message and stop the payment.
+                cartStore.inventoryCheckErrorMessage = translate('Unable to check inventory. Please try again.');
+            }
+            // Don't proceed to payment if there's an error message
+            if (cartStore.inventoryCheckErrorMessage) {
+                // stop the submit loading state
+                this.submitLoading = false;
+                return;
+            }
+            // Apply store credit if customer has selected an amount
+            const storeCreditAmount = storeCreditStoreGetEffectiveAmount();
+            if (storeCreditAmount > 0) {
+                const storeCreditResult = await storeCreditStoreApplyCredit();
+                if (!storeCreditResult.success) {
                     stripeStore.hasPaymentError = true;
-                    stripeStore.customErrorMessage = checkoutSessionStatus.errorMessage;
+                    stripeStore.customErrorMessage =
+                        storeCreditResult.error ||
+                            translate('Unable to apply store credit. Please try again.');
                     this.submitLoading = false;
                     return;
                 }
-                const orderResult = await storeCreditStoreCreateOrder();
-                if (!orderResult.success) {
+            }
+            // If store credit covers the full order, create order directly without payment
+            if (storeCreditStoreCoversFullAmount()) {
+                try {
+                    // Validate checkout session (landed cost ID, etc.) before creating order
+                    const checkoutSessionStatus = await validateCheckoutSession();
+                    if (!checkoutSessionStatus.valid) {
+                        stripeStore.hasPaymentError = true;
+                        stripeStore.customErrorMessage = checkoutSessionStatus.errorMessage;
+                        this.submitLoading = false;
+                        return;
+                    }
+                    const orderResult = await storeCreditStoreCreateOrder();
+                    if (!orderResult.success) {
+                        stripeStore.hasPaymentError = true;
+                        stripeStore.customErrorMessage =
+                            orderResult.error ||
+                                translate('Unable to place order with store credit. Please try again.');
+                        this.submitLoading = false;
+                        return;
+                    }
+                    cartStoreNextStep();
+                    cartStoreClearCheckoutInterval();
+                }
+                catch (err) {
+                    logError(err);
+                    submitAnalytics({
+                        event: 'zonos-checkout-payment-fail',
+                        metadata: {
+                            checkoutSessionId: storageStore.checkoutSessionId,
+                        },
+                    });
                     stripeStore.hasPaymentError = true;
-                    stripeStore.customErrorMessage =
-                        orderResult.error ||
-                            translate('Unable to place order with store credit. Please try again.');
-                    this.submitLoading = false;
-                    return;
                 }
+                this.submitLoading = false;
+                return;
+            }
+            try {
+                await stripeStoreConfirmPayment();
                 cartStoreNextStep();
+                // clear the checkout session timeout timer when purchase is complete
                 cartStoreClearCheckoutInterval();
             }
             catch (err) {
@@ -1472,32 +1506,22 @@ export class ZonosCheckout {
                     },
                 });
                 stripeStore.hasPaymentError = true;
+                // should request inventory refund if there's an error during payment
+                if (stripeStore.shouldInventoryRefund) {
+                    void stripeStoreHandleInventoryRefund();
+                    stripeStore.shouldInventoryRefund = false;
+                }
             }
             this.submitLoading = false;
-            return;
         }
-        try {
-            await stripeStoreConfirmPayment();
-            cartStoreNextStep();
-            // clear the checkout session timeout timer when purchase is complete
-            cartStoreClearCheckoutInterval();
-        }
-        catch (err) {
-            logError(err);
-            submitAnalytics({
-                event: 'zonos-checkout-payment-fail',
-                metadata: {
-                    checkoutSessionId: storageStore.checkoutSessionId,
-                },
-            });
-            stripeStore.hasPaymentError = true;
-            // should request inventory refund if there's an error during payment
-            if (stripeStore.shouldInventoryRefund) {
-                void stripeStoreHandleInventoryRefund();
-                stripeStore.shouldInventoryRefund = false;
+        finally {
+            // Release the consent lock on every terminal exit (success or failure)
+            // so the buyer can re-toggle / retry. On success the cart advances and
+            // the close-handler reset would clean this up anyway.
+            if (consentWasRequired) {
+                policyConsentStore.locked = false;
             }
         }
-        this.submitLoading = false;
     }
     async handleFinishClick() {
         // reset stripe store
@@ -1509,6 +1533,8 @@ export class ZonosCheckout {
         }
         // reset cart store
         cartStoreReset();
+        // reset policy consent so the next checkout starts un-accepted
+        policyConsentStoreReset();
         // redirect to vendor store url if this is legacy checkout.
         if (window.Zonos.isLegacyCheckout && window.Zonos.cartData) {
             const storeBaseUrl = window.Zonos.cartData.storeBaseUrl ||
@@ -1710,6 +1736,8 @@ export class ZonosCheckout {
         stripeStoreReset();
         // reset cart store
         cartStoreReset();
+        // reset policy consent
+        policyConsentStoreReset();
         // cleanup onChange listener
         this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
         window.removeEventListener('message', this.handleHostedOpenWindowCallback);

package/dist/collection/components/checkout/zonos-checkout/zonos-policy-consent/zonos-policy-consent.css

@@ -0,0 +1,93 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: block;
+  margin-top: 20px;
+}
+
+.zonos--policy-consent {
+  background-color: var(--zonos-elements-gray-50);
+  border: 1px solid var(--zonos-elements-gray-200);
+  border-radius: 8px;
+  padding: 12px 14px;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.zonos--policy-consent:hover {
+  border-color: var(--zonos-elements-gray-300);
+}
+
+.zonos--policy-consent--error {
+  background-color: var(--zonos-elements-red-50);
+  border-color: var(--zonos-elements-red-400);
+}
+
+.zonos--policy-consent-label {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  user-select: none;
+}
+
+.zonos--policy-consent-checkbox {
+  accent-color: var(--zonos-elements-blue-600);
+  cursor: pointer;
+  flex-shrink: 0;
+  height: 18px;
+  margin: 0;
+  width: 18px;
+}
+
+.zonos--policy-consent-text {
+  color: var(--zonos-elements-gray-800);
+  font-size: 14px;
+  line-height: 1.45;
+}
+.zonos--policy-consent-text a {
+  color: var(--zonos-elements-blue-600);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.zonos--policy-consent-text a:hover {
+  color: var(--zonos-elements-blue-700);
+}
+
+.zonos--policy-consent-error {
+  color: var(--zonos-elements-red-600);
+  font-size: 13px;
+  line-height: 1.4;
+  margin-top: 8px;
+  padding: 0 4px;
+}

package/dist/collection/components/checkout/zonos-checkout/zonos-policy-consent/zonos-policy-consent.js

@@ -0,0 +1,93 @@
+import { Fragment, h, Host } from "@stencil/core";
+import { getEnabledPolicies, policyConsentStore, } from "../../../store/checkout/policyConsent";
+import { localizationStore } from "../../../store/hello/localization";
+import { translate } from "../../../store/translationStore";
+import { zonosStore } from "../../../store/zonosStore";
+const POLICIES_SENTINEL = 'POLICIES';
+export class ZonosPolicyConsent {
+    render() {
+        const policies = getEnabledPolicies();
+        if (!policies.length) {
+            return null;
+        }
+        // Build the locale-aware joined list ("X, Y, and Z" in English, equivalent in other locales).
+        const ListFormatCtor = Intl
+            .ListFormat;
+        const parts = ListFormatCtor
+            ? new ListFormatCtor(localizationStore.selectedLocale, {
+                style: 'long',
+                type: 'conjunction',
+            }).formatToParts(policies.map(p => p.name))
+            : // Fallback for environments without Intl.ListFormat: simple ", "-joined list.
+                policies.flatMap((p, idx) => idx === 0
+                    ? [{ type: 'element', value: p.name }]
+                    : [
+                        { type: 'literal', value: ', ' },
+                        { type: 'element', value: p.name },
+                    ]);
+        const listNodes = parts.map(part => {
+            if (part.type === 'literal') {
+                return part.value;
+            }
+            // 'element' part — match back to the policy by name to recover its URL.
+            const policy = policies.find(p => p.name === part.value);
+            if (!policy) {
+                return part.value;
+            }
+            return (h("a", { href: policy.url,
+                // Prevent the surrounding <label> from also activating the checkbox
+                // when the link is clicked — `stopPropagation` alone doesn't suppress
+                // the label's default behavior in every browser. We explicitly open
+                // the URL ourselves and call `preventDefault` to swallow the click.
+                onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    window.open(policy.url, '_blank', 'noopener,noreferrer');
+                }, rel: "noopener noreferrer", target: "_blank" }, part.value));
+        });
+        // Use the merchant-name template when an org name is available, falling back to the generic
+        // phrasing otherwise so we never render a stray apostrophe (e.g. " 's Terms...").
+        // Reads from `zonosStore` so this works when consumed via the npm package
+        // (where `window.Zonos.cartSettings` may not be populated).
+        const merchantName = zonosStore.organizationName;
+        const template = merchantName
+            ? translate("I agree to [merchantName]'s [policies]", {
+                merchantName,
+                policies: POLICIES_SENTINEL,
+            })
+            : translate('I agree to the [policies]', {
+                policies: POLICIES_SENTINEL,
+            });
+        const [before = '', after = ''] = template.split(POLICIES_SENTINEL);
+        const showError = policyConsentStore.showError;
+        const errorId = 'zonos--policy-consent-error';
+        return (h(Host, { class: "zonos--policy-consent-host" }, h("div", { class: `zonos--policy-consent${showError ? ' zonos--policy-consent--error' : ''}` }, h("label", { class: "zonos--policy-consent-label" }, h("input", { "aria-describedby": showError ? errorId : undefined, "aria-invalid": showError ? 'true' : 'false', checked: policyConsentStore.accepted, class: "zonos--policy-consent-checkbox", disabled: policyConsentStore.locked, onChange: (event) => {
+                const isChecked = event.target.checked;
+                policyConsentStore.accepted = isChecked;
+                if (isChecked) {
+                    // Snapshot the timestamp at the moment of acceptance so later
+                    // session-metadata updates don't drift it forward.
+                    if (!policyConsentStore.acceptedAt) {
+                        policyConsentStore.acceptedAt = new Date().toISOString();
+                    }
+                    policyConsentStore.showError = false;
+                }
+                else {
+                    // If the buyer un-checks, the prior acceptance is no longer valid.
+                    policyConsentStore.acceptedAt = null;
+                }
+            }, type: "checkbox" }), h("span", { class: "zonos--policy-consent-text" }, before, h(Fragment, null, listNodes), after))), showError && (h("div", { class: "zonos--policy-consent-error", id: errorId, role: "alert" }, translate('You must accept the policies to place this order')))));
+    }
+    static get is() { return "zonos-policy-consent"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-policy-consent.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-policy-consent.css"]
+        };
+    }
+}