92 lines
4.2 KiB
PHP
92 lines
4.2 KiB
PHP
@extends('layouts.app')
|
|
@section('content')
|
|
<div class="hero-card">
|
|
<span class="eyebrow">Rsync Studio</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 Rsync Studio licence key will be sent to the email used at checkout. You can then activate it in <strong>Rsync Studio → Settings → Licence</strong>.</p>
|
|
<p class="muted">If the email takes a moment, wait for the Paddle confirmation and check your junk folder. You can also create a portal account with the same email address.</p>
|
|
<a class="btn" href="{{ route('register') }}">Create portal account</a>
|
|
</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'});
|
|
}
|
|
}
|
|
});
|
|
|
|
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?.subtotal ?? item?.formattedUnitTotals?.subtotal;
|
|
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.
|
|
});
|
|
|
|
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: 'rsync-studio-buy-page',
|
|
plan: button.dataset.plan
|
|
}
|
|
});
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
@endsection
|