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

<div class="col-12 col-lg-4">
	<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>

			<div class="plan-price">
				{{price}}<sub class="per-month">&nbsp;/month</sub>
			</div>
		</div>

		{{#featuresOn}}
			<p><i class="fas fa-check feature feature-on"></i>{{.}}</p>
		{{/featuresOn}}

		{{#featuresOff}}
			<p class="unchecked-text"><i class="fas fa-times feature feature-off"></i>{{.}}</p>
		{{/featuresOff}}
		
		<p class="text-center subscribe-wrapper">
			<a id="subscribeButton-{{name}}" href="{{cfaUrl}}" class="button-link btn-white">{{cfaLabel}}</a>
		</p>
	</div>

	<script>
		(function() {
			const stripePriceId = '{{{stripePriceId}}}';
			const planName = '{{{name}}}';
			const buttonId = 'subscribeButton-' + planName;
			const buttonElement = document.getElementById(buttonId);

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

				buttonElement.addEventListener("click", function(evt) {
					evt.preventDefault();
					const priceId = '{{{stripePriceId}}}';

					createCheckoutSession(priceId).then(function(data) {
						stripe.redirectToCheckout({
							sessionId: data.sessionId
						})
						.then(handleResult);
					});
				});
			}
		})();
	</script>
</div>