Airbnb Fee Calculator

Airbnb Fee Calculator: Estimate Your Host & Guest Costs :root { –primary-color: #004a99; –secondary-color: #f8f9fa; –text-color: #333; –border-color: #ddd; –card-background: #fff; –error-color: #dc3545; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(–text-color); background-color: var(–secondary-color); margin: 0; padding: 0; } .container { max-width: 1000px; margin: 20px auto; padding: 20px; background-color: var(–card-background); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } header { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(–border-color); margin-bottom: 20px; } h1 { color: var(–primary-color); margin-bottom: 5px; } .calculator-section { margin-bottom: 30px; padding: 20px; border: 1px solid var(–border-color); border-radius: 5px; background-color: var(–card-background); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); } .calculator-section h2 { color: var(–primary-color); text-align: center; margin-bottom: 20px; } .input-group { margin-bottom: 15px; text-align: left; } .input-group label { display: block; margin-bottom: 5px; font-weight: bold; color: var(–text-color); } .input-group input[type="number"], .input-group input[type="text"], .input-group select { width: calc(100% – 22px); padding: 10px; border: 1px solid var(–border-color); border-radius: 4px; box-sizing: border-box; font-size: 1rem; } .input-group input[type="number"]:focus, .input-group input[type="text"]:focus, .input-group select:focus { border-color: var(–primary-color); outline: none; box-shadow: 0 0 0 2px rgba(0, 74, 153, 0.2); } .input-group .helper-text { font-size: 0.85em; color: #6c757d; margin-top: 5px; display: block; } .error-message { color: var(–error-color); font-size: 0.85em; margin-top: 5px; display: block; min-height: 1.2em; } .button-group { text-align: center; margin-top: 20px; } button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: background-color 0.3s ease; margin: 5px; } .calculate-button { background-color: var(–primary-color); color: white; } .calculate-button:hover { background-color: #003366; } .reset-button { background-color: #6c757d; color: white; } .reset-button:hover { background-color: #5a6268; } .copy-button { background-color: #17a2b8; color: white; } .copy-button:hover { background-color: #117a8b; } .results-container { margin-top: 25px; padding: 20px; border: 1px solid var(–border-color); border-radius: 5px; background-color: #e9ecef; text-align: center; } .results-container h3 { color: var(–primary-color); margin-bottom: 15px; } .primary-result { font-size: 2.5em; font-weight: bold; color: var(–primary-color); margin-bottom: 10px; display: block; } .intermediate-results div { margin-bottom: 8px; font-size: 1.1em; } .intermediate-results span { font-weight: bold; } .formula-explanation { font-size: 0.9em; color: #6c757d; margin-top: 15px; font-style: italic; } .chart-container { margin-top: 30px; padding: 20px; border: 1px solid var(–border-color); border-radius: 5px; background-color: var(–card-background); } canvas { display: block; margin: 0 auto; max-width: 100%; height: auto !important; } .table-container { margin-top: 30px; overflow-x: auto; padding: 10px; border: 1px solid var(–border-color); border-radius: 5px; background-color: var(–card-background); } table { width: 100%; border-collapse: collapse; text-align: left; } th, td { padding: 12px 15px; border: 1px solid var(–border-color); white-space: nowrap; } thead { background-color: var(–primary-color); color: white; } tbody tr:nth-child(even) { background-color: #f2f2f2; } caption { caption-side: bottom; padding-top: 10px; font-size: 0.9em; color: #6c757d; text-align: center; font-style: italic; } article { margin-top: 30px; padding: 20px; background-color: var(–card-background); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } article h2, article h3 { color: var(–primary-color); margin-top: 20px; margin-bottom: 10px; } article p { margin-bottom: 15px; } article a { color: var(–primary-color); text-decoration: none; } article a:hover { text-decoration: underline; } .related-links ul { list-style: none; padding: 0; } .related-links li { margin-bottom: 10px; } .related-links li span { font-weight: bold; } footer { text-align: center; margin-top: 30px; padding: 20px; font-size: 0.8em; color: #6c757d; }

Airbnb Fee Calculator: Estimate Your Host & Guest Costs

Accurately calculate Airbnb fees to understand your net earnings and booking costs.

Airbnb Fee Calculator

Enter the price per night before fees.
Total number of nights for the stay.
Enter the fixed cleaning fee for the stay.
Guest Pays Host Fee (Standard) Host Pays Guest Fee (Some Regions/Promotions) Select who pays the Airbnb service fee.
Fee charged for each guest beyond the base occupancy. Set to 0 if not applicable.
The base number of guests included in the nightly price.
The actual number of guests for this booking.
Enter the Value Added Tax, Goods and Services Tax, or other applicable taxes as a percentage.

Your Estimated Airbnb Fees

Calculations based on Airbnb's standard host service fee (3%) and guest service fee (around 14.2%). These can vary. Taxes are applied to the booking price + cleaning fee + additional guest fees.

Fee Breakdown

Airbnb Fee Distribution

Booking & Fee Summary

Item Amount Details
Booking Price Per Night
Nights Total Stay
Cleaning Fee Per Stay
Additional Guest Fee Per Guest, Per Night
Subtotal (Before Fees/Taxes)
Host Service Fee (%) 3% (Standard)
Guest Service Fee (%) ~14.2% (Standard)
VAT/GST/Tax Rate (%) Applied to subtotal + cleaning + extra guests
Total Airbnb Fees
Final Host Payout
Final Guest Payment

What is an Airbnb Fee?

An Airbnb fee is a charge applied to both hosts and guests for using the Airbnb platform to facilitate short-term rental bookings. For hosts, these fees are typically deducted from their payout, while guests see them added to their total booking cost. Understanding these Airbnb fees is crucial for setting competitive pricing and ensuring profitability as a host, and for accurately budgeting as a guest. The fees cover the operational costs of the Airbnb platform, including customer support, secure payment processing, and host protection programs. Our Airbnb fee calculator helps demystify these charges.

Airbnb Fee Formula and Mathematical Explanation

The calculation of Airbnb fees involves several components. The core of the calculation revolves around the booking subtotal, which is the nightly rate multiplied by the number of nights, plus any cleaning fees and additional guest fees. Airbnb applies service fees based on the occupancy setting.

Standard Calculation (Guest Pays Host Fee):

  • Subtotal (Before Fees/Taxes): (Booking Price Per Night * Number of Nights) + Cleaning Fee + (Additional Guest Fee Per Night * Number of Additional Guests * Number of Nights)
  • Host Service Fee: Subtotal (Before Fees/Taxes) * Host Service Fee Rate (typically 3%)
  • Guest Service Fee: Subtotal (Before Fees/Taxes) * Guest Service Fee Rate (typically ~14.2%)
  • Total Airbnb Fees: Host Service Fee + Guest Service Fee
  • Taxes: (Subtotal (Before Fees/Taxes) + Total Airbnb Fees) * VAT/GST/Tax Rate (%)
  • Final Host Payout: Subtotal (Before Fees/Taxes) – Host Service Fee – Taxes Applied to Host Portion
  • Final Guest Payment: Subtotal (Before Fees/Taxes) + Guest Service Fee + Taxes Applied to Guest Portion + Cleaning Fee + Additional Guest Fees

Note: Airbnb's fee structure can vary. For instance, some hosts might pay a guest-paid fee where the guest pays a lower service fee (often around 6-8%), and the host pays a higher service fee (often around 7-10%). This Airbnb fee calculator uses the most common guest-pays-host-fee model for its primary calculations but accounts for the possibility of the host paying the guest fee. Always check your specific Airbnb account for applicable rates.

Practical Examples (Real-World Use Cases)

Let's see how our Airbnb fee calculator works with different scenarios:

Example 1: Standard Weekend Getaway A guest books a 2-night stay at $120 per night, with a $60 cleaning fee. There are 2 guests (base occupancy), and no additional guest fee. The VAT/GST/Tax rate is 5%. The calculator will show:

  • Subtotal: ($120 * 2) + $60 = $300
  • Host Service Fee (3%): $300 * 0.03 = $9
  • Guest Service Fee (~14.2%): $300 * 0.142 = $42.60
  • Total Airbnb Fees: $9 + $42.60 = $51.60
  • Taxes (5% on $300): $300 * 0.05 = $15
  • Final Host Payout: $300 – $9 – $15 = $276
  • Final Guest Payment: $300 + $42.60 + $15 + $60 = $417.60
This demonstrates how Airbnb fees impact both parties.

Example 2: Extended Stay with Extra Guests A host charges $90 per night for a 5-night stay, with a $75 cleaning fee. The base occupancy is 2 guests, but 4 guests are staying, with an additional guest fee of $15 per guest per night. The VAT/GST/Tax rate is 8%. The calculator will output:

  • Subtotal: ($90 * 5) + $75 + ($15 * 2 additional guests * 5 nights) = $450 + $75 + $150 = $675
  • Host Service Fee (3%): $675 * 0.03 = $20.25
  • Guest Service Fee (~14.2%): $675 * 0.142 = $95.85
  • Total Airbnb Fees: $20.25 + $95.85 = $116.10
  • Taxes (8% on $675): $675 * 0.08 = $54
  • Final Host Payout: $675 – $20.25 – $54 = $600.75
  • Final Guest Payment: $675 + $95.85 + $54 + $75 = $899.85
This example highlights how additional guest fees and higher taxes affect the final price and host earnings, showcasing the comprehensive nature of Airbnb fees.

How to Use This Airbnb Fee Calculator

Using our Airbnb fee calculator is straightforward:

  1. Enter Booking Price Per Night: Input the nightly rate you set for your listing.
  2. Specify Number of Nights: Enter the duration of the guest's stay.
  3. Add Cleaning Fee: Input any fixed cleaning fee you charge per stay.
  4. Select Occupancy Type: Choose whether the guest pays the standard host fee or if you are in a region where the host pays the guest fee.
  5. Set Additional Guest Fee: If you charge extra for guests beyond a certain number, enter that fee per guest, per night.
  6. Enter Maximum Guests: Define the number of guests included in the base nightly price.
  7. Enter Actual Guests Staying: Input the total number of guests for this specific booking.
  8. Input VAT/GST/Tax Rate: Enter any applicable local taxes as a percentage.
  9. Click 'Calculate': The calculator will instantly display the estimated host payout, guest total cost, and a breakdown of all relevant Airbnb fees.
  10. Use 'Reset': Clear all fields and return to default values.
  11. Use 'Copy Results': Copy the calculated summary to your clipboard for easy sharing or record-keeping.

This tool is designed to give you a clear picture of costs and earnings related to Airbnb fees.

Key Factors That Affect Airbnb Results

Several variables influence the final figures generated by this Airbnb fee calculator:

  • Nightly Rate: A higher nightly rate will increase the subtotal, thus increasing the absolute value of service fees and taxes, even if percentages remain constant.
  • Number of Nights: Longer stays naturally increase the overall booking cost and the impact of nightly-based fees.
  • Cleaning Fee: This is a fixed cost added to the guest's total, and while not directly subject to percentage-based Airbnb service fees, it contributes to the overall taxable amount.
  • Additional Guest Fees: This directly increases the booking subtotal and, consequently, all percentage-based fees and taxes.
  • Occupancy Fee Structure: The primary difference lies in whether the guest or host absorbs the larger portion of the service fee. Our tool allows you to select the standard guest-pays-host model.
  • Airbnb Service Fee Rates: While we use standard rates (3% host, ~14.2% guest), Airbnb can adjust these based on the booking type (e.g., hotel stays) or region. Always verify current rates.
  • VAT/GST/Tax Rate: Local tax regulations significantly impact the final guest price and can reduce the host's net payout if the tax is deducted from their earnings. Understanding specific tax implications is vital.

These factors collectively determine the profitability for hosts and the value for guests, all under the umbrella of Airbnb fees.

Frequently Asked Questions (FAQ)

What are the standard Airbnb host fees?

For most hosts, the standard Airbnb host service fee is 3%. This fee is deducted from the host's payout. However, some hosts in specific regions or categories might have higher fees (e.g., 4-5%) or participate in a "guest-paid fee" structure where the guest pays a higher service fee and the host pays a lower one.

What are the standard Airbnb guest fees?

Guests typically pay a service fee that is around 14.2% of the booking subtotal (which includes the nightly rate and cleaning fee, but not taxes). This fee is added to the total amount the guest pays.

Do taxes apply to Airbnb fees?

Yes, in many locations, taxes such as VAT, GST, or occupancy taxes apply to the booking subtotal and sometimes even the Airbnb service fees themselves. The exact application and rates vary significantly by region. Our calculator includes a field for VAT/GST/Tax Rate to help estimate this.

Can I negotiate Airbnb fees?

No, Airbnb service fees are set by the platform and are non-negotiable for standard bookings. Hosts determine their own nightly rates, cleaning fees, and additional guest fees, which indirectly affect the total cost and the base on which Airbnb fees are calculated.

How does the "Host Pays Guest Fee" option work?

In certain scenarios, Airbnb may implement a host-paid fee structure. In this model, the guest's service fee is significantly reduced (often to around 2-6%), while the host's service fee increases substantially (e.g., to 10-15%). This is less common for typical short-term stays but can apply to specific types of listings or promotions.

© 2023 Your Website Name. All rights reserved. | Disclaimer: This calculator provides estimations and should not be considered financial advice. Fee structures may vary.

var chartInstance = null; // Global variable to hold chart instance function formatCurrency(value) { if (isNaN(value)) return "; return '$' + value.toFixed(2); } function formatPercentage(value) { if (isNaN(value)) return "; return value.toFixed(2) + '%'; } function isValidNumber(value) { return !isNaN(parseFloat(value)) && isFinite(value); } function validateInput(id, errorId, minValue = null, maxValue = null) { var input = document.getElementById(id); var errorSpan = document.getElementById(errorId); var value = input.value.trim(); var isValid = true; errorSpan.textContent = "; // Clear previous error if (value === ") { errorSpan.textContent = 'This field is required.'; isValid = false; } else if (isNaN(parseFloat(value))) { errorSpan.textContent = 'Please enter a valid number.'; isValid = false; } else { var numValue = parseFloat(value); if (minValue !== null && numValue maxValue) { errorSpan.textContent = 'Value out of range.'; isValid = false; } } return isValid; } function calculateFees() { var bookingPrice = parseFloat(document.getElementById('bookingPrice').value); var nights = parseInt(document.getElementById('nights').value); var cleaningFee = parseFloat(document.getElementById('cleaningFee').value); var occupancyType = document.getElementById('occupancy').value; var additionalGuestFee = parseFloat(document.getElementById('additionalGuestFee').value); var maxGuests = parseInt(document.getElementById('maxGuests').value); var actualGuests = parseInt(document.getElementById('actualGuests').value); var vatRate = parseFloat(document.getElementById('vatRate').value); // Input Validations var validBookingPrice = validateInput('bookingPrice', 'bookingPriceError', 0); var validNights = validateInput('nights', 'nightsError', 1); var validCleaningFee = validateInput('cleaningFee', 'cleaningFeeError', 0); var validAdditionalGuestFee = validateInput('additionalGuestFee', 'additionalGuestFeeError', 0); var validMaxGuests = validateInput('maxGuests', 'maxGuestsError', 1); var validActualGuests = validateInput('actualGuests', 'actualGuestsError', 1); var validVatRate = validateInput('vatRate', 'vatRateError', 0, 100); if (!validBookingPrice || !validNights || !validCleaningFee || !validAdditionalGuestFee || !validMaxGuests || !validActualGuests || !validVatRate) { document.getElementById('resultsContainer').style.display = 'none'; return; } var hostServiceRate = 0.03; // Standard 3% var guestServiceRate = 0.142; // Standard ~14.2% var additionalGuestsCount = Math.max(0, actualGuests – maxGuests); var nightlyRateTotal = bookingPrice * nights; var additionalGuestTotal = additionalGuestFee * additionalGuestsCount * nights; var subtotalBeforeFeesTaxes = nightlyRateTotal + cleaningFee + additionalGuestTotal; var hostServiceFeeAmount = 0; var guestServiceFeeAmount = 0; var totalAirbnbFees = 0; if (occupancyType === 'guest_pays_host_fee') { hostServiceFeeAmount = subtotalBeforeFeesTaxes * hostServiceRate; guestServiceFeeAmount = subtotalBeforeFeesTaxes * guestServiceRate; } else { // host_pays_guest_fee hostServiceFeeAmount = subtotalBeforeFeesTaxes * 0.10; // Example higher host rate, adjust as needed guestServiceFeeAmount = subtotalBeforeFeesTaxes * 0.06; // Example lower guest rate, adjust as needed } totalAirbnbFees = hostServiceFeeAmount + guestServiceFeeAmount; var vatAmount = subtotalBeforeFeesTaxes * (vatRate / 100); var taxesOnHostPortion = 0; // Assuming taxes primarily affect guest payment or are calculated on subtotal var finalHostPayout = subtotalBeforeFeesTaxes – hostServiceFeeAmount – vatAmount; // Simplified: Vat deducted from payout var finalGuestPayment = subtotalBeforeFeesTaxes + guestServiceFeeAmount + vatAmount + cleaningFee + additionalGuestTotal; // — Update Results Display — document.getElementById('resultsContainer').style.display = 'block'; document.getElementById('primaryResult').textContent = formatCurrency(subtotalBeforeFeesTaxes + guestServiceFeeAmount + vatAmount + cleaningFee + additionalGuestTotal); // Guest Total Cost as primary document.getElementById('hostSubtotal').textContent = 'Subtotal (Before Fees & Taxes): ' + formatCurrency(subtotalBeforeFeesTaxes); document.getElementById('guestSubtotal').textContent = 'Booking Subtotal (Guest View): ' + formatCurrency(subtotalBeforeFeesTaxes + cleaningFee + additionalGuestTotal); // For clarity, include cleaning/guests document.getElementById('hostServiceFee').textContent = 'Host Service Fee: ' + formatCurrency(hostServiceFeeAmount); document.getElementById('guestServiceFee').textContent = 'Guest Service Fee: ' + formatCurrency(guestServiceFeeAmount); document.getElementById('totalAirbnbFees').textContent = 'Total Airbnb Service Fees: ' + formatCurrency(totalAirbnbFees); document.getElementById('hostNetEarnings').textContent = 'Estimated Host Net Earnings: ' + formatCurrency(subtotalBeforeFeesTaxes – hostServiceFeeAmount – vatAmount); document.getElementById('guestTotalCost').textContent = 'Estimated Guest Total Cost: ' + formatCurrency(finalGuestPayment); document.getElementById('taxesOnBooking').textContent = 'Estimated Taxes: ' + formatCurrency(vatAmount); document.getElementById('finalHostPayout').textContent = 'Final Host Payout (After Fees/Taxes): ' + formatCurrency(finalHostPayout); document.getElementById('finalGuestPayment').textContent = 'Final Guest Payment (Including Fees/Taxes): ' + formatCurrency(finalGuestPayment); // — Update Table — document.getElementById('tableBookingPrice').textContent = formatCurrency(bookingPrice); document.getElementById('tableNights').textContent = nights; document.getElementById('tableCleaningFee').textContent = formatCurrency(cleaningFee); document.getElementById('tableAdditionalGuestFee').textContent = formatCurrency(additionalGuestFee); document.getElementById('tableSubtotal').textContent = formatCurrency(subtotalBeforeFeesTaxes); document.getElementById('tableHostServiceFeePercent').textContent = formatPercentage(hostServiceRate * 100); document.getElementById('tableGuestServiceFeePercent').textContent = formatPercentage(guestServiceRate * 100); document.getElementById('tableVatRate').textContent = formatPercentage(vatRate); document.getElementById('tableTotalAirbnbFees').textContent = formatCurrency(totalAirbnbFees); document.getElementById('tableFinalHostPayout').textContent = formatCurrency(finalHostPayout); document.getElementById('tableFinalGuestPayment').textContent = formatCurrency(finalGuestPayment); updateChart(hostServiceFeeAmount, guestServiceFeeAmount, vatAmount, (subtotalBeforeFeesTaxes – hostServiceFeeAmount – vatAmount), cleaningFee, additionalGuestTotal); } function resetForm() { document.getElementById('bookingPrice').value = '100'; document.getElementById('nights').value = '3'; document.getElementById('cleaningFee').value = '50'; document.getElementById('occupancy').value = 'guest_pays_host_fee'; document.getElementById('additionalGuestFee').value = '10'; document.getElementById('maxGuests').value = '2'; document.getElementById('actualGuests').value = '2'; document.getElementById('vatRate').value = '0'; // Clear errors document.getElementById('bookingPriceError').textContent = "; document.getElementById('nightsError').textContent = "; document.getElementById('cleaningFeeError').textContent = "; document.getElementById('occupancyError').textContent = "; document.getElementById('additionalGuestFeeError').textContent = "; document.getElementById('maxGuestsError').textContent = "; document.getElementById('actualGuestsError').textContent = "; document.getElementById('vatRateError').textContent = "; document.getElementById('resultsContainer').style.display = 'none'; if (chartInstance) { chartInstance.destroy(); chartInstance = null; } document.getElementById('feeChart').getContext('2d').clearRect(0, 0, document.getElementById('feeChart').width, document.getElementById('feeChart').height); } function copyResults() { var resultsText = "Airbnb Fee Calculation Summary:\n\n"; resultsText += "Primary Result (Guest Total Cost): " + document.getElementById('primaryResult').textContent + "\n"; resultsText += document.getElementById('hostSubtotal').textContent + "\n"; resultsText += document.getElementById('guestSubtotal').textContent + "\n"; resultsText += document.getElementById('hostServiceFee').textContent + "\n"; resultsText += document.getElementById('guestServiceFee').textContent + "\n"; resultsText += document.getElementById('totalAirbnbFees').textContent + "\n"; resultsText += document.getElementById('hostNetEarnings').textContent + "\n"; resultsText += document.getElementById('guestTotalCost').textContent + "\n"; resultsText += document.getElementById('taxesOnBooking').textContent + "\n"; resultsText += document.getElementById('finalHostPayout').textContent + "\n"; resultsText += document.getElementById('finalGuestPayment').textContent + "\n\n"; resultsText += "Key Assumptions:\n"; resultsText += "Booking Price Per Night: " + document.getElementById('bookingPrice').value + "\n"; resultsText += "Number of Nights: " + document.getElementById('nights').value + "\n"; resultsText += "Cleaning Fee: " + formatCurrency(parseFloat(document.getElementById('cleaningFee').value)) + "\n"; resultsText += "Occupancy Type: " + document.getElementById('occupancy').options[document.getElementById('occupancy').selectedIndex].text + "\n"; resultsText += "Additional Guest Fee: " + formatCurrency(parseFloat(document.getElementById('additionalGuestFee').value)) + "\n"; resultsText += "Max Guests (Base): " + document.getElementById('maxGuests').value + "\n"; resultsText += "Actual Guests: " + document.getElementById('actualGuests').value + "\n"; resultsText += "VAT/GST/Tax Rate: " + formatPercentage(parseFloat(document.getElementById('vatRate').value)) + "\n"; var textArea = document.createElement("textarea"); textArea.value = resultsText; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'Results copied!' : 'Failed to copy results.'; console.log(msg); // Optionally show a temporary message to the user } catch (err) { console.log('Unable to copy results.'); } document.body.removeChild(textArea); } function updateChart(hostFee, guestFee, taxes, hostPayout, cleaning, extraGuests) { var ctx = document.getElementById('feeChart').getContext('2d'); if (chartInstance) { chartInstance.destroy(); } var totalBookingCost = hostPayout + hostFee + guestFee + taxes + cleaning + extraGuests; // Recalculate for chart context chartInstance = new Chart(ctx, { type: 'pie', data: { labels: ['Host Payout', 'Host Service Fee', 'Guest Service Fee', 'Taxes', 'Cleaning Fee', 'Additional Guest Fees'], datasets: [{ data: [hostPayout, hostFee, guestFee, taxes, cleaning, extraGuests], backgroundColor: [ 'rgba(75, 192, 192, 0.7)', // Host Payout 'rgba(255, 159, 64, 0.7)', // Host Service Fee 'rgba(54, 162, 235, 0.7)', // Guest Service Fee 'rgba(201, 203, 207, 0.7)', // Taxes 'rgba(153, 102, 255, 0.7)', // Cleaning Fee 'rgba(255, 99, 132, 0.7)' // Additional Guest Fees ], borderColor: [ 'rgba(75, 192, 192, 1)', 'rgba(255, 159, 64, 1)', 'rgba(54, 162, 235, 1)', 'rgba(201, 203, 207, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 99, 132, 1)' ], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Breakdown of Total Guest Payment' } } } }); } // Initial calculation on load document.addEventListener('DOMContentLoaded', function() { // Fetch the Chart.js library from a CDN var script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/chart.js'; script.onload = function() { calculateFees(); // Calculate once loaded }; document.head.appendChild(script); // Add event listeners for real-time updates document.getElementById('bookingPrice').addEventListener('input', calculateFees); document.getElementById('nights').addEventListener('input', calculateFees); document.getElementById('cleaningFee').addEventListener('input', calculateFees); document.getElementById('occupancy').addEventListener('change', calculateFees); document.getElementById('additionalGuestFee').addEventListener('input', calculateFees); document.getElementById('maxGuests').addEventListener('input', calculateFees); document.getElementById('actualGuests').addEventListener('input', calculateFees); document.getElementById('vatRate').addEventListener('input', calculateFees); // Adjust canvas size on window resize window.addEventListener('resize', function() { if (chartInstance) { updateChart( parseFloat(document.getElementById('guestServiceFee').textContent.replace(/[^0-9.-]+/g,"")) || 0, parseFloat(document.getElementById('hostServiceFee').textContent.replace(/[^0-9.-]+/g,"")) || 0, parseFloat(document.getElementById('taxesOnBooking').textContent.replace(/[^0-9.-]+/g,"")) || 0, parseFloat(document.getElementById('hostNetEarnings').textContent.replace(/[^0-9.-]+/g,"")) || 0, parseFloat(document.getElementById('cleaningFee').value) || 0, (parseFloat(document.getElementById('additionalGuestFee').value) * Math.max(0, parseFloat(document.getElementById('actualGuests').value) – parseFloat(document.getElementById('maxGuests').value)) * parseFloat(document.getElementById('nights').value)) || 0 ); } }); });

Leave a Comment