@tagadapay/plugin-sdk 4.0.0 → 4.0.4

package/dist/v2/core/utils/previewModeIndicator.js

@@ -212,143 +212,143 @@ export function injectPreviewModeIndicator() {
     // Create container
     const container = document.createElement('div');
     container.id = 'tgd-preview-indicator';
-    container.style.cssText = `
-        position: fixed;
-        bottom: 16px;
-        right: 16px;
-        z-index: 999999;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    container.style.cssText = `
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 999999;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     `;
     // Create badge
     const badge = document.createElement('div');
-    badge.style.cssText = `
-        background: ${draftMode ? '#ff9500' : '#007aff'};
-        color: white;
-        padding: 8px 12px;
-        border-radius: 8px;
-        font-size: 13px;
-        font-weight: 600;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        cursor: pointer;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        gap: 6px;
+    badge.style.cssText = `
+        background: ${draftMode ? '#ff9500' : '#007aff'};
+        color: white;
+        padding: 8px 12px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 6px;
     `;
-    badge.innerHTML = `
-        <span style="font-size: 16px;">🔍</span>
-        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
+    badge.innerHTML = `
+        <span style="font-size: 16px;">🔍</span>
+        <span>${draftMode ? 'Preview Mode' : 'Dev Mode'}</span>
     `;
     // Create details popup (with padding-top to bridge gap with badge)
     const details = document.createElement('div');
-    details.style.cssText = `
-        position: absolute;
-        bottom: calc(100% + 8px);
-        right: 0;
-        background: white;
-        border: 1px solid #e5e5e5;
-        border-radius: 8px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        padding: 12px;
-        min-width: 250px;
-        font-size: 12px;
-        line-height: 1.5;
-        display: none;
+    details.style.cssText = `
+        position: absolute;
+        bottom: calc(100% + 8px);
+        right: 0;
+        background: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        padding: 12px;
+        min-width: 250px;
+        font-size: 12px;
+        line-height: 1.5;
+        display: none;
     `;
     details.style.paddingTop = '20px'; // Extra padding to bridge the gap
     // Add invisible bridge between badge and popup to prevent flickering
     const bridge = document.createElement('div');
-    bridge.style.cssText = `
-        position: absolute;
-        bottom: 100%;
-        left: 0;
-        right: 0;
-        height: 8px;
-        display: none;
+    bridge.style.cssText = `
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+        height: 8px;
+        display: none;
     `;
     // Build details content
     let detailsHTML = '<div style="margin-bottom: 8px; font-weight: 600; color: #1d1d1f;">Current Environment</div>';
     detailsHTML += '<div style="display: flex; flex-direction: column; gap: 6px;">';
     if (draftMode) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Draft Mode:</span>
-                <span style="color: #ff9500; font-weight: 600;">ON</span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Draft Mode:</span>
+                <span style="color: #ff9500; font-weight: 600;">ON</span>
+            </div>
         `;
     }
     if (trackingDisabled) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Tracking:</span>
-                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Tracking:</span>
+                <span style="color: #ff3b30; font-weight: 600;">DISABLED</span>
+            </div>
         `;
     }
     if (params.funnelEnv) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>Funnel Env:</span>
-                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
-                    ${params.funnelEnv}
-                </span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>Funnel Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.funnelEnv}
+                </span>
+            </div>
         `;
     }
     if (params.tagadaClientEnv) {
-        detailsHTML += `
-            <div style="display: flex; justify-content: space-between; color: #86868b;">
-                <span>API Env:</span>
-                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
-                    ${params.tagadaClientEnv}
-                </span>
-            </div>
+        detailsHTML += `
+            <div style="display: flex; justify-content: space-between; color: #86868b;">
+                <span>API Env:</span>
+                <span style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 11px;">
+                    ${params.tagadaClientEnv}
+                </span>
+            </div>
         `;
     }
     if (params.tagadaClientBaseUrl) {
-        detailsHTML += `
-            <div style="color: #86868b;">
-                <div style="margin-bottom: 4px;">API URL:</div>
-                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
-                    ${params.tagadaClientBaseUrl}
-                </div>
-            </div>
+        detailsHTML += `
+            <div style="color: #86868b;">
+                <div style="margin-bottom: 4px;">API URL:</div>
+                <div style="color: #1d1d1f; font-weight: 600; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.tagadaClientBaseUrl}
+                </div>
+            </div>
         `;
     }
     if (params.funnelId) {
-        detailsHTML += `
-            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-                <div style="margin-bottom: 4px;">Funnel ID:</div>
-                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
-                    ${params.funnelId}
-                </div>
-            </div>
+        detailsHTML += `
+            <div style="color: #86868b; margin-top: 4px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+                <div style="margin-bottom: 4px;">Funnel ID:</div>
+                <div style="color: #1d1d1f; font-family: monospace; font-size: 10px; word-break: break-all; background: #f5f5f7; padding: 4px 6px; border-radius: 4px;">
+                    ${params.funnelId}
+                </div>
+            </div>
         `;
     }
     detailsHTML += '</div>';
-    detailsHTML += `
-        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
-            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
-        </div>
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5; font-size: 11px; color: #86868b; text-align: center;">
+            Add <code style="background: #f5f5f7; padding: 2px 4px; border-radius: 3px;">?forceReset=true</code> to reset
+        </div>
     `;
     // Add action button
-    detailsHTML += `
-        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-            <button id="tgd-leave-preview" style="
-                background: #ff3b30;
-                color: white;
-                border: none;
-                border-radius: 6px;
-                padding: 10px 12px;
-                font-size: 13px;
-                font-weight: 600;
-                cursor: pointer;
-                transition: opacity 0.2s;
-                width: 100%;
-            ">
-                🚪 Leave Preview Mode
-            </button>
-        </div>
+    detailsHTML += `
+        <div style="margin-top: 12px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+            <button id="tgd-leave-preview" style="
+                background: #ff3b30;
+                color: white;
+                border: none;
+                border-radius: 6px;
+                padding: 10px 12px;
+                font-size: 13px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: opacity 0.2s;
+                width: 100%;
+            ">
+                🚪 Leave Preview Mode
+            </button>
+        </div>
     `;
     details.innerHTML = detailsHTML;
     // Hover behavior - keep popup visible when hovering over badge, bridge, or popup

package/dist/v2/index.d.ts

@@ -9,6 +9,7 @@ export * from './core/googleAutocomplete';
 export * from './core/isoData';
 export * from './core/utils/configHotReload';
 export * from './core/utils/currency';
+export * from './core/utils/metaEventId';
 export * from './core/utils/pluginConfig';
 export * from './core/utils/previewMode';
 export { injectPreviewModeIndicator, isIndicatorInjected, removePreviewModeIndicator } from './core/utils/previewModeIndicator';
@@ -16,6 +17,10 @@ export * from './core/utils/products';
 export { getAssignedPaymentFlowId, getAssignedScripts, getAssignedStaticResources, getAssignedResources, getAssignedStepConfig, getAssignedOrderBumpOfferIds, getAssignedUpsellOfferIds, getLocalFunnelConfig, getEnabledMethods, getExpressMethods, getExpressMethodsByProcessor, findMethod, isMethodEnabled, loadLocalFunnelConfig } from './core/funnelClient';
 export type { LocalFunnelConfig, PaymentMethodConfig, PaymentSetupConfig, PaymentSetupMethod, PixelsConfig, RuntimeStepConfig } from './core/funnelClient';
 export * from './core/pathRemapping';
+export { bootstrapPixelTrackerFromWindow, createPixelTracker, } from './core/pixelTracker';
+export type { PixelTracker, TrackOptions } from './core/pixelTracker';
+export type { PixelProviderKey } from './core/pixelMapping';
+export { makeMetaEventId } from './core/utils/metaEventId';
 export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion } from './core/resources/checkout';
 export type { Order, OrderLineItem } from './core/utils/order';
 export type { PostPurchaseOffer, PostPurchaseOfferItem, PostPurchaseOfferSummary } from './core/resources/postPurchases';
@@ -31,6 +36,8 @@ export type { BackNavigationActionData, CartUpdatedActionData, DirectNavigationA
 export { ApplePayButton, StripeExpressButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, PreviewModeIndicator, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useApplePayCheckout, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useGooglePayCheckout, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePaymentRetrieve, usePixelTracking, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStepConfig, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers, useSetPaymentMethod, WhopCheckout, useWhopPaymentPolling } from './react';
 export type { DebugScript } from './react';
 export type { PaymentMethodName } from './react';
+export { resolveClickId, publishTrackingGlobal, CLICK_ID_URL_PARAMS, CLICK_ID_COOKIES, } from './core/utils/clickIdResolver';
+export type { ResolvedClickId, TagadaTrackingGlobal, ClickIdSource, } from './core/utils/clickIdResolver';
 export type { TranslateFunction, TranslationText, UseTranslationOptions, UseTranslationResult } from './react/hooks/useTranslation';
 export type { FunnelContextValue } from './react/hooks/useFunnel';
 export type { UseApplePayCheckoutOptions } from './react/hooks/useApplePayCheckout';

package/dist/v2/index.js

@@ -10,6 +10,7 @@ export * from './core/googleAutocomplete';
 export * from './core/isoData';
 export * from './core/utils/configHotReload';
 export * from './core/utils/currency';
+export * from './core/utils/metaEventId';
 export * from './core/utils/pluginConfig';
 export * from './core/utils/previewMode';
 export { injectPreviewModeIndicator, isIndicatorInjected, removePreviewModeIndicator } from './core/utils/previewModeIndicator';
@@ -22,6 +23,15 @@ getEnabledMethods, getExpressMethods, getExpressMethodsByProcessor, findMethod,
 loadLocalFunnelConfig } from './core/funnelClient';
 // Path remapping helpers (framework-agnostic)
 export * from './core/pathRemapping';
+// Framework-agnostic pixel tracker (Studio entries bootstrap from this)
+export { bootstrapPixelTrackerFromWindow, createPixelTracker, } from './core/pixelTracker';
+// Stable event_id helper for Meta CAPI / browser pixel deduplication.
+// Re-exported here (already exposed via /v2/react) so framework-agnostic
+// Studio islands can import it from the same entry as bootstrapPixelTracker.
+export { makeMetaEventId } from './core/utils/metaEventId';
 export { FunnelActionType } from './core/resources/funnel';
 // React exports (hooks and components only, types are exported above)
 export { ApplePayButton, StripeExpressButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, PreviewModeIndicator, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useApplePayCheckout, useAuth, useCheckout, useCheckoutToken, useClubOffers, useCountryOptions, useCredits, useCurrency, useCustomer, useCustomerInfos, useCustomerOrders, useCustomerSubscriptions, useDiscounts, useExpressPaymentMethods, useFunnel, useFunnelLegacy, useGeoLocation, useGoogleAutocomplete, useGooglePayCheckout, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePaymentRetrieve, usePixelTracking, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStepConfig, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers, useSetPaymentMethod, WhopCheckout, useWhopPaymentPolling } from './react';
+// Click-id resolver (ad-tracker integrations: ClickFlare, Voluum, Binom, …)
+// Re-exported from core so it's reachable from any entry point.
+export { resolveClickId, publishTrackingGlobal, CLICK_ID_URL_PARAMS, CLICK_ID_COOKIES, } from './core/utils/clickIdResolver';

package/dist/v2/react/components/ApplePayButton.js

@@ -9,6 +9,7 @@ import { getCurrencyInfo, minorUnitsToMajorUnits } from '../../../react/utils/mo
 import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
 import { usePaymentQuery } from '../hooks/usePaymentQuery';
 import { useShippingRatesQuery } from '../hooks/useShippingRatesQuery';
+import { useStepConfig } from '../hooks/useStepConfig';
 // Helper function to convert Apple Pay contact to Address (matches CMS)
 const applePayContactToAddress = (contact) => {
     return {
@@ -52,6 +53,14 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
     const { applePayPaymentMethod, reComputeOrderSummary, shippingMethods, lineItems, handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail, setError: setContextError, } = useExpressPaymentMethods();
     const [processingPayment, setProcessingPayment] = useState(false);
     const [isApplePayAvailable, setIsApplePayAvailable] = useState(false);
+    // Per-step country allow-list (CRM-injected stepConfig). Empty/missing = all allowed.
+    const { stepConfig } = useStepConfig();
+    const countryAllowlist = useMemo(() => {
+        const list = stepConfig?.addressSettings?.countryAllowlist;
+        if (!list || list.length === 0)
+            return undefined;
+        return list.map((c) => c.toUpperCase());
+    }, [stepConfig]);
     // Get Basis Theory API key
     const basistheoryPublicKey = useMemo(() => getBasisTheoryApiKey(), []);
     // Use payment hook for proper payment processing
@@ -192,6 +201,7 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
             lineItems,
             requiredShippingContactFields: ['name', 'phone', 'email', 'postalAddress'],
             requiredBillingContactFields: ['postalAddress'],
+            ...(countryAllowlist ? { supportedCountries: countryAllowlist } : {}),
         };
         try {
             const session = new ApplePaySession(3, request);
@@ -216,6 +226,18 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
                         const billingContact = event.payment.billingContact;
                         const shippingAddress = applePayContactToAddress(shippingContact);
                         const billingAddress = applePayContactToAddress(billingContact);
+                        // Defense-in-depth: reject if wallet-returned country isn't in allowlist
+                        if (countryAllowlist &&
+                            shippingAddress.country &&
+                            !countryAllowlist.includes(shippingAddress.country.toUpperCase())) {
+                            console.error('[ApplePay] Shipping country not in allowlist:', shippingAddress.country);
+                            session.completePayment(ApplePaySession.STATUS_FAILURE);
+                            const errorMessage = 'Shipping to this country is not supported';
+                            setContextError(errorMessage);
+                            if (onError)
+                                onError(errorMessage);
+                            return;
+                        }
                         await updateCheckoutSessionValues({
                             data: {
                                 shippingAddress,
@@ -283,6 +305,33 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
             session.onshippingcontactselected = (event) => {
                 void (async () => {
                     const shippingContact = event.shippingContact;
+                    const contactCountry = (shippingContact?.countryCode || '').toUpperCase();
+                    // Defense-in-depth: surface an inline error in the Apple Pay sheet
+                    // when the selected shipping country isn't in the allow-list, so the
+                    // user can pick a valid address without restarting the flow.
+                    if (countryAllowlist && contactCountry && !countryAllowlist.includes(contactCountry)) {
+                        console.warn('[ApplePay] Selected shipping country not in allowlist:', contactCountry);
+                        const ApplePayErrorCtor = window.ApplePayError;
+                        const currentTotal = {
+                            label: checkout.checkoutSession.store?.name || 'Store',
+                            amount: minorUnitsToCurrencyString(checkout.summary?.totalAdjustedAmount ?? 0, checkout.summary?.currency),
+                            type: 'final',
+                        };
+                        const errors = ApplePayErrorCtor
+                            ? [new ApplePayErrorCtor('shippingContactInvalid', 'country', 'Shipping to this country is not supported')]
+                            : [{
+                                    code: 'shippingContactInvalid',
+                                    contactField: 'country',
+                                    message: 'Shipping to this country is not supported',
+                                }];
+                        session.completeShippingContactSelection({
+                            newTotal: currentTotal,
+                            newLineItems: lineItems,
+                            newShippingMethods: [],
+                            errors,
+                        });
+                        return;
+                    }
                     try {
                         await updateCheckoutSessionValues({
                             data: {
@@ -334,6 +383,7 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
         shippingMethods,
         lineItems,
         applePayPaymentMethod,
+        countryAllowlist,
         minorUnitsToCurrencyString,
         validateMerchant,
         tokenizeApplePay,

package/dist/v2/react/components/FunnelScriptInjector.js

@@ -58,15 +58,15 @@ function parseScriptContent(content) {
 }
 /** Wrap inline JS in an error-handling IIFE */
 function wrapInErrorHandler(scriptName, code) {
-    return `
-    (function() {
-      try {
-        // Script: ${scriptName}
-        ${code}
-      } catch (error) {
-        console.error('[TagadaPay] StepConfig script "${scriptName}" error:', error);
-      }
-    })();
+    return `
+    (function() {
+      try {
+        // Script: ${scriptName}
+        ${code}
+      } catch (error) {
+        console.error('[TagadaPay] StepConfig script "${scriptName}" error:', error);
+      }
+    })();
   `;
 }
 /** Inject a DOM element at the specified position */

package/dist/v2/react/components/GooglePayButton.js

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
 import { usePaymentQuery } from '../hooks/usePaymentQuery';
 import { useShippingRatesQuery } from '../hooks/useShippingRatesQuery';
+import { useStepConfig } from '../hooks/useStepConfig';
 import { getBasisTheoryKeys } from '../../../config/basisTheory';
 export const GooglePayButton = ({ className = '', disabled = false, onSuccess, onError, onCancel, checkout, size = 'lg', buttonColor = 'black', buttonType = 'plain', requiresShipping: requiresShippingProp, }) => {
     const { googlePayPaymentMethod, shippingMethods, lineItems, handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail, reComputeOrderSummary, setError: setContextError, } = useExpressPaymentMethods();
@@ -33,6 +34,14 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
     const [processingPayment, setProcessingPayment] = useState(false);
     const [pendingPaymentData, setPendingPaymentData] = useState(null);
     const [googlePayError, setGooglePayError] = useState(null);
+    // Per-step country allow-list (CRM-injected stepConfig). Empty/missing = all allowed.
+    const { stepConfig } = useStepConfig();
+    const countryAllowlist = useMemo(() => {
+        const list = stepConfig?.addressSettings?.countryAllowlist;
+        if (!list || list.length === 0)
+            return undefined;
+        return list.map((c) => c.toUpperCase());
+    }, [stepConfig]);
     // Don't render if no Google Pay payment method is enabled
     if (!googlePayPaymentMethod) {
         return null;
@@ -124,6 +133,19 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
             if (paymentData.shippingAddress) {
                 shippingAddress = googlePayAddressToAddress(paymentData.shippingAddress);
             }
+            // Defense-in-depth: reject if wallet-returned country isn't in allowlist
+            if (countryAllowlist &&
+                shippingAddress?.country &&
+                !countryAllowlist.includes(shippingAddress.country.toUpperCase())) {
+                const msg = 'Shipping to this country is not supported';
+                console.error('[GooglePay] Shipping country not in allowlist:', shippingAddress.country);
+                setProcessingPayment(false);
+                setGooglePayError(msg);
+                setContextError(msg);
+                if (onError)
+                    onError(msg);
+                return;
+            }
             // Update checkout session with addresses before processing payment
             if (shippingAddress) {
                 await updateCheckoutSessionValues({
@@ -164,6 +186,7 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
         updateCustomerEmail,
         tokenizeGooglePayTokenWithBasisTheory,
         handleGooglePayPayment,
+        countryAllowlist,
         onSuccess,
         onError,
         setContextError,
@@ -193,6 +216,18 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
                     const paymentDataRequestUpdate = {};
                     if (intermediatePaymentData.callbackTrigger === 'SHIPPING_ADDRESS') {
                         const address = intermediatePaymentData.shippingAddress;
+                        const addressCountry = (address?.countryCode || '').toUpperCase();
+                        // Defense-in-depth: reject if selected country isn't in allowlist
+                        if (countryAllowlist && addressCountry && !countryAllowlist.includes(addressCountry)) {
+                            resolve({
+                                error: {
+                                    reason: 'SHIPPING_ADDRESS_UNSERVICEABLE',
+                                    message: 'Shipping to this country is not supported',
+                                    intent: 'SHIPPING_ADDRESS',
+                                },
+                            });
+                            return;
+                        }
                         const shippingAddress = {
                             address1: address?.addressLines?.[0] || '',
                             address2: address?.addressLines?.[1] || '',
@@ -270,7 +305,7 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
             };
             void processCallback();
         });
-    }, [updateCheckoutSessionValues, reComputeOrderSummary, checkout, selectRate]);
+    }, [updateCheckoutSessionValues, reComputeOrderSummary, checkout, selectRate, countryAllowlist]);
     // Handle payment authorization
     const handleGooglePayAuthorized = useCallback((paymentData) => {
         setPendingPaymentData(paymentData);
@@ -336,6 +371,9 @@ export const GooglePayButton = ({ className = '', disabled = false, onSuccess, o
             ? ['SHIPPING_OPTION', 'SHIPPING_ADDRESS', 'PAYMENT_AUTHORIZATION']
             : ['PAYMENT_AUTHORIZATION'],
         ...(requiresShipping && {
+            shippingAddressParameters: countryAllowlist
+                ? { allowedCountryCodes: countryAllowlist }
+                : undefined,
             shippingOptionParameters: {
                 defaultSelectedOptionId: checkout.checkoutSession?.shippingRate?.id ||
                     (shippingMethods.length > 0 ? shippingMethods[0].identifier : ''),

package/dist/v2/react/components/StripeExpressButton.js

@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { PaymentsResource } from '../../core/resources/payments';
 import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
 import { usePaymentPolling } from '../hooks/usePaymentPolling';
+import { useStepConfig } from '../hooks/useStepConfig';
 import { getGlobalApiClient } from '../hooks/useApiQuery';
 // Express method keys — drives processorGroup detection and ECE paymentMethods options.
 // 'klarna_express' is the CRM config key for Klarna via ECE, distinct from 'klarna' (redirect flow).
@@ -18,6 +19,14 @@ function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods
     const { startPolling } = usePaymentPolling();
     const isProcessingRef = useRef(false);
     const [visible, setVisible] = useState(false);
+    // Per-step country allow-list (CRM-injected stepConfig). Empty/missing = all allowed.
+    const { stepConfig } = useStepConfig();
+    const countryAllowlist = useMemo(() => {
+        const list = stepConfig?.addressSettings?.countryAllowlist;
+        if (!list || list.length === 0)
+            return undefined;
+        return list.map((c) => c.toUpperCase());
+    }, [stepConfig]);
     const paymentsResource = useMemo(() => new PaymentsResource(getGlobalApiClient()), []);
     // Push amount/currency changes (e.g. shipping cost added once address resolved,
     // promo applied, quantity changed) to the mounted ExpressCheckoutElement.
@@ -41,6 +50,7 @@ function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods
             // This mirrors what ApplePayButton and GooglePayButton do before processing payment,
             // and ensures customer.email is present for the backend email validation.
             const billing = event.billingDetails;
+            const eventShipping = event.shippingAddress;
             if (billing) {
                 const nameParts = (billing.name ?? '').trim().split(/\s+/);
                 const firstName = nameParts[0] ?? '';
@@ -57,9 +67,33 @@ function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods
                     phone: billing.phone ?? '',
                     email: billing.email ?? '',
                 };
+                // When shippingAddressRequired is true, Stripe provides event.shippingAddress.
+                // Otherwise the billing address is used as the shipping address (legacy behavior).
+                const shippingFromEvent = eventShipping?.address
+                    ? {
+                        firstName: (eventShipping.name ?? '').trim().split(/\s+/)[0] ?? '',
+                        lastName: (eventShipping.name ?? '').trim().split(/\s+/).slice(1).join(' '),
+                        address1: eventShipping.address.line1 ?? '',
+                        address2: eventShipping.address.line2 ?? '',
+                        city: eventShipping.address.city ?? '',
+                        state: eventShipping.address.state ?? '',
+                        country: eventShipping.address.country ?? '',
+                        postal: eventShipping.address.postal_code ?? '',
+                        phone: billing.phone ?? '',
+                        email: billing.email ?? '',
+                    }
+                    : billingAddress;
+                // Defense-in-depth: reject if wallet-returned country isn't in allowlist
+                const shippingCountry = shippingFromEvent.country.toUpperCase();
+                if (countryAllowlist && shippingCountry && !countryAllowlist.includes(shippingCountry)) {
+                    console.error('[StripeExpress] Shipping country not in allowlist:', shippingCountry);
+                    onError?.('Shipping to this country is not supported');
+                    isProcessingRef.current = false;
+                    return;
+                }
                 await updateCheckoutSessionValues({
                     data: {
-                        shippingAddress: billingAddress,
+                        shippingAddress: shippingFromEvent,
                         billingAddress,
                     },
                 });
@@ -139,7 +173,16 @@ function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods
             onError?.(msg);
         }
     };
-    return (_jsx("div", { style: { visibility: visible ? 'visible' : 'hidden' }, children: _jsx(ExpressCheckoutElement, { onReady: ({ availablePaymentMethods }) => {
+    // When ECE has no available wallets, keep the element mounted (so onReady can still
+    // fire if the browser later exposes one) but pull it off-screen so it doesn't reserve
+    // an empty slot. Off-screen rather than zero-size so the iframe still gets layout.
+    const hiddenStyle = {
+        position: 'absolute',
+        left: '-9999px',
+        top: '-9999px',
+        pointerEvents: 'none',
+    };
+    return (_jsx("div", { style: visible ? undefined : hiddenStyle, children: _jsx(ExpressCheckoutElement, { onReady: ({ availablePaymentMethods }) => {
                 if (availablePaymentMethods) {
                     setVisible(true);
                     handleAddExpressId('stripe_express_checkout');
@@ -161,6 +204,15 @@ function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods
                 },
                 emailRequired: true,
                 billingAddressRequired: true,
+                // When an allow-list is configured, collect shipping via the wallet sheet so Stripe
+                // can enforce country restrictions natively. allowedShippingCountries requires
+                // shippingAddressRequired: true.
+                ...(countryAllowlist
+                    ? {
+                        shippingAddressRequired: true,
+                        allowedShippingCountries: countryAllowlist,
+                    }
+                    : {}),
             } }) }));
 }
 // Outer component — resolves Stripe instance and provides <Elements> context

package/dist/v2/react/hooks/payment-actions/useNgeniusThreedsAction.js

@@ -16,17 +16,17 @@ function ensureNgeniusContainer() {
     if (!container) {
         container = document.createElement('div');
         container.id = NGENIUS_3DS_CONTAINER_ID;
-        container.style.cssText = `
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: 9999;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+        container.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 9999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         `;
         document.body.appendChild(container);
         console.log('[N-Genius 3DS] Container created and appended to body');