added payment links to prices

This commit is contained in:
2025-06-25 17:14:03 +02:00
parent 5b598f2966
commit 3a0659b63b
9 changed files with 154 additions and 13 deletions

View File

@@ -47,9 +47,27 @@
</ul>
</div>
<a href="{{ plan.button_url }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3">
{{ plan.button_text }}
</a>
<!-- Dynamic Payment Button -->
{% if plan.is_custom %}
<a href="{{ contact_url }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3">
{{ plan.button_text }}
</a>
{% else %}
{% if plan.monthly_stripe_link or plan.annual_stripe_link %}
<a href="{{ plan.monthly_stripe_link or plan.annual_stripe_link }}"
class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3 payment-button"
data-plan-id="{{ plan.id }}"
data-monthly-link="{{ plan.monthly_stripe_link or '' }}"
data-annual-link="{{ plan.annual_stripe_link or '' }}"
target="_blank">
{{ plan.button_text }}
</a>
{% else %}
<a href="{{ contact_url }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3">
{{ plan.button_text }}
</a>
{% endif %}
{% endif %}
</div>
</div>
</div>
@@ -242,6 +260,14 @@ document.addEventListener('DOMContentLoaded', function() {
// Simply animate the number change
animateNumber(price, monthlyValue, annualValue);
});
// Update payment links to annual
document.querySelectorAll('.payment-button').forEach(button => {
const annualLink = button.getAttribute('data-annual-link');
if (annualLink) {
button.href = annualLink;
}
});
} else {
// Switch to monthly prices with animation
monthlyPrices.forEach((price, index) => {
@@ -251,6 +277,14 @@ document.addEventListener('DOMContentLoaded', function() {
// Simply animate the number change back to monthly
animateNumber(price, currentValue, originalMonthlyValue);
});
// Update payment links to monthly
document.querySelectorAll('.payment-button').forEach(button => {
const monthlyLink = button.getAttribute('data-monthly-link');
if (monthlyLink) {
button.href = monthlyLink;
}
});
}
});
});

View File

@@ -53,6 +53,35 @@
</div>
</div>
<!-- Stripe Payment Links -->
{% if plan.monthly_stripe_link or plan.annual_stripe_link %}
<div class="mb-3">
<strong>Payment Links:</strong>
<div class="mt-2">
{% if plan.monthly_stripe_link %}
<div class="mb-1">
<small class="text-muted">
<i class="fas fa-credit-card me-1"></i>Monthly:
<a href="{{ plan.monthly_stripe_link }}" target="_blank" class="text-primary">
Stripe Payment Link
</a>
</small>
</div>
{% endif %}
{% if plan.annual_stripe_link %}
<div class="mb-1">
<small class="text-muted">
<i class="fas fa-credit-card me-1"></i>Annual:
<a href="{{ plan.annual_stripe_link }}" target="_blank" class="text-primary">
Stripe Payment Link
</a>
</small>
</div>
{% endif %}
</div>
</div>
{% endif %}
<div class="mb-3">
<strong>Features:</strong>
<ul class="list-unstyled mt-2">
@@ -220,11 +249,24 @@
value="Get Started">
</div>
</div>
</div>
<!-- Stripe Payment Links Section -->
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="buttonUrl" class="form-label">Button URL</label>
<input type="text" class="form-control" id="buttonUrl" name="button_url"
value="#">
<label for="monthlyStripeLink" class="form-label">Monthly Stripe Payment Link</label>
<input type="url" class="form-control" id="monthlyStripeLink" name="monthly_stripe_link"
placeholder="https://buy.stripe.com/...">
<small class="text-muted">Stripe payment link for monthly billing</small>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="annualStripeLink" class="form-label">Annual Stripe Payment Link</label>
<input type="url" class="form-control" id="annualStripeLink" name="annual_stripe_link"
placeholder="https://buy.stripe.com/...">
<small class="text-muted">Stripe payment link for annual billing</small>
</div>
</div>
</div>
@@ -367,10 +409,24 @@
<input type="text" class="form-control" id="editButtonText" name="button_text">
</div>
</div>
</div>
<!-- Stripe Payment Links Section -->
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="editButtonUrl" class="form-label">Button URL</label>
<input type="text" class="form-control" id="editButtonUrl" name="button_url">
<label for="editMonthlyStripeLink" class="form-label">Monthly Stripe Payment Link</label>
<input type="url" class="form-control" id="editMonthlyStripeLink" name="monthly_stripe_link"
placeholder="https://buy.stripe.com/...">
<small class="text-muted">Stripe payment link for monthly billing</small>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="editAnnualStripeLink" class="form-label">Annual Stripe Payment Link</label>
<input type="url" class="form-control" id="editAnnualStripeLink" name="annual_stripe_link"
placeholder="https://buy.stripe.com/...">
<small class="text-muted">Stripe payment link for annual billing</small>
</div>
</div>
</div>