switched to paddle inline checkout, removed paypal and most of stripe. added product sync between app and paddle.

2025-10-27 17:26:39 +01:00
parent ecf5a23b28
commit 5432456ffd
117 changed files with 4114 additions and 3639 deletions
--- a/resources/js/pages/auth/RegisterForm.tsx
+++ b/resources/js/pages/auth/RegisterForm.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import toast from 'react-hot-toast';
 import { LoaderCircle, User, Mail, Phone, Lock, MapPin } from 'lucide-react';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import type { GoogleProfilePrefill } from '../marketing/checkout/types';

 declare const route: (name: string, params?: Record<string, unknown>) => string;

@@ -18,6 +19,8 @@ interface RegisterFormProps {
  onSuccess?: (payload: RegisterSuccessPayload) => void;
  privacyHtml: string;
  locale?: string;
+  prefill?: GoogleProfilePrefill;
+  onClearGoogleProfile?: () => void;
 }

 type RegisterFormFields = {
@@ -30,13 +33,15 @@ type RegisterFormFields = {
  address: string;
  phone: string;
  privacy_consent: boolean;
+  terms: boolean;
  package_id: number | null;
 };

-export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale }: RegisterFormProps) {
+export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale, prefill, onClearGoogleProfile }: RegisterFormProps) {
  const [privacyOpen, setPrivacyOpen] = useState(false);
  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [prefillApplied, setPrefillApplied] = useState(false);
  const { t } = useTranslation(['auth', 'common']);
  const page = usePage<{ errors: Record<string, string>; locale?: string; auth?: { user?: any | null } }>();
  const resolvedLocale = locale ?? page.props.locale ?? 'de';
@@ -51,6 +56,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
    address: '',
    phone: '',
    privacy_consent: false,
+    terms: false,
    package_id: packageId || null,
  });

@@ -61,6 +67,62 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
  }, [errors, hasTriedSubmit]);

  const registerEndpoint = '/checkout/register';
+
+  const namePrefill = useMemo(() => {
+    const rawFirst = prefill?.given_name ?? prefill?.name?.split(' ')[0] ?? '';
+    const remaining = prefill?.name ? prefill.name.split(' ').slice(1).join(' ') : '';
+    const rawLast = prefill?.family_name ?? remaining;
+
+    return {
+      first: rawFirst ?? '',
+      last: rawLast ?? '',
+    };
+  }, [prefill]);
+
+  const suggestedUsername = useMemo(() => {
+    if (prefill?.email) {
+      const localPart = prefill.email.split('@')[0];
+      if (localPart) {
+        return localPart.slice(0, 30);
+      }
+    }
+
+    const first = prefill?.given_name ?? prefill?.name?.split(' ')[0] ?? '';
+    const last = prefill?.family_name ?? prefill?.name?.split(' ').slice(1).join(' ') ?? '';
+    const combined = `${first}${last}`.trim();
+    if (!combined) {
+      return undefined;
+    }
+
+    return combined
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '')
+      .slice(0, 30) || undefined;
+  }, [prefill]);
+
+  useEffect(() => {
+    if (!prefill || prefillApplied) {
+      return;
+    }
+
+    if (namePrefill.first && !data.first_name) {
+      setData('first_name', namePrefill.first);
+    }
+
+    if (namePrefill.last && !data.last_name) {
+      setData('last_name', namePrefill.last);
+    }
+
+    if (prefill.email && !data.email) {
+      setData('email', prefill.email);
+    }
+
+    if (suggestedUsername && !data.username) {
+      setData('username', suggestedUsername);
+    }
+
+    setPrefillApplied(true);
+  }, [prefill, namePrefill.first, namePrefill.last, data.first_name, data.last_name, data.email, data.username, prefillApplied, setData, suggestedUsername]);
      
  const submit = async (event: React.FormEvent) => {
    event.preventDefault();
@@ -95,6 +157,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
          redirect: json?.redirect ?? null,
          pending_purchase: json?.pending_purchase ?? json?.user?.pending_purchase ?? false,
        });
+        onClearGoogleProfile?.();
        reset();
        setHasTriedSubmit(false);
        return;
@@ -362,9 +425,13 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
            checked={data.privacy_consent}
            onChange={(e) => {
              setData('privacy_consent', e.target.checked);
+              setData('terms', e.target.checked);
              if (e.target.checked && errors.privacy_consent) {
                clearErrors('privacy_consent');
              }
+              if (e.target.checked && errors.terms) {
+                clearErrors('terms');
+              }
            }}
            className="h-4 w-4 text-[#FFB6C1] focus:ring-[#FFB6C1] border-gray-300 rounded"
          />
@@ -379,6 +446,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
            </button>.
          </label>
          {errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
+          {errors.terms && <p className="mt-2 text-sm text-red-600">{errors.terms}</p>}
        </div>
      </div>

@@ -419,8 +487,3 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
 }


-
-
-
-
-
--- a/resources/js/pages/marketing/CheckoutWizardPage.tsx
+++ b/resources/js/pages/marketing/CheckoutWizardPage.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Head, usePage } from "@inertiajs/react";
 import MarketingLayout from "@/layouts/mainWebsite";
-import type { CheckoutPackage } from "./checkout/types";
+import type { CheckoutPackage, GoogleProfilePrefill } from "./checkout/types";
 import { CheckoutWizard } from "./checkout/CheckoutWizard";
 import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
@@ -9,20 +9,28 @@ import { X } from "lucide-react";
 interface CheckoutWizardPageProps {
  package: CheckoutPackage;
  packageOptions: CheckoutPackage[];
-  stripePublishableKey: string;
-  paypalClientId: string;
  privacyHtml: string;
+  googleAuth?: {
+    status?: string | null;
+    error?: string | null;
+    profile?: GoogleProfilePrefill | null;
+  };
+  paddle?: {
+    environment?: string | null;
+    client_token?: string | null;
+  };
 }

 export default function CheckoutWizardPage({
  package: initialPackage,
  packageOptions,
-  stripePublishableKey,
-  paypalClientId,
  privacyHtml,
+  googleAuth,
+  paddle,
 }: CheckoutWizardPageProps) {
  const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null } }>();
  const currentUser = page.props.auth?.user ?? null;
+  const googleProfile = googleAuth?.profile ?? null;


  const dedupedOptions = React.useMemo(() => {
@@ -58,10 +66,10 @@ export default function CheckoutWizardPage({
          <CheckoutWizard
            initialPackage={initialPackage}
            packageOptions={dedupedOptions}
-            stripePublishableKey={stripePublishableKey}
-            paypalClientId={paypalClientId}
            privacyHtml={privacyHtml}
            initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined, pending_purchase: Boolean(currentUser.pending_purchase) } : null}
+            googleProfile={googleProfile}
+            paddle={paddle ?? null}
          />
        </div>
      </div>
--- a/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
+++ b/resources/js/pages/marketing/checkout/CheckoutWizard.tsx
@@ -1,10 +1,10 @@
-import React, { useMemo, useRef, useEffect, useCallback, Suspense, lazy } from "react";
+import React, { useMemo, useRef, useEffect, useCallback, Suspense, lazy, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import { Steps } from "@/components/ui/Steps";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { CheckoutWizardProvider, useCheckoutWizard } from "./WizardContext";
-import type { CheckoutPackage, CheckoutStepId } from "./types";
+import type { CheckoutPackage, CheckoutStepId, GoogleProfilePrefill } from "./types";
 import { PackageStep } from "./steps/PackageStep";
 import { AuthStep } from "./steps/AuthStep";
 import { ConfirmationStep } from "./steps/ConfirmationStep";
@@ -15,8 +15,6 @@ const PaymentStep = lazy(() => import('./steps/PaymentStep').then((module) => ({
 interface CheckoutWizardProps {
  initialPackage: CheckoutPackage;
  packageOptions: CheckoutPackage[];
-  stripePublishableKey: string;
-  paypalClientId: string;
  privacyHtml: string;
  initialAuthUser?: {
    id: number;
@@ -25,6 +23,11 @@ interface CheckoutWizardProps {
    pending_purchase?: boolean;
  } | null;
  initialStep?: CheckoutStepId;
+  googleProfile?: GoogleProfilePrefill | null;
+  paddle?: {
+    environment?: string | null;
+    client_token?: string | null;
+  } | null;
 }

 const baseStepConfig: { id: CheckoutStepId; titleKey: string; descriptionKey: string; detailsKey: string }[] = [
@@ -61,13 +64,34 @@ const PaymentStepFallback: React.FC = () => (
  </div>
 );

-const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: string; privacyHtml: string }> = ({ stripePublishableKey, paypalClientId, privacyHtml }) => {
+const WizardBody: React.FC<{
+  privacyHtml: string;
+  googleProfile?: GoogleProfilePrefill | null;
+  onClearGoogleProfile?: () => void;
+}> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
  const { t } = useTranslation('marketing');
-  const { currentStep, nextStep, previousStep } = useCheckoutWizard();
+  const {
+    currentStep,
+    nextStep,
+    previousStep,
+    selectedPackage,
+    authUser,
+    isAuthenticated,
+    paymentCompleted,
+  } = useCheckoutWizard();
  const progressRef = useRef<HTMLDivElement | null>(null);
  const hasMountedRef = useRef(false);
  const { trackEvent } = useAnalytics();

+  const isFreeSelected = useMemo(() => {
+    if (!selectedPackage) {
+      return false;
+    }
+
+    const priceValue = Number(selectedPackage.price);
+    return Number.isFinite(priceValue) && priceValue <= 0;
+  }, [selectedPackage]);
+
  const stepConfig = useMemo(() =>
    baseStepConfig.map(step => ({
      id: step.id,
@@ -114,7 +138,41 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
    });
  }, [currentStep]);

+  const atLastStep = currentIndex >= stepConfig.length - 1;
+
+  const canProceedToNextStep = useMemo(() => {
+    if (atLastStep) {
+      return false;
+    }
+
+    if (currentStep === 'package') {
+      return Boolean(selectedPackage);
+    }
+
+    if (currentStep === 'auth') {
+      return Boolean(isAuthenticated && authUser);
+    }
+
+    if (currentStep === 'payment') {
+      return isFreeSelected || paymentCompleted;
+    }
+
+    return true;
+  }, [atLastStep, authUser, currentStep, isAuthenticated, isFreeSelected, paymentCompleted, selectedPackage]);
+
+  const shouldShowNextButton = useMemo(() => {
+    if (currentStep !== 'payment') {
+      return true;
+    }
+
+    return isFreeSelected || paymentCompleted;
+  }, [currentStep, isFreeSelected, paymentCompleted]);
+
  const handleNext = useCallback(() => {
+    if (!canProceedToNextStep) {
+      return;
+    }
+
    const targetStep = stepConfig[currentIndex + 1]?.id ?? 'end';
    trackEvent({
      category: 'marketing_checkout',
@@ -122,7 +180,7 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
      name: `${currentStep}->${targetStep}`,
    });
    nextStep();
-  }, [currentIndex, currentStep, nextStep, stepConfig, trackEvent]);
+  }, [canProceedToNextStep, currentIndex, currentStep, nextStep, stepConfig, trackEvent]);

  const handlePrevious = useCallback(() => {
    const targetStep = stepConfig[currentIndex - 1]?.id ?? 'start';
@@ -151,10 +209,16 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin

      <div className="space-y-6">
        {currentStep === "package" && <PackageStep />}
-        {currentStep === "auth" && <AuthStep privacyHtml={privacyHtml} />}
+        {currentStep === "auth" && (
+          <AuthStep
+            privacyHtml={privacyHtml}
+            googleProfile={googleProfile ?? undefined}
+            onClearGoogleProfile={onClearGoogleProfile}
+          />
+        )}
        {currentStep === "payment" && (
          <Suspense fallback={<PaymentStepFallback />}>
-            <PaymentStep stripePublishableKey={stripePublishableKey} paypalClientId={paypalClientId} />
+            <PaymentStep />
          </Suspense>
        )}
        {currentStep === "confirmation" && (
@@ -162,13 +226,17 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
        )}
      </div>

-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between gap-4">
        <Button variant="ghost" onClick={handlePrevious} disabled={currentIndex <= 0}>
          {t('checkout.back')}
        </Button>
-        <Button onClick={handleNext} disabled={currentIndex >= stepConfig.length - 1}>
-          {t('checkout.next')}
-        </Button>
+        {shouldShowNextButton ? (
+          <Button onClick={handleNext} disabled={!canProceedToNextStep}>
+            {t('checkout.next')}
+          </Button>
+        ) : (
+          <div className="h-10 min-w-[128px]" aria-hidden="true" />
+        )}
      </div>
    </div>
  );
@@ -177,12 +245,51 @@ const WizardBody: React.FC<{ stripePublishableKey: string; paypalClientId: strin
 export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
  initialPackage,
  packageOptions,
-  stripePublishableKey,
-  paypalClientId,
  privacyHtml,
  initialAuthUser,
  initialStep,
+  googleProfile,
+  paddle,
 }) => {
+  const [storedProfile, setStoredProfile] = useState<GoogleProfilePrefill | null>(() => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+
+    const raw = window.localStorage.getItem('checkout-google-profile');
+    if (!raw) {
+      return null;
+    }
+
+    try {
+      return JSON.parse(raw) as GoogleProfilePrefill;
+    } catch (error) {
+      console.warn('Failed to parse checkout google profile from storage', error);
+      window.localStorage.removeItem('checkout-google-profile');
+      return null;
+    }
+  });
+
+  useEffect(() => {
+    if (!googleProfile) {
+      return;
+    }
+
+    setStoredProfile(googleProfile);
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('checkout-google-profile', JSON.stringify(googleProfile));
+    }
+  }, [googleProfile]);
+
+  const clearStoredProfile = useCallback(() => {
+    setStoredProfile(null);
+    if (typeof window !== 'undefined') {
+      window.localStorage.removeItem('checkout-google-profile');
+    }
+  }, []);
+
+  const effectiveProfile = googleProfile ?? storedProfile;

  return (
    <CheckoutWizardProvider
@@ -191,8 +298,13 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
      initialStep={initialStep}
      initialAuthUser={initialAuthUser ?? undefined}
      initialIsAuthenticated={Boolean(initialAuthUser)}
+      paddle={paddle ?? null}
    >
-      <WizardBody stripePublishableKey={stripePublishableKey} paypalClientId={paypalClientId} privacyHtml={privacyHtml} />
+      <WizardBody
+        privacyHtml={privacyHtml}
+        googleProfile={effectiveProfile}
+        onClearGoogleProfile={clearStoredProfile}
+      />
    </CheckoutWizardProvider>
  );
 };
--- a/resources/js/pages/marketing/checkout/WizardContext.tsx
+++ b/resources/js/pages/marketing/checkout/WizardContext.tsx
@@ -10,6 +10,7 @@ interface CheckoutState {
  paymentIntent: string | null;
  loading: boolean;
  error: string | null;
+  paymentCompleted: boolean;
 }

 interface CheckoutWizardContextType {
@@ -19,6 +20,11 @@ interface CheckoutWizardContextType {
  currentStep: CheckoutStepId;
  isAuthenticated: boolean;
  authUser: any;
+  paddleConfig?: {
+    environment?: string | null;
+    client_token?: string | null;
+  } | null;
+  paymentCompleted: boolean;
  selectPackage: (pkg: CheckoutPackage) => void;
  setSelectedPackage: (pkg: CheckoutPackage) => void;
  setAuthUser: (user: any) => void;
@@ -31,6 +37,7 @@ interface CheckoutWizardContextType {
  setLoading: (loading: boolean) => void;
  setError: (error: string | null) => void;
  resetPaymentState: () => void;
+  setPaymentCompleted: (completed: boolean) => void;
 }

 const CheckoutWizardContext = createContext<CheckoutWizardContextType | null>(null);
@@ -44,6 +51,7 @@ const initialState: CheckoutState = {
  paymentIntent: null,
  loading: false,
  error: null,
+  paymentCompleted: false,
 };

 type CheckoutAction =
@@ -54,14 +62,15 @@ type CheckoutAction =
  | { type: 'GO_TO_STEP'; payload: CheckoutStepId }
  | { type: 'UPDATE_PAYMENT_INTENT'; payload: string | null }
  | { type: 'SET_LOADING'; payload: boolean }
-  | { type: 'SET_ERROR'; payload: string | null };
+  | { type: 'SET_ERROR'; payload: string | null }
+  | { type: 'SET_PAYMENT_COMPLETED'; payload: boolean };

 function checkoutReducer(state: CheckoutState, action: CheckoutAction): CheckoutState {
  switch (action.type) {
    case 'SELECT_PACKAGE':
-      return { ...state, selectedPackage: action.payload };
+      return { ...state, selectedPackage: action.payload, paymentCompleted: false };
    case 'SET_AUTH_USER':
-      return { ...state, authUser: action.payload };
+      return { ...state, authUser: action.payload, isAuthenticated: Boolean(action.payload) };
    case 'NEXT_STEP':
      const steps: CheckoutStepId[] = ['package', 'auth', 'payment', 'confirmation'];
      const currentIndex = steps.indexOf(state.currentStep);
@@ -84,6 +93,8 @@ function checkoutReducer(state: CheckoutState, action: CheckoutAction): Checkout
      return { ...state, loading: action.payload };
    case 'SET_ERROR':
      return { ...state, error: action.payload };
+    case 'SET_PAYMENT_COMPLETED':
+      return { ...state, paymentCompleted: action.payload };
    default:
      return state;
  }
@@ -96,6 +107,10 @@ interface CheckoutWizardProviderProps {
  initialStep?: CheckoutStepId;
  initialAuthUser?: any;
  initialIsAuthenticated?: boolean;
+  paddle?: {
+    environment?: string | null;
+    client_token?: string | null;
+  } | null;
 }

 export function CheckoutWizardProvider({
@@ -104,7 +119,8 @@ export function CheckoutWizardProvider({
  packageOptions,
  initialStep,
  initialAuthUser,
-  initialIsAuthenticated
+  initialIsAuthenticated,
+  paddle,
 }: CheckoutWizardProviderProps) {
  const customInitialState: CheckoutState = {
    ...initialState,
@@ -124,7 +140,8 @@ export function CheckoutWizardProvider({
    if (savedState) {
      try {
        const parsed = JSON.parse(savedState);
-        if (parsed.selectedPackage && initialPackage && parsed.selectedPackage.id === initialPackage.id && parsed.currentStep !== 'confirmation') {
+        const hasValidPackage = parsed.selectedPackage && typeof parsed.selectedPackage.paddle_price_id === 'string' && parsed.selectedPackage.paddle_price_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 });
          if (parsed.currentStep) dispatch({ type: 'GO_TO_STEP', payload: parsed.currentStep });
@@ -192,6 +209,11 @@ export function CheckoutWizardProvider({
    dispatch({ type: 'UPDATE_PAYMENT_INTENT', payload: null });
    dispatch({ type: 'SET_LOADING', payload: false });
    dispatch({ type: 'SET_ERROR', payload: null });
+    dispatch({ type: 'SET_PAYMENT_COMPLETED', payload: false });
+  }, []);
+
+  const setPaymentCompleted = useCallback((completed: boolean) => {
+    dispatch({ type: 'SET_PAYMENT_COMPLETED', payload: completed });
  }, []);

  const cancelCheckout = useCallback(() => {
@@ -226,6 +248,8 @@ export function CheckoutWizardProvider({
    currentStep: state.currentStep,
    isAuthenticated: state.isAuthenticated,
    authUser: state.authUser,
+    paddleConfig: paddle ?? null,
+    paymentCompleted: state.paymentCompleted,
    selectPackage,
    setSelectedPackage,
    setAuthUser,
@@ -238,6 +262,7 @@ export function CheckoutWizardProvider({
    setLoading,
    setError,
    resetPaymentState,
+    setPaymentCompleted,
  };

  return (
--- a/resources/js/pages/marketing/checkout/tests/CheckoutWizard.guard.test.tsx
+++ b/resources/js/pages/marketing/checkout/tests/CheckoutWizard.guard.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeAll, afterEach } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { CheckoutWizard } from '../CheckoutWizard';
+import { useCheckoutWizard } from '../WizardContext';
+
+vi.mock('@/hooks/useAnalytics', () => ({
+  useAnalytics: () => ({ trackEvent: vi.fn() }),
+}));
+
+vi.mock('../steps/PackageStep', () => ({
+  PackageStep: () => <div data-testid="package-step" />,
+}));
+
+vi.mock('../steps/AuthStep', () => ({
+  AuthStep: () => <div data-testid="auth-step" />,
+}));
+
+vi.mock('../steps/PaymentStep', () => ({
+  PaymentStep: () => {
+    const { setPaymentCompleted } = useCheckoutWizard();
+
+    return (
+      <div data-testid="payment-step">
+        <button type="button" onClick={() => setPaymentCompleted(true)}>
+          mark-complete
+        </button>
+      </div>
+    );
+  },
+}));
+
+vi.mock('../steps/ConfirmationStep', () => ({
+  ConfirmationStep: () => <div data-testid="confirmation-step" />,
+}));
+
+const basePackage = {
+  id: 1,
+  name: 'Starter',
+  description: 'Test package',
+  price: 0,
+  type: 'endcustomer' as const,
+  features: [],
+};
+
+describe('CheckoutWizard auth step navigation guard', () => {
+  beforeAll(() => {
+    // jsdom does not implement scrollTo, but the wizard calls it on step changes.
+    Object.defineProperty(window, 'scrollTo', { value: vi.fn(), writable: true });
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('disables the next button when the user is not authenticated on the auth step', () => {
+    render(
+      <CheckoutWizard
+        initialPackage={basePackage}
+        packageOptions={[basePackage]}
+        privacyHtml="<p>privacy</p>"
+        initialAuthUser={null}
+        initialStep="auth"
+      />,
+    );
+
+    const nextButton = screen.getByRole('button', { name: 'checkout.next' });
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('enables the next button once the user is authenticated on the auth step', () => {
+    render(
+      <CheckoutWizard
+        initialPackage={basePackage}
+        packageOptions={[basePackage]}
+        privacyHtml="<p>privacy</p>"
+        initialAuthUser={{ id: 42, email: 'user@example.com' }}
+        initialStep="auth"
+      />,
+    );
+
+    const nextButton = screen.getByRole('button', { name: 'checkout.next' });
+    expect(nextButton).not.toBeDisabled();
+  });
+
+  it('only renders the next button on the payment step after the payment is completed', async () => {
+    const paidPackage = { ...basePackage, id: 2, price: 99 };
+
+    render(
+      <CheckoutWizard
+        initialPackage={paidPackage}
+        packageOptions={[paidPackage]}
+        privacyHtml="<p>privacy</p>"
+        initialAuthUser={{ id: 42, email: 'user@example.com' }}
+        initialStep="payment"
+      />,
+    );
+
+    await screen.findByTestId('payment-step');
+
+    expect(screen.queryByRole('button', { name: 'checkout.next' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: 'mark-complete' }));
+
+    expect(await screen.findByRole('button', { name: 'checkout.next' })).toBeEnabled();
+  });
+});
--- a/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
@@ -3,6 +3,7 @@ import { usePage } from "@inertiajs/react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useCheckoutWizard } from "../WizardContext";
+import type { GoogleProfilePrefill } from '../types';
 import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
 import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";
 import { useTranslation } from 'react-i18next';
@@ -11,6 +12,8 @@ import { LoaderCircle } from "lucide-react";

 interface AuthStepProps {
  privacyHtml: string;
+  googleProfile?: GoogleProfilePrefill;
+  onClearGoogleProfile?: () => void;
 }

 type GoogleAuthFlash = {
@@ -29,7 +32,7 @@ const GoogleIcon: React.FC<{ className?: string }> = ({ className }) => (
  </svg>
 );

-export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
+export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
  const { t } = useTranslation('marketing');
  const page = usePage<{ locale?: string }>();
  const locale = page.props.locale ?? "de";
@@ -42,10 +45,11 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
  const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);

  useEffect(() => {
-    if (googleAuth?.status === 'success') {
+    if (googleAuth?.status === 'signin') {
      toast.success(t('checkout.auth_step.google_success_toast'));
+      onClearGoogleProfile?.();
    }
-  }, [googleAuth?.status, t]);
+  }, [googleAuth?.status, onClearGoogleProfile, t]);

  useEffect(() => {
    if (googleAuth?.error) {
@@ -64,6 +68,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
      name: payload.name ?? undefined,
      pending_purchase: Boolean(payload.pending_purchase),
    });
+    onClearGoogleProfile?.();
    nextStep();
  };

@@ -78,6 +83,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
      });
    }

+    onClearGoogleProfile?.();
    nextStep();
  };

@@ -158,6 +164,8 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
              privacyHtml={privacyHtml}
              locale={locale}
              onSuccess={handleRegisterSuccess}
+              prefill={googleProfile}
+              onClearGoogleProfile={onClearGoogleProfile}
            />
          )
        ) : (
--- a/resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
@@ -1,401 +1,332 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
-import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { LoaderCircle } from 'lucide-react';
 import { useCheckoutWizard } from '../WizardContext';
-import { getStripe } from '@/utils/stripe';

-interface PaymentStepProps {
-  stripePublishableKey: string;
-  paypalClientId: string;
-}
+type PaymentStatus = 'idle' | 'processing' | 'ready' | 'error';

-type Provider = 'stripe' | 'paypal';
-type PaymentStatus = 'idle' | 'loading' | 'ready' | 'processing' | 'error' | 'success';
-
-interface StripePaymentFormProps {
-  onProcessing: () => void;
-  onSuccess: () => void;
-  onError: (message: string) => void;
-  selectedPackage: any;
-  t: (key: string, options?: Record<string, unknown>) => string;
-}
-
-const StripePaymentForm: React.FC<StripePaymentFormProps> = ({ onProcessing, onSuccess, onError, selectedPackage, t }) => {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string>('');
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!stripe || !elements) {
-      const message = t('checkout.payment_step.stripe_not_loaded');
-      onError(message);
-      return;
-    }
-
-    onProcessing();
-    setIsProcessing(true);
-    setErrorMessage('');
-
-    try {
-      const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
-        elements,
-        confirmParams: {
-          return_url: `${window.location.origin}/checkout/success`,
-        },
-        redirect: 'if_required',
-      });
-
-      if (stripeError) {
-        let message = t('checkout.payment_step.payment_failed');
-
-        switch (stripeError.type) {
-          case 'card_error':
-            message += stripeError.message || t('checkout.payment_step.error_card');
-            break;
-          case 'validation_error':
-            message += t('checkout.payment_step.error_validation');
-            break;
-          case 'api_connection_error':
-            message += t('checkout.payment_step.error_connection');
-            break;
-          case 'api_error':
-            message += t('checkout.payment_step.error_server');
-            break;
-          case 'authentication_error':
-            message += t('checkout.payment_step.error_auth');
-            break;
-          default:
-            message += stripeError.message || t('checkout.payment_step.error_unknown');
-        }
-
-        setErrorMessage(message);
-        onError(message);
-        return;
-      }
-
-      if (paymentIntent && paymentIntent.status === 'succeeded') {
-        onSuccess();
-        return;
-      }
-
-      onError(t('checkout.payment_step.unexpected_status', { status: paymentIntent?.status }));
-    } catch (error) {
-      console.error('Stripe payment failed', error);
-      onError(t('checkout.payment_step.error_unknown'));
-    } finally {
-      setIsProcessing(false);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      {errorMessage && (
-        <Alert variant="destructive">
-          <AlertDescription>{errorMessage}</AlertDescription>
-        </Alert>
-      )}
-      <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
-        <p className="text-sm text-muted-foreground">{t('checkout.payment_step.secure_payment_desc')}</p>
-        <PaymentElement />
-        <Button type="submit" disabled={!stripe || isProcessing} size="lg" className="w-full">
-          {isProcessing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
-          {t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
-        </Button>
-      </div>
-    </form>
-  );
-};
-
-interface PayPalPaymentFormProps {
-  onProcessing: () => void;
-  onSuccess: () => void;
-  onError: (message: string) => void;
-  selectedPackage: any;
-  isReseller: boolean;
-  paypalPlanId?: string | null;
-  t: (key: string, options?: Record<string, unknown>) => string;
-}
-
-const PayPalPaymentForm: React.FC<PayPalPaymentFormProps> = ({ onProcessing, onSuccess, onError, selectedPackage, isReseller, paypalPlanId, t }) => {
-  const createOrder = async () => {
-    if (!selectedPackage?.id) {
-      const message = t('checkout.payment_step.paypal_order_error');
-      onError(message);
-      throw new Error(message);
-    }
-
-    try {
-      onProcessing();
-
-      const endpoint = isReseller ? '/paypal/create-subscription' : '/paypal/create-order';
-      const payload: Record<string, unknown> = {
-        package_id: selectedPackage.id,
+declare global {
+  interface Window {
+    Paddle?: {
+      Environment?: {
+        set: (environment: string) => void;
      };
+      Initialize?: (options: { token: string }) => void;
+      Checkout: {
+        open: (options: Record<string, unknown>) => void;
+      };
+    };
+  }
+}

-      if (isReseller) {
-        if (!paypalPlanId) {
-          const message = t('checkout.payment_step.paypal_missing_plan');
-          onError(message);
-          throw new Error(message);
-        }
-        payload.plan_id = paypalPlanId;
-      }
+const PADDLE_SCRIPT_URL = 'https://cdn.paddle.com/paddle/v2/paddle.js';

-      const response = await fetch(endpoint, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
-        },
-        body: JSON.stringify(payload),
-      });
+type PaddleEnvironment = 'sandbox' | 'production';

-      const data = await response.json();
+let paddleLoaderPromise: Promise<typeof window.Paddle | null> | null = null;

-      if (response.ok) {
-        const orderId = isReseller ? data.order_id : data.id;
-        if (typeof orderId === 'string' && orderId.length > 0) {
-          return orderId;
-        }
-      } else {
-        onError(data.error || t('checkout.payment_step.paypal_order_error'));
-      }
+function configurePaddle(paddle: typeof window.Paddle | undefined | null, environment: PaddleEnvironment): typeof window.Paddle | null {
+  if (!paddle) {
+    return null;
+  }

-      throw new Error('Failed to create PayPal order');
-    } catch (error) {
-      console.error('PayPal create order failed', error);
-      onError(t('checkout.payment_step.network_error'));
-      throw error;
-    }
-  };
+  try {
+    paddle.Environment?.set?.(environment);
+  } catch (error) {
+    console.warn('[Paddle] Failed to set environment', error);
+  }

-  const onApprove = async (data: any) => {
-    try {
-      const response = await fetch('/paypal/capture-order', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
-        },
-        body: JSON.stringify({ order_id: data.orderID }),
-      });
+  return paddle;
+}

-      const result = await response.json();
+async function loadPaddle(environment: PaddleEnvironment): Promise<typeof window.Paddle | null> {
+  if (typeof window === 'undefined') {
+    return null;
+  }

-      if (response.ok && result.status === 'captured') {
-        onSuccess();
-      } else {
-        onError(result.error || t('checkout.payment_step.paypal_capture_error'));
-      }
-    } catch (error) {
-      console.error('PayPal capture failed', error);
-      onError(t('checkout.payment_step.network_error'));
-    }
-  };
+  if (window.Paddle) {
+    return configurePaddle(window.Paddle, environment);
+  }

-  const handleError = (error: unknown) => {
-    console.error('PayPal error', error);
-    onError(t('checkout.payment_step.paypal_error'));
-  };
+  if (!paddleLoaderPromise) {
+    paddleLoaderPromise = new Promise<typeof window.Paddle | null>((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = PADDLE_SCRIPT_URL;
+      script.async = true;
+      script.onload = () => resolve(window.Paddle ?? null);
+      script.onerror = (error) => reject(error);
+      document.head.appendChild(script);
+    }).catch((error) => {
+      console.error('Failed to load Paddle.js', error);
+      paddleLoaderPromise = null;
+      return null;
+    });
+  }

-  const handleCancel = () => {
-    onError(t('checkout.payment_step.paypal_cancelled'));
-  };
+  const paddle = await paddleLoaderPromise;
+
+  return configurePaddle(paddle, environment);
+}
+
+const PaddleCta: React.FC<{ onCheckout: () => Promise<void>; disabled: boolean; isProcessing: boolean }> = ({ onCheckout, disabled, isProcessing }) => {
+  const { t } = useTranslation('marketing');

  return (
-    <div className="rounded-lg border bg-card p-6 shadow-sm">
-      <p className="text-sm text-muted-foreground">{t('checkout.payment_step.secure_paypal_desc') || 'Bezahlen Sie sicher mit PayPal.'}</p>
-      <PayPalButtons
-        style={{ layout: 'vertical' }}
-        createOrder={async () => createOrder()}
-        onApprove={onApprove}
-        onError={handleError}
-        onCancel={handleCancel}
-      />
-    </div>
+    <Button size="lg" className="w-full" disabled={disabled} onClick={onCheckout}>
+      {isProcessing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
+      {t('checkout.payment_step.pay_with_paddle')}
+    </Button>
  );
 };

-const statusVariantMap: Record<PaymentStatus, 'default' | 'destructive' | 'success' | 'secondary'> = {
-  idle: 'secondary',
-  loading: 'secondary',
-  ready: 'secondary',
-  processing: 'secondary',
-  error: 'destructive',
-  success: 'success',
-};
-
-export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey, paypalClientId }) => {
+export const PaymentStep: React.FC = () => {
  const { t } = useTranslation('marketing');
-  const { selectedPackage, authUser, nextStep, resetPaymentState } = useCheckoutWizard();
-
-  const [paymentMethod, setPaymentMethod] = useState<Provider>('stripe');
-  const [clientSecret, setClientSecret] = useState('');
+  const { selectedPackage, nextStep, paddleConfig, authUser, setPaymentCompleted } = useCheckoutWizard();
  const [status, setStatus] = useState<PaymentStatus>('idle');
-  const [statusDetail, setStatusDetail] = useState<string>('');
-  const [intentRefreshKey, setIntentRefreshKey] = useState(0);
-  const [processingProvider, setProcessingProvider] = useState<Provider | null>(null);
+  const [message, setMessage] = useState<string>('');
+  const [initialised, setInitialised] = useState(false);
+  const [inlineActive, setInlineActive] = useState(false);
+  const paddleRef = useRef<typeof window.Paddle | null>(null);
+  const eventCallbackRef = useRef<(event: any) => void>();
+  const checkoutContainerClass = 'paddle-checkout-container';

-  const stripePromise = useMemo(() => getStripe(stripePublishableKey), [stripePublishableKey]);
-  const isFree = useMemo(() => (selectedPackage ? selectedPackage.price <= 0 : false), [selectedPackage]);
-  const isReseller = selectedPackage?.type === 'reseller';
+  const isFree = useMemo(() => (selectedPackage ? Number(selectedPackage.price) <= 0 : false), [selectedPackage]);

-  const paypalPlanId = useMemo(() => {
-    if (!selectedPackage) {
-      return null;
-    }
-
-    if (typeof selectedPackage.paypal_plan_id === 'string' && selectedPackage.paypal_plan_id.trim().length > 0) {
-      return selectedPackage.paypal_plan_id;
-    }
-
-    const metadata = (selectedPackage as Record<string, unknown>)?.metadata;
-    if (metadata && typeof metadata === 'object') {
-      const value = (metadata as Record<string, unknown>).paypal_plan_id;
-      if (typeof value === 'string' && value.trim().length > 0) {
-        return value;
-      }
-    }
-
-    return null;
-  }, [selectedPackage]);
-
-  const paypalDisabled = isReseller && !paypalPlanId;
-
-  useEffect(() => {
-    setStatus('idle');
-    setStatusDetail('');
-    setClientSecret('');
-    setProcessingProvider(null);
-  }, [selectedPackage?.id]);
-
-  useEffect(() => {
-    if (isFree) {
-      resetPaymentState();
-      setStatus('ready');
-      setStatusDetail('');
-      return;
-    }
+  const handleFreeActivation = async () => {
+    setPaymentCompleted(true);
+    nextStep();
+  };

+  const startPaddleCheckout = async () => {
    if (!selectedPackage) {
      return;
    }

-    if (paymentMethod === 'paypal') {
-      if (paypalDisabled) {
-        setStatus('error');
-        setStatusDetail(t('checkout.payment_step.paypal_missing_plan'));
-      } else {
-        setStatus('ready');
-        setStatusDetail('');
-      }
-      return;
-    }
-
-    if (!stripePromise) {
+    if (!selectedPackage.paddle_price_id) {
      setStatus('error');
-      setStatusDetail(t('checkout.payment_step.stripe_not_loaded'));
+      setMessage(t('checkout.payment_step.paddle_not_configured'));
      return;
    }

-    if (!authUser) {
-      setStatus('error');
-      setStatusDetail(t('checkout.payment_step.auth_required'));
-      return;
-    }
+    setPaymentCompleted(false);
+    setStatus('processing');
+    setMessage(t('checkout.payment_step.paddle_preparing'));
+    setInlineActive(false);

-    let cancelled = false;
-    setStatus('loading');
-    setStatusDetail(t('checkout.payment_step.status_loading'));
-    setClientSecret('');
+    try {
+      const inlineSupported = initialised && !!paddleConfig?.client_token;

-    const loadIntent = async () => {
-      try {
-        const response = await fetch('/stripe/create-payment-intent', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
-          },
-          body: JSON.stringify({ package_id: selectedPackage.id }),
+      if (typeof window !== 'undefined') {
+        // eslint-disable-next-line no-console
+        console.info('[Checkout] Paddle inline status', {
+          inlineSupported,
+          initialised,
+          hasClientToken: Boolean(paddleConfig?.client_token),
+          environment: paddleConfig?.environment,
+          paddlePriceId: selectedPackage.paddle_price_id,
        });
+      }

-        const data = await response.json();
+      if (inlineSupported) {
+        const paddle = paddleRef.current;

-        if (!response.ok || !data.client_secret) {
-          const message = data.error || t('checkout.payment_step.payment_intent_error');
-          if (!cancelled) {
-            setStatus('error');
-            setStatusDetail(message);
+        if (!paddle || !paddle.Checkout || typeof paddle.Checkout.open !== 'function') {
+          throw new Error('Inline Paddle checkout is not available.');
+        }
+
+        const inlinePayload: Record<string, unknown> = {
+          items: [
+            {
+              priceId: selectedPackage.paddle_price_id,
+              quantity: 1,
+            },
+          ],
+          settings: {
+            displayMode: 'inline',
+            frameTarget: checkoutContainerClass,
+            frameInitialHeight: '550',
+            frameStyle: 'width: 100%; min-width: 320px; background-color: transparent; border: none;',
+            theme: 'light',
+            locale: typeof document !== 'undefined' ? document.documentElement.lang ?? 'de' : 'de',
+          },
+          customData: {
+            package_id: String(selectedPackage.id),
+          },
+        };
+
+        const customerEmail = authUser?.email ?? null;
+        if (customerEmail) {
+          inlinePayload.customer = { email: customerEmail };
+        }
+
+        if (typeof window !== 'undefined') {
+          // eslint-disable-next-line no-console
+          console.info('[Checkout] Opening inline Paddle checkout', inlinePayload);
+        }
+
+        paddle.Checkout.open(inlinePayload);
+
+        setInlineActive(true);
+        setStatus('ready');
+        setMessage(t('checkout.payment_step.paddle_overlay_ready'));
+        return;
+      }
+
+      const response = await fetch('/paddle/create-checkout', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+        },
+        body: JSON.stringify({
+          package_id: selectedPackage.id,
+        }),
+      });
+
+      const rawBody = await response.text();
+      if (typeof window !== 'undefined') {
+        // eslint-disable-next-line no-console
+        console.info('[Checkout] Hosted checkout response', { status: response.status, rawBody });
+      }
+
+      let data: any = null;
+      try {
+        data = rawBody && rawBody.trim().startsWith('{') ? JSON.parse(rawBody) : null;
+      } catch (parseError) {
+        console.warn('Failed to parse Paddle checkout payload as JSON', parseError);
+        data = null;
+      }
+
+      let checkoutUrl: string | null = typeof data?.checkout_url === 'string' ? data.checkout_url : null;
+
+      if (!checkoutUrl) {
+        const trimmed = rawBody.trim();
+        if (/^https?:\/\//i.test(trimmed)) {
+          checkoutUrl = trimmed;
+        } else if (trimmed.startsWith('<')) {
+          const match = trimmed.match(/https?:\/\/["'a-zA-Z0-9._~:\/?#\[\]@!$&'()*+,;=%-]+/);
+          if (match) {
+            checkoutUrl = match[0];
          }
-          return;
        }
+      }

-        if (!cancelled) {
-          setClientSecret(data.client_secret);
-          setStatus('ready');
-          setStatusDetail(t('checkout.payment_step.status_ready'));
-        }
-      } catch (error) {
-        if (!cancelled) {
-          console.error('Failed to load payment intent', error);
-          setStatus('error');
-          setStatusDetail(t('checkout.payment_step.network_error'));
-        }
+      if (!response.ok || !checkoutUrl) {
+        const message = data?.message || rawBody || 'Unable to create Paddle checkout.';
+        throw new Error(message);
+      }
+
+      window.open(checkoutUrl, '_blank', 'noopener');
+      setInlineActive(false);
+      setStatus('ready');
+      setMessage(t('checkout.payment_step.paddle_ready'));
+    } catch (error) {
+      console.error('Failed to start Paddle checkout', error);
+      setStatus('error');
+      setMessage(t('checkout.payment_step.paddle_error'));
+      setInlineActive(false);
+      setPaymentCompleted(false);
+    }
+  };
+
+  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') {
+        // eslint-disable-next-line no-console
+        console.debug('[Checkout] Paddle event', event);
+      }
+
+      if (event.name === 'checkout.completed') {
+        setStatus('ready');
+        setMessage(t('checkout.payment_step.paddle_overlay_ready'));
+        setInlineActive(false);
+        setPaymentCompleted(true);
+      }
+
+      if (event.name === 'checkout.closed') {
+        setStatus('idle');
+        setMessage('');
+        setInlineActive(false);
+        setPaymentCompleted(false);
+      }
+
+      if (event.name === 'checkout.error') {
+        setStatus('error');
+        setMessage(t('checkout.payment_step.paddle_error'));
+        setInlineActive(false);
+        setPaymentCompleted(false);
      }
    };

-    loadIntent();
+    (async () => {
+      const paddle = await loadPaddle(environment);
+
+      if (cancelled || !paddle) {
+        return;
+      }
+
+      try {
+        let inlineReady = false;
+        if (typeof paddle.Initialize === 'function' && clientToken) {
+          if (typeof window !== 'undefined') {
+            // eslint-disable-next-line no-console
+            console.info('[Checkout] Initializing Paddle.js', { environment, hasToken: Boolean(clientToken) });
+          }
+          paddle.Initialize({
+            token: clientToken,
+            checkout: {
+              settings: {
+                displayMode: 'inline',
+                frameTarget: checkoutContainerClass,
+                frameInitialHeight: '550',
+                frameStyle: 'width: 100%; min-width: 320px; background-color: transparent; border: none;',
+                locale: typeof document !== 'undefined' ? document.documentElement.lang ?? 'de' : 'de',
+              },
+            },
+            eventCallback: (event: any) => eventCallbackRef.current?.(event),
+          });
+          inlineReady = true;
+        }
+
+        paddleRef.current = paddle;
+        setInitialised(inlineReady);
+      } catch (error) {
+        console.error('Failed to initialize Paddle', error);
+        setInitialised(false);
+        setStatus('error');
+        setMessage(t('checkout.payment_step.paddle_error'));
+        setPaymentCompleted(false);
+      }
+    })();

    return () => {
      cancelled = true;
    };
-  }, [authUser, intentRefreshKey, isFree, paymentMethod, paypalDisabled, resetPaymentState, selectedPackage, stripePromise, t]);
+  }, [paddleConfig?.environment, paddleConfig?.client_token, setPaymentCompleted, t]);

-  const providerLabel = useCallback((provider: Provider) => {
-    switch (provider) {
-      case 'paypal':
-        return 'PayPal';
-      default:
-        return 'Stripe';
-    }
-  }, []);
+  useEffect(() => {
+    setPaymentCompleted(false);
+  }, [selectedPackage?.id, setPaymentCompleted]);

-  const handleProcessing = useCallback((provider: Provider) => {
-    setProcessingProvider(provider);
-    setStatus('processing');
-    setStatusDetail(t('checkout.payment_step.status_processing', { provider: providerLabel(provider) }));
-  }, [providerLabel, t]);
-
-  const handleSuccess = useCallback((provider: Provider) => {
-    setProcessingProvider(provider);
-    setStatus('success');
-    setStatusDetail(t('checkout.payment_step.status_success'));
-    setTimeout(() => nextStep(), 600);
-  }, [nextStep, t]);
-
-  const handleError = useCallback((provider: Provider, message: string) => {
-    setProcessingProvider(provider);
-    setStatus('error');
-    setStatusDetail(message);
-  }, []);
-
-  const handleRetry = () => {
-    if (paymentMethod === 'stripe') {
-      setIntentRefreshKey((key) => key + 1);
-    }
-
-    setStatus('idle');
-    setStatusDetail('');
-    setProcessingProvider(null);
-  };
+  if (!selectedPackage) {
+    return (
+      <Alert variant="destructive">
+        <AlertTitle>{t('checkout.payment_step.no_package_title')}</AlertTitle>
+        <AlertDescription>{t('checkout.payment_step.no_package_description')}</AlertDescription>
+      </Alert>
+    );
+  }

  if (isFree) {
    return (
@@ -405,7 +336,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey,
          <AlertDescription>{t('checkout.payment_step.free_package_desc')}</AlertDescription>
        </Alert>
        <div className="flex justify-end">
-          <Button size="lg" onClick={nextStep}>
+          <Button size="lg" onClick={handleFreeActivation}>
            {t('checkout.payment_step.activate_package')}
          </Button>
        </div>
@@ -413,94 +344,44 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey,
    );
  }

-  const renderStatusAlert = () => {
-    if (status === 'idle') {
-      return null;
-    }
-
-    const variant = statusVariantMap[status];
-
-    return (
-      <Alert variant={variant}>
-        <AlertTitle>
-          {status === 'error'
-            ? t('checkout.payment_step.status_error_title')
-            : status === 'success'
-              ? t('checkout.payment_step.status_success_title')
-              : t('checkout.payment_step.status_info_title')}
-        </AlertTitle>
-        <AlertDescription className="flex items-center justify-between gap-4">
-          <span>{statusDetail}</span>
-          {status === 'processing' && <LoaderCircle className="h-4 w-4 animate-spin" />}
-          {status === 'error' && (
-            <Button size="sm" variant="outline" onClick={handleRetry}>
-              {t('checkout.payment_step.status_retry')}
-            </Button>
-          )}
-        </AlertDescription>
-      </Alert>
-    );
-  };
-
  return (
-    <div className="space-y-6">
-      <div className="flex flex-wrap gap-3">
-        <Button
-          variant={paymentMethod === 'stripe' ? 'default' : 'outline'}
-          onClick={() => setPaymentMethod('stripe')}
-          disabled={paymentMethod === 'stripe'}
-        >
-          {t('checkout.payment_step.method_stripe')}
-        </Button>
-        <Button
-          variant={paymentMethod === 'paypal' ? 'default' : 'outline'}
-          onClick={() => setPaymentMethod('paypal')}
-          disabled={paypalDisabled || paymentMethod === 'paypal'}
-        >
-          {t('checkout.payment_step.method_paypal')}
-        </Button>
-      </div>
+      <div className="space-y-6">
+        <p className="text-sm text-muted-foreground">
+          {t('checkout.payment_step.paddle_intro')}
+        </p>

-      {renderStatusAlert()}
-
-      {paymentMethod === 'stripe' && clientSecret && stripePromise && (
-        <Elements stripe={stripePromise} options={{ clientSecret }}>
-          <StripePaymentForm
-            selectedPackage={selectedPackage}
-            onProcessing={() => handleProcessing('stripe')}
-            onSuccess={() => handleSuccess('stripe')}
-            onError={(message) => handleError('stripe', message)}
-            t={t}
-          />
-        </Elements>
-      )}
-
-      {paymentMethod === 'stripe' && !clientSecret && status === 'loading' && (
-        <div className="rounded-lg border bg-card p-6 text-sm text-muted-foreground shadow-sm">
-          <LoaderCircle className="mb-3 h-4 w-4 animate-spin" />
-          {t('checkout.payment_step.status_loading')}
-        </div>
-      )}
-
-      {paymentMethod === 'paypal' && !paypalDisabled && (
-        <PayPalScriptProvider options={{ clientId: paypalClientId, currency: 'EUR' }}>
-          <PayPalPaymentForm
-            isReseller={Boolean(isReseller)}
-            onProcessing={() => handleProcessing('paypal')}
-            onSuccess={() => handleSuccess('paypal')}
-            onError={(message) => handleError('paypal', message)}
-            paypalPlanId={paypalPlanId}
-            selectedPackage={selectedPackage}
-            t={t}
-          />
-        </PayPalScriptProvider>
-      )}
-
-      {paymentMethod === 'paypal' && paypalDisabled && (
-        <Alert variant="destructive">
-          <AlertDescription>{t('checkout.payment_step.paypal_missing_plan')}</AlertDescription>
+      {status !== 'idle' && (
+        <Alert variant={status === 'error' ? 'destructive' : 'secondary'}>
+          <AlertTitle>
+            {status === 'processing'
+              ? t('checkout.payment_step.status_processing_title')
+              : status === 'ready'
+                ? t('checkout.payment_step.status_ready_title')
+                : status === 'error'
+                  ? t('checkout.payment_step.status_error_title')
+                  : t('checkout.payment_step.status_info_title')}
+          </AlertTitle>
+          <AlertDescription className="flex items-center gap-3">
+            <span>{message}</span>
+            {status === 'processing' && <LoaderCircle className="h-4 w-4 animate-spin" />}
+          </AlertDescription>
        </Alert>
      )}
+
+      <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
+        <div className={`${checkoutContainerClass} min-h-[200px]`} />
+        {!inlineActive && (
+          <PaddleCta
+            onCheckout={startPaddleCheckout}
+            disabled={status === 'processing'}
+            isProcessing={status === 'processing'}
+          />
+        )}
+
+        <p className="text-xs text-muted-foreground">
+          {t('checkout.payment_step.paddle_disclaimer')}
+        </p>
+      </div>
    </div>
  );
 };
--- a/resources/js/pages/marketing/checkout/types.ts
+++ b/resources/js/pages/marketing/checkout/types.ts
@@ -1,5 +1,14 @@
 export type CheckoutStepId = 'package' | 'auth' | 'payment' | 'confirmation';

+export interface GoogleProfilePrefill {
+  email?: string;
+  name?: string;
+  given_name?: string;
+  family_name?: string;
+  avatar?: string;
+  locale?: string;
+}
+
 export interface CheckoutPackage {
  id: number;
  name: string;
@@ -15,7 +24,8 @@ export interface CheckoutPackage {
  type: 'endcustomer' | 'reseller';
  features: string[];
  limits?: Record<string, unknown>;
-  paypal_plan_id?: string | null;
+  paddle_price_id?: string | null;
+  paddle_product_id?: string | null;
  [key: string]: unknown;
 }

@@ -30,7 +40,7 @@ export interface CheckoutWizardState {
    name?: string;
    pending_purchase?: boolean;
  } | null;
-  paymentProvider?: 'stripe' | 'paypal';
+  paymentProvider?: 'stripe' | 'paddle';
  isProcessing?: boolean;
 }