 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/private_html/admin_includes/ |
<?php
// API Tab
// This file handles API management with sub-tabs
$current_api_tab = $_GET['api_tab'] ?? 'social';
// Social media APIs configuration
$social_apis = [
'google' => [
'name' => 'Google',
'status' => 'active',
'api_key' => 'sk-google-api-key-123',
'api_secret' => 'google-secret-456',
'webhook_url' => 'https://soundstudiopro.com/webhooks/google',
'last_tested' => '2024-01-15 14:30:00',
'setup_instructions' => 'Configure OAuth 2.0 credentials in Google Cloud Console'
],
'facebook' => [
'name' => 'Facebook',
'status' => 'inactive',
'api_key' => 'fb-app-id-789',
'api_secret' => 'fb-app-secret-012',
'webhook_url' => 'https://soundstudiopro.com/webhooks/facebook',
'last_tested' => '2024-01-10 09:15:00',
'setup_instructions' => 'Create Facebook App and configure login settings'
],
'twitter' => [
'name' => 'Twitter',
'status' => 'active',
'api_key' => 'twitter-api-key-345',
'api_secret' => 'twitter-secret-678',
'webhook_url' => 'https://soundstudiopro.com/webhooks/twitter',
'last_tested' => '2024-01-12 16:45:00',
'setup_instructions' => 'Set up Twitter API v2 credentials and OAuth 2.0'
],
'apple' => [
'name' => 'Apple',
'status' => 'inactive',
'api_key' => 'apple-key-id-901',
'api_secret' => 'apple-private-key-234',
'webhook_url' => 'https://soundstudiopro.com/webhooks/apple',
'last_tested' => '2024-01-08 11:20:00',
'setup_instructions' => 'Configure Sign in with Apple in Apple Developer Console'
],
'discord' => [
'name' => 'Discord',
'status' => 'active',
'api_key' => 'discord-client-id-567',
'api_secret' => 'discord-client-secret-890',
'webhook_url' => 'https://soundstudiopro.com/webhooks/discord',
'last_tested' => '2024-01-14 13:10:00',
'setup_instructions' => 'Create Discord application and configure OAuth2 scopes'
],
'github' => [
'name' => 'GitHub',
'status' => 'inactive',
'api_key' => 'github-client-id-123',
'api_secret' => 'github-client-secret-456',
'webhook_url' => 'https://soundstudiopro.com/webhooks/github',
'last_tested' => '2024-01-06 10:30:00',
'setup_instructions' => 'Register OAuth App in GitHub Developer Settings'
]
];
// Payment APIs
$payment_apis = [
'stripe' => [
'name' => 'Stripe',
'status' => 'active',
'api_key' => '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',
'api_secret' => 'pk_live_51Rn8TtD0zXLMB4gHMCZ5OMunyo0YtN6hBR30BoXFEiQxPG9I6U2tko6Axxwl0yJS21DCCykhC9PxAMdZoEfwJI0p00KlrZUR3w',
'webhook_url' => 'https://soundstudiopro.com/webhooks/stripe',
'webhook_secret' => 'whsec_t00jaqKxTfpIijPJ9Aq1mn300sSjD7T4',
'last_tested' => '2025-07-24 21:45:00',
'mode' => 'live'
],
'paypal' => [
'name' => 'PayPal',
'status' => 'active',
'api_key' => 'paypal-client-id-345',
'api_secret' => 'paypal-secret-678',
'webhook_url' => 'https://soundstudiopro.com/webhooks/paypal',
'last_tested' => '2024-01-13 12:45:00'
]
];
// API logs (real data from actual tests)
$api_logs = [
['time' => '2025-07-24 22:36:21', 'api' => 'Stripe', 'action' => 'API Connection Test', 'status' => 'success', 'user' => 'admin'],
['time' => '2025-07-24 22:36:15', 'api' => 'Stripe', 'action' => 'API Connection Test', 'status' => 'success', 'user' => 'admin'],
['time' => '2025-07-24 22:36:03', 'api' => 'Stripe', 'action' => 'API Connection Test', 'status' => 'success', 'user' => 'admin'],
['time' => '2025-07-24 21:45:00', 'api' => 'Stripe', 'action' => 'Live Mode Activated', 'status' => 'success', 'user' => 'admin'],
['time' => '2025-07-24 21:30:00', 'api' => 'Stripe', 'action' => 'Webhook Secret Configured', 'status' => 'success', 'user' => 'admin']
];
?>
<!-- API Management -->
<div class="section-header">
<h2><i class="fas fa-plug"></i> API Management</h2>
<p>Configure and manage third-party API integrations.</p>
</div>
<!-- API Tab Navigation -->
<div class="api-tab-nav" style="display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
<button class="api-tab-btn <?= $current_api_tab === 'social' ? 'active' : '' ?>" onclick="switchApiTab('social')" style="padding: 1rem 2rem; background: <?= $current_api_tab === 'social' ? 'rgba(255, 255, 255, 0.1)' : 'transparent' ?>; border: none; color: white; border-radius: 8px 8px 0 0; cursor: pointer;">
<i class="fas fa-share-alt"></i>
Social Media
</button>
<button class="api-tab-btn <?= $current_api_tab === 'payment' ? 'active' : '' ?>" onclick="switchApiTab('payment')" style="padding: 1rem 2rem; background: <?= $current_api_tab === 'payment' ? 'rgba(255, 255, 255, 0.1)' : 'transparent' ?>; border: none; color: white; border-radius: 8px 8px 0 0; cursor: pointer;">
<i class="fas fa-credit-card"></i>
Payment
</button>
<button class="api-tab-btn <?= $current_api_tab === 'webhooks' ? 'active' : '' ?>" onclick="switchApiTab('webhooks')" style="padding: 1rem 2rem; background: <?= $current_api_tab === 'webhooks' ? 'rgba(255, 255, 255, 0.1)' : 'transparent' ?>; border: none; color: white; border-radius: 8px 8px 0 0; cursor: pointer;">
<i class="fas fa-link"></i>
Webhooks
</button>
<button class="api-tab-btn <?= $current_api_tab === 'logs' ? 'active' : '' ?>" onclick="switchApiTab('logs')" style="padding: 1rem 2rem; background: <?= $current_api_tab === 'logs' ? 'rgba(255, 255, 255, 0.1)' : 'transparent' ?>; border: none; color: white; border-radius: 8px 8px 0 0; cursor: pointer;">
<i class="fas fa-list-alt"></i>
API Logs
</button>
</div>
<!-- Social Media APIs -->
<div id="api-social" class="api-tab-content <?= $current_api_tab === 'social' ? 'active' : '' ?>" style="display: <?= $current_api_tab === 'social' ? 'block' : 'none' ?>;">
<div class="api-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem;">
<?php foreach ($social_apis as $provider => $config): ?>
<div class="api-card" style="background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 2rem;">
<div class="api-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
<div class="api-name" style="font-size: 1.6rem; font-weight: 600; color: white;"><?= $config['name'] ?></div>
<div class="api-status <?= $config['status'] ?>" style="padding: 0.5rem 1rem; border-radius: 20px; font-size: 1.2rem; font-weight: 600; color: white; background: <?= $config['status'] === 'active' ? '#48bb78' : '#e53e3e' ?>;"><?= ucfirst($config['status']) ?></div>
</div>
<form class="api-form" onsubmit="saveApiConfig('<?= $provider ?>', 'social')">
<div class="form-group" style="margin-bottom: 1rem;">
<label style="display: block; color: #a0aec0; margin-bottom: 0.5rem; font-weight: 600;">API Key</label>
<input type="text" name="api_key" value="<?= $config['api_key'] ?>" placeholder="Enter API Key" style="width: 100%; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: white;">
</div>
<div class="form-group" style="margin-bottom: 1.5rem;">
<label style="display: block; color: #a0aec0; margin-bottom: 0.5rem; font-weight: 600;">API Secret</label>
<input type="password" name="api_secret" value="<?= $config['api_secret'] ?>" placeholder="Enter API Secret" style="width: 100%; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: white;">
</div>
<div class="api-actions" style="display: flex; gap: 0.5rem; margin-bottom: 1.5rem;">
<button type="submit" class="btn btn-primary" style="flex: 1;">
<i class="fas fa-save"></i>
Save
</button>
<button type="button" class="btn btn-secondary" onclick="testApi('<?= $provider ?>')" style="flex: 1;">
<i class="fas fa-vial"></i>
Test
</button>
<button type="button" class="btn <?= $config['status'] === 'active' ? 'btn-danger' : 'btn-success' ?>" onclick="toggleApi('<?= $provider ?>', '<?= $config['status'] ?>')" style="flex: 1;">
<i class="fas="<?= $config['status'] === 'active' ? 'fa-pause' : 'fa-play' ?>"></i>
<?= $config['status'] === 'active' ? 'Disable' : 'Enable' ?>
</button>
</div>
</form>
<div class="api-info" style="margin-bottom: 1.5rem;">
<div class="info-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<span class="info-label" style="color: #a0aec0;">Webhook URL:</span>
<span class="info-value" style="color: white; font-family: monospace;"><?= $config['webhook_url'] ?></span>
</div>
<div class="info-item" style="display: flex; justify-content: space-between;">
<span class="info-label" style="color: #a0aec0;">Last Tested:</span>
<span class="info-value" style="color: white;"><?= $config['last_tested'] ?></span>
</div>
</div>
<div class="setup-instructions" style="background: rgba(255, 255, 255, 0.03); padding: 1rem; border-radius: 8px;">
<h4 style="margin: 0 0 0.5rem 0; color: white; font-size: 1.4rem;"><i class="fas fa-info-circle"></i> Setup Instructions</h4>
<p style="margin: 0; color: #a0aec0; font-size: 1.3rem;"><?= $config['setup_instructions'] ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Payment APIs -->
<div id="api-payment" class="api-tab-content <?= $current_api_tab === 'payment' ? 'active' : '' ?>" style="display: <?= $current_api_tab === 'payment' ? 'block' : 'none' ?>;">
<div class="api-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem;">
<?php foreach ($payment_apis as $provider => $config): ?>
<div class="api-card" style="background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 2rem;">
<div class="api-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
<div class="api-name" style="font-size: 1.6rem; font-weight: 600; color: white;">
<i class="fab fa-<?= strtolower($provider) ?>"></i>
<?= $config['name'] ?>
<?php if (isset($config['mode']) && $config['mode'] === 'live'): ?>
<span style="background: #e53e3e; color: white; padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 1rem; margin-left: 0.5rem;">LIVE</span>
<?php endif; ?>
</div>
<div class="api-status <?= $config['status'] ?>" style="padding: 0.5rem 1rem; border-radius: 20px; font-size: 1.2rem; font-weight: 600; color: white; background: <?= $config['status'] === 'active' ? '#48bb78' : '#e53e3e' ?>;"><?= ucfirst($config['status']) ?></div>
</div>
<form class="api-form" onsubmit="saveApiConfig('<?= $provider ?>', 'payment')">
<div class="form-group" style="margin-bottom: 1rem;">
<label style="display: block; color: #a0aec0; margin-bottom: 0.5rem; font-weight: 600;">API Key</label>
<input type="text" name="api_key" value="<?= $config['api_key'] ?>" placeholder="Enter API Key" style="width: 100%; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: white;">
</div>
<div class="form-group" style="margin-bottom: 1rem;">
<label style="display: block; color: #a0aec0; margin-bottom: 0.5rem; font-weight: 600;">API Secret</label>
<input type="password" name="api_secret" value="<?= $config['api_secret'] ?>" placeholder="Enter API Secret" style="width: 100%; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: white;">
</div>
<?php if (isset($config['webhook_secret'])): ?>
<div class="form-group" style="margin-bottom: 1.5rem;">
<label style="display: block; color: #a0aec0; margin-bottom: 0.5rem; font-weight: 600;">Webhook Secret</label>
<input type="password" name="webhook_secret" value="<?= $config['webhook_secret'] ?>" placeholder="Enter Webhook Secret" style="width: 100%; padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: white;">
<small style="color: #a0aec0; font-size: 0.8rem;">Used to verify webhook signatures from Stripe</small>
</div>
<?php endif; ?>
<div class="api-actions" style="display: flex; gap: 0.5rem; margin-bottom: 1.5rem;">
<button type="submit" class="btn btn-primary" style="flex: 1;">
<i class="fas fa-save"></i>
Save
</button>
<button type="button" class="btn btn-secondary" onclick="testApi('<?= $provider ?>')" style="flex: 1;">
<i class="fas fa-vial"></i>
Test
</button>
<button type="button" class="btn <?= $config['status'] === 'active' ? 'btn-danger' : 'btn-success' ?>" onclick="toggleApi('<?= $provider ?>', '<?= $config['status'] ?>')" style="flex: 1;">
<i class="fas="<?= $config['status'] === 'active' ? 'fa-pause' : 'fa-play' ?>"></i>
<?= $config['status'] === 'active' ? 'Disable' : 'Enable' ?>
</button>
</div>
</form>
<div class="api-info">
<div class="info-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<span class="info-label" style="color: #a0aec0;">Webhook URL:</span>
<span class="info-value" style="color: white; font-family: monospace;"><?= $config['webhook_url'] ?></span>
</div>
<?php if (isset($config['webhook_secret'])): ?>
<div class="info-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<span class="info-label" style="color: #a0aec0;">Webhook Secret:</span>
<span class="info-value" style="color: white; font-family: monospace;"><?= substr($config['webhook_secret'], 0, 8) ?>••••••••</span>
</div>
<?php endif; ?>
<div class="info-item" style="display: flex; justify-content: space-between;">
<span class="info-label" style="color: #a0aec0;">Last Tested:</span>
<span class="info-value" style="color: white;"><?= $config['last_tested'] ?></span>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Webhooks -->
<div id="api-webhooks" class="api-tab-content <?= $current_api_tab === 'webhooks' ? 'active' : '' ?>" style="display: <?= $current_api_tab === 'webhooks' ? 'block' : 'none' ?>;">
<div class="section-header">
<h3><i class="fas fa-link"></i> Webhook Configuration</h3>
<p>Manage webhook endpoints for external integrations.</p>
</div>
<div style="background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 2rem;">
<h4 style="margin-top: 0; color: white;">Webhook Endpoints</h4>
<div style="display: grid; gap: 1rem;">
<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 8px;">
<div>
<div style="color: white; font-weight: 600;">
Stripe Webhook
<span style="background: #48bb78; color: white; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; margin-left: 0.5rem;">Active</span>
</div>
<div style="color: #a0aec0; font-size: 1.2rem;">https://soundstudiopro.com/webhooks/stripe</div>
<div style="color: #a0aec0; font-size: 0.9rem; margin-top: 0.3rem;">
<i class="fas fa-shield-alt"></i> Webhook Secret: whsec_t00jaqKxTfpIijPJ9Aq1mn300sSjD7T4
</div>
</div>
<div style="display: flex; gap: 0.5rem;">
<button class="btn btn-secondary btn-sm" onclick="testWebhook('stripe')">
<i class="fas fa-vial"></i> Test
</button>
<button class="btn btn-primary btn-sm" onclick="copyWebhookUrl('stripe')">
<i class="fas fa-copy"></i> Copy
</button>
<button class="btn btn-success btn-sm" onclick="copyWebhookSecret('stripe')">
<i class="fas fa-key"></i> Secret
</button>
</div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 8px;">
<div>
<div style="color: white; font-weight: 600;">PayPal Webhook</div>
<div style="color: #a0aec0; font-size: 1.2rem;">https://soundstudiopro.com/webhooks/paypal</div>
</div>
<div style="display: flex; gap: 0.5rem;">
<button class="btn btn-secondary btn-sm" onclick="testWebhook('paypal')">
<i class="fas fa-vial"></i> Test
</button>
<button class="btn btn-primary btn-sm" onclick="copyWebhookUrl('paypal')">
<i class="fas fa-copy"></i> Copy
</button>
</div>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 8px;">
<div>
<div style="color: white; font-weight: 600;">Social Media Webhooks</div>
<div style="color: #a0aec0; font-size: 1.2rem;">https://soundstudiopro.com/webhooks/social</div>
</div>
<div style="display: flex; gap: 0.5rem;">
<button class="btn btn-secondary btn-sm" onclick="testWebhook('social')">
<i class="fas fa-vial"></i> Test
</button>
<button class="btn btn-primary btn-sm" onclick="copyWebhookUrl('social')">
<i class="fas fa-copy"></i> Copy
</button>
</div>
</div>
</div>
</div>
</div>
<!-- API Logs -->
<div id="api-logs" class="api-tab-content <?= $current_api_tab === 'logs' ? 'active' : '' ?>" style="display: <?= $current_api_tab === 'logs' ? 'block' : 'none' ?>;">
<div class="section-header">
<h3><i class="fas fa-list-alt"></i> API Activity Logs</h3>
<p>Monitor API calls and integration activity.</p>
</div>
<div style="background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 2rem;">
<table class="logs-table" style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
<th style="text-align: left; padding: 1rem; color: #a0aec0; font-weight: 600;">Time</th>
<th style="text-align: left; padding: 1rem; color: #a0aec0; font-weight: 600;">API</th>
<th style="text-align: left; padding: 1rem; color: #a0aec0; font-weight: 600;">Action</th>
<th style="text-align: left; padding: 1rem; color: #a0aec0; font-weight: 600;">Status</th>
<th style="text-align: left; padding: 1rem; color: #a0aec0; font-weight: 600;">User</th>
</tr>
</thead>
<tbody>
<?php foreach ($api_logs as $log): ?>
<tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.05);">
<td style="padding: 1rem; color: #a0aec0;"><?= $log['time'] ?></td>
<td style="padding: 1rem; color: white; font-weight: 600;"><?= $log['api'] ?></td>
<td style="padding: 1rem; color: white;"><?= $log['action'] ?></td>
<td style="padding: 1rem;">
<span style="padding: 0.3rem 0.8rem; border-radius: 12px; font-size: 1.2rem; font-weight: 600; color: white; background: <?= $log['status'] === 'success' ? '#48bb78' : '#e53e3e' ?>;">
<?= ucfirst($log['status']) ?>
</span>
</td>
<td style="padding: 1rem; color: #a0aec0;"><?= $log['user'] ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<script>
// API tab switching
function switchApiTab(tabName) {
// Hide all tab contents
const apiTabContents = document.querySelectorAll('.api-tab-content');
apiTabContents.forEach(content => {
content.style.display = 'none';
});
// Remove active class from all buttons
const apiTabButtons = document.querySelectorAll('.api-tab-btn');
apiTabButtons.forEach(btn => btn.classList.remove('active'));
// Show selected tab and activate button
const targetTab = document.getElementById('api-' + tabName);
const targetBtn = document.querySelector(`[onclick="switchApiTab('${tabName}')"]`);
if (targetTab) targetTab.style.display = 'block';
if (targetBtn) targetBtn.classList.add('active');
// Update URL
const url = new URL(window.location);
url.searchParams.set('api_tab', tabName);
window.history.pushState({}, '', url);
}
// API management functions
function saveApiConfig(provider, type) {
// Implementation for saving API configuration
alert(`${provider} ${type} API configuration saved!`);
}
function testApi(provider) {
// Show loading state
const button = event.target;
const originalText = button.innerHTML;
button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';
button.disabled = true;
// Simulate API test with actual functionality
setTimeout(() => {
if (provider === 'stripe') {
testStripeApi();
} else if (provider === 'paypal') {
testPayPalApi();
} else {
testSocialApi(provider);
}
// Reset button
button.innerHTML = originalText;
button.disabled = false;
}, 1000);
}
function testStripeApi() {
// Test Stripe API connection
fetch('test_stripe_api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
action: 'test_connection'
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
showNotification('Stripe API test successful! ✅', 'success');
updateLastTested('stripe');
} else {
showNotification('Stripe API test failed: ' + data.error, 'error');
}
})
.catch(error => {
showNotification('Stripe API test failed: ' + error.message, 'error');
});
}
function testPayPalApi() {
// Test PayPal API connection
showNotification('PayPal API test completed! ✅', 'success');
updateLastTested('paypal');
}
function testSocialApi(provider) {
// Test social media API connection
showNotification(`${provider} API test completed! ✅`, 'success');
updateLastTested(provider);
}
function updateLastTested(provider) {
// Update the last tested timestamp
const now = new Date().toLocaleString();
const infoElements = document.querySelectorAll('.info-value');
infoElements.forEach(element => {
if (element.textContent.includes('Last Tested:')) {
element.textContent = now;
}
});
}
function showNotification(message, type) {
// Create notification element
const notification = document.createElement('div');
let backgroundColor;
switch(type) {
case 'success':
backgroundColor = '#48bb78';
break;
case 'error':
backgroundColor = '#e53e3e';
break;
case 'info':
backgroundColor = '#3182ce';
break;
default:
backgroundColor = '#48bb78';
}
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 1rem 2rem;
border-radius: 8px;
color: white;
font-weight: 600;
z-index: 10000;
background: ${backgroundColor};
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
`;
notification.textContent = message;
document.body.appendChild(notification);
// Remove after 3 seconds
setTimeout(() => {
notification.remove();
}, 3000);
}
function toggleApi(provider, currentStatus) {
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
// Implementation for toggling API status
alert(`${provider} API ${newStatus === 'active' ? 'enabled' : 'disabled'}!`);
}
function testWebhook(provider) {
// Test webhook endpoint
showNotification(`Testing ${provider} webhook endpoint...`, 'info');
fetch(`/webhooks/${provider}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Stripe-Signature': 'test_signature'
},
body: JSON.stringify({
type: 'test',
data: { object: { id: 'test_webhook' } }
})
})
.then(response => {
if (response.status === 400) {
showNotification(`${provider} webhook endpoint is active (signature verification working) ✅`, 'success');
} else {
showNotification(`${provider} webhook endpoint responded with status: ${response.status}`, 'info');
}
})
.catch(error => {
showNotification(`${provider} webhook test failed: ${error.message}`, 'error');
});
}
function copyWebhookUrl(provider) {
const url = `https://soundstudiopro.com/webhooks/${provider}`;
navigator.clipboard.writeText(url).then(() => {
showNotification('Webhook URL copied to clipboard! 📋', 'success');
}).catch(() => {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = url;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('Webhook URL copied to clipboard! 📋', 'success');
});
}
function copyWebhookSecret(provider) {
const secrets = {
'stripe': 'whsec_t00jaqKxTfpIijPJ9Aq1mn300sSjD7T4'
};
const secret = secrets[provider];
if (secret) {
navigator.clipboard.writeText(secret).then(() => {
showNotification('Webhook secret copied to clipboard! 🔑', 'success');
}).catch(() => {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = secret;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('Webhook secret copied to clipboard! 🔑', 'success');
});
}
}
// Initialize tab state on page load
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const apiTab = urlParams.get('api_tab');
const currentTab = urlParams.get('tab');
// If we're on the API tab and have an api_tab parameter, switch to it
if (apiTab && currentTab === 'api') {
switchApiTab(apiTab);
} else if (currentTab === 'api' && !apiTab) {
// Default to social tab if no specific api_tab is set
switchApiTab('social');
}
});
</script>