406 lines
21 KiB
Twig
406 lines
21 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Stripe-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 text-white" href="/admin/payment/paypal">
|
|
<i class="bi bi-paypal"></i> PayPal
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active 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">Stripe-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 Stripe-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="testStripeConnection()">
|
|
<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">Stripe-Einstellungen</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" action="/admin/payment/stripe">
|
|
<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">
|
|
Stripe aktivieren
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="test_mode" name="test_mode" {% if test_mode %}checked{% endif %}>
|
|
<label class="form-check-label" for="test_mode">
|
|
Test-Modus (Testkarten)
|
|
</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> Stripe-Konfiguration</h6>
|
|
<p class="mb-0">
|
|
Stripe ermöglicht Kreditkarten-Zahlungen, Apple Pay, Google Pay und weitere Zahlungsmethoden.
|
|
Registrieren Sie sich bei Stripe und erhalten Sie Ihre API-Schlüssel.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="publishable_key" class="form-label">Publishable Key</label>
|
|
<input type="text" class="form-control" id="publishable_key" name="publishable_key"
|
|
value="{{ publishable_key }}" placeholder="pk_test_... oder pk_live_...">
|
|
<div class="form-text">
|
|
Ihr Stripe Publishable Key (öffentlich)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="secret_key" class="form-label">Secret Key</label>
|
|
<input type="password" class="form-control" id="secret_key" name="secret_key"
|
|
value="{{ secret_key }}" placeholder="sk_test_... oder sk_live_...">
|
|
<div class="form-text">
|
|
Ihr Stripe Secret Key (geheim)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="webhook_secret" class="form-label">Webhook Secret (Optional)</label>
|
|
<input type="password" class="form-control" id="webhook_secret" name="webhook_secret"
|
|
value="{{ webhook_secret }}" placeholder="whsec_...">
|
|
<div class="form-text">
|
|
Webhook Secret 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>
|
|
|
|
<!-- Test Cards 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-credit-card"></i> Testkarten (Test-Modus)
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Erfolgreiche Zahlungen:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><code>4242 4242 4242 4242</code> - Visa</li>
|
|
<li><code>5555 5555 5555 4444</code> - Mastercard</li>
|
|
<li><code>3782 822463 10005</code> - American Express</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Fehlgeschlagene Zahlungen:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><code>4000 0000 0000 0002</code> - Abgelehnt</li>
|
|
<li><code>4000 0000 0000 9995</code> - Unzureichende Mittel</li>
|
|
<li><code>4000 0000 0000 9987</code> - Karte abgelehnt</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<small class="text-muted">
|
|
<strong>Hinweis:</strong> Diese Testkarten funktionieren nur im Test-Modus.
|
|
Für Live-Tests verwenden Sie echte Kreditkarten.
|
|
</small>
|
|
</div>
|
|
</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>Stripe-Konto einrichten:</h6>
|
|
<ol>
|
|
<li>Besuchen Sie <a href="https://stripe.com" target="_blank">stripe.com</a></li>
|
|
<li>Erstellen Sie ein Stripe-Konto</li>
|
|
<li>Verifizieren Sie Ihr Unternehmen</li>
|
|
<li>Erhalten Sie Ihre API-Schlüssel</li>
|
|
</ol>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Webhook einrichten:</h6>
|
|
<ol>
|
|
<li>Gehen Sie zu Stripe Dashboard → Webhooks</li>
|
|
<li>Erstellen Sie einen neuen Webhook</li>
|
|
<li>URL: <code>https://ihre-domain.com/webhook/stripe</code></li>
|
|
<li>Events: <code>payment_intent.succeeded</code>, <code>payment_intent.payment_failed</code></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Unterstützte Zahlungsmethoden:</h6>
|
|
<ul>
|
|
<li>Visa, Mastercard, American Express</li>
|
|
<li>Apple Pay, Google Pay</li>
|
|
<li>SEPA Direct Debit</li>
|
|
<li>Klarna, iDEAL, Sofort</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Sicherheitshinweise:</h6>
|
|
<ul>
|
|
<li>Bewahren Sie Secret Key sicher auf</li>
|
|
<li>Verwenden Sie HTTPS für alle Verbindungen</li>
|
|
<li>Überwachen Sie Webhook-Events</li>
|
|
<li>Testen Sie regelmäßig mit Testkarten</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 Stripe connection
|
|
function testStripeConnection() {
|
|
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=stripe&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('Stripe 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);
|
|
}
|
|
|
|
// Form validation
|
|
document.querySelector('form').addEventListener('submit', function(e) {
|
|
const enabled = document.getElementById('enabled').checked;
|
|
const publishableKey = document.getElementById('publishable_key').value.trim();
|
|
const secretKey = document.getElementById('secret_key').value.trim();
|
|
|
|
if (enabled) {
|
|
if (!publishableKey) {
|
|
e.preventDefault();
|
|
showAlert('Publishable Key ist erforderlich wenn Stripe aktiviert ist.', 'danger');
|
|
return;
|
|
}
|
|
if (!secretKey) {
|
|
e.preventDefault();
|
|
showAlert('Secret Key ist erforderlich wenn Stripe aktiviert ist.', 'danger');
|
|
return;
|
|
}
|
|
|
|
// Validate key format
|
|
if (!publishableKey.startsWith('pk_test_') && !publishableKey.startsWith('pk_live_')) {
|
|
e.preventDefault();
|
|
showAlert('Publishable Key hat ein ungültiges Format.', 'danger');
|
|
return;
|
|
}
|
|
if (!secretKey.startsWith('sk_test_') && !secretKey.startsWith('sk_live_')) {
|
|
e.preventDefault();
|
|
showAlert('Secret Key hat ein ungültiges Format.', 'danger');
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |