Migrate billing from Paddle to Lemon Squeezy

resources/js/pages/marketing/CheckoutWizardPage.tsx

@@ -21,9 +21,9 @@ interface CheckoutWizardPageProps {
     error?: string | null;
     profile?: OAuthProfilePrefill | null;
   };
-  paddle?: {
-    environment?: string | null;
-    client_token?: string | null;
+  lemonsqueezy?: {
+    store_id?: string | null;
+    test_mode?: boolean | null;
   };
 }
 
@@ -33,7 +33,7 @@ const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
   privacyHtml,
   googleAuth,
   facebookAuth,
-  paddle,
+  lemonsqueezy,
 }) => {
   const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null }, flash?: { verification?: { status: string; title?: string; message?: string } } }>();
   const currentUser = page.props.auth?.user ?? null;
@@ -93,7 +93,7 @@ const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
             initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined, pending_purchase: Boolean(currentUser.pending_purchase) } : null}
             googleProfile={googleProfile}
             facebookProfile={facebookProfile}
-            paddle={paddle ?? null}
+            lemonsqueezy={lemonsqueezy ?? null}
           />
         </div>
       </div>

resources/js/pages/marketing/Success.tsx

@@ -25,9 +25,9 @@ const GiftSuccess: React.FC = () => {
   React.useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const checkoutId = params.get('checkout_id') || sessionStorage.getItem('gift_checkout_id');
-    const transactionId = params.get('transaction_id');
+    const orderId = params.get('order_id');
 
-    fetchGiftVoucherByCheckout(checkoutId || undefined, transactionId || undefined)
+    fetchGiftVoucherByCheckout(checkoutId || undefined, orderId || undefined)
       .then((data) => {
         if (data) {
           setVoucher(data);

resources/js/pages/marketing/checkout/CheckoutWizard.tsx

@@ -27,9 +27,9 @@ interface CheckoutWizardProps {
   initialStep?: CheckoutStepId;
   googleProfile?: OAuthProfilePrefill | null;
   facebookProfile?: OAuthProfilePrefill | null;
-  paddle?: {
-    environment?: string | null;
-    client_token?: string | null;
+  lemonsqueezy?: {
+    store_id?: string | null;
+    test_mode?: boolean | null;
   } | null;
 }
 
@@ -290,7 +290,7 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
   initialStep,
   googleProfile,
   facebookProfile,
-  paddle,
+  lemonsqueezy,
 }) => {
   const [storedGoogleProfile, setStoredGoogleProfile] = useState<OAuthProfilePrefill | null>(() => {
     if (typeof window === 'undefined') {
@@ -382,7 +382,7 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
       initialStep={initialStep}
       initialAuthUser={initialAuthUser ?? undefined}
       initialIsAuthenticated={Boolean(initialAuthUser)}
-      paddle={paddle ?? null}
+      lemonsqueezy={lemonsqueezy ?? null}
     >
       <WizardBody
         privacyHtml={privacyHtml}

resources/js/pages/marketing/checkout/WizardContext.tsx

@@ -21,9 +21,9 @@ interface CheckoutWizardContextType {
   currentStep: CheckoutStepId;
   isAuthenticated: boolean;
   authUser: unknown;
-  paddleConfig?: {
-    environment?: string | null;
-    client_token?: string | null;
+  lemonsqueezyConfig?: {
+    store_id?: string | null;
+    test_mode?: boolean | null;
   } | null;
   paymentCompleted: boolean;
   checkoutSessionId: string | null;
@@ -119,9 +119,9 @@ interface CheckoutWizardProviderProps {
   initialStep?: CheckoutStepId;
   initialAuthUser?: unknown;
   initialIsAuthenticated?: boolean;
-  paddle?: {
-    environment?: string | null;
-    client_token?: string | null;
+  lemonsqueezy?: {
+    store_id?: string | null;
+    test_mode?: boolean | null;
   } | null;
 }
 
@@ -132,7 +132,7 @@ export function CheckoutWizardProvider({
   initialStep,
   initialAuthUser,
   initialIsAuthenticated,
-  paddle,
+  lemonsqueezy,
 }: CheckoutWizardProviderProps) {
   const customInitialState: CheckoutState = {
     ...initialState,
@@ -153,7 +153,7 @@ export function CheckoutWizardProvider({
     if (savedState) {
       try {
         const parsed = JSON.parse(savedState);
-        const hasValidPackage = parsed.selectedPackage && typeof parsed.selectedPackage.paddle_price_id === 'string' && parsed.selectedPackage.paddle_price_id !== '';
+        const hasValidPackage = parsed.selectedPackage && typeof parsed.selectedPackage.lemonsqueezy_variant_id === 'string' && parsed.selectedPackage.lemonsqueezy_variant_id !== '';
         if (hasValidPackage && initialPackage && parsed.selectedPackage.id === initialPackage.id && parsed.currentStep !== 'confirmation') {
           // Restore state selectively
           if (parsed.selectedPackage) dispatch({ type: 'SELECT_PACKAGE', payload: parsed.selectedPackage });
@@ -284,7 +284,7 @@ export function CheckoutWizardProvider({
     currentStep: state.currentStep,
     isAuthenticated: state.isAuthenticated,
     authUser: state.authUser,
-    paddleConfig: paddle ?? null,
+    lemonsqueezyConfig: lemonsqueezy ?? null,
     paymentCompleted: state.paymentCompleted,
     checkoutSessionId: state.checkoutSessionId,
     selectPackage,

resources/js/pages/marketing/checkout/__tests__/ConfirmationStep.render.test.tsx

@@ -9,7 +9,7 @@ const basePackage = {
   name: 'Starter',
   price: 49,
   type: 'endcustomer',
-  paddle_price_id: 'pri_test_123',
+  lemonsqueezy_variant_id: 'pri_test_123',
 };
 
 describe('ConfirmationStep', () => {

resources/js/pages/marketing/checkout/__tests__/PaymentStep.locale.test.ts

@@ -1,21 +1,21 @@
 import { describe, expect, it } from 'vitest';
-import { resolveCheckoutCsrfToken, resolvePaddleLocale } from '../steps/PaymentStep';
+import { resolveCheckoutCsrfToken, resolveCheckoutLocale } from '../steps/PaymentStep';
 
-describe('resolvePaddleLocale', () => {
+describe('resolveCheckoutLocale', () => {
   it('returns short locale when given region-specific tag', () => {
-    expect(resolvePaddleLocale('de-DE')).toBe('de');
-    expect(resolvePaddleLocale('en-US')).toBe('en');
+    expect(resolveCheckoutLocale('de-DE')).toBe('de');
+    expect(resolveCheckoutLocale('en-US')).toBe('en');
   });
 
   it('falls back to english when locale unsupported', () => {
-    expect(resolvePaddleLocale('jp')).toBe('en');
-    expect(resolvePaddleLocale('xx-YY')).toBe('en');
-    expect(resolvePaddleLocale(undefined)).toBe('en');
+    expect(resolveCheckoutLocale('jp')).toBe('en');
+    expect(resolveCheckoutLocale('xx-YY')).toBe('en');
+    expect(resolveCheckoutLocale(undefined)).toBe('en');
   });
 
   it('keeps supported locale codes untouched', () => {
-    expect(resolvePaddleLocale('fr')).toBe('fr');
-    expect(resolvePaddleLocale('es')).toBe('es');
+    expect(resolveCheckoutLocale('fr')).toBe('fr');
+    expect(resolveCheckoutLocale('es')).toBe('es');
   });
 });
 

resources/js/pages/marketing/checkout/__tests__/PaymentStep.render.test.tsx

@@ -11,21 +11,21 @@ vi.mock('@/hooks/useAnalytics', () => ({
 const basePackage = {
   id: 1,
   price: 49,
-  paddle_price_id: 'pri_test_123',
+  lemonsqueezy_variant_id: 'pri_test_123',
 };
 
 describe('PaymentStep', () => {
   beforeEach(() => {
     localStorage.clear();
-    window.Paddle = {
-      Environment: { set: vi.fn() },
-      Checkout: { open: vi.fn() },
+    window.LemonSqueezy = {
+      Setup: vi.fn(),
+      Url: { Open: vi.fn() },
     };
   });
 
   afterEach(() => {
     cleanup();
-    delete window.Paddle;
+    delete window.LemonSqueezy;
   });
 
   it('renders the payment experience without crashing', async () => {

resources/js/pages/marketing/checkout/steps/PaymentStep.tsx

@@ -19,22 +19,26 @@ import { useAnalytics } from '@/hooks/useAnalytics';
 
 type PaymentStatus = 'idle' | 'processing' | 'ready' | 'error';
 
+type LemonSqueezyEvent = {
+  event?: string;
+  data?: Record<string, unknown>;
+};
+
 declare global {
   interface Window {
-    Paddle?: {
-      Environment?: {
-        set: (environment: string) => void;
-      };
-      Initialize?: (options: { token: string }) => void;
-      Checkout: {
-        open: (options: Record<string, unknown>) => void;
+    createLemonSqueezy?: () => void;
+    LemonSqueezy?: {
+      Setup: (options: { eventHandler?: (event: LemonSqueezyEvent) => void }) => void;
+      Refresh?: () => void;
+      Url: {
+        Open: (url: string) => void;
+        Close?: () => void;
       };
     };
   }
 }
 
-const PADDLE_SCRIPT_URL = 'https://cdn.paddle.com/paddle/v2/paddle.js';
-const PADDLE_SUPPORTED_LOCALES = ['en', 'de', 'fr', 'es', 'it', 'nl', 'pt', 'sv', 'da', 'fi', 'no'];
+const LEMON_SCRIPT_URL = 'https://app.lemonsqueezy.com/js/lemon.js';
 const PRIMARY_CTA_STYLES = 'min-w-[200px] disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted disabled:hover:text-muted-foreground';
 
 const getCookieValue = (name: string): string | null => {
@@ -101,73 +105,50 @@ function buildCheckoutHeaders(): HeadersInit {
   return headers;
 }
 
-export function resolvePaddleLocale(rawLocale?: string | null): string {
+export function resolveCheckoutLocale(rawLocale?: string | null): string {
   if (!rawLocale) {
     return 'en';
   }
 
   const normalized = rawLocale.toLowerCase();
-
-  if (PADDLE_SUPPORTED_LOCALES.includes(normalized)) {
-    return normalized;
-  }
-
   const short = normalized.split('-')[0];
-  if (short && PADDLE_SUPPORTED_LOCALES.includes(short)) {
-    return short;
-  }
 
-  return 'en';
+  return short || 'en';
 }
 
-type PaddleEnvironment = 'sandbox' | 'production';
+let lemonLoaderPromise: Promise<typeof window.LemonSqueezy | null> | null = null;
 
-let paddleLoaderPromise: Promise<typeof window.Paddle | null> | null = null;
-
-function configurePaddle(paddle: typeof window.Paddle | undefined | null, environment: PaddleEnvironment): typeof window.Paddle | null {
-  if (!paddle) {
-    return null;
-  }
-
-  try {
-    paddle.Environment?.set?.(environment);
-  } catch (error) {
-    console.warn('[Paddle] Failed to set environment', error);
-  }
-
-  return paddle;
-}
-
-async function loadPaddle(environment: PaddleEnvironment): Promise<typeof window.Paddle | null> {
+async function loadLemonSqueezy(): Promise<typeof window.LemonSqueezy | null> {
   if (typeof window === 'undefined') {
     return null;
   }
 
-  if (window.Paddle) {
-    return configurePaddle(window.Paddle, environment);
+  if (window.LemonSqueezy) {
+    return window.LemonSqueezy;
   }
 
-  if (!paddleLoaderPromise) {
-    paddleLoaderPromise = new Promise<typeof window.Paddle | null>((resolve, reject) => {
+  if (!lemonLoaderPromise) {
+    lemonLoaderPromise = new Promise<typeof window.LemonSqueezy | null>((resolve, reject) => {
       const script = document.createElement('script');
-      script.src = PADDLE_SCRIPT_URL;
-      script.async = true;
-      script.onload = () => resolve(window.Paddle ?? null);
+      script.src = LEMON_SCRIPT_URL;
+      script.defer = true;
+      script.onload = () => {
+        window.createLemonSqueezy?.();
+        resolve(window.LemonSqueezy ?? null);
+      };
       script.onerror = (error) => reject(error);
       document.head.appendChild(script);
     }).catch((error) => {
-      console.error('Failed to load Paddle.js', error);
-      paddleLoaderPromise = null;
+      console.error('Failed to load Lemon.js', error);
+      lemonLoaderPromise = null;
       return null;
     });
   }
 
-  const paddle = await paddleLoaderPromise;
-
-  return configurePaddle(paddle, environment);
+  return lemonLoaderPromise;
 }
 
-const PaddleCta: React.FC<{ onCheckout: () => Promise<void>; disabled: boolean; isProcessing: boolean; className?: string }> = ({ onCheckout, disabled, isProcessing, className }) => {
+const LemonSqueezyCta: React.FC<{ onCheckout: () => Promise<void>; disabled: boolean; isProcessing: boolean; className?: string }> = ({ onCheckout, disabled, isProcessing, className }) => {
   const { t } = useTranslation('marketing');
 
   return (
@@ -178,7 +159,7 @@ const PaddleCta: React.FC<{ onCheckout: () => Promise<void>; disabled: boolean;
       onClick={onCheckout}
     >
       {isProcessing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
-      {t('checkout.payment_step.pay_with_paddle')}
+      {t('checkout.payment_step.pay_with_lemonsqueezy')}
     </Button>
   );
 };
@@ -189,7 +170,6 @@ export const PaymentStep: React.FC = () => {
   const {
     selectedPackage,
     nextStep,
-    paddleConfig,
     authUser,
     isAuthenticated,
     goToStep,
@@ -199,7 +179,6 @@ export const PaymentStep: React.FC = () => {
   } = useCheckoutWizard();
   const [status, setStatus] = useState<PaymentStatus>('idle');
   const [message, setMessage] = useState<string>('');
-  const [initialised, setInitialised] = useState(false);
   const [inlineActive, setInlineActive] = useState(false);
   const [acceptedTerms, setAcceptedTerms] = useState(false);
   const [consentError, setConsentError] = useState<string | null>(null);
@@ -220,11 +199,10 @@ export const PaymentStep: React.FC = () => {
   const [couponError, setCouponError] = useState<string | null>(null);
   const [couponNotice, setCouponNotice] = useState<string | null>(null);
   const [couponLoading, setCouponLoading] = useState(false);
-  const paddleRef = useRef<typeof window.Paddle | null>(null);
-  const checkoutContainerRef = useRef<HTMLDivElement | null>(null);
-  const eventCallbackRef = useRef<(event: Record<string, unknown>) => void>();
+  const lemonRef = useRef<typeof window.LemonSqueezy | null>(null);
+  const eventHandlerRef = useRef<(event: LemonSqueezyEvent) => void>();
+  const lastCheckoutIdRef = useRef<string | null>(null);
   const hasAutoAppliedCoupon = useRef(false);
-  const checkoutContainerClass = 'paddle-checkout-container';
   const [showWithdrawalModal, setShowWithdrawalModal] = useState(false);
   const [withdrawalHtml, setWithdrawalHtml] = useState<string | null>(null);
   const [withdrawalTitle, setWithdrawalTitle] = useState<string | null>(null);
@@ -235,23 +213,23 @@ export const PaymentStep: React.FC = () => {
   const [isGiftVoucher, setIsGiftVoucher] = useState(false);
   const [freeActivationBusy, setFreeActivationBusy] = useState(false);
   const [pendingConfirmation, setPendingConfirmation] = useState<{
-    transactionId: string | null;
+    orderId: string | null;
     checkoutId: string | null;
   } | null>(null);
 
-  const paddleLocale = useMemo(() => {
+  const checkoutLocale = useMemo(() => {
     const sourceLocale = i18n.language || (typeof document !== 'undefined' ? document.documentElement.lang : null);
-    return resolvePaddleLocale(sourceLocale ?? undefined);
+    return resolveCheckoutLocale(sourceLocale ?? undefined);
   }, [i18n.language]);
 
   const isFree = useMemo(() => (selectedPackage ? Number(selectedPackage.price) <= 0 : false), [selectedPackage]);
 
-  const confirmCheckoutSession = useCallback(async (payload: { transactionId: string | null; checkoutId: string | null }) => {
+  const confirmCheckoutSession = useCallback(async (payload: { orderId: string | null; checkoutId: string | null }) => {
     if (!checkoutSessionId) {
       return;
     }
 
-    if (!payload.transactionId && !payload.checkoutId) {
+    if (!payload.orderId && !payload.checkoutId) {
       return;
     }
 
@@ -262,12 +240,12 @@ export const PaymentStep: React.FC = () => {
         headers: buildCheckoutHeaders(),
         credentials: 'same-origin',
         body: JSON.stringify({
-          transaction_id: payload.transactionId,
+          order_id: payload.orderId,
           checkout_id: payload.checkoutId,
         }),
       });
     } catch (error) {
-      console.warn('Failed to confirm Paddle session', error);
+      console.warn('Failed to confirm Lemon Squeezy session', error);
     }
   }, [checkoutSessionId]);
 
@@ -398,14 +376,14 @@ export const PaymentStep: React.FC = () => {
         body: JSON.stringify({
           package_id: selectedPackage.id,
           accepted_terms: acceptedTerms,
-          locale: paddleLocale,
+          locale: checkoutLocale,
         }),
       });
 
       const payload = await response.json().catch(() => ({}));
 
       if (!response.ok) {
-        const errorMessage = payload?.errors?.accepted_waiver?.[0] || payload?.message || t('checkout.payment_step.paddle_error');
+      const errorMessage = payload?.errors?.accepted_waiver?.[0] || payload?.message || t('checkout.payment_step.lemonsqueezy_error');
         setConsentError(errorMessage);
         toast.error(errorMessage);
         return;
@@ -416,7 +394,7 @@ export const PaymentStep: React.FC = () => {
       nextStep();
     } catch (error) {
       console.error('Failed to activate free package', error);
-      const fallbackMessage = t('checkout.payment_step.paddle_error');
+      const fallbackMessage = t('checkout.payment_step.lemonsqueezy_error');
       setConsentError(fallbackMessage);
       toast.error(fallbackMessage);
     } finally {
@@ -424,7 +402,7 @@ export const PaymentStep: React.FC = () => {
     }
   };
 
-  const startPaddleCheckout = async () => {
+  const startLemonSqueezyCheckout = async () => {
     if (!selectedPackage) {
       return;
     }
@@ -443,43 +421,29 @@ export const PaymentStep: React.FC = () => {
       return;
     }
 
-    if (!selectedPackage.paddle_price_id) {
+    if (!selectedPackage.lemonsqueezy_variant_id) {
       setStatus('error');
-      setMessage(t('checkout.payment_step.paddle_not_configured'));
+      setMessage(t('checkout.payment_step.lemonsqueezy_not_configured'));
       return;
     }
 
     setPaymentCompleted(false);
     setStatus('processing');
-    setMessage(t('checkout.payment_step.paddle_preparing'));
+    setMessage(t('checkout.payment_step.lemonsqueezy_preparing'));
     setInlineActive(false);
     setCheckoutSessionId(null);
 
     try {
       await refreshCheckoutCsrfToken();
-      const inlineSupported = initialised && !!paddleConfig?.client_token;
-
-      if (typeof window !== 'undefined') {
-         
-        console.info('[Checkout] Paddle inline status', {
-          inlineSupported,
-          initialised,
-          hasClientToken: Boolean(paddleConfig?.client_token),
-          environment: paddleConfig?.environment,
-          paddlePriceId: selectedPackage.paddle_price_id,
-        });
-      }
-
-      const response = await fetch('/paddle/create-checkout', {
+      const response = await fetch('/lemonsqueezy/create-checkout', {
         method: 'POST',
         headers: buildCheckoutHeaders(),
         credentials: 'same-origin',
         body: JSON.stringify({
           package_id: selectedPackage.id,
-          locale: paddleLocale,
+          locale: checkoutLocale,
           coupon_code: couponPreview?.coupon.code ?? undefined,
           accepted_terms: acceptedTerms,
-          inline: inlineSupported,
         }),
       });
 
@@ -498,14 +462,14 @@ export const PaymentStep: React.FC = () => {
       }
       if (typeof window !== 'undefined') {
          
-        console.info('[Checkout] Hosted checkout response', { status: response.status, rawBody });
+        console.info('[Checkout] Lemon Squeezy checkout response', { status: response.status, rawBody });
       }
 
       let data: { checkout_url?: string; message?: string } | null = null;
       try {
         data = rawBody && rawBody.trim().startsWith('{') ? JSON.parse(rawBody) : null;
       } catch (parseError) {
-        console.warn('Failed to parse Paddle checkout payload as JSON', parseError);
+        console.warn('Failed to parse Lemon Squeezy checkout payload as JSON', parseError);
         data = null;
       }
 
@@ -528,73 +492,32 @@ export const PaymentStep: React.FC = () => {
       }
 
       if (!response.ok || !checkoutUrl) {
-        const message = data?.message || rawBody || 'Unable to create Paddle checkout.';
-        if (response.ok && data && (data as { mode?: string }).mode === 'inline') {
-          checkoutUrl = null;
-        } else {
-          throw new Error(message);
-        }
+        const message = data?.message || rawBody || 'Unable to create Lemon Squeezy checkout.';
+        throw new Error(message);
       }
 
-      if (data && (data as { mode?: string }).mode === 'inline') {
-        const paddle = paddleRef.current;
+      if (data && typeof (data as { id?: string }).id === 'string') {
+        lastCheckoutIdRef.current = (data as { id?: string }).id ?? null;
+      }
 
-        if (!paddle || !paddle.Checkout || typeof paddle.Checkout.open !== 'function') {
-          throw new Error('Inline Paddle checkout is not available.');
-        }
-
-        const inlinePayload: Record<string, unknown> = {
-          items: (data as { items?: unknown[] }).items ?? [],
-          settings: {
-            displayMode: 'inline',
-            frameTarget: checkoutContainerClass,
-            frameInitialHeight: '550',
-            frameStyle: 'width: 100%; min-width: 320px; background-color: transparent; border: none;',
-            theme: 'light',
-            locale: paddleLocale,
-          },
-        };
-
-        if ((data as { custom_data?: Record<string, unknown> }).custom_data) {
-          inlinePayload.customData = (data as { custom_data?: Record<string, unknown> }).custom_data;
-        }
-
-        if ((data as { customer?: Record<string, unknown> }).customer) {
-          inlinePayload.customer = (data as { customer?: Record<string, unknown> }).customer;
-        }
-
-        if (typeof window !== 'undefined') {
-           
-          console.info('[Checkout] Opening inline Paddle checkout', inlinePayload);
-        }
-
-        paddle.Checkout.open(inlinePayload);
+      const lemon = await loadLemonSqueezy();
 
+      if (lemon?.Url?.Open) {
+        lemon.Url.Open(checkoutUrl);
         setInlineActive(true);
         setStatus('ready');
-        setMessage(t('checkout.payment_step.paddle_overlay_ready'));
-        if (typeof window !== 'undefined' && checkoutContainerRef.current) {
-          window.requestAnimationFrame(() => {
-            const rect = checkoutContainerRef.current?.getBoundingClientRect();
-            if (!rect) {
-              return;
-            }
-            const offset = 120;
-            const target = Math.max(window.scrollY + rect.top - offset, 0);
-            window.scrollTo({ top: target, behavior: 'smooth' });
-          });
-        }
+        setMessage(t('checkout.payment_step.lemonsqueezy_overlay_ready'));
         return;
       }
 
       window.open(checkoutUrl, '_blank', 'noopener');
       setInlineActive(false);
       setStatus('ready');
-      setMessage(t('checkout.payment_step.paddle_ready'));
+      setMessage(t('checkout.payment_step.lemonsqueezy_ready'));
     } catch (error) {
-      console.error('Failed to start Paddle checkout', error);
+      console.error('Failed to start Lemon Squeezy checkout', error);
       setStatus('error');
-      setMessage(t('checkout.payment_step.paddle_error'));
+      setMessage(t('checkout.payment_step.lemonsqueezy_error'));
       setInlineActive(false);
       setPaymentCompleted(false);
     }
@@ -603,85 +526,50 @@ export const PaymentStep: React.FC = () => {
   useEffect(() => {
     let cancelled = false;
 
-    const environment = paddleConfig?.environment === 'sandbox' ? 'sandbox' : 'production';
-    const clientToken = paddleConfig?.client_token ?? null;
-
-    eventCallbackRef.current = (event) => {
-      if (!event?.name) {
-        return;
-      }
-
-      if (typeof window !== 'undefined') {
-         
-        console.debug('[Checkout] Paddle event', event);
-      }
-
-      if (event.name === 'checkout.completed') {
-        const transactionId = typeof event?.data?.transaction_id === 'string' ? event.data.transaction_id : null;
-        const checkoutId = typeof event?.data?.id === 'string' ? event.data.id : null;
-        setStatus('processing');
-        setMessage(t('checkout.payment_step.processing_confirmation'));
-        setInlineActive(false);
-        setPaymentCompleted(false);
-        setPendingConfirmation({ transactionId, checkoutId });
-        toast.success(t('checkout.payment_step.toast_success'));
-        setPaymentCompleted(true);
-        nextStep();
-      }
-
-      if (event.name === 'checkout.closed') {
-        setStatus('idle');
-        setMessage('');
-        setInlineActive(false);
-      }
-
-      if (event.name === 'checkout.error') {
-        setStatus('error');
-        setMessage(t('checkout.payment_step.paddle_error'));
-        setInlineActive(false);
-        setPaymentCompleted(false);
-      }
-    };
-
     (async () => {
-      const paddle = await loadPaddle(environment);
+      const lemon = await loadLemonSqueezy();
 
-      if (cancelled || !paddle) {
+      if (cancelled || !lemon) {
         return;
       }
 
       try {
-        let inlineReady = false;
-        if (typeof paddle.Initialize === 'function' && clientToken) {
-          if (typeof window !== 'undefined') {
-             
-            console.info('[Checkout] Initializing Paddle.js', { environment, hasToken: Boolean(clientToken) });
+        eventHandlerRef.current = (event) => {
+          if (!event?.event) {
+            return;
           }
 
-          paddle.Initialize({
-            token: clientToken,
-            checkout: {
-              settings: {
-                displayMode: 'inline',
-                frameTarget: checkoutContainerClass,
-                frameInitialHeight: '550',
-                frameStyle: 'width: 100%; min-width: 320px; background-color: transparent; border: none;',
-                locale: paddleLocale,
-              },
-            },
-          eventCallback: (event: Record<string, unknown>) => eventCallbackRef.current?.(event),
-          });
+          if (typeof window !== 'undefined') {
+             
+            console.debug('[Checkout] Lemon Squeezy event', event);
+          }
 
-          inlineReady = true;
-        }
+          if (event.event === 'Checkout.Success') {
+            const data = event.data as { id?: string; identifier?: string; attributes?: { checkout_id?: string } } | undefined;
+            const orderId = typeof data?.id === 'string' ? data.id : (typeof data?.identifier === 'string' ? data.identifier : null);
+            const checkoutId = typeof data?.attributes?.checkout_id === 'string'
+              ? data?.attributes?.checkout_id
+              : lastCheckoutIdRef.current;
+            setStatus('processing');
+            setMessage(t('checkout.payment_step.processing_confirmation'));
+            setInlineActive(false);
+            setPaymentCompleted(false);
+            setPendingConfirmation({ orderId, checkoutId });
+            toast.success(t('checkout.payment_step.toast_success'));
+            setPaymentCompleted(true);
+            nextStep();
+          }
+        };
 
-        paddleRef.current = paddle;
-        setInitialised(inlineReady);
+        lemon.Setup({
+          eventHandler: (event) => eventHandlerRef.current?.(event),
+        });
+
+        lemonRef.current = lemon;
       } catch (error) {
-        console.error('Failed to initialize Paddle', error);
-        setInitialised(false);
+        console.error('Failed to initialize Lemon.js', error);
         setStatus('error');
-        setMessage(t('checkout.payment_step.paddle_error'));
+        setMessage(t('checkout.payment_step.lemonsqueezy_error'));
         setPaymentCompleted(false);
       }
     })();
@@ -689,7 +577,7 @@ export const PaymentStep: React.FC = () => {
     return () => {
       cancelled = true;
     };
-  }, [nextStep, paddleConfig?.environment, paddleConfig?.client_token, paddleLocale, setPaymentCompleted, t]);
+  }, [nextStep, setPaymentCompleted, t]);
 
   useEffect(() => {
     setPaymentCompleted(false);
@@ -747,7 +635,7 @@ export const PaymentStep: React.FC = () => {
     setWithdrawalError(null);
 
     try {
-      const response = await fetch(`/api/v1/legal/widerrufsbelehrung?lang=${paddleLocale}`);
+      const response = await fetch(`/api/v1/legal/widerrufsbelehrung?lang=${checkoutLocale}`);
       if (!response.ok) {
         throw new Error(`Failed to load withdrawal page (${response.status})`);
       }
@@ -759,7 +647,7 @@ export const PaymentStep: React.FC = () => {
     } finally {
       setWithdrawalLoading(false);
     }
-  }, [paddleLocale, t, withdrawalHtml, withdrawalLoading]);
+  }, [checkoutLocale, t, withdrawalHtml, withdrawalLoading]);
 
 
   if (!selectedPackage) {
@@ -842,16 +730,10 @@ export const PaymentStep: React.FC = () => {
     </div>
   );
 
-  const PaddleLogo = () => (
+  const LemonSqueezyLogo = () => (
     <div className="flex items-center gap-3 rounded-full bg-white/15 px-4 py-2 text-white shadow-inner backdrop-blur-sm">
-      <img
-        src="/paddle.logo.svg"
-        alt="Paddle"
-        className="h-6 w-auto brightness-0 invert"
-        loading="lazy"
-        decoding="async"
-      />
-      <span className="text-xs font-semibold">{t('checkout.payment_step.paddle_partner')}</span>
+      <span className="text-sm font-semibold tracking-wide">Lemon Squeezy</span>
+      <span className="text-xs font-semibold">{t('checkout.payment_step.lemonsqueezy_partner')}</span>
     </div>
   );
 
@@ -863,7 +745,7 @@ export const PaymentStep: React.FC = () => {
             <div className="overflow-hidden rounded-2xl border bg-gradient-to-br from-[#001835] via-[#002b55] to-[#00407c] p-6 text-white shadow-md">
             <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
               <div className="space-y-4">
-                <PaddleLogo />
+                <LemonSqueezyLogo />
                 <div className="space-y-2">
                   <h3 className="text-2xl font-semibold">{t('checkout.payment_step.guided_title')}</h3>
                   <p className="text-sm text-white/80">{t('checkout.payment_step.guided_body')}</p>
@@ -919,8 +801,8 @@ export const PaymentStep: React.FC = () => {
                   </div>
 
                   <div className="space-y-2">
-                    <PaddleCta
-                      onCheckout={startPaddleCheckout}
+                    <LemonSqueezyCta
+                      onCheckout={startLemonSqueezyCheckout}
                       disabled={status === 'processing' || !acceptedTerms}
                       isProcessing={status === 'processing'}
                       className={cn('bg-white text-[#001835] hover:bg-white/90', PRIMARY_CTA_STYLES)}
@@ -1012,10 +894,10 @@ export const PaymentStep: React.FC = () => {
           {!inlineActive && (
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <p className="text-sm text-muted-foreground">
-                {t('checkout.payment_step.paddle_intro')}
+                {t('checkout.payment_step.lemonsqueezy_intro')}
               </p>
-              <PaddleCta
-                onCheckout={startPaddleCheckout}
+              <LemonSqueezyCta
+                onCheckout={startLemonSqueezyCheckout}
                 disabled={status === 'processing' || !acceptedTerms}
                 isProcessing={status === 'processing'}
                 className={PRIMARY_CTA_STYLES}
@@ -1041,10 +923,8 @@ export const PaymentStep: React.FC = () => {
             </Alert>
           )}
 
-          <div ref={checkoutContainerRef} className={`${checkoutContainerClass} min-h-[360px]`} />
-
           <p className={`text-xs text-muted-foreground ${inlineActive ? 'text-center' : 'sm:text-right'}`}>
-            {t('checkout.payment_step.paddle_disclaimer')}
+            {t('checkout.payment_step.lemonsqueezy_disclaimer')}
           </p>
         </div>
       </div>

resources/js/pages/marketing/checkout/types.ts

@@ -24,8 +24,8 @@ export interface CheckoutPackage {
   type: 'endcustomer' | 'reseller';
   features: string[];
   limits?: Record<string, unknown>;
-  paddle_price_id?: string | null;
-  paddle_product_id?: string | null;
+  lemonsqueezy_variant_id?: string | null;
+  lemonsqueezy_product_id?: string | null;
   activates_immediately?: boolean;
   [key: string]: unknown;
 }