475 lines
23 KiB
Twig
475 lines
23 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SEPA-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 text-white" href="/admin/payment/stripe">
|
|
<i class="bi bi-credit-card"></i> Stripe
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active 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">SEPA-Lastschrift 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">Konfigurationsstatus</h5>
|
|
<p class="card-text text-muted">Status der SEPA-Lastschrift Konfiguration</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> Konfiguriert
|
|
{% else %}
|
|
<i class="bi bi-x-circle"></i> Nicht konfiguriert
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="testSEPAConfiguration()">
|
|
<i class="bi bi-arrow-clockwise"></i> Konfiguration 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">SEPA-Einstellungen</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" action="/admin/payment/sepa" id="sepaForm">
|
|
<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">
|
|
SEPA-Lastschrift 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
|
|
</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> SEPA-Lastschrift</h6>
|
|
<p class="mb-0">
|
|
SEPA-Lastschrift ermöglicht automatische Banküberweisungen innerhalb der EU.
|
|
Kunden müssen ein SEPA-Mandat unterschreiben.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="merchant_id" class="form-label">Merchant ID</label>
|
|
<input type="text" class="form-control" id="merchant_id" name="merchant_id"
|
|
value="{{ merchant_id }}" placeholder="Ihre Merchant ID">
|
|
<div class="form-text">
|
|
Ihre SEPA Merchant ID (Geschäftskennung)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="iban" class="form-label">IBAN (Empfänger)</label>
|
|
<input type="text" class="form-control" id="iban" name="iban"
|
|
value="{{ iban }}" placeholder="DE89 3704 0044 0532 0130 00">
|
|
<div class="form-text">
|
|
Ihre Bank-IBAN für eingehende Zahlungen
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-3">
|
|
<label for="bic" class="form-label">BIC/SWIFT (Empfänger)</label>
|
|
<input type="text" class="form-control" id="bic" name="bic"
|
|
value="{{ bic }}" placeholder="COBADEFFXXX">
|
|
<div class="form-text">
|
|
Ihre Bank-BIC für eingehende Zahlungen
|
|
</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>
|
|
|
|
<!-- SEPA Information -->
|
|
<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-info-circle"></i> SEPA-Lastschrift Informationen
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Vorteile:</h6>
|
|
<ul>
|
|
<li>Niedrige Transaktionskosten</li>
|
|
<li>Automatische Zahlungsabwicklung</li>
|
|
<li>EU-weite Gültigkeit</li>
|
|
<li>Hohe Akzeptanz bei Kunden</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Anforderungen:</h6>
|
|
<ul>
|
|
<li>SEPA-Mandat von Kunden</li>
|
|
<li>Gültige IBAN/BIC</li>
|
|
<li>Vorlaufzeit für Zahlungen</li>
|
|
<li>Rücklastschrift-Handling</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h6>SEPA-Mandat Vorlage:</h6>
|
|
<div class="alert alert-warning">
|
|
<strong>Wichtig:</strong> Kunden müssen ein SEPA-Mandat unterschreiben, bevor Sie Lastschriften einziehen können.
|
|
Das Mandat muss folgende Informationen enthalten:
|
|
</div>
|
|
<ul>
|
|
<li>Mandatsreferenz (automatisch generiert)</li>
|
|
<li>Name des Zahlungsempfängers</li>
|
|
<li>IBAN und BIC des Zahlungsempfängers</li>
|
|
<li>Unterschrift des Zahlungspflichtigen</li>
|
|
<li>Datum der Unterschrift</li>
|
|
</ul>
|
|
</div>
|
|
</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>SEPA-Lastschrift einrichten:</h6>
|
|
<ol>
|
|
<li>Kontaktieren Sie Ihre Bank</li>
|
|
<li>Beantragen Sie SEPA-Lastschrift</li>
|
|
<li>Erhalten Sie Ihre IBAN/BIC</li>
|
|
<li>Testen Sie mit kleinen Beträgen</li>
|
|
</ol>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Rechtliche Anforderungen:</h6>
|
|
<ul>
|
|
<li>SEPA-Mandat erforderlich</li>
|
|
<li>Vorankündigung der Lastschrift</li>
|
|
<li>Rücklastschrift-Handling</li>
|
|
<li>Datenschutz-Konformität</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Zahlungsablauf:</h6>
|
|
<ol>
|
|
<li>Kunde unterschreibt SEPA-Mandat</li>
|
|
<li>Lastschrift wird 2-3 Tage vorher angekündigt</li>
|
|
<li>Zahlung wird am Fälligkeitstag eingezogen</li>
|
|
<li>Geld ist nach 1-2 Bankarbeitstagen verfügbar</li>
|
|
</ol>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Sicherheitshinweise:</h6>
|
|
<ul>
|
|
<li>Bewahren Sie IBAN/BIC sicher auf</li>
|
|
<li>Überwachen Sie Rücklastschriften</li>
|
|
<li>Dokumentieren Sie alle Mandate</li>
|
|
<li>Testen Sie regelmäßig das System</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 SEPA configuration
|
|
function testSEPAConfiguration() {
|
|
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=sepa&csrf_token={{ csrf_token }}'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status) {
|
|
showAlert('Konfiguration erfolgreich!', 'success');
|
|
} else {
|
|
showAlert('Konfiguration fehlgeschlagen. Überprüfen Sie Ihre Einstellungen.', 'danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('SEPA Test Fehler:', error);
|
|
showAlert('Fehler beim Testen der Konfiguration.', '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);
|
|
}
|
|
|
|
// IBAN validation
|
|
function validateIBAN(iban) {
|
|
iban = iban.replace(/\s/g, '').toUpperCase();
|
|
|
|
if (iban.length < 15 || iban.length > 34) {
|
|
return false;
|
|
}
|
|
|
|
const country = iban.substring(0, 2);
|
|
const check = iban.substring(2, 4);
|
|
const account = iban.substring(4);
|
|
|
|
const rearranged = account + country + check;
|
|
|
|
const converted = rearranged.replace(/[A-Z]/g, function(match) {
|
|
return (match.charCodeAt(0) - 55).toString();
|
|
});
|
|
|
|
return parseInt(converted) % 97 === 1;
|
|
}
|
|
|
|
// BIC validation
|
|
function validateBIC(bic) {
|
|
bic = bic.toUpperCase();
|
|
|
|
if (bic.length !== 8 && bic.length !== 11) {
|
|
return false;
|
|
}
|
|
|
|
return /^[A-Z]{4}[A-Z]{2}[A-Z0-9]{2}([A-Z0-9]{3})?$/.test(bic);
|
|
}
|
|
|
|
// Form validation
|
|
document.getElementById('sepaForm').addEventListener('submit', function(e) {
|
|
const enabled = document.getElementById('enabled').checked;
|
|
const merchantId = document.getElementById('merchant_id').value.trim();
|
|
const iban = document.getElementById('iban').value.trim();
|
|
const bic = document.getElementById('bic').value.trim();
|
|
|
|
if (enabled) {
|
|
if (!merchantId) {
|
|
e.preventDefault();
|
|
showAlert('Merchant ID ist erforderlich wenn SEPA aktiviert ist.', 'danger');
|
|
return;
|
|
}
|
|
if (!iban) {
|
|
e.preventDefault();
|
|
showAlert('IBAN ist erforderlich wenn SEPA aktiviert ist.', 'danger');
|
|
return;
|
|
}
|
|
if (!bic) {
|
|
e.preventDefault();
|
|
showAlert('BIC ist erforderlich wenn SEPA aktiviert ist.', 'danger');
|
|
return;
|
|
}
|
|
|
|
// Validate IBAN
|
|
if (!validateIBAN(iban)) {
|
|
e.preventDefault();
|
|
showAlert('Ungültige IBAN. Bitte überprüfen Sie das Format.', 'danger');
|
|
return;
|
|
}
|
|
|
|
// Validate BIC
|
|
if (!validateBIC(bic)) {
|
|
e.preventDefault();
|
|
showAlert('Ungültige BIC. Bitte überprüfen Sie das Format.', 'danger');
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Auto-format IBAN
|
|
document.getElementById('iban').addEventListener('input', function() {
|
|
let value = this.value.replace(/\s/g, '').toUpperCase();
|
|
if (value.length > 0) {
|
|
value = value.match(/.{1,4}/g).join(' ');
|
|
}
|
|
this.value = value;
|
|
});
|
|
|
|
// Auto-format BIC
|
|
document.getElementById('bic').addEventListener('input', function() {
|
|
this.value = this.value.toUpperCase();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |