feat: implement payment method addition page with gateway selection

main.py

@@ -6036,6 +6036,33 @@ async def dashboard_billing(request: Request):
     }
     )
 
+@app.get("/dashboard/billing/add-method")
+async def dashboard_add_payment_method(request: Request):
+    """Add payment method page"""
+    auth_check = require_dashboard_auth(request)
+    if auth_check:
+        return auth_check
+    
+    from aisbf.database import get_database
+    db = DatabaseRegistry.get_config_database()
+    
+    # Get enabled payment gateways
+    enabled_gateways = []
+    gateways = db.get_payment_gateway_settings()
+    for gateway, settings in gateways.items():
+        if settings.get('enabled', False):
+            enabled_gateways.append(gateway)
+    
+    return templates.TemplateResponse(
+        request=request,
+        name="dashboard/add_payment_method.html",
+        context={
+            "request": request,
+            "session": request.session,
+            "enabled_gateways": enabled_gateways
+        }
+    )
+
 @app.get("/dashboard/rate-limits")
 async def dashboard_rate_limits(request: Request):
     """Rate limits dashboard page"""

templates/dashboard/add_payment_method.html

+{% extends "base.html" %}
+
+{% block title %}Add Payment Method - AISBF Dashboard{% endblock %}
+
+{% block content %}
+<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;">
+        <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">
+            {% if 'stripe' in enabled_gateways %}
+            <div class="col-md-6">
+                <div class="card h-100 border-primary">
+                    <div class="card-body text-center">
+                        <i class="fab fa-cc-stripe fa-4x mb-3 text-primary"></i>
+                        <h5 class="card-title">Credit Card</h5>
+                        <p class="card-text text-muted">Secure payment via Stripe</p>
+                        <button class="btn btn-primary w-100" id="stripe-button">Add Credit Card</button>
+                    </div>
+                </div>
+            </div>
+            {% endif %}
+
+            {% if 'paypal' in enabled_gateways %}
+            <div class="col-md-6">
+                <div class="card h-100 border-primary">
+                    <div class="card-body text-center">
+                        <i class="fab fa-paypal fa-4x mb-3 text-primary"></i>
+                        <h5 class="card-title">PayPal</h5>
+                        <p class="card-text text-muted">Connect your PayPal account</p>
+                        <button class="btn btn-primary w-100" id="paypal-button">Connect PayPal</button>
+                    </div>
+                </div>
+            </div>
+            {% endif %}
+
+            {% if 'bitcoin' in enabled_gateways or 'eth' in enabled_gateways or 'usdt' in enabled_gateways or 'usdc' in enabled_gateways %}
+            <div class="col-12">
+                <div class="card border-warning">
+                    <div class="card-header bg-warning text-dark">
+                        <h6 class="mb-0">
+                            <i class="fab fa-bitcoin me-2"></i>Cryptocurrency Payments
+                        </h6>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted mb-3">Set cryptocurrency as your default payment method</p>
+                        <div class="row g-3">
+                            {% if 'bitcoin' in enabled_gateways %}
+                            <div class="col-md-3">
+                                <button class="btn btn-outline-warning w-100 crypto-default" data-type="bitcoin">
+                                    <i class="fab fa-bitcoin fa-2x mb-2"></i><br>
+                                    <strong>Bitcoin</strong>
+                                </button>
+                            </div>
+                            {% endif %}
+                            {% if 'eth' in enabled_gateways %}
+                            <div class="col-md-3">
+                                <button class="btn btn-outline-purple w-100 crypto-default" data-type="eth">
+                                    <i class="fab fa-ethereum fa-2x mb-2"></i><br>
+                                    <strong>Ethereum</strong>
+                                </button>
+                            </div>
+                            {% endif %}
+                            {% if 'usdt' in enabled_gateways %}
+                            <div class="col-md-3">
+                                <button class="btn btn-outline-success w-100 crypto-default" data-type="usdt">
+                                    <i class="fas fa-coins fa-2x mb-2"></i><br>
+                                    <strong>USDT</strong>
+                                </button>
+                            </div>
+                            {% endif %}
+                            {% 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 %}
+        </div>
+
+        <div class="text-center mt-4">
+            <a href="{{ url_for(request, '/dashboard/billing') }}" class="btn btn-secondary">Back to Billing</a>
+        </div>
+    </div>
+</div>
+
+<!-- Stripe Elements Container -->
+<div id="stripe-form" style="display: none;">
+    <form id="payment-form">
+        <div id="card-element"></div>
+        <button id="submit-button">Add Card</button>
+    </form>
+</div>
+
+{% endblock %}
+
+{% block extra_js %}
+<script src="https://js.stripe.com/v3/"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Crypto default buttons
+    document.querySelectorAll('.crypto-default').forEach(button => {
+        button.addEventListener('click', function() {
+            const type = this.dataset.type;
+            fetch('/dashboard/billing/add-method', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ type: type, action: 'set_default' })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    window.location.href = '/dashboard/billing?success=' + encodeURIComponent(data.message);
+                } else {
+                    alert('Error: ' + data.error);
+                }
+            });
+        });
+    });
+
+    // PayPal button
+    document.getElementById('paypal-button').addEventListener('click', function() {
+        window.location.href = '/dashboard/billing/add-method/paypal/oauth';
+    });
+
+    // Stripe button - show Stripe form
+    document.getElementById('stripe-button').addEventListener('click', function() {
+        document.getElementById('stripe-form').style.display = 'block';
+        // Initialize Stripe Elements
+        const stripe = Stripe('{{ stripe_publishable_key }}');
+        const elements = stripe.elements();
+        const cardElement = elements.create('card');
+        cardElement.mount('#card-element');
+        
+        const form = document.getElementById('payment-form');
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const {error, paymentMethod} = await stripe.createPaymentMethod({
+                type: 'card',
+                card: cardElement,
+            });
+            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>
+{% endblock %}
\ No newline at end of file