joplin/Assets/WebsiteAssets/templates/partials/plan.mustache

<div class="col-12 col-lg-4 account-type-{{priceMonthly.accountType}} hosting-type-{{hostingType}}">
	<div class="price-container {{#featured}}price-container-blue{{/featured}}">
			<div class="price-row">
				<div class="plan-type">
					<img src="{{imageBaseUrl}}/{{iconName}}.png"/>&nbsp;{{title}}
				</div>

				{{#priceMonthly.formattedMonthlyAmount}}
					<div class="plan-price plan-price-monthly">
						{{priceMonthly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;<span translate>/month</span>{{#footnote}} (*){{/footnote}}</sub>
					</div>

					<div class="plan-price plan-price-yearly">
						{{priceYearly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;<span translate>/month</span>{{#footnote}} (*){{/footnote}}</sub>
					</div>
				{{/priceMonthly.formattedMonthlyAmount}}
			</div>

			{{#priceYearly.formattedMonthlyAmount}}
			<div class="plan-price-yearly-per-year">
				<div>
					({{priceYearly.formattedAmount}}<sub class="per-year">&nbsp;<span translate>/year</span></sub>)
				</div>
			</div>
			{{/priceYearly.formattedMonthlyAmount}}

		{{#featureLabelsOn}}
			<p>
				<i class="fas fa-check feature feature-on"></i>{{label}}
				{{#actions}}
					<button type="button" class="action-link action-{{actionId}}">→ <span class="action-label">{{label}}</span></button>
				{{/actions}}
			</p>
		{{/featureLabelsOn}}

		{{#featureLabelsOff}}
			<p class="unchecked-text"><i class="fas fa-times feature feature-off"></i>{{label}}</p>
		{{/featureLabelsOff}}

		{{#pricingTable}}
			<strong translate>Pricing</strong>
			<table class="table">
				<tbody>
					{{#rows}}
						<tr><td>{{condition}}</td><td>{{priceYearly}}</td></tr>
					{{/rows}}
				</tbody>
			</table>
		{{/pricingTable}}

		<p class="text-center subscribe-wrapper">
			<a id="subscribeButton-{{name}}" href="{{cfaUrl}}" class="button-link btn-white subscribeButton cfa-button">{{cfaLabel}}</a>

			{{#learnMoreUrl}}
				<a id="learnMore-{{name}}" href="{{learnMoreUrl}}" class="button-link btn-white learnMoreButton cfa-button">Learn more</a>
			{{/learnMoreUrl}}
		</p>

		{{#footnote}}<sub>(*) {{.}}</sub>{{/footnote}}
	</div>

	<script>
		(function() {
			const stripePricesIds = {
				monthly: '{{{priceMonthly.id}}}',
				yearly: '{{{priceYearly.id}}}',
			};
			const planName = '{{{name}}}';
			const buttonId = 'subscribeButton-' + planName;
			const buttonElement = document.getElementById(buttonId);

			function handleResult() {
				console.info('Redirected to checkout');
			}

			buttonElement.addEventListener("click", function(evt) {
				const priceId = stripePricesIds[subscriptionPeriod];

				if (!priceId) {
					console.error('Invalid period: ' + subscriptionPeriod);
					return;
				}

				evt.preventDefault();

				createCheckoutSession(priceId).then(function(data) {
					stripe.redirectToCheckout({
						sessionId: data.sessionId
					})
					.then(handleResult);
				});
			});

			for (const button of document.querySelectorAll('button.action-toggleIncreaseStorage')) {
				button.onclick = () => {
					document.body.classList.toggle('-increased-storage');
				};
			}
		})();
	</script>
</div>