started implementing stripe

static/css/instances.css

@@ -243,6 +243,17 @@
     color: #000;
 }
 
+.infrastructure-tools .btn-outline-purple {
+    color: #6f42c1;
+    border-color: #6f42c1;
+}
+
+.infrastructure-tools .btn-outline-purple:hover {
+    background-color: #6f42c1;
+    border-color: #6f42c1;
+    color: #fff;
+}
+
 .infrastructure-tools .btn i {
     transition: transform 0.3s ease;
 }

static/js/settings/connections.js

@@ -529,6 +529,95 @@ async function saveCloudflareConnection(event) {
     saveModal.show();
 }
 
+// Save Stripe Connection
+async function saveStripeConnection(event) {
+    event.preventDefault();
+    const saveModal = new bootstrap.Modal(document.getElementById('saveConnectionModal'));
+    const messageElement = document.getElementById('saveConnectionMessage');
+    messageElement.textContent = '';
+    messageElement.className = '';
+
+    try {
+        const publishableKey = document.getElementById('stripePublishableKey').value;
+        const secretKey = document.getElementById('stripeSecretKey').value;
+        const webhookSecret = document.getElementById('stripeWebhookSecret').value;
+        const customerPortalUrl = document.getElementById('stripeCustomerPortalUrl').value;
+        const testMode = document.getElementById('stripeTestMode').checked;
+
+        if (!publishableKey || !secretKey) {
+            throw new Error('Please fill in all required fields');
+        }
+
+        const response = await fetch('/settings/save-stripe-connection', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-Token': getCsrfToken()
+            },
+            body: JSON.stringify({
+                publishable_key: publishableKey,
+                secret_key: secretKey,
+                webhook_secret: webhookSecret,
+                customer_portal_url: customerPortalUrl,
+                test_mode: testMode
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to save settings');
+        }
+
+        messageElement.textContent = 'Settings saved successfully!';
+        messageElement.className = 'text-success';
+    } catch (error) {
+        messageElement.textContent = error.message || 'Failed to save settings';
+        messageElement.className = 'text-danger';
+    }
+
+    saveModal.show();
+}
+
+// Test Stripe Connection
+async function testStripeConnection() {
+    const saveModal = new bootstrap.Modal(document.getElementById('saveConnectionModal'));
+    const messageElement = document.getElementById('saveConnectionMessage');
+    messageElement.textContent = '';
+    messageElement.className = '';
+
+    try {
+        const secretKey = document.getElementById('stripeSecretKey').value;
+
+        if (!secretKey) {
+            throw new Error('Please enter your Stripe secret key first');
+        }
+
+        const response = await fetch('/settings/test-stripe-connection', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-Token': getCsrfToken()
+            },
+            body: JSON.stringify({
+                secret_key: secretKey
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Connection test failed');
+        }
+
+        messageElement.textContent = 'Connection test successful!';
+        messageElement.className = 'text-success';
+    } catch (error) {
+        messageElement.textContent = error.message || 'Connection test failed';
+        messageElement.className = 'text-danger';
+    }
+
+    saveModal.show();
+}
+
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', function() {
     const gitSettings = JSON.parse(document.querySelector('meta[name="git-settings"]').getAttribute('content'));

static/js/settings/pricing.js

@@ -164,8 +164,9 @@ function loadPlanForEdit(planId) {
                 document.getElementById('editMonthlyPrice').value = plan.monthly_price;
                 document.getElementById('editAnnualPrice').value = plan.annual_price;
                 document.getElementById('editButtonText').value = plan.button_text;
-                document.getElementById('editMonthlyStripeLink').value = plan.monthly_stripe_link || '';
-                document.getElementById('editAnnualStripeLink').value = plan.annual_stripe_link || '';
+                document.getElementById('stripeProductId').value = plan.stripe_product_id || '';
+                document.getElementById('stripeMonthlyPriceId').value = plan.stripe_monthly_price_id || '';
+                document.getElementById('stripeAnnualPriceId').value = plan.stripe_annual_price_id || '';
                 document.getElementById('editIsPopular').checked = plan.is_popular;
                 document.getElementById('editIsCustom').checked = plan.is_custom;
                 document.getElementById('editIsActive').checked = plan.is_active;