Skip to content

A
aisbf
Commit 32cfac4e authored by Your Name's avatar Your Name
Browse files
Options

fix: improve add payment method page formatting and layout

parent eb798018
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 114 deletions
templates/dashboard/add_payment_method.html
View file @ 32cfac4e
...@@ -5,90 +5,80 @@ ...@@ -5,90 +5,80 @@
{% block content %} {% block content %}
<h2 style="margin-bottom: 30px;">Add Payment Method</h2> <h2 style="margin-bottom: 30px;">Add Payment Method</h2>
<div style="max-width: 800px; margin: 0 auto;"> <div style="background: #16213e; border: 2px solid #4a9eff; border-radius: 8px; padding: 30px; margin-bottom: 20px;">
<div style="background: #16213e; border: 2px solid #4a9eff; border-radius: 8px; padding: 30px;"> <p style="color: #a0a0a0; margin-bottom: 30px;">Choose a payment method to add to your account. You can use this for subscription payments and plan upgrades.</p>
<p class="text-muted mb-4">Choose a payment method to add to your account. You can use this for subscription payments and plan upgrades.</p>
<div class="row g-4"> <!-- Stripe and PayPal -->
{% if 'stripe' in enabled_gateways %} {% if 'stripe' in enabled_gateways or 'paypal' in enabled_gateways %}
<div class="col-md-6"> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px;">
<div class="card h-100 border-primary"> {% if 'stripe' in enabled_gateways %}
<div class="card-body text-center"> <div style="background: #1a1a2e; border: 2px solid #4a9eff; border-radius: 8px; padding: 25px; text-align: center; transition: all 0.3s ease;">
<i class="fab fa-cc-stripe fa-4x mb-3 text-primary"></i> <i class="fab fa-cc-stripe" style="font-size: 48px; color: #4a9eff; margin-bottom: 15px;"></i>
<h5 class="card-title">Credit Card</h5> <h3 style="margin: 0 0 10px 0; color: #e0e0e0; font-size: 18px;">Credit Card</h3>
<p class="card-text text-muted">Secure payment via Stripe</p> <p style="color: #a0a0a0; margin-bottom: 20px; font-size: 14px;">Secure payment via Stripe</p>
<button class="btn btn-primary w-100" id="stripe-button">Add Credit Card</button> <button class="btn" id="stripe-button" style="width: 100%; padding: 12px;">
</div> <i class="fas fa-plus me-2"></i>Add Credit Card
</div> </button>
</div> </div>
{% endif %} {% endif %}
{% if 'paypal' in enabled_gateways %} {% if 'paypal' in enabled_gateways %}
<div class="col-md-6"> <div style="background: #1a1a2e; border: 2px solid #4a9eff; border-radius: 8px; padding: 25px; text-align: center; transition: all 0.3s ease;">
<div class="card h-100 border-primary"> <i class="fab fa-paypal" style="font-size: 48px; color: #4a9eff; margin-bottom: 15px;"></i>
<div class="card-body text-center"> <h3 style="margin: 0 0 10px 0; color: #e0e0e0; font-size: 18px;">PayPal</h3>
<i class="fab fa-paypal fa-4x mb-3 text-primary"></i> <p style="color: #a0a0a0; margin-bottom: 20px; font-size: 14px;">Connect your PayPal account</p>
<h5 class="card-title">PayPal</h5> <button class="btn" id="paypal-button" style="width: 100%; padding: 12px;">
<p class="card-text text-muted">Connect your PayPal account</p> <i class="fas fa-link me-2"></i>Connect PayPal
<button class="btn btn-primary w-100" id="paypal-button">Connect PayPal</button> </button>
</div> </div>
</div> {% endif %}
</div> </div>
{% endif %} {% endif %}
{% if 'bitcoin' in enabled_gateways or 'eth' in enabled_gateways or 'usdt' in enabled_gateways or 'usdc' in enabled_gateways %} <!-- Cryptocurrency -->
<div class="col-12"> {% if 'bitcoin' in enabled_gateways or 'eth' in enabled_gateways or 'usdt' in enabled_gateways or 'usdc' in enabled_gateways %}
<div class="card border-warning"> <div style="background: #1a1a2e; border: 2px solid #ffc107; border-radius: 8px; padding: 25px; margin-bottom: 20px;">
<div class="card-header bg-warning text-dark"> <h3 style="margin: 0 0 10px 0; color: #ffc107; font-size: 18px;">
<h6 class="mb-0"> <i class="fab fa-bitcoin me-2"></i>Cryptocurrency Payments
<i class="fab fa-bitcoin me-2"></i>Cryptocurrency Payments </h3>
</h6> <p style="color: #a0a0a0; margin-bottom: 20px; font-size: 14px;">Set cryptocurrency as your default payment method</p>
</div>
<div class="card-body"> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px;">
<p class="text-muted mb-3">Set cryptocurrency as your default payment method</p> {% if 'bitcoin' in enabled_gateways %}
<div class="row g-3"> <button class="crypto-default" data-type="bitcoin" style="background: #0f3460; border: 2px solid #ffc107; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #e0e0e0;">
{% if 'bitcoin' in enabled_gateways %} <i class="fab fa-bitcoin" style="font-size: 36px; color: #ffc107; margin-bottom: 10px; display: block;"></i>
<div class="col-md-3"> <strong style="display: block; font-size: 14px;">Bitcoin</strong>
<button class="btn btn-outline-warning w-100 crypto-default" data-type="bitcoin"> </button>
<i class="fab fa-bitcoin fa-2x mb-2"></i><br> {% endif %}
<strong>Bitcoin</strong>
</button> {% if 'eth' in enabled_gateways %}
</div> <button class="crypto-default" data-type="eth" style="background: #0f3460; border: 2px solid #627eea; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #e0e0e0;">
{% endif %} <i class="fab fa-ethereum" style="font-size: 36px; color: #627eea; margin-bottom: 10px; display: block;"></i>
{% if 'eth' in enabled_gateways %} <strong style="display: block; font-size: 14px;">Ethereum</strong>
<div class="col-md-3"> </button>
<button class="btn btn-outline-purple w-100 crypto-default" data-type="eth"> {% endif %}
<i class="fab fa-ethereum fa-2x mb-2"></i><br>
<strong>Ethereum</strong> {% if 'usdt' in enabled_gateways %}
</button> <button class="crypto-default" data-type="usdt" style="background: #0f3460; border: 2px solid #26a17b; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #e0e0e0;">
</div> <i class="fas fa-coins" style="font-size: 36px; color: #26a17b; margin-bottom: 10px; display: block;"></i>
{% endif %} <strong style="display: block; font-size: 14px;">USDT</strong>
{% if 'usdt' in enabled_gateways %} </button>
<div class="col-md-3"> {% endif %}
<button class="btn btn-outline-success w-100 crypto-default" data-type="usdt">
<i class="fas fa-coins fa-2x mb-2"></i><br> {% if 'usdc' in enabled_gateways %}
<strong>USDT</strong> <button class="crypto-default" data-type="usdc" style="background: #0f3460; border: 2px solid #2775ca; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; color: #e0e0e0;">
</button> <i class="fas fa-coins" style="font-size: 36px; color: #2775ca; margin-bottom: 10px; display: block;"></i>
</div> <strong style="display: block; font-size: 14px;">USDC</strong>
{% endif %} </button>
{% if 'usdc' in enabled_gateways %}
<div class="col-md-3">
<button class="btn btn-outline-info w-100 crypto-default" data-type="usdc">
<i class="fas fa-coins fa-2x mb-2"></i><br>
<strong>USDC</strong>
</button>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %} {% endif %}
</div> </div>
</div>
{% endif %}
<div class="text-center mt-4"> <div style="text-align: center; margin-top: 30px;">
<a href="{{ url_for(request, '/dashboard/billing') }}" class="btn btn-secondary">Back to Billing</a> <a href="{{ url_for(request, '/dashboard/billing') }}" class="btn btn-secondary">
</div> <i class="fas fa-arrow-left me-2"></i>Back to Billing
</a>
</div> </div>
</div> </div>
...@@ -129,46 +119,52 @@ document.addEventListener('DOMContentLoaded', function() { ...@@ -129,46 +119,52 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
// PayPal button // PayPal button
document.getElementById('paypal-button').addEventListener('click', function() { const paypalButton = document.getElementById('paypal-button');
window.location.href = '/dashboard/billing/add-method/paypal/oauth'; if (paypalButton) {
}); paypalButton.addEventListener('click', function() {
window.location.href = '/dashboard/billing/add-method/paypal/oauth';
});
}
// Stripe button - show Stripe form // Stripe button - show Stripe form
document.getElementById('stripe-button').addEventListener('click', function() { const stripeButton = document.getElementById('stripe-button');
document.getElementById('stripe-form').style.display = 'block'; if (stripeButton) {
// Initialize Stripe Elements stripeButton.addEventListener('click', function() {
const stripe = Stripe('{{ stripe_publishable_key }}'); document.getElementById('stripe-form').style.display = 'block';
const elements = stripe.elements(); // Initialize Stripe Elements
const cardElement = elements.create('card'); const stripe = Stripe('{{ stripe_publishable_key }}');
cardElement.mount('#card-element'); const elements = stripe.elements();
const cardElement = elements.create('card');
const form = document.getElementById('payment-form'); cardElement.mount('#card-element');
form.addEventListener('submit', async (event) => {
event.preventDefault(); const form = document.getElementById('payment-form');
const {error, paymentMethod} = await stripe.createPaymentMethod({ form.addEventListener('submit', async (event) => {
type: 'card', event.preventDefault();
card: cardElement, const {error, paymentMethod} = await stripe.createPaymentMethod({
}); type: 'card',
if (error) { card: cardElement,
alert(error.message);
} else {
// Send payment method ID to server
fetch('/dashboard/billing/add-method/stripe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ payment_method_id: paymentMethod.id })
})
.then(response => response.json())
.then(data => {
if (data.success) {
window.location.href = '/dashboard/billing?success=' + encodeURIComponent(data.message);
} else {
alert('Error: ' + data.error);
}
}); });
} if (error) {
alert(error.message);
} else {
// Send payment method ID to server
fetch('/dashboard/billing/add-method/stripe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ payment_method_id: paymentMethod.id })
})
.then(response => response.json())
.then(data => {
if (data.success) {
window.location.href = '/dashboard/billing?success=' + encodeURIComponent(data.message);
} else {
alert('Error: ' + data.error);
}
});
}
});
}); });
}); }
}); });
</script> </script>
{% endblock %} {% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment