@tagadapay/plugin-sdk 3.1.22 → 3.1.24

package/dist/v2/index.d.ts

@@ -13,8 +13,8 @@ export * from './core/utils/pluginConfig';
 export * from './core/utils/previewMode';
 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, PixelsConfig, RuntimeStepConfig } from './core/funnelClient';
+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 type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, CheckoutSessionPreview, Promotion } from './core/resources/checkout';
 export type { Order, OrderLineItem } from './core/utils/order';
@@ -28,8 +28,9 @@ 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, 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, WhopCheckout, useWhopPaymentPolling } from './react';
+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 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

@@ -15,11 +15,13 @@ export * from './core/utils/previewMode';
 export { injectPreviewModeIndicator, isIndicatorInjected, removePreviewModeIndicator } from './core/utils/previewModeIndicator';
 export * from './core/utils/products';
 // Step config utilities (for reading runtime configuration from HTML)
-export { getAssignedPaymentFlowId, getAssignedScripts, getAssignedStaticResources, getAssignedStepConfig, getLocalFunnelConfig, 
+export { getAssignedPaymentFlowId, getAssignedScripts, getAssignedStaticResources, getAssignedResources, getAssignedStepConfig, getAssignedOrderBumpOfferIds, getAssignedUpsellOfferIds, getLocalFunnelConfig, 
+// Payment setup config helpers
+getEnabledMethods, getExpressMethods, getExpressMethodsByProcessor, findMethod, isMethodEnabled, 
 // Local development helpers
 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, 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, WhopCheckout, useWhopPaymentPolling } from './react';
+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';

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

@@ -1,6 +1,100 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { getAssignedStepConfig } from '../../core';
+/**
+ * Parse script content that may contain multiple <script> and <noscript> tags.
+ * Handles: external scripts (<script src="...">), inline scripts, noscript blocks,
+ * and bare JS without any HTML tags.
+ */
+function parseScriptContent(content) {
+    const trimmed = content.trim();
+    // If content doesn't contain any HTML script/noscript tags, treat as raw JS
+    if (!/<(?:script|noscript)[\s>]/i.test(trimmed)) {
+        return trimmed ? [{ type: 'inline', code: trimmed }] : [];
+    }
+    const elements = [];
+    const tagRegex = /<(script|noscript)([^>]*)>([\s\S]*?)<\/\1>/gi;
+    let lastIndex = 0;
+    let match;
+    while ((match = tagRegex.exec(trimmed)) !== null) {
+        // Capture any bare text between tags (could be JS or HTML comments)
+        const between = trimmed.slice(lastIndex, match.index).trim();
+        // Skip HTML comments and empty strings
+        if (between && !/^<!--[\s\S]*?-->$/.test(between)) {
+            elements.push({ type: 'inline', code: between });
+        }
+        const [, tagName, attrs, body] = match;
+        if (tagName.toLowerCase() === 'noscript') {
+            if (body.trim()) {
+                elements.push({ type: 'noscript', html: body.trim() });
+            }
+        }
+        else {
+            // Script tag — check for src attribute (external script)
+            const srcMatch = attrs.match(/src=["']([^"']+)["']/i);
+            if (srcMatch) {
+                elements.push({
+                    type: 'external',
+                    src: srcMatch[1],
+                    async: /\basync\b/i.test(attrs),
+                    defer: /\bdefer\b/i.test(attrs),
+                });
+            }
+            // Inline content (can exist alongside src, though unusual)
+            if (body.trim()) {
+                elements.push({ type: 'inline', code: body.trim() });
+            }
+        }
+        lastIndex = match.index + match[0].length;
+    }
+    // Trailing content after last tag
+    const trailing = trimmed.slice(lastIndex).trim();
+    if (trailing && !/^<!--[\s\S]*?-->$/.test(trailing)) {
+        elements.push({ type: 'inline', code: trailing });
+    }
+    return elements;
+}
+/** 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);
+      }
+    })();
+  `;
+}
+/** Inject a DOM element at the specified position */
+function injectAtPosition(element, position) {
+    switch (position) {
+        case 'head-start':
+            if (document.head.firstChild) {
+                document.head.insertBefore(element, document.head.firstChild);
+            }
+            else {
+                document.head.appendChild(element);
+            }
+            break;
+        case 'head-end':
+            document.head.appendChild(element);
+            break;
+        case 'body-start':
+            if (document.body.firstChild) {
+                document.body.insertBefore(element, document.body.firstChild);
+            }
+            else {
+                document.body.appendChild(element);
+            }
+            break;
+        case 'body-end':
+        default:
+            document.body.appendChild(element);
+            break;
+    }
+}
 /**
  * FunnelScriptInjector - Handles injection of funnel scripts into the page.
  *
@@ -167,6 +261,9 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             pageType: context?.currentStepId || null,
             isInitialized: isInitialized,
             ressources: context?.resources || null,
+            // Convenience getters so scripts can use Tagada.order / Tagada.checkout
+            get order() { return this.ressources?.order || null; },
+            get checkout() { return this.ressources?.checkout || null; },
             funnel: context
                 ? {
                     sessionId: context.sessionId,
@@ -220,28 +317,18 @@ export function FunnelScriptInjector({ context, isInitialized }) {
             existingScript.remove();
         }
         // Wrap script content with error handling and context checks
-        const wrappedScript = `
-      (function() {
-        try {
-          // Check if we have basic DOM access
-          if (typeof document === 'undefined') {
-            console.error('[TagadaPay] Document not available');
-            return;
-          }
-          
-          // Check if we have Tagada
-          if (!window.Tagada) {
-            console.error('[TagadaPay] Tagada not available');
-            return;
-          }
-          
-          // Execute the original script
-          ${scriptBody}
-        } catch (error) {
-          console.error('[TagadaPay] Script execution error:', error);
-        }
-      })();
-    `;
+        // NOTE: We use indirect eval (0,eval)() so that SyntaxErrors in user scripts
+        // are thrown at runtime (catchable by try/catch) rather than at parse time (uncatchable).
+        // JSON.stringify safely escapes the script content (backticks, quotes, ${...}, etc.)
+        const wrappedScript = '(function() {\n' +
+            '  try {\n' +
+            '    if (typeof document === "undefined") { console.error("[TagadaPay] Document not available"); return; }\n' +
+            '    if (!window.Tagada) { console.error("[TagadaPay] Tagada not available"); return; }\n' +
+            '    (0, eval)(' + JSON.stringify(scriptBody) + ');\n' +
+            '  } catch (error) {\n' +
+            '    console.error("[TagadaPay] Script execution error:", error);\n' +
+            '  }\n' +
+            '})();';
         // Create and inject new script element
         const scriptElement = document.createElement('script');
         scriptElement.id = scriptId;
@@ -284,62 +371,43 @@ export function FunnelScriptInjector({ context, isInitialized }) {
         // Inject each enabled script at its correct position
         stepConfigScripts.forEach((script, index) => {
             const position = script.position || 'head-end';
-            const scriptId = `tagada-stepconfig-script-${index}`;
-            // Extract script content (remove <script> tags if present)
-            let scriptBody = script.content.trim();
-            const scriptTagMatch = scriptBody.match(/^<script[^>]*>([\s\S]*)<\/script>$/i);
-            if (scriptTagMatch) {
-                scriptBody = scriptTagMatch[1].trim();
-            }
-            if (!scriptBody)
+            const content = script.content.trim();
+            if (!content)
                 return;
-            // Wrap script content with error handling
-            const wrappedScript = `
-        (function() {
-          try {
-            // Script: ${script.name}
-            ${scriptBody}
-          } catch (error) {
-            console.error('[TagadaPay] StepConfig script "${script.name}" error:', error);
-          }
-        })();
-      `;
-            // Create script element
-            const scriptElement = document.createElement('script');
-            scriptElement.id = scriptId;
-            scriptElement.setAttribute('data-tagada-stepconfig-script', 'true');
-            scriptElement.setAttribute('data-script-name', script.name);
-            scriptElement.textContent = wrappedScript;
-            // Inject at the correct position
-            switch (position) {
-                case 'head-start':
-                    // Insert at the beginning of <head>
-                    if (document.head.firstChild) {
-                        document.head.insertBefore(scriptElement, document.head.firstChild);
-                    }
-                    else {
-                        document.head.appendChild(scriptElement);
-                    }
-                    break;
-                case 'head-end':
-                    // Insert at the end of <head>
-                    document.head.appendChild(scriptElement);
-                    break;
-                case 'body-start':
-                    // Insert at the beginning of <body>
-                    if (document.body.firstChild) {
-                        document.body.insertBefore(scriptElement, document.body.firstChild);
-                    }
-                    else {
-                        document.body.appendChild(scriptElement);
-                    }
-                    break;
-                case 'body-end':
-                default:
-                    // Insert at the end of <body>
-                    document.body.appendChild(scriptElement);
-                    break;
-            }
+            // Parse content into individual elements (handles multi-tag scripts)
+            const parsed = parseScriptContent(content);
+            parsed.forEach((element, elemIndex) => {
+                const elemId = `tagada-stepconfig-script-${index}-${elemIndex}`;
+                if (element.type === 'external') {
+                    const el = document.createElement('script');
+                    el.id = elemId;
+                    el.setAttribute('data-tagada-stepconfig-script', 'true');
+                    el.setAttribute('data-script-name', script.name);
+                    el.src = element.src;
+                    if (element.async)
+                        el.async = true;
+                    if (element.defer)
+                        el.defer = true;
+                    injectAtPosition(el, position);
+                }
+                else if (element.type === 'inline') {
+                    // Inline script — wrap in error handler
+                    const el = document.createElement('script');
+                    el.id = elemId;
+                    el.setAttribute('data-tagada-stepconfig-script', 'true');
+                    el.setAttribute('data-script-name', script.name);
+                    el.textContent = wrapInErrorHandler(script.name, element.code);
+                    injectAtPosition(el, position);
+                }
+                else if (element.type === 'noscript') {
+                    // Noscript block — inject as <noscript> element
+                    const el = document.createElement('noscript');
+                    el.id = elemId;
+                    el.setAttribute('data-tagada-stepconfig-script', 'true');
+                    el.innerHTML = element.html;
+                    injectAtPosition(el, position);
+                }
+            });
         });
         // Track injected scripts to prevent re-injection
         lastInjectedStepConfigScriptsRef.current = scriptsHash;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { CheckoutData } from '../../core/resources/checkout';
+export interface StripeExpressButtonProps {
+    checkout: CheckoutData;
+    onSuccess?: (result: {
+        payment: any;
+        order: any;
+    }) => void;
+    onError?: (error: string) => void;
+    onCancel?: () => void;
+}
+export declare const StripeExpressButton: React.FC<StripeExpressButtonProps>;
+export default StripeExpressButton;

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

@@ -0,0 +1,171 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Elements, ExpressCheckoutElement, useElements, useStripe } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import { useMemo, useRef, useState } from 'react';
+import { PaymentsResource } from '../../core/resources/payments';
+import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
+import { usePaymentPolling } from '../hooks/usePaymentPolling';
+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).
+// Backward compatible: existing configs with only apple_pay/google_pay continue to match.
+const EXPRESS_METHOD_KEYS = ['apple_pay', 'google_pay', 'paypal', 'link', 'klarna_express'];
+// Inner component — must be a child of <Elements> to use useStripe() and useElements()
+function StripeExpressButtonInner({ checkout, processorId, enabledExpressMethods, onSuccess, onError, onCancel, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const { handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail } = useExpressPaymentMethods();
+    const { startPolling } = usePaymentPolling();
+    const isProcessingRef = useRef(false);
+    const [visible, setVisible] = useState(false);
+    const paymentsResource = useMemo(() => new PaymentsResource(getGlobalApiClient()), []);
+    const onConfirm = async (event) => {
+        if (!stripe || !elements || isProcessingRef.current)
+            return;
+        isProcessingRef.current = true;
+        // Use the wallet type directly from Stripe's event — 'apple_pay', 'google_pay', 'paypal', etc.
+        const paymentMethod = event.expressPaymentType;
+        try {
+            // Step 1: save billing address + email from the wallet to the session/customer record.
+            // 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;
+            if (billing) {
+                const nameParts = (billing.name ?? '').trim().split(/\s+/);
+                const firstName = nameParts[0] ?? '';
+                const lastName = nameParts.slice(1).join(' ');
+                const billingAddress = {
+                    firstName,
+                    lastName,
+                    address1: billing.address?.line1 ?? '',
+                    address2: billing.address?.line2 ?? '',
+                    city: billing.address?.city ?? '',
+                    state: billing.address?.state ?? '',
+                    country: billing.address?.country ?? '',
+                    postal: billing.address?.postal_code ?? '',
+                    phone: billing.phone ?? '',
+                    email: billing.email ?? '',
+                };
+                await updateCheckoutSessionValues({
+                    data: {
+                        shippingAddress: billingAddress,
+                        billingAddress,
+                    },
+                });
+            }
+            if (billing?.email) {
+                await updateCustomerEmail({ data: { email: billing.email } });
+            }
+            // Step 2: validate the Elements form
+            const { error: submitError } = await elements.submit();
+            if (submitError) {
+                onError?.(submitError.message ?? 'Validation failed');
+                isProcessingRef.current = false;
+                return;
+            }
+            // Step 3: call backend via existing APM path
+            // paymentsResource.processPaymentDirect returns the raw PaymentResponse (no action routing)
+            const response = await paymentsResource.processPaymentDirect(checkout.checkoutSession.id, '', // empty — backend identifies via processorId + paymentMethod
+            undefined, {
+                processorId,
+                paymentMethod,
+                isExpress: true,
+            });
+            const clientSecret = response?.payment?.requireActionData?.metadata?.stripeExpressCheckout?.clientSecret;
+            if (!clientSecret) {
+                onError?.('Express checkout configuration missing — no client secret returned');
+                isProcessingRef.current = false;
+                return;
+            }
+            // Step 4: confirm the PaymentIntent inline — must happen while the Apple Pay sheet is open
+            const { error: confirmError } = await stripe.confirmPayment({
+                elements,
+                clientSecret,
+                confirmParams: {
+                    // redirect: 'if_required' avoids a full-page redirect for wallet payments
+                    return_url: window.location.href,
+                },
+                redirect: 'if_required',
+            });
+            if (confirmError) {
+                onError?.(confirmError.message ?? 'Payment confirmation failed');
+                isProcessingRef.current = false;
+                return;
+            }
+            // Step 5: poll for the final status — the webhook (payment_intent.succeeded) updates the DB
+            const paymentId = response.payment.id;
+            startPolling(paymentId, {
+                onRequireAction: (payment, stop) => {
+                    // The payment still has requireAction='stripe_express_checkout' from when we created
+                    // the intent — this has already been handled inline by stripe.confirmPayment.
+                    // Ignore it and let polling continue waiting for the webhook to mark it succeeded.
+                    if (payment.requireActionData?.type === 'stripe_express_checkout')
+                        return;
+                    // Any other unexpected action type: stop and surface as error
+                    stop();
+                    isProcessingRef.current = false;
+                    onError?.('Unexpected payment action required');
+                },
+                onSuccess: async (completedPayment) => {
+                    isProcessingRef.current = false;
+                    onSuccess?.({ payment: completedPayment, order: completedPayment.order });
+                },
+                onFailure: async (errorMsg) => {
+                    isProcessingRef.current = false;
+                    onError?.(errorMsg);
+                },
+            });
+        }
+        catch (err) {
+            isProcessingRef.current = false;
+            const msg = err instanceof Error ? err.message : 'Express checkout failed';
+            console.error('[StripeExpressButton] Payment error:', err);
+            onError?.(msg);
+        }
+    };
+    return (_jsx("div", { style: { visibility: visible ? 'visible' : 'hidden' }, children: _jsx(ExpressCheckoutElement, { onReady: ({ availablePaymentMethods }) => {
+                if (availablePaymentMethods) {
+                    setVisible(true);
+                    handleAddExpressId('stripe_express_checkout');
+                }
+            }, onConfirm: onConfirm, onCancel: () => {
+                isProcessingRef.current = false;
+                onCancel?.();
+            }, options: {
+                buttonType: {
+                    applePay: 'buy',
+                    googlePay: 'buy',
+                },
+                buttonHeight: 48,
+                paymentMethods: {
+                    applePay: enabledExpressMethods.includes('apple_pay') ? 'always' : 'never',
+                    googlePay: enabledExpressMethods.includes('google_pay') ? 'always' : 'never',
+                    link: enabledExpressMethods.includes('link') ? 'auto' : 'never',
+                    paypal: enabledExpressMethods.includes('paypal') ? 'auto' : 'never',
+                    klarna: enabledExpressMethods.includes('klarna_express') ? 'auto' : 'never',
+                },
+                emailRequired: true,
+                billingAddressRequired: true,
+            } }) }));
+}
+// Outer component — resolves Stripe instance and provides <Elements> context
+export const StripeExpressButton = (props) => {
+    const { stripeExpressPaymentMethod } = useExpressPaymentMethods();
+    const processorGroup = stripeExpressPaymentMethod?.settings?.processors?.find((g) => EXPRESS_METHOD_KEYS.some((key) => g?.methods?.[key]?.enabled === true));
+    const processorId = processorGroup?.processorId;
+    const publishableKey = stripeExpressPaymentMethod?.settings?.publishableKey;
+    // Derive which express methods are enabled in this processor group
+    const enabledExpressMethods = EXPRESS_METHOD_KEYS.filter((key) => processorGroup?.methods?.[key]?.enabled === true);
+    const stripePromise = useMemo(() => (publishableKey ? loadStripe(publishableKey) : null), [publishableKey]);
+    if (!stripeExpressPaymentMethod || !processorId || !stripePromise)
+        return null;
+    const amount = Math.round(props.checkout.summary?.totalAdjustedAmount ?? 0);
+    const currency = (props.checkout.summary?.currency || 'usd').toLowerCase();
+    const elementsOptions = {
+        mode: 'payment',
+        amount,
+        currency,
+    };
+    return (_jsx(Elements, { stripe: stripePromise, options: elementsOptions, children: _jsx(StripeExpressButtonInner, { ...props, processorId: processorId, enabledExpressMethods: enabledExpressMethods }) }));
+};
+export default StripeExpressButton;

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

@@ -128,9 +128,15 @@ export const WhopCheckout = memo(forwardRef(({ checkoutSessionId, storeId, custo
         isWhopPaymentSubmitted.current = true;
         setError(null);
         try {
+            if (!planId) {
+                isWhopPaymentSubmitted.current = false;
+                setError('No plan available for payment.');
+                onPaymentFailed?.('No plan available for payment.');
+                return;
+            }
             const result = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/whop-prepare-order`, {
                 method: 'POST',
-                body: JSON.stringify({ checkoutSessionId, storeId }),
+                body: JSON.stringify({ checkoutSessionId, storeId, planId }),
                 headers: { 'Content-Type': 'application/json' },
             });
             if (!result) {

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

@@ -4,9 +4,27 @@
 import { useCallback } from 'react';
 export function useProcessorAuthAction() {
     const handleProcessorAuth = useCallback(async (actionData) => {
-        // Always auto-redirect for processor auth (e.g., 3DS, external payment flows)
-        if (actionData.metadata?.redirect?.redirectUrl) {
-            window.location.href = actionData.metadata.redirect.redirectUrl;
+        const redirect = actionData.metadata?.redirect;
+        if (!redirect?.redirectUrl)
+            return;
+        if (redirect.method === 'POST') {
+            const form = document.createElement('form');
+            form.method = 'POST';
+            form.action = redirect.redirectUrl;
+            if (redirect.data && typeof redirect.data === 'object') {
+                Object.entries(redirect.data).forEach(([key, value]) => {
+                    const input = document.createElement('input');
+                    input.type = 'hidden';
+                    input.name = key;
+                    input.value = String(value);
+                    form.appendChild(input);
+                });
+            }
+            document.body.appendChild(form);
+            form.submit();
+        }
+        else {
+            window.location.href = redirect.redirectUrl;
         }
     }, []);
     return { handleProcessorAuth };

package/dist/v2/react/hooks/useApplePayCheckout.js

@@ -120,12 +120,17 @@ export function useApplePayCheckout({ checkout, onSuccess, onError, onCancel, })
                         setProcessingPayment(true);
                         // Tokenize payment
                         const applePayToken = await tokenizeApplePay(event);
-                        // Complete Apple Pay sheet
+                        // Complete Apple Pay sheet immediately after tokenization
+                        // Apple Pay requires completePayment within ~30s of authorization
                         session.completePayment(window.ApplePaySession.STATUS_SUCCESS);
                         // Process payment via SDK hook
-                        const result = await processApplePayPayment(checkout.checkoutSession.id, applePayToken, {
+                        // onSuccess/redirect is gated through onPaymentSuccess callback only,
+                        // so we never redirect until the backend confirms success
+                        await processApplePayPayment(checkout.checkoutSession.id, applePayToken, {
                             onPaymentSuccess: (response) => {
-                                // Keep processing state true during navigation
+                                if (onSuccess) {
+                                    onSuccess(response);
+                                }
                             },
                             onPaymentFailed: (err) => {
                                 setProcessingPayment(false);
@@ -135,14 +140,9 @@ export function useApplePayCheckout({ checkout, onSuccess, onError, onCancel, })
                                 }
                             },
                         });
-                        // Call success callback
-                        if (onSuccess) {
-                            onSuccess(result);
-                        }
                     }
                     catch (error) {
                         console.error('Payment failed:', error);
-                        session.completePayment(window.ApplePaySession.STATUS_FAILURE);
                         setProcessingPayment(false);
                         const errorMsg = error instanceof Error ? error.message : 'Payment failed';
                         setError(errorMsg);

package/dist/v2/react/hooks/useCheckoutQuery.d.ts

@@ -3,9 +3,19 @@
  * Replaces the coordinator pattern with automatic cache invalidation
  */
 import { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSessionPreview } from '../../core/resources/checkout';
+export interface CheckoutMessages {
+    /** Error shown when CMS session takes too long to initialize. Default: 'Session initialization timeout. Please refresh the page and try again.' */
+    sessionTimeout?: string;
+    /** Error shown when checkout resource fails to initialize. Default: 'Failed to initialize checkout resource' */
+    initFailed?: string;
+    /** Error shown when an operation is attempted without an active checkout session. Default: 'No checkout session available' */
+    noCheckoutSession?: string;
+}
 export interface UseCheckoutQueryOptions {
     checkoutToken?: string;
     enabled?: boolean;
+    /** Override default error messages (e.g. for i18n). Use with useTranslation's t() to pass translated strings. */
+    messages?: CheckoutMessages;
 }
 export interface UseCheckoutQueryResult {
     checkout: CheckoutData | undefined;