@tagadapay/plugin-sdk 3.1.8 → 3.1.10

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

@@ -7,14 +7,14 @@
  */
 export * from './core/googleAutocomplete';
 export * from './core/isoData';
+export * from './core/utils/configHotReload';
 export * from './core/utils/currency';
 export * from './core/utils/pluginConfig';
-export * from './core/utils/products';
 export * from './core/utils/previewMode';
-export * from './core/utils/configHotReload';
-export { injectPreviewModeIndicator, removePreviewModeIndicator, isIndicatorInjected } from './core/utils/previewModeIndicator';
-export { getAssignedStepConfig, getAssignedPaymentFlowId, getAssignedStaticResources, getAssignedScripts, loadLocalFunnelConfig, getLocalFunnelConfig, } from './core/funnelClient';
-export type { RuntimeStepConfig, LocalFunnelConfig } from './core/funnelClient';
+export { injectPreviewModeIndicator, isIndicatorInjected, removePreviewModeIndicator } from './core/utils/previewModeIndicator';
+export * from './core/utils/products';
+export { getAssignedPaymentFlowId, getAssignedScripts, getAssignedStaticResources, getAssignedStepConfig, getLocalFunnelConfig, loadLocalFunnelConfig } from './core/funnelClient';
+export type { LocalFunnelConfig, RuntimeStepConfig } from './core/funnelClient';
 export * from './core/pathRemapping';
 export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion } from './core/resources/checkout';
 export type { Order, OrderLineItem } from './core/utils/order';
@@ -28,13 +28,14 @@ export type { ToggleOrderBumpResponse, VipOffer, VipPreviewResponse } from './co
 export type { StoreConfig } from './core/resources/storeConfig';
 export { FunnelActionType } from './core/resources/funnel';
 export type { BackNavigationActionData, CartUpdatedActionData, DirectNavigationActionData, FormSubmitActionData, FunnelContextUpdateRequest, FunnelContextUpdateResponse, FunnelAction as FunnelEvent, FunnelInitializeRequest, FunnelInitializeResponse, FunnelNavigateRequest, FunnelNavigateResponse, FunnelNavigationAction, FunnelNavigationResult, NextAction, OfferAcceptedActionData, OfferDeclinedActionData, PaymentFailedActionData, PaymentSuccessActionData, SimpleFunnelContext } from './core/resources/funnel';
-export { ApplePayButton, 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, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePaymentRetrieve, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStepConfig, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export { ApplePayButton, 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 } from './react';
 export type { DebugScript } from './react';
 export type { TranslateFunction, TranslationText, UseTranslationOptions, UseTranslationResult } from './react/hooks/useTranslation';
 export type { FunnelContextValue } from './react/hooks/useFunnel';
 export type { UseApplePayCheckoutOptions } from './react/hooks/useApplePayCheckout';
 export type { ClubOffer, ClubOfferItem, ClubOfferLineItem, ClubOfferSummary, UseClubOffersOptions, UseClubOffersResult } from './react/hooks/useClubOffers';
 export type { UseCreditsOptions, UseCreditsResult } from './react/hooks/useCredits';
+export type { UseGooglePayCheckoutOptions } from './react/hooks/useGooglePayCheckout';
 export type { UseLoginOptions, UseLoginResult } from './react/hooks/useLogin';
 export type { CustomerAddress, CustomerInfos, CustomerOrderSummary, OrderWithRelations, Subscription, SubscriptionsResponse } from './core/resources/customer';
 export type { UseCustomerResult } from './react/hooks/useCustomer';

package/dist/v2/index.js

@@ -8,18 +8,18 @@
 // Core exports (selective to avoid conflicts)
 export * from './core/googleAutocomplete';
 export * from './core/isoData';
+export * from './core/utils/configHotReload';
 export * from './core/utils/currency';
 export * from './core/utils/pluginConfig';
-export * from './core/utils/products';
 export * from './core/utils/previewMode';
-export * from './core/utils/configHotReload';
-export { injectPreviewModeIndicator, removePreviewModeIndicator, isIndicatorInjected } from './core/utils/previewModeIndicator';
+export { injectPreviewModeIndicator, isIndicatorInjected, removePreviewModeIndicator } from './core/utils/previewModeIndicator';
+export * from './core/utils/products';
 // Step config utilities (for reading runtime configuration from HTML)
-export { getAssignedStepConfig, getAssignedPaymentFlowId, getAssignedStaticResources, getAssignedScripts, 
+export { getAssignedPaymentFlowId, getAssignedScripts, getAssignedStaticResources, getAssignedStepConfig, getLocalFunnelConfig, 
 // Local development helpers
-loadLocalFunnelConfig, getLocalFunnelConfig, } from './core/funnelClient';
+loadLocalFunnelConfig } from './core/funnelClient';
 // Path remapping helpers (framework-agnostic)
 export * from './core/pathRemapping';
 export { FunnelActionType } from './core/resources/funnel';
 // React exports (hooks and components only, types are exported above)
-export { ApplePayButton, 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, useInvalidateQuery, useISOData, useLanguageImport, useLogin, useOffer, useOrder, useOrderBump, usePayment, usePaymentRetrieve, usePluginConfig, usePostPurchases, usePreloadQuery, usePreviewOffer, useProducts, usePromotions, useRegionOptions, useRemappableParams, useShippingRates, useSimpleFunnel, useStepConfig, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export { ApplePayButton, 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 } from './react';

package/dist/v2/react/components/ApplePayButton.d.ts

@@ -10,10 +10,9 @@ declare global {
     }
 }
 declare class ApplePaySession {
-    static canMakePayments(): boolean;
-    static canMakePaymentsWithActiveCard(merchantId: string): Promise<boolean>;
     static STATUS_SUCCESS: number;
     static STATUS_FAILURE: number;
+    static canMakePayments(): boolean;
     constructor(version: number, request: any);
     begin(): void;
     abort(): void;

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

@@ -4,10 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Clean rewrite based on working CMS implementation
  */
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
-import { usePaymentQuery } from '../hooks/usePaymentQuery';
 import { getBasisTheoryApiKey } from '../../../react/config/payment';
 import { getCurrencyInfo, minorUnitsToMajorUnits } from '../../../react/utils/money';
+import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
+import { usePaymentQuery } from '../hooks/usePaymentQuery';
+import { useShippingRatesQuery } from '../hooks/useShippingRatesQuery';
 // Helper function to convert Apple Pay contact to Address (matches CMS)
 const applePayContactToAddress = (contact) => {
     return {
@@ -31,38 +32,23 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
     const basistheoryPublicKey = useMemo(() => getBasisTheoryApiKey(), []);
     // Use payment hook for proper payment processing
     const { processApplePayPayment } = usePaymentQuery();
+    // Use shipping rates hook for selecting shipping rates
+    const { selectRate } = useShippingRatesQuery({ checkout });
     // Don't render if no Apple Pay payment method is enabled
     if (!applePayPaymentMethod) {
         return null;
     }
-    // Check Apple Pay availability (matches CMS pattern)
+    // Check Apple Pay availability (matches CMS pattern - useApplePayAvailable hook)
     useEffect(() => {
-        const checkApplePayAvailability = async () => {
-            if (typeof window === 'undefined' || !window.ApplePaySession) {
-                setIsApplePayAvailable(false);
-                return;
-            }
-            try {
-                const canMakePayments = window.ApplePaySession.canMakePayments();
-                if (canMakePayments) {
-                    const merchantId = applePayPaymentMethod?.metadata?.merchantId || '';
-                    const canMakePaymentsWithActiveCard = await window.ApplePaySession.canMakePaymentsWithActiveCard(merchantId);
-                    setIsApplePayAvailable(canMakePaymentsWithActiveCard);
-                    if (canMakePaymentsWithActiveCard) {
-                        handleAddExpressId('apple_pay');
-                    }
-                }
-                else {
-                    setIsApplePayAvailable(false);
-                }
-            }
-            catch (error) {
-                // Silently fail - Apple Pay just won't be available
-                setIsApplePayAvailable(false);
-            }
-        };
-        checkApplePayAvailability();
-    }, [applePayPaymentMethod, handleAddExpressId]);
+        const addExpress = () => handleAddExpressId('apple_pay');
+        if (window?.ApplePaySession && ApplePaySession.canMakePayments()) {
+            setIsApplePayAvailable(true);
+            addExpress();
+        }
+        else {
+            setIsApplePayAvailable(false);
+        }
+    }, [handleAddExpressId]);
     // Helper to convert minor units to currency string
     const minorUnitsToCurrencyString = useCallback((amountMinor, currency) => {
         // Fail safely - don't allow invalid data to become '0.00'
@@ -93,14 +79,14 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
                 }),
             });
             if (!response.ok) {
-                throw new Error(`Failed to validate merchant: ${response.status}`);
+                throw new Error(`HTTP error! Status: ${response.status}`);
             }
             const merchantSession = await response.json();
             return merchantSession;
         }
-        catch (error) {
-            console.error('Merchant validation failed:', error);
-            throw error;
+        catch (err) {
+            console.error('[ApplePay] Merchant validation failed:', err);
+            throw err;
         }
     }, [basistheoryPublicKey, checkout.checkoutSession.store?.name]);
     // Tokenize Apple Pay payment with Basis Theory (matches CMS)
@@ -123,7 +109,7 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
             return result.apple_pay; // Basis Theory returns the Apple Pay token in the apple_pay field
         }
         catch (error) {
-            console.error('Tokenizing Apple Pay failed:', error);
+            console.error('[ApplePay] Tokenizing Apple Pay failed:', error);
             throw error;
         }
     }, [basistheoryPublicKey]);
@@ -139,6 +125,7 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
                     // The hook already returns the response, we just need to return it
                 },
                 onPaymentFailed: (error) => {
+                    console.error('[ApplePay] Payment failed:', error);
                     setProcessingPayment(false);
                     throw new Error(error.message);
                 },
@@ -147,7 +134,7 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
             return result;
         }
         catch (error) {
-            console.error('Payment processing failed:', error);
+            console.error('[ApplePay] Payment processing failed:', error);
             setProcessingPayment(false);
             throw error;
         }
@@ -184,7 +171,7 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
                         session.completeMerchantValidation(merchantSession);
                     }
                     catch (error) {
-                        console.error('Merchant validation failed:', error);
+                        console.error('[ApplePay] Merchant validation failed:', error);
                         session.abort();
                     }
                 })();
@@ -220,7 +207,7 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
                         }
                     }
                     catch (error) {
-                        console.error('Payment processing failed:', error);
+                        console.error('[ApplePay] Payment processing failed:', error);
                         session.completePayment(ApplePaySession.STATUS_FAILURE);
                         const errorMessage = 'Payment Failed';
                         setContextError(errorMessage);
@@ -234,26 +221,28 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
             session.onshippingmethodselected = (event) => {
                 void (async () => {
                     try {
-                        // Update shipping method via API
-                        await fetch(`/api/v1/checkout-sessions/${checkout.checkoutSession.id}/shipping-rate`, {
-                            method: 'PUT',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify({
-                                shippingRateId: event.shippingMethod.identifier,
-                            }),
-                        });
+                        // Update shipping method via client
+                        await selectRate(event.shippingMethod.identifier);
                         const newOrderSummary = await reComputeOrderSummary();
                         if (!newOrderSummary) {
+                            console.error('[ApplePay] No order summary returned, aborting session');
                             session.abort();
                             return;
                         }
                         const { lineItems: newLineItems, total: newTotal } = newOrderSummary;
-                        session.completeShippingMethodSelection(ApplePaySession.STATUS_SUCCESS, newTotal, newLineItems);
+                        // Ensure type: 'final' is present for Apple Pay (matches CMS)
+                        const formattedTotal = {
+                            ...newTotal,
+                            type: 'final',
+                        };
+                        const formattedLineItems = newLineItems.map((item) => ({
+                            ...item,
+                            type: 'final',
+                        }));
+                        session.completeShippingMethodSelection(ApplePaySession.STATUS_SUCCESS, formattedTotal, formattedLineItems);
                     }
                     catch (error) {
-                        console.error('Shipping method selection failed:', error);
+                        console.error('[ApplePay] Shipping method selection failed:', error);
                         session.abort();
                     }
                 })();
@@ -270,24 +259,33 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
                         });
                         const newOrderSummary = await reComputeOrderSummary();
                         if (!newOrderSummary) {
+                            console.error('[ApplePay] No order summary returned, aborting session');
                             session.abort();
                             setContextError('Payment Failed');
                             return;
                         }
                         const { lineItems: newLineItems, total: newTotal, shippingMethods: newShippingMethods, } = newOrderSummary;
-                        session.completeShippingContactSelection(ApplePaySession.STATUS_SUCCESS, newShippingMethods, newTotal, newLineItems);
+                        // Ensure type: 'final' is present for Apple Pay (matches CMS)
+                        const formattedTotal = {
+                            ...newTotal,
+                            type: 'final',
+                        };
+                        const formattedLineItems = newLineItems.map((item) => ({
+                            ...item,
+                            type: 'final',
+                        }));
+                        session.completeShippingContactSelection(ApplePaySession.STATUS_SUCCESS, newShippingMethods, formattedTotal, formattedLineItems);
                     }
                     catch (error) {
-                        console.error('Shipping contact selection failed:', error);
+                        console.error('[ApplePay] Shipping contact selection failed:', error);
                         session.abort();
                     }
                 })();
             };
             session.onerror = (event) => {
-                console.error('Apple Pay Session Error:', event);
+                console.error('[ApplePay] Session Error:', event);
             };
             session.oncancel = () => {
-                console.log('Payment cancelled by user');
                 if (onCancel) {
                     onCancel();
                 }
@@ -295,7 +293,7 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
             session.begin();
         }
         catch (error) {
-            console.error('Failed to start Apple Pay session:', error);
+            console.error('[ApplePay] Failed to start Apple Pay session:', error);
         }
     }, [
         isApplePayAvailable,
@@ -312,13 +310,14 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
         updateCustomerEmail,
         reComputeOrderSummary,
         setContextError,
+        selectRate,
         onSuccess,
         onError,
         onCancel,
     ]);
-    // if (!isApplePayAvailable) {
-    //   return null;
-    // }
+    if (!isApplePayAvailable) {
+        return null;
+    }
     return (_jsxs("button", { onClick: handleApplePayClick, disabled: processingPayment, style: {
             backgroundColor: '#000',
             color: '#fff',
@@ -334,6 +333,6 @@ export const ApplePayButton = ({ checkout, onSuccess, onError, onCancel }) => {
             alignItems: 'center',
             justifyContent: 'center',
             gap: '8px',
-        }, children: [_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) }), processingPayment ? 'Processing...' : 'Pay with Apple Pay'] }));
+        }, type: "button", children: [_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" }) }), processingPayment ? 'Processing...' : 'Pay with Apple Pay'] }));
 };
 export default ApplePayButton;