SEO additions
This commit is contained in:
Mark Gregory
@@ -1,91 +1,301 @@
|
||||
@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="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>
|
||||
|
||||
<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
|
||||
@if($paddleEnvironment === 'sandbox')
|
||||
<div class="sandbox-badge">
|
||||
Sandbox checkout — no real payment is taken
|
||||
</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>
|
||||
@endif
|
||||
</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="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>
|
||||
|
||||
<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
|
||||
<script>
|
||||
(() => {
|
||||
const token = @json($paddleToken);
|
||||
const environment = @json($paddleEnvironment);
|
||||
if (environment === 'sandbox') Paddle.Environment.set('sandbox');
|
||||
Paddle.Initialize({
|
||||
token,
|
||||
eventCallback(event) {
|
||||
if (event && event.name === 'checkout.completed') {
|
||||
document.getElementById('checkout-status').hidden = false;
|
||||
document.getElementById('checkout-status').scrollIntoView({behavior: 'smooth', block: 'center'});
|
||||
}
|
||||
}
|
||||
});
|
||||
@if($plan['billing'] === 'Annual')
|
||||
<span class="pill">Best value</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
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, quantity: 1}));
|
||||
Paddle.PricePreview({items: previewItems}).then(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(() => {
|
||||
// Keep the server-rendered GBP fallback if Paddle pricing preview is unavailable.
|
||||
});
|
||||
<div
|
||||
class="price"
|
||||
data-price-display="{{ $plan['price_id'] }}"
|
||||
data-billing="{{ strtolower($plan['billing']) }}"
|
||||
>
|
||||
{{ $plan['display_price'] }}
|
||||
</div>
|
||||
|
||||
document.querySelectorAll('.checkout-button').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
Paddle.Checkout.open({
|
||||
items: [{priceId: button.dataset.priceId, quantity: 1}],
|
||||
settings: {
|
||||
displayMode: 'overlay',
|
||||
theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
|
||||
allowLogout: false
|
||||
},
|
||||
customData: {
|
||||
source: 'sonardesk-buy-page',
|
||||
plan: button.dataset.plan
|
||||
<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
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user