mirror of
https://github.com/laurent22/joplin.git
synced 2025-02-10 19:41:43 +02:00
82 lines
2.3 KiB
Plaintext
82 lines
2.3 KiB
Plaintext
<div id="plans-section" class="env-{{env}}">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 title-box">
|
|
<h1 class="text-center">
|
|
Joplin Cloud <span class="frame-bg frame-bg-yellow">plans</span>
|
|
</h1>
|
|
<p class="text-center sub-title">
|
|
Joplin Cloud allows you to synchronise your notes across devices. It also lets you publish notes, and collaborate on notebooks with your friends, family or colleagues.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: center; margin-top: 1.2em">
|
|
<div class="form-check form-check-inline">
|
|
<input id="pay-monthly-radio" class="form-check-input" type="radio" name="pay-radio" checked value="monthly">
|
|
<label style="font-weight: bold" class="form-check-label" for="pay-monthly-radio">
|
|
Pay Monthly
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check form-check-inline">
|
|
<input id="pay-yearly-radio" class="form-check-input" type="radio" name="pay-radio" value="yearly">
|
|
<label style="font-weight: bold" class="form-check-label" for="pay-yearly-radio">
|
|
Pay Yearly
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row plan-group plan-prices-monthly">
|
|
{{#plans.basic}}
|
|
{{> plan}}
|
|
{{/plans.basic}}
|
|
|
|
{{#plans.pro}}
|
|
{{> plan}}
|
|
{{/plans.pro}}
|
|
|
|
{{#plans.business}}
|
|
{{> plan}}
|
|
{{/plans.business}}
|
|
</div>
|
|
|
|
<div class="row">
|
|
{{{faqHtml}}}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
|
|
<script>
|
|
let subscriptionPeriod = 'monthly';
|
|
var stripe = Stripe('{{{stripeConfig.publishableKey}}}');
|
|
|
|
var createCheckoutSession = function(priceId) {
|
|
console.info('Creating Stripe session for price:', priceId);
|
|
|
|
return fetch("{{{stripeConfig.webhookBaseUrl}}}/stripe/createCheckoutSession", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
priceId: priceId
|
|
})
|
|
}).then(function(result) {
|
|
return result.json();
|
|
});
|
|
};
|
|
|
|
$(() => {
|
|
$("input[name='pay-radio']").change(function() {
|
|
const period = $("input[type='radio'][name='pay-radio']:checked").val();
|
|
subscriptionPeriod = period;
|
|
|
|
$('.plan-group').removeClass(period === 'monthly' ? 'plan-prices-yearly' : 'plan-prices-monthly');
|
|
$('.plan-group').addClass('plan-prices-' + period);
|
|
})
|
|
});
|
|
</script>
|
|
</div>
|