started implementing stripe
This commit is contained in:
@@ -8,6 +8,19 @@
|
||||
|
||||
{% set pricing_plans = PricingPlan.get_active_plans() %}
|
||||
{% if pricing_plans %}
|
||||
<!-- Debug info -->
|
||||
<div style="display: none;" id="pricing-debug">
|
||||
<h4>Debug: Pricing Plans Found</h4>
|
||||
{% for plan in pricing_plans %}
|
||||
<div>
|
||||
Plan: {{ plan.name }} (ID: {{ plan.id }})
|
||||
- Monthly Price ID: {{ plan.stripe_monthly_price_id or 'None' }}
|
||||
- Annual Price ID: {{ plan.stripe_annual_price_id or 'None' }}
|
||||
- Is Custom: {{ plan.is_custom }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="row g-4 justify-content-center">
|
||||
{% for plan in pricing_plans %}
|
||||
<div class="col-md-3">
|
||||
@@ -53,15 +66,16 @@
|
||||
{{ 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">
|
||||
{% if plan.stripe_monthly_price_id or plan.stripe_annual_price_id %}
|
||||
<button class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3 checkout-button"
|
||||
data-plan-id="{{ plan.id }}"
|
||||
data-monthly-product-id="{{ plan.stripe_monthly_price_id or '' }}"
|
||||
data-annual-product-id="{{ plan.stripe_annual_price_id or '' }}"
|
||||
data-plan-name="{{ plan.name }}"
|
||||
data-monthly-price="{{ plan.monthly_price or 0 }}"
|
||||
data-annual-price="{{ plan.annual_price or 0 }}">
|
||||
{{ plan.button_text }}
|
||||
</a>
|
||||
</button>
|
||||
{% 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 }}
|
||||
@@ -98,7 +112,7 @@
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">
|
||||
<span class="monthly-price">€29</span>
|
||||
<span class="annual-price" style="display: none;">€23</span>
|
||||
<span class="fs-6 text-muted">/month</span>
|
||||
<span class="fs-6 text-muted price-period">/month</span>
|
||||
</div>
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 5 rooms</li>
|
||||
@@ -125,7 +139,7 @@
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">
|
||||
<span class="monthly-price">€99</span>
|
||||
<span class="annual-price" style="display: none;">€79</span>
|
||||
<span class="fs-6 text-muted">/month</span>
|
||||
<span class="fs-6 text-muted price-period">/month</span>
|
||||
</div>
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 25 rooms</li>
|
||||
@@ -147,7 +161,7 @@
|
||||
<div class="display-4 fw-bold mb-3" style="color: var(--primary-color);">
|
||||
<span class="monthly-price">€299</span>
|
||||
<span class="annual-price" style="display: none;">€239</span>
|
||||
<span class="fs-6 text-muted">/month</span>
|
||||
<span class="fs-6 text-muted price-period">/month</span>
|
||||
</div>
|
||||
<ul class="list-unstyled mb-4">
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Up to 100 rooms</li>
|
||||
@@ -197,11 +211,31 @@
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Debug: Log pricing plans info
|
||||
console.log('=== PRICING DEBUG INFO ===');
|
||||
const checkoutButtons = document.querySelectorAll('.checkout-button');
|
||||
console.log('Found checkout buttons:', checkoutButtons.length);
|
||||
|
||||
checkoutButtons.forEach((button, index) => {
|
||||
console.log(`Button ${index + 1}:`, {
|
||||
planId: button.getAttribute('data-plan-id'),
|
||||
monthlyProductId: button.getAttribute('data-monthly-product-id'),
|
||||
annualProductId: button.getAttribute('data-annual-product-id'),
|
||||
planName: button.getAttribute('data-plan-name'),
|
||||
monthlyPrice: button.getAttribute('data-monthly-price'),
|
||||
annualPrice: button.getAttribute('data-annual-price')
|
||||
});
|
||||
});
|
||||
|
||||
// Show debug info if needed (uncomment to show)
|
||||
// document.getElementById('pricing-debug').style.display = 'block';
|
||||
|
||||
const billingToggle = document.getElementById('annualBilling');
|
||||
if (!billingToggle) return;
|
||||
|
||||
const monthlyPrices = document.querySelectorAll('.monthly-price');
|
||||
const annualPrices = document.querySelectorAll('.annual-price');
|
||||
const pricePeriods = document.querySelectorAll('.price-period');
|
||||
|
||||
// Add CSS for switch styling
|
||||
const style = document.createElement('style');
|
||||
@@ -247,6 +281,89 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
requestAnimationFrame(updateNumber);
|
||||
}
|
||||
|
||||
// Function to handle Stripe checkout
|
||||
async function handleCheckout(planId, billingCycle) {
|
||||
console.log('handleCheckout called with:', { planId, billingCycle });
|
||||
|
||||
try {
|
||||
const requestBody = {
|
||||
plan_id: planId,
|
||||
billing_cycle: billingCycle
|
||||
};
|
||||
console.log('Sending request to /api/create-checkout-session with body:', requestBody);
|
||||
|
||||
const response = await fetch('/api/create-checkout-session', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(requestBody)
|
||||
});
|
||||
|
||||
console.log('Response status:', response.status);
|
||||
console.log('Response ok:', response.ok);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('Response error text:', errorText);
|
||||
throw new Error(`Failed to create checkout session: ${response.status} ${errorText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Response data:', data);
|
||||
|
||||
if (data.checkout_url) {
|
||||
console.log('Redirecting to checkout URL:', data.checkout_url);
|
||||
window.location.href = data.checkout_url;
|
||||
} else {
|
||||
console.error('No checkout URL received in response');
|
||||
alert('Failed to create checkout session. Please try again.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Checkout error:', error);
|
||||
alert('Failed to start checkout. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
// Add click handlers for checkout buttons
|
||||
document.querySelectorAll('.checkout-button').forEach(button => {
|
||||
console.log('Adding click handler to checkout button:', button);
|
||||
button.addEventListener('click', function() {
|
||||
console.log('Checkout button clicked!');
|
||||
console.log('Button data attributes:', {
|
||||
planId: this.getAttribute('data-plan-id'),
|
||||
monthlyProductId: this.getAttribute('data-monthly-product-id'),
|
||||
annualProductId: this.getAttribute('data-annual-product-id'),
|
||||
planName: this.getAttribute('data-plan-name'),
|
||||
monthlyPrice: this.getAttribute('data-monthly-price'),
|
||||
annualPrice: this.getAttribute('data-annual-price')
|
||||
});
|
||||
|
||||
const planId = this.getAttribute('data-plan-id');
|
||||
const monthlyProductId = this.getAttribute('data-monthly-product-id');
|
||||
const annualProductId = this.getAttribute('data-annual-product-id');
|
||||
const planName = this.getAttribute('data-plan-name');
|
||||
const monthlyPrice = parseFloat(this.getAttribute('data-monthly-price'));
|
||||
const annualPrice = parseFloat(this.getAttribute('data-annual-price'));
|
||||
|
||||
// Determine which billing cycle to use based on billing toggle
|
||||
const isAnnual = billingToggle.checked;
|
||||
const billingCycle = isAnnual ? 'annual' : 'monthly';
|
||||
|
||||
console.log('Billing toggle state:', { isAnnual, billingCycle });
|
||||
console.log('Plan ID:', planId);
|
||||
|
||||
if (planId) {
|
||||
console.log('Calling handleCheckout with planId and billingCycle');
|
||||
handleCheckout(planId, billingCycle);
|
||||
} else {
|
||||
console.log('No plan ID found, redirecting to contact form');
|
||||
// Fallback to contact form if no plan configured
|
||||
window.location.href = '{{ contact_url }}';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
billingToggle.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
// Switch to annual prices with animation
|
||||
@@ -261,11 +378,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
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;
|
||||
// Update price periods to show "/year"
|
||||
document.querySelectorAll('.fs-6.text-muted, .price-period').forEach(period => {
|
||||
if (period.textContent.includes('/month')) {
|
||||
period.textContent = '/year';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@@ -278,15 +394,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
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;
|
||||
// Update price periods to show "/month"
|
||||
document.querySelectorAll('.fs-6.text-muted, .price-period').forEach(period => {
|
||||
if (period.textContent.includes('/year')) {
|
||||
period.textContent = '/month';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
Reference in New Issue
Block a user