357 lines
18 KiB
Twig
357 lines
18 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PayPal-Konfiguration - Webshop Admin</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<nav class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
|
|
<div class="position-sticky pt-3">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link text-white" href="/admin/dashboard">
|
|
<i class="bi bi-speedometer2"></i> Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-white" href="/admin/payment">
|
|
<i class="bi bi-credit-card"></i> Zahlungen
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active text-white" href="/admin/payment/paypal">
|
|
<i class="bi bi-paypal"></i> PayPal
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-white" href="/admin/payment/stripe">
|
|
<i class="bi bi-credit-card"></i> Stripe
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-white" href="/admin/payment/sepa">
|
|
<i class="bi bi-bank"></i> SEPA
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main content -->
|
|
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">PayPal-Konfiguration</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0">
|
|
<div class="btn-group me-2">
|
|
<a href="/admin/payment" class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i> Zurück
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flash Messages -->
|
|
{% if success_messages %}
|
|
{% for message in success_messages %}
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% if error_messages %}
|
|
{% for message in error_messages %}
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<!-- Connection Status -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h5 class="card-title">Verbindungsstatus</h5>
|
|
<p class="card-text text-muted">Aktueller Status der PayPal-Verbindung</p>
|
|
</div>
|
|
<div class="text-end">
|
|
<span class="badge {% if connection_status %}bg-success{% else %}bg-danger{% endif %} fs-6">
|
|
{% if connection_status %}
|
|
<i class="bi bi-check-circle"></i> Verbunden
|
|
{% else %}
|
|
<i class="bi bi-x-circle"></i> Nicht verbunden
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="testPayPalConnection()">
|
|
<i class="bi bi-arrow-clockwise"></i> Verbindung testen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Form -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">PayPal-Einstellungen</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" action="/admin/payment/paypal">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="enabled" name="enabled" {% if enabled %}checked{% endif %}>
|
|
<label class="form-check-label" for="enabled">
|
|
PayPal aktivieren
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="sandbox" name="sandbox" {% if sandbox %}checked{% endif %}>
|
|
<label class="form-check-label" for="sandbox">
|
|
Sandbox-Modus (Testumgebung)
|
|
</label>
|
|
</div>
|
|
<div class="form-text">
|
|
Aktivieren Sie diese Option für Tests. Deaktivieren Sie sie für den Live-Betrieb.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="alert alert-info">
|
|
<h6><i class="bi bi-info-circle"></i> PayPal-Konfiguration</h6>
|
|
<p class="mb-0">
|
|
Um PayPal zu verwenden, benötigen Sie ein PayPal Business-Konto und die entsprechenden API-Zugangsdaten.
|
|
Diese erhalten Sie im PayPal Developer Portal.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="client_id" class="form-label">Client ID</label>
|
|
<input type="text" class="form-control" id="client_id" name="client_id"
|
|
value="{{ client_id }}" placeholder="PayPal Client ID">
|
|
<div class="form-text">
|
|
Ihre PayPal Client ID aus dem Developer Portal
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="client_secret" class="form-label">Client Secret</label>
|
|
<input type="password" class="form-control" id="client_secret" name="client_secret"
|
|
value="{{ client_secret }}" placeholder="PayPal Client Secret">
|
|
<div class="form-text">
|
|
Ihr PayPal Client Secret aus dem Developer Portal
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="webhook_id" class="form-label">Webhook ID (Optional)</label>
|
|
<input type="text" class="form-control" id="webhook_id" name="webhook_id"
|
|
value="{{ webhook_id }}" placeholder="PayPal Webhook ID">
|
|
<div class="form-text">
|
|
Webhook ID für automatische Zahlungsbestätigungen
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="bi bi-save"></i> Konfiguration speichern
|
|
</button>
|
|
<a href="/admin/payment" class="btn btn-secondary">
|
|
<i class="bi bi-x"></i> Abbrechen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="bi bi-question-circle"></i> Hilfe & Dokumentation
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>PayPal Business-Konto einrichten:</h6>
|
|
<ol>
|
|
<li>Besuchen Sie <a href="https://www.paypal.com/business" target="_blank">paypal.com/business</a></li>
|
|
<li>Erstellen Sie ein Business-Konto</li>
|
|
<li>Verifizieren Sie Ihr Konto</li>
|
|
</ol>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>API-Zugangsdaten erhalten:</h6>
|
|
<ol>
|
|
<li>Besuchen Sie das <a href="https://developer.paypal.com" target="_blank">PayPal Developer Portal</a></li>
|
|
<li>Erstellen Sie eine neue App</li>
|
|
<li>Kopieren Sie Client ID und Secret</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Testumgebung vs. Live-Betrieb:</h6>
|
|
<ul>
|
|
<li><strong>Sandbox-Modus:</strong> Für Tests und Entwicklung</li>
|
|
<li><strong>Live-Modus:</strong> Für echte Zahlungen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Sicherheitshinweise:</h6>
|
|
<ul>
|
|
<li>Bewahren Sie Client Secret sicher auf</li>
|
|
<li>Verwenden Sie HTTPS für alle Verbindungen</li>
|
|
<li>Überwachen Sie regelmäßig die Transaktionen</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Test PayPal connection
|
|
function testPayPalConnection() {
|
|
const button = event.target;
|
|
const originalText = button.innerHTML;
|
|
|
|
button.disabled = true;
|
|
button.innerHTML = '<i class="bi bi-arrow-clockwise spin"></i> Teste...';
|
|
|
|
fetch('/admin/payment/test-provider', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'provider=paypal&csrf_token={{ csrf_token }}'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status) {
|
|
showAlert('Verbindung erfolgreich!', 'success');
|
|
} else {
|
|
showAlert('Verbindung fehlgeschlagen. Überprüfen Sie Ihre Einstellungen.', 'danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('PayPal Test Fehler:', error);
|
|
showAlert('Fehler beim Testen der Verbindung.', 'danger');
|
|
})
|
|
.finally(() => {
|
|
button.disabled = false;
|
|
button.innerHTML = originalText;
|
|
});
|
|
}
|
|
|
|
// Show alert message
|
|
function showAlert(message, type) {
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
const container = document.querySelector('main');
|
|
container.insertBefore(alertDiv, container.firstChild);
|
|
|
|
// Auto-remove after 5 seconds
|
|
setTimeout(() => {
|
|
if (alertDiv.parentNode) {
|
|
alertDiv.remove();
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
// Toggle password visibility
|
|
document.getElementById('client_secret').addEventListener('input', function() {
|
|
if (this.value.length > 0) {
|
|
this.type = 'password';
|
|
}
|
|
});
|
|
|
|
// Form validation
|
|
document.querySelector('form').addEventListener('submit', function(e) {
|
|
const enabled = document.getElementById('enabled').checked;
|
|
const clientId = document.getElementById('client_id').value.trim();
|
|
const clientSecret = document.getElementById('client_secret').value.trim();
|
|
|
|
if (enabled) {
|
|
if (!clientId) {
|
|
e.preventDefault();
|
|
showAlert('Client ID ist erforderlich wenn PayPal aktiviert ist.', 'danger');
|
|
return;
|
|
}
|
|
if (!clientSecret) {
|
|
e.preventDefault();
|
|
showAlert('Client Secret ist erforderlich wenn PayPal aktiviert ist.', 'danger');
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |