SonarDesk-Licencing-Server/resources/views/checkout/buy.blade.php

@extends('layouts.app')

@section('content')
    <div class="hero-card">
        <span class="eyebrow">SonarDesk</span>
        <h1>Choose your licence</h1>
        <p class="lead">
            Every subscription starts with a 7-day free trial.
            Cancel before the trial ends and you won't be charged.
        </p>

        @if($paddleEnvironment === 'sandbox')
            <div class="sandbox-badge">
                Sandbox checkout — no real payment is taken
            </div>
        @endif
    </div>

    <div class="pricing-grid">
        @foreach($plans as $code => $plan)
            <article class="price-card {{ str_starts_with($code, 'professional') ? 'featured' : '' }}">
                <div>
                    <div class="plan-heading">
                        <div>
                            <h2>{{ $plan['name'] }}</h2>
                            <div class="muted">{{ $plan['billing'] }} billing</div>
                        </div>

                        @if($plan['billing'] === 'Annual')
                            <span class="pill">Best value</span>
                        @endif
                    </div>

                    <div
                        class="price"
                        data-price-display="{{ $plan['price_id'] }}"
                        data-billing="{{ strtolower($plan['billing']) }}"
                    >
                        {{ $plan['display_price'] }}
                    </div>

                    <ul class="features">
                        <li>7-day free trial</li>
                        <li>
                            {{ $plan['activation_limit'] }}
                            active Mac{{ $plan['activation_limit'] === 1 ? '' : 's' }}
                        </li>
                        <li>Secure online activation</li>
                        <li>Licence management portal</li>
                    </ul>
                </div>

                <button
                    class="checkout-button"
                    type="button"
                    data-price-id="{{ $plan['price_id'] }}"
                    data-plan="{{ $plan['name'] }} {{ $plan['billing'] }}"
                >
                    Start free trial
                </button>
            </article>
        @endforeach
    </div>

    <div class="card checkout-status" id="checkout-status" hidden>
        <h2>Purchase received</h2>

        <p>
            Paddle is confirming your subscription. Your SonarDesk licence key
            is generated by our licensing server and emailed to the address used
            at checkout. You can then activate it in
            <strong>SonarDesk → Settings → Licence</strong>.
        </p>

        <p class="muted">
            Delivery normally follows the subscription webhook within moments.
            Check your junk folder if needed. You can also create a portal account
            with the same email address and resend the key from My licences.
        </p>

        <a class="btn" href="{{ route('register') }}">
            Create portal account
        </a>
    </div>

    <div class="card" id="checkout-error" hidden>
        <h2>Checkout unavailable</h2>

        <p>
            Paddle could not start the checkout. Please try again.
        </p>

        <p class="muted" id="checkout-error-detail"></p>
    </div>

    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>

    <script>
        (() => {
            'use strict';

            const token = @json($paddleToken);
            const environment = @json($paddleEnvironment);

            const errorPanel = document.getElementById('checkout-error');
            const errorDetail = document.getElementById('checkout-error-detail');

            function showCheckoutError(message) {
                console.error('SONARDESK CHECKOUT ERROR:', message);

                if (errorDetail) {
                    errorDetail.textContent = message || 'Unknown checkout error.';
                }

                if (errorPanel) {
                    errorPanel.hidden = false;

                    errorPanel.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            }

            function logPaddleEvent(event) {
                console.log('PADDLE EVENT:', event);

                if (
                    event?.name === 'checkout.error' ||
                    event?.name === 'checkout.warning' ||
                    event?.name === 'checkout.payment.error'
                ) {
                    console.error('PADDLE ERROR:', {
                        name: event?.name,
                        type: event?.type,
                        code: event?.code,
                        detail: event?.detail,
                        documentation_url: event?.documentation_url,
                        errors: event?.errors,
                        event: event
                    });

                    const code = event?.code
                        ? `Code: ${event.code}`
                        : 'Paddle checkout error';

                    const detail = event?.detail
                        ? ` — ${event.detail}`
                        : '';

                    showCheckoutError(code + detail);
                }

                if (event?.name === 'checkout.completed') {
                    const status = document.getElementById('checkout-status');

                    if (status) {
                        status.hidden = false;

                        status.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                    }
                }
            }

            if (typeof Paddle === 'undefined') {
                showCheckoutError('Paddle.js failed to load.');
                return;
            }

            console.log('SONARDESK PADDLE CONFIG:', {
                environment: environment,
                tokenPresent: Boolean(token),
                tokenPrefix: token ? token.substring(0, 5) : null
            });

            try {
                if (environment === 'sandbox') {
                    Paddle.Environment.set('sandbox');
                }

                Paddle.Initialize({
                    token: token,
                    eventCallback: logPaddleEvent
                });

                console.log('Paddle initialized successfully.');
            } catch (error) {
                console.error('PADDLE INITIALIZATION ERROR:', error);

                showCheckoutError(
                    error?.message || 'Paddle could not be initialized.'
                );

                return;
            }

            const priceElements = new Map(
                Array.from(
                    document.querySelectorAll('[data-price-display]')
                ).map(element => [
                    element.dataset.priceDisplay,
                    element
                ])
            );

            const previewItems = Array.from(priceElements.keys()).map(priceId => ({
                priceId: priceId,
                quantity: 1
            }));

            console.log('PADDLE PRICE PREVIEW ITEMS:', previewItems);

            Paddle.PricePreview({
                items: previewItems
            })
                .then(result => {
                    console.log('PADDLE PRICE PREVIEW RESULT:', result);

                    for (const item of (result?.data?.details?.lineItems ?? [])) {
                        const element = priceElements.get(item?.price?.id);

                        const formatted =
                            item?.formattedTotals?.total ??
                            item?.formattedUnitTotals?.total;

                        if (!element || !formatted) {
                            continue;
                        }

                        const suffix =
                            element.dataset.billing === 'annual'
                                ? ' / year'
                                : ' / month';

                        element.textContent = formatted + suffix;
                    }
                })
                .catch(error => {
                    console.error('PADDLE PRICE PREVIEW ERROR:', error);

                    // Server-rendered GBP price remains visible.
                });

            document
                .querySelectorAll('.checkout-button')
                .forEach(button => {
                    button.addEventListener('click', () => {
                        const priceId = button.dataset.priceId;
                        const plan = button.dataset.plan;

                        console.log('OPENING PADDLE CHECKOUT:', {
                            environment: environment,
                            priceId: priceId,
                            plan: plan
                        });

                        errorPanel.hidden = true;

                        try {
                            Paddle.Checkout.open({
                                items: [
                                    {
                                        priceId: priceId,
                                        quantity: 1
                                    }
                                ],

                                settings: {
                                    displayMode: 'overlay',
                                    theme: window.matchMedia(
                                        '(prefers-color-scheme: dark)'
                                    ).matches
                                        ? 'dark'
                                        : 'light',
                                    allowLogout: false
                                },

                                customData: {
                                    source: 'sonardesk-buy-page',
                                    plan: plan
                                }
                            });
                        } catch (error) {
                            console.error(
                                'PADDLE CHECKOUT OPEN ERROR:',
                                error
                            );

                            showCheckoutError(
                                error?.message ||
                                'Paddle could not open the checkout.'
                            );
                        }
                    });
                });
        })();
    </script>
@endsection