197 lines
8.7 KiB
HTML
197 lines
8.7 KiB
HTML
{% extends 'schasite/base2.html' %}
|
|
{% load static %}
|
|
|
|
{% block pagetitle %}
|
|
<title>Stonehedge Community Homeowners Association</title>
|
|
<style type="text/css">
|
|
/* Payment Page Specific Styles */
|
|
.payment-option-card {
|
|
transition: transform 0.3s ease;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.payment-option-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.payment-option-card .bi {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
/* Table styles */
|
|
.table thead th {
|
|
background-color: var(--bs-success);
|
|
color: white;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 767.98px) {
|
|
.payment-option-card {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.table-responsive {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
/* Stripe button styling */
|
|
.btn-stripe {
|
|
background-color: #635bff;
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.btn-stripe:hover {
|
|
background-color: #4a42d1;
|
|
color: white;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<main class="py-5">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<!-- Payment Information Card -->
|
|
<div class="card shadow-sm mb-5">
|
|
<div class="card-header bg-success text-white">
|
|
<h3 class="mb-0">Payment Information</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-info-circle-fill me-2"></i>
|
|
You will be redirected to our secure payment processor (Stripe) to complete your transaction.
|
|
</div>
|
|
|
|
<h4 class="text-success mb-4">Annual Dues</h4>
|
|
|
|
<div class="table-responsive mb-4">
|
|
<table class="table table-bordered">
|
|
<thead class="table-success">
|
|
<tr>
|
|
<th>Payment Option</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Full Payment (Annual)</td>
|
|
<td>$30.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- <div class="mb-4 p-3 bg-light rounded">
|
|
<h5 class="text-success"><i class="bi bi-house-check-fill me-2"></i>Property Information</h5>
|
|
<p><strong>Member:</strong> John Doe (Lot #42)</p>
|
|
<p><strong>Current Balance:</strong> $600.00 (Due January 15, 2024)</p>
|
|
<p><strong>Last Payment:</strong> $600.00 on January 10, 2023</p>
|
|
<a href="#" class="btn btn-sm btn-outline-success">View Payment History</a>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Options -->
|
|
<div class="card shadow-sm mb-5">
|
|
<div class="card-header bg-success text-white">
|
|
<h3 class="mb-0">Payment Options</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-4">
|
|
<!-- Credit/Debit Card -->
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-success">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-credit-card text-success display-4 mb-3"></i>
|
|
<h4 class="text-success">Credit/Debit Card</h4>
|
|
<p class="card-text">Pay securely with Visa, Mastercard, American Express, or Discover.</p>
|
|
|
|
<button class="btn btn-success mt-3" id="submitBtn">Pay Dues</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<!-- Other Payment Methods -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h5 class="text-success mb-3">Other Payment Methods</h5>
|
|
<div class="d-flex flex-wrap gap-3">
|
|
<a href="#" class="btn btn-outline-success">
|
|
<i class="bi bi-cash-coin me-2"></i>Mail a Check
|
|
</a>
|
|
<a href="#" class="btn btn-outline-success">
|
|
<i class="bi bi-building me-2"></i>In-Person Payment
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment FAQ -->
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-success text-white">
|
|
<h3 class="mb-0">Payment FAQ</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="accordion" id="paymentFAQ">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
|
Is there a fee for online payments?
|
|
</button>
|
|
</h2>
|
|
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#paymentFAQ">
|
|
<div class="accordion-body">
|
|
No, the HOA absorbs all processing fees for online payments. You pay exactly your dues amount with no additional fees.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
|
When will my payment be reflected in my account?
|
|
</button>
|
|
</h2>
|
|
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#paymentFAQ">
|
|
<div class="accordion-body">
|
|
Credit/debit card payments are posted immediately.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
|
|
What payment methods do you accept?
|
|
</button>
|
|
</h2>
|
|
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#paymentFAQ">
|
|
<div class="accordion-body">
|
|
Online we accept all major credit/debit cards (Visa, Mastercard, American Express, Discover). For in-person or mail payments, we accept checks or money orders made payable to "SCHA"
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock %}
|
|
{% block extra_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Stripe Integration Script (example) -->
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<script src="{% static 'main.js' %}"></script>
|
|
{% endblock %}
|