Overview of active payment methode

Reviewed-on: #12

app/Domains/Admin/Actions/CreateTenant/CreateTenantAction.php

@@ -33,7 +33,7 @@ class CreateTenantAction
 
         $paymentMethodDefaults = PaymentMethod::defaults();
         foreach (PaymentMethod::all() as $paymentMethod) {
-            $defaults = $paymentMethodDefaults[$paymentMethod->slug] ?? ['name' => $paymentMethod->slug, 'description' => null];
+            $defaults = $paymentMethodDefaults[$paymentMethod->slug] ?? ['name' => $paymentMethod->slug, 'description' => null, 'configuration' => []];
 
             AvailablePaymentMethod::create([
                 'tenant' => $tenant->slug,
@@ -41,6 +41,7 @@ class CreateTenantAction
                 'name' => $defaults['name'],
                 'description' => $defaults['description'],
                 'active' => true,
+                'configuration' => PaymentMethod::sanitizeConfiguration($paymentMethod->slug, $defaults['configuration'] ?? []),
             ]);
         }
 

app/Domains/Admin/Actions/UpdateTenantPayment/UpdateTenantPaymentAction.php

@@ -2,6 +2,10 @@
 
 namespace App\Domains\Admin\Actions\UpdateTenantPayment;
 
+use App\Models\AvailablePaymentMethod;
+use App\Models\PaymentMethod;
+use App\Scopes\SiteScope;
+
 class UpdateTenantPaymentAction
 {
     public function __construct(private UpdateTenantPaymentRequest $request)
@@ -18,9 +22,41 @@ class UpdateTenantPaymentAction
             'account_name' => $this->request->accountName,
         ]);
 
+        $this->syncTransferPaymentConfiguration();
+
         $response->success = true;
-        $response->message = 'Bezahldaten wurden gespeichert.';
+        $response->message = 'IBAN-Informationen wurden gespeichert.';
 
         return $response;
     }
+
+    /**
+     * Übernimmt die eingegebenen IBAN-Daten direkt in die Tenant-Config der Überweisungs-Zahlungsart
+     * (Kontoinhaber/IBAN/BIC), damit sie nicht doppelt gepflegt werden müssen. Bestehende weitere
+     * Config-Werte (z.B. Symbol) bleiben erhalten. Der Ziel-Tenant kann ein verwalteter sein, daher
+     * ohne SiteScope explizit auf den Tenant-Slug gefiltert.
+     */
+    private function syncTransferPaymentConfiguration(): void
+    {
+        $slug = PaymentMethod::PAYMENT_ACCOUNT_TRANSACTION;
+
+        $method = AvailablePaymentMethod::withoutGlobalScope(SiteScope::class)
+            ->where('tenant', $this->request->tenant->slug)
+            ->where('slug', $slug)
+            ->first();
+
+        if ($method === null) {
+            return;
+        }
+
+        $method->configuration = PaymentMethod::sanitizeConfiguration($slug, array_merge(
+            $method->configuration ?? [],
+            [
+                'account_owner' => $this->request->accountName,
+                'iban' => $this->request->accountIban,
+                'bic' => $this->request->accountBic,
+            ],
+        ));
+        $method->save();
+    }
 }

app/Domains/Admin/Views/Partials/TenantPaymentMethods.vue

@@ -2,6 +2,8 @@
 import {computed, ref} from 'vue';
 import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
 import TextEditor from "../../../../Views/Components/TextEditor.vue";
+import RichSelectBox from "../../../../Views/Components/RichSelectBox.vue";
+import {PAYMENT_METHOD_ICONS} from "../../../../../resources/js/constants/paymentMethodIcons.js";
 import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
 import {toast} from "vue3-toastify";
 
@@ -90,15 +92,18 @@ async function save() {
 
     <FullScreenModal :show="editing !== null" @close="close">
         <template v-if="editing">
-            <h2>Zahlungsweg bearbeiten</h2>
+            <h2>Zahlungsmodul bearbeiten</h2>
             <table class="data-table">
                 <tr><th>Name</th><td><input type="text" v-model="form.name" class="form-input" /></td></tr>
                 <tr><th>Beschreibung</th><td><textarea v-model="form.description" class="form-input"></textarea></td></tr>
                 <tr v-for="option in editing.optionsSchema ?? []" :key="option.name">
                     <th>{{ option.label }}<span v-if="option.required" class="required-marker">*</span></th>
                     <td>
-                        <TextEditor v-if="option.type === 'richtext'" v-model="form.configuration[option.name]"/>
+                        <RichSelectBox v-if="option.type === 'icon'" v-model="form.configuration[option.name]"
+                                       :options="PAYMENT_METHOD_ICONS" placeholder="Symbol wählen…"/>
+                        <TextEditor v-else-if="option.type === 'richtext'" v-model="form.configuration[option.name]"/>
                         <input v-else type="text" v-model="form.configuration[option.name]" class="form-input"/>
+                        <span v-if="option.hint" class="option-hint">{{ option.hint }}</span>
                     </td>
                 </tr>
                 <tr>
@@ -217,6 +222,13 @@ async function save() {
     color: #b45309;
 }
 
+.option-hint {
+    display: block;
+    margin-top: 4px;
+    font-size: 0.8rem;
+    color: #6b7280;
+}
+
 .btn-group {
     display: flex;
     gap: 10px;

app/Domains/Admin/Views/TenantData.vue

@@ -19,12 +19,12 @@ const tabs = [
         endpoint: '/api/v1/admin/tenant/contact',
     },
     {
-        title: 'Bezahldaten',
+        title: 'IBAN-Informationen',
         component: TenantPayment,
         endpoint: '/api/v1/admin/tenant/payment',
     },
     {
-        title: 'Zahlungswege',
+        title: 'Zahlungsmodule',
         component: TenantPaymentMethods,
         endpoint: '/api/v1/admin/tenant/payment-methods',
     },

app/Domains/Admin/Views/TenantEdit.vue

@@ -26,7 +26,7 @@ const tabs = [
         endpoint: '/api/v1/admin/tenants/' + slug + '/contact',
     },
     {
-        title: 'Bezahldaten',
+        title: 'IBAN-Informationen',
         component: TenantPayment,
         endpoint: '/api/v1/admin/tenants/' + slug + '/payment',
     },

app/Domains/Event/Actions/SetPaymentMethods/SetPaymentMethodsCommand.php

@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Domains\Event\Actions\SetPaymentMethods;
+
+use App\Models\AvailablePaymentMethod;
+use App\Models\PaymentMethod;
+use App\RelationModels\EventPaymentMethods;
+
+class SetPaymentMethodsCommand
+{
+    public SetPaymentMethodsRequest $request;
+
+    public function __construct(SetPaymentMethodsRequest $request)
+    {
+        $this->request = $request;
+    }
+
+    public function execute(): SetPaymentMethodsResponse
+    {
+        $response = new SetPaymentMethodsResponse();
+
+        if (count($this->request->paymentMethods) === 0) {
+            $response->success = false;
+            $response->message = 'Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.';
+            return $response;
+        }
+
+        $this->syncPaymentMethods();
+
+        $this->request->event->save();
+        $response->success = true;
+
+        return $response;
+    }
+
+    /**
+     * Differenzieller Sync der Zahlungsmethoden mit Snapshot-Copy-Semantik:
+     * - entfernte Methoden werden gelöscht,
+     * - neue Methoden erhalten einen Snapshot der Tenant-Config (oder eines expliziten Overrides),
+     * - bestehende Methoden behalten ihre pro-Event-Config, sofern kein Override übergeben wird.
+     */
+    private function syncPaymentMethods(): void
+    {
+        $event = $this->request->event;
+        $desiredSlugs = $this->request->paymentMethods;
+        $overrides = $this->request->paymentMethodConfigurations;
+
+        $existing = EventPaymentMethods::where('event_id', $event->id)->get()->keyBy('slug');
+
+        // Nicht mehr gewünschte Methoden entfernen.
+        foreach ($existing as $slug => $row) {
+            if (!in_array($slug, $desiredSlugs, true)) {
+                $row->delete();
+            }
+        }
+
+        // Tenant-Instanzen (für Snapshot-Kopie neuer Methoden) laden.
+        $tenantMethods = AvailablePaymentMethod::whereIn('slug', $desiredSlugs)->get()->keyBy('slug');
+
+        foreach ($desiredSlugs as $slug) {
+            $override = $overrides[$slug] ?? null;
+
+            if (isset($existing[$slug])) {
+                // Bestehende Zuweisung: Config nur bei explizitem Override anpassen, sonst unverändert lassen.
+                if ($override !== null) {
+                    $row = $existing[$slug];
+                    $row->configuration = PaymentMethod::sanitizeConfiguration($slug, $override);
+                    $row->save();
+                }
+                continue;
+            }
+
+            // Neue Zuweisung: expliziter Override oder Snapshot der Tenant-Config.
+            $snapshot = $override ?? ($tenantMethods[$slug]->configuration ?? []);
+            EventPaymentMethods::create([
+                'event_id' => $event->id,
+                'slug' => $slug,
+                'configuration' => PaymentMethod::sanitizeConfiguration($slug, $snapshot ?? []),
+            ]);
+        }
+    }
+}

app/Domains/Event/Actions/SetPaymentMethods/SetPaymentMethodsRequest.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Domains\Event\Actions\SetPaymentMethods;
+
+use App\Models\Event;
+
+class SetPaymentMethodsRequest
+{
+    public Event $event;
+
+    /**
+     * Gewünschte Zahlungsmethoden-Slugs für das Event.
+     *
+     * @var array<int, string>
+     */
+    public array $paymentMethods;
+
+    /**
+     * Optionale pro-Event-Config-Overrides je Zahlungsmethode: [slug => [option => value]].
+     * Fehlt ein Slug, bleibt die bestehende Config erhalten bzw. wird beim ersten Zuweisen
+     * aus der Tenant-Config als Snapshot kopiert.
+     *
+     * @var array<string, array<string, mixed>>
+     */
+    public array $paymentMethodConfigurations;
+
+    public function __construct(Event $event, array $paymentMethods, array $paymentMethodConfigurations = [])
+    {
+        $this->event = $event;
+        $this->paymentMethods = $paymentMethods;
+        $this->paymentMethodConfigurations = $paymentMethodConfigurations;
+    }
+}

app/Domains/Event/Actions/SetPaymentMethods/SetPaymentMethodsResponse.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace App\Domains\Event\Actions\SetPaymentMethods;
+
+class SetPaymentMethodsResponse
+{
+    public bool $success = false;
+    public string $message = '';
+}

app/Domains/Event/Actions/SignUp/SignUpCommand.php

@@ -4,6 +4,7 @@ namespace App\Domains\Event\Actions\SignUp;
 
 use App\Enumerations\EatingHabit;
 use App\Enumerations\EfzStatus;
+use App\EventPaymentModules\EventPaymentModuleRegistry;
 use App\ValueObjects\Age;
 use Illuminate\Support\Str;
 
@@ -14,6 +15,18 @@ class SignUpCommand {
     public function execute() : SignUpResponse {
         $response = new SignUpResponse();
 
+        // Teilnehmer-Eingaben der gewählten Zahlungsart gegen das Modul-Schema absichern.
+        $module = $this->request->paymentMethod !== null
+            ? EventPaymentModuleRegistry::forSlug($this->request->paymentMethod)
+            : null;
+        $paymentOptions = $module?->sanitizeParticipantOptions($this->request->paymentOptions) ?? [];
+
+        if ($module !== null && !$module->participantOptionsComplete($paymentOptions)) {
+            $response->success = false;
+            $response->message = 'Bitte alle erforderlichen Zahlungsangaben ausfüllen.';
+            return $response;
+        }
+
         $eatingHabit = match ($this->request->eating_habit) {
             'vegan' => EatingHabit::EATING_HABIT_VEGAN,
             'vegetarian' => EatingHabit::EATING_HABIT_VEGETARIAN,
@@ -62,6 +75,7 @@ class SignUpCommand {
                 'amount' => $this->request->amount,
                 'payment_purpose' => $this->request->event->name . ' - Beitrag ' . $this->request->firstname . ' ' . $this->request->lastname,
                 'payment_method' => $this->request->paymentMethod,
+                'payment_options' => $paymentOptions,
                 'efz_status' => $participantAge->isfullAged() ? EfzStatus::EFZ_STATUS_NOT_CHECKED : EfzStatus::EFZ_STATUS_NOT_REQUIRED,
             ]
         );

app/Domains/Event/Actions/SignUp/SignUpRequest.php

@@ -2,7 +2,6 @@
 
 namespace App\Domains\Event\Actions\SignUp;
 
-use App\Enumerations\ParticipationType;
 use App\Models\Event;
 use App\Models\Tenant;
 use App\ValueObjects\Amount;
@@ -46,6 +45,7 @@ class SignUpRequest {
         public ?string $notes,
         public Amount $amount,
         public ?string $paymentMethod,
+        public array $paymentOptions = [],
     ) {
     }
 }

app/Domains/Event/Actions/SignUp/SignUpResponse.php

@@ -7,6 +7,7 @@ use App\Models\EventParticipant;
 class SignUpResponse {
     public bool $success;
     public ?EventParticipant $participant;
+    public ?string $message = null;
 
     public function __construct() {
         $this->success = false;

app/Domains/Event/Actions/UpdateEvent/UpdateEventCommand.php

@@ -2,10 +2,6 @@
 
 namespace App\Domains\Event\Actions\UpdateEvent;
 
-use App\Models\AvailablePaymentMethod;
-use App\Models\PaymentMethod;
-use App\RelationModels\EventPaymentMethods;
-
 class UpdateEventCommand {
     public UpdateEventRequest $request;
     public function __construct(UpdateEventRequest $request) {
@@ -15,12 +11,6 @@ class UpdateEventCommand {
     public function execute() : UpdateEventResponse {
         $response = new UpdateEventResponse();
 
-        if (count($this->request->paymentMethods) === 0) {
-            $response->success = false;
-            $response->message = 'Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.';
-            return $response;
-        }
-
         $this->request->event->name = $this->request->eventName;
         $this->request->event->location = $this->request->eventLocation;
         $this->request->event->postal_code = $this->request->postalCode;
@@ -45,58 +35,9 @@ class UpdateEventCommand {
             $this->request->event->localGroups()->attach($contributingLocalGroup);
         }
 
-        $this->syncPaymentMethods();
-
         $this->request->event->save();
         $response->success = true;
 
         return $response;
     }
-
-    /**
-     * Differenzieller Sync der Zahlungsmethoden mit Snapshot-Copy-Semantik:
-     * - entfernte Methoden werden gelöscht,
-     * - neue Methoden erhalten einen Snapshot der Tenant-Config (oder eines expliziten Overrides),
-     * - bestehende Methoden behalten ihre pro-Event-Config, sofern kein Override übergeben wird.
-     */
-    private function syncPaymentMethods(): void
-    {
-        $event = $this->request->event;
-        $desiredSlugs = $this->request->paymentMethods;
-        $overrides = $this->request->paymentMethodConfigurations;
-
-        $existing = EventPaymentMethods::where('event_id', $event->id)->get()->keyBy('slug');
-
-        // Nicht mehr gewünschte Methoden entfernen.
-        foreach ($existing as $slug => $row) {
-            if (!in_array($slug, $desiredSlugs, true)) {
-                $row->delete();
-            }
-        }
-
-        // Tenant-Instanzen (für Snapshot-Kopie neuer Methoden) laden.
-        $tenantMethods = AvailablePaymentMethod::whereIn('slug', $desiredSlugs)->get()->keyBy('slug');
-
-        foreach ($desiredSlugs as $slug) {
-            $override = $overrides[$slug] ?? null;
-
-            if (isset($existing[$slug])) {
-                // Bestehende Zuweisung: Config nur bei explizitem Override anpassen, sonst unverändert lassen.
-                if ($override !== null) {
-                    $row = $existing[$slug];
-                    $row->configuration = PaymentMethod::sanitizeConfiguration($slug, $override);
-                    $row->save();
-                }
-                continue;
-            }
-
-            // Neue Zuweisung: expliziter Override oder Snapshot der Tenant-Config.
-            $snapshot = $override ?? ($tenantMethods[$slug]->configuration ?? []);
-            EventPaymentMethods::create([
-                'event_id' => $event->id,
-                'slug' => $slug,
-                'configuration' => PaymentMethod::sanitizeConfiguration($slug, $snapshot ?? []),
-            ]);
-        }
-    }
 }

app/Domains/Event/Actions/UpdateEvent/UpdateEventRequest.php

@@ -21,18 +21,9 @@ class UpdateEventRequest {
     public Amount $supportPerPerson;
     public array $contributingLocalGroups;
     public array $eatingHabits;
-    public array $paymentMethods;
 
-    /**
+    public function __construct(Event $event, string $eventName, string $eventLocation, string $postalCode, string $email, DateTime $earlyBirdEnd, DateTime $registrationFinalEnd, int $alcoholicsAge, bool $sendWeeklyReports, bool $registrationAllowed, Amount $flatSupport, Amount $supportPerPerson, array $contributingLocalGroups, array $eatingHabits)
-     * Optionale pro-Event-Config-Overrides je Zahlungsmethode: [slug => [option => value]].
+    {
-     * Fehlt ein Slug, bleibt die bestehende Config erhalten bzw. wird beim ersten Zuweisen
-     * aus der Tenant-Config als Snapshot kopiert.
-     *
-     * @var array<string, array<string, mixed>>
-     */
-    public array $paymentMethodConfigurations;
-
-    public function __construct(Event $event, string $eventName, string $eventLocation, string $postalCode, string $email, DateTime $earlyBirdEnd, DateTime $registrationFinalEnd, int $alcoholicsAge, bool $sendWeeklyReports, bool $registrationAllowed, Amount $flatSupport, Amount $supportPerPerson, array $contributingLocalGroups, array $eatingHabits, array $paymentMethods, array $paymentMethodConfigurations = []) {
         $this->event = $event;
         $this->eventName = $eventName;
         $this->eventLocation = $eventLocation;
@@ -47,7 +38,5 @@ class UpdateEventRequest {
         $this->supportPerPerson = $supportPerPerson;
         $this->contributingLocalGroups = $contributingLocalGroups;
         $this->eatingHabits = $eatingHabits;
-        $this->paymentMethods = $paymentMethods;
-        $this->paymentMethodConfigurations = $paymentMethodConfigurations;
     }
 }

app/Domains/Event/Controllers/DetailsController.php

@@ -4,22 +4,21 @@ namespace App\Domains\Event\Controllers;
 
 use App\Domains\Event\Actions\SetParticipationFees\SetParticipationFeesCommand;
 use App\Domains\Event\Actions\SetParticipationFees\SetParticipationFeesRequest;
+use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsCommand;
+use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsRequest;
 use App\Domains\Event\Actions\UpdateEvent\UpdateEventCommand;
 use App\Domains\Event\Actions\UpdateEvent\UpdateEventRequest;
 use App\Domains\Event\Actions\UpdateManagers\UpdateManagersCommand;
 use App\Domains\Event\Actions\UpdateManagers\UpdateManagersRequest;
 use App\Enumerations\ParticipationFeeType;
 use App\Enumerations\ParticipationType;
-use App\Models\EventParticipant;
 use App\Providers\InertiaProvider;
 use App\Providers\PdfGenerateAndDownloadProvider;
-use App\Resources\EventResource;
 use App\Scopes\CommonController;
 use App\ValueObjects\Amount;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
-use function Symfony\Component\String\b;
 
 class DetailsController extends CommonController {
     public function __invoke(string $eventId) {
@@ -42,8 +41,6 @@ class DetailsController extends CommonController {
 
         $contributinLocalGroups = $request->input('contributingLocalGroups');
         $eatingHabits = $request->input('eatingHabits');
-        $paymentMethods = $request->input('paymentMethods');
-        $paymentMethodConfigurations = (array) $request->input('paymentMethodConfigurations', []);
 
         $eventUpdateRequest = new UpdateEventRequest(
             $event,
@@ -59,9 +56,7 @@ class DetailsController extends CommonController {
             $flatSupport,
             $supportPerPerson,
             $contributinLocalGroups,
-            $eatingHabits,
+            $eatingHabits
-            $paymentMethods,
-            $paymentMethodConfigurations
         );
 
         $eventUpdateCommand = new UpdateEventCommand($eventUpdateRequest);
@@ -70,6 +65,20 @@ class DetailsController extends CommonController {
         return response()->json(['status' => $response->success ? 'success' : 'error', 'message' => $response->message]);
     }
 
+    public function updatePaymentMethods(int $eventId, Request $request): JsonResponse
+    {
+        $event = $this->events->getById($eventId);
+
+        $paymentMethods = $request->input('paymentMethods', []);
+        $paymentMethodConfigurations = (array)$request->input('paymentMethodConfigurations', []);
+
+        $setPaymentMethodsRequest = new SetPaymentMethodsRequest($event, $paymentMethods, $paymentMethodConfigurations);
+        $setPaymentMethodsCommand = new SetPaymentMethodsCommand($setPaymentMethodsRequest);
+        $response = $setPaymentMethodsCommand->execute();
+
+        return response()->json(['status' => $response->success ? 'success' : 'error', 'message' => $response->message]);
+    }
+
     public function updateEventManagers(int $eventId, Request $request) : JsonResponse {
         $event = $this->events->getById($eventId);
 

app/Domains/Event/Controllers/SignupController.php

@@ -26,10 +26,8 @@ class SignupController extends CommonController {
 
         $eventModel = $this->events->getByIdentifier($eventId, false);
         $event = $eventModel?->toResource()->toArray($request);
-        // Aktuell ist genau eine aktive Zahlungsmethode je Event vorgesehen; wird bereits beim Start
+        // Die (aktiven) Zahlungsmethoden stehen dem Frontend über $event['paymentMethods'] zur Verfügung;
-        // der Anmeldung ermittelt und ans Frontend durchgereicht, statt erst bei der Erstellung des
+        // die Auswahl trifft der/die Teilnehmer\*in im Anmeldeschritt "Zahlungsart".
-        // Teilnehmenden (siehe SignUpCommand).
-        $paymentMethod = $eventModel?->paymentMethods()->where('active', true)->first();
 
         $participantData = [
             'firstname' => '',
@@ -67,7 +65,6 @@ class SignupController extends CommonController {
             'availableEvents' => $availableEvents,
             'localGroups' => $event['contributingLocalGroups'],
             'participantData' => $participantData,
-            'paymentMethod' => $paymentMethod?->slug,
         ]);
         return $inertiaProvider->render();
     }
@@ -144,11 +141,16 @@ class SignupController extends CommonController {
             $registrationData['anmerkungen'],
             $amount,
             $registrationData['paymentMethod'] ?? null,
+            (array)($registrationData['paymentOptions'] ?? []),
         );
 
         $signupCommand = new SignUpCommand($signupRequest);
         $signupResponse = $signupCommand->execute();
 
+        if (!$signupResponse->success) {
+            return response()->json(['status' => 'error', 'message' => $signupResponse->message], 422);
+        }
+
         // 4. Addons registrieren
 
 
@@ -182,14 +184,18 @@ class SignupController extends CommonController {
 
         $siblingReduction = $request->input('sibling') === 'true';
 
-        return response()->json(['amount' =>
+        $amount = $event->calculateAmount(
-            $event->calculateAmount(
             $request->input('participationType'),
             $request->input('beitrag'),
             \DateTime::createFromFormat('Y-m-d', $request->input('arrival')),
             \DateTime::createFromFormat('Y-m-d', $request->input('departure')),
             $siblingReduction
-            )->toString()
+        );
+
+        // amountValue (numerisch) steuert im Frontend das Überspringen des Zahlungsart-Schritts bei 0 €.
+        return response()->json([
+            'amount' => $amount->toString(),
+            'amountValue' => $amount->getAmount(),
         ]);
     }
 }

app/Domains/Event/Routes/api.php

@@ -45,6 +45,7 @@ Route::prefix('api/v1')
                         Route::post('/event-managers', [DetailsController::class, 'updateEventManagers']);
                         Route::post('/participation-fees', [DetailsController::class, 'updateParticipationFees']);
                         Route::post('/common-settings', [DetailsController::class, 'updateCommonSettings']);
+                        Route::post('/payment-methods', [DetailsController::class, 'updatePaymentMethods']);
                     });
 
 

app/Domains/Event/Views/Partials/CommonSettings.vue

@@ -2,7 +2,6 @@
 import {onMounted, reactive, ref} from "vue";
 import ErrorText from "../../../../Views/Components/ErrorText.vue";
 import AmountInput from "../../../../Views/Components/AmountInput.vue";
-import TextEditor from "../../../../Views/Components/TextEditor.vue";
 import {request} from "../../../../../resources/js/components/HttpClient.js";
 import {toast} from "vue3-toastify";
 
@@ -17,14 +16,10 @@ const emit = defineEmits(['close'])
     const dynmicProps = reactive({
         localGroups: [],
         eatingHabits:[],
-        paymentMethods: []
     });
 
     const contributingLocalGroups = ref([])
     const eatingHabits = ref([]);
-    const paymentMethods = ref([]);
-    // pro-Event-Config je Zahlungsmethode: { slug: { option: value } }
-    const paymentMethodConfigurations = reactive({});
 
     const errors = reactive({})
 
@@ -51,33 +46,9 @@ const emit = defineEmits(['close'])
 
         contributingLocalGroups.value = props.event.contributingLocalGroups?.map(t => t.id) ?? []
         eatingHabits.value = props.event.eatingHabits?.map(t => t.id) ?? []
-        paymentMethods.value = props.event.paymentMethods?.map(t => t.slug) ?? []
-
-        // Pro-Event-Config vorbelegen: bereits gespeicherte Pivot-Config des Events hat Vorrang,
-        // sonst der Tenant-Standard (Snapshot-Quelle für neu zugewiesene Methoden).
-        const eventConfigBySlug = {}
-        for (const pm of props.event.paymentMethods ?? []) {
-            eventConfigBySlug[pm.slug] = pm.configuration ?? {}
-        }
-        for (const method of dynmicProps.paymentMethods ?? []) {
-            const source = eventConfigBySlug[method.slug] ?? method.configuration ?? {}
-            const config = {}
-            for (const option of method.optionsSchema ?? []) {
-                config[option.name] = source[option.name] ?? ''
-            }
-            paymentMethodConfigurations[method.slug] = config
-        }
     });
 
     async function save() {
-        if (paymentMethods.value.length === 0) {
-            toast.error('Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.')
-            return
-        } else if(paymentMethods.value.length > 1) {
-            toast.error('Aktuell wird nur exakt eine Zahlungseinstellung unterstützt.')
-            return
-        }
-
         const response = await request('/api/v1/event/details/' + props.event.id + '/common-settings', {
             method: 'POST',
             headers: {
@@ -97,8 +68,6 @@ const emit = defineEmits(['close'])
                 supportPerson: formData.supportPerson,
                 contributingLocalGroups: contributingLocalGroups.value,
                 eatingHabits: eatingHabits.value,
-                paymentMethods: paymentMethods.value,
-                paymentMethodConfigurations: paymentMethodConfigurations,
             }
         })
 
@@ -230,31 +199,6 @@ const emit = defineEmits(['close'])
                             <label style="padding-left: 5px;" :for="'eatinghabit' + eatingHabit.id">{{eatingHabit.name}}</label>
                         </td>
                     </tr>
-
-                    <tr>
-                        <th style="padding-top: 40px !important;">Zahlungsmöglichkeiten</th>
-                    </tr>
-
-                    <tr v-for="paymentMethod in  dynmicProps.paymentMethods">
-                        <td>
-                            <input type="checkbox" :id="'paymentmethod' + paymentMethod.id" :value="paymentMethod.slug" v-model="paymentMethods" />
-                            <label style="padding-left: 5px;" :for="'paymentmethod' + paymentMethod.id">{{paymentMethod.name}}</label>
-
-                            <div
-                                v-if="paymentMethods.includes(paymentMethod.slug) && (paymentMethod.optionsSchema?.length ?? 0) > 0"
-                                class="payment-method-config"
-                            >
-                                <div v-for="option in paymentMethod.optionsSchema" :key="option.name" class="payment-method-config-row">
-                                    <label>{{ option.label }}<span v-if="option.required" class="required-marker">*</span></label>
-                                    <TextEditor v-if="option.type === 'richtext'"
-                                                v-model="paymentMethodConfigurations[paymentMethod.slug][option.name]"/>
-                                    <input v-else type="text"
-                                           v-model="paymentMethodConfigurations[paymentMethod.slug][option.name]"
-                                           class="width-full"/>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
                 </table>
 
 
@@ -311,26 +255,4 @@ const emit = defineEmits(['close'])
         width: 250px;
     }
 
-    .payment-method-config {
-        margin: 6px 0 12px 24px;
-        padding-left: 10px;
-        border-left: 2px solid #d1d5db;
-    }
-
-    .payment-method-config-row {
-        margin-bottom: 6px;
-    }
-
-    .payment-method-config-row label {
-        display: block;
-        font-size: 0.85rem;
-        color: #374151;
-        margin-bottom: 2px;
-    }
-
-    .required-marker {
-        color: #ef4444;
-        margin-left: 2px;
-    }
-
 </style>

app/Domains/Event/Views/Partials/ParticipantsList.vue

@@ -5,7 +5,7 @@ import ParticipantData from "./ParticipantData.vue";
 import MailCompose from "./MailCompose.vue";
 import {toast} from "vue3-toastify";
 import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
-import {format, getDay, getMonth, getYear} from "date-fns";
+import {format} from "date-fns";
 import AmountInput from "../../../../Views/Components/AmountInput.vue";
 import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
 import DialableTelephoneNumber from "../../../../Views/Components/DialableTelephoneNumber.vue";
@@ -344,6 +344,14 @@ function mailToGroup(groupKey) {
                                 <span class="link" style="font-size:10pt;" @click="paymentComplete(participant)">Zahlung buchen</span> &nbsp;
                                 <span class="link" style="font-size:10pt;" @click="openPartialPaymentDialog(participant)">Teilzahlung buchen</span>
                             </span>
+                            <br/><br/>
+                            <span :id="'participant-' + participant.identifier + '-paymentmethod'"
+                                  style="font-size:10pt;">
+                                Zahlungsweise: <label
+                                :id="'participant-' + participant.identifier + '-paymentmethod-name'">{{
+                                    participant.paymentMethod ?? '—'
+                                }}</label>
+                            </span>
                         </td>
 
                         <td class="pl-email">

app/Domains/Event/Views/Partials/ParticipationFees.vue

@@ -1,7 +1,11 @@
 <script setup>
-    import {reactive, watch} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import AmountInput from "../../../../Views/Components/AmountInput.vue";
 import ErrorText from "../../../../Views/Components/ErrorText.vue";
+import TextEditor from "../../../../Views/Components/TextEditor.vue";
+import Modal from "../../../../Views/Components/Modal.vue";
+import RichSelectBox from "../../../../Views/Components/RichSelectBox.vue";
+import {PAYMENT_METHOD_ICONS} from "../../../../../resources/js/constants/paymentMethodIcons.js";
 import {toast} from "vue3-toastify";
 import {request} from "../../../../../resources/js/components/HttpClient.js";
 
@@ -11,6 +15,45 @@
         event: Object,
     })
 
+// Verfügbare (aktive) Zahlungsarten des Tenants inkl. optionsSchema + Default-Config.
+const availablePaymentMethods = ref([])
+// Auswahl der Zahlungsart-Slugs für dieses Event (Default: leer bei neuen Events).
+const paymentMethods = ref([])
+// pro-Event-Config je Zahlungsmethode: { slug: { option: value } }
+const paymentMethodConfigurations = reactive({})
+
+// Optionen-Modal
+const showOptionsModal = ref(false)
+const optionsMethod = ref(null)
+
+function openOptions(method) {
+    optionsMethod.value = method
+    showOptionsModal.value = true
+}
+
+onMounted(async () => {
+    const response = await fetch('/api/v1/core/retrieve-event-setting-data');
+    const data = await response.json();
+    availablePaymentMethods.value = data.paymentMethods ?? []
+
+    paymentMethods.value = props.event.paymentMethods?.map(t => t.slug) ?? []
+
+    // Pro-Event-Config vorbelegen: bereits gespeicherte Pivot-Config des Events hat Vorrang,
+    // sonst der Tenant-Standard (Snapshot-Quelle für neu zugewiesene Methoden).
+    const eventConfigBySlug = {}
+    for (const pm of props.event.paymentMethods ?? []) {
+        eventConfigBySlug[pm.slug] = pm.configuration ?? {}
+    }
+    for (const method of availablePaymentMethods.value) {
+        const source = eventConfigBySlug[method.slug] ?? method.configuration ?? {}
+        const config = {}
+        for (const option of method.optionsSchema ?? []) {
+            config[option.name] = source[option.name] ?? ''
+        }
+        paymentMethodConfigurations[method.slug] = config
+    }
+})
+
     const errors = reactive({})
     const formData = reactive({
         "pft_1_active": true,
@@ -75,6 +118,24 @@
             return;
         }
 
+        if (paymentMethods.value.length === 0) {
+            toast.error('Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.')
+            return;
+        }
+
+        const paymentResponse = await request('/api/v1/event/details/' + props.event.id + '/payment-methods', {
+            method: "POST",
+            body: {
+                paymentMethods: paymentMethods.value,
+                paymentMethodConfigurations: paymentMethodConfigurations,
+            }
+        })
+
+        if (paymentResponse.status !== 'success') {
+            toast.error(paymentResponse.message ?? 'Die Zahlungsmöglichkeiten konnten nicht gespeichert werden.')
+            return;
+        }
+
         const data = await request('/api/v1/event/details/' + props.event.id + '/participation-fees', {
             method: "POST",
             body: {
@@ -286,10 +347,81 @@
             </td>
         </tr>
 
+        <tr>
+            <td colspan="4" style="padding-top: 30px;">
+                <h4>Zahlungsmöglichkeiten</h4>
+                <div v-for="paymentMethod in availablePaymentMethods" :key="paymentMethod.slug"
+                     class="payment-method-row">
+                    <input type="checkbox" :id="'paymentmethod' + paymentMethod.id" :value="paymentMethod.slug"
+                           v-model="paymentMethods"/>
+                    <label style="padding-left: 5px;" :for="'paymentmethod' + paymentMethod.id">{{
+                            paymentMethod.name
+                        }}</label>
+                    <label
+                        v-if="paymentMethods.includes(paymentMethod.slug) && (paymentMethod.optionsSchema?.length ?? 0) > 0"
+                        class="link"
+                        style="padding-left: 15px; font-size: 10pt;"
+                        @click="openOptions(paymentMethod)"
+                    >Optionen</label>
+                </div>
+            </td>
+        </tr>
+
         <tr>
             <td colspan="4" style="padding-top: 20px;">
                 <input type="button" value="Speichern" @click="saveParticipationFees" />
             </td>
         </tr>
     </table>
+
+    <Modal
+        v-if="showOptionsModal"
+        :show="showOptionsModal"
+        :title="'Optionen: ' + (optionsMethod?.name ?? '')"
+        width="700px"
+        @close="showOptionsModal = false"
+    >
+        <div v-for="option in optionsMethod?.optionsSchema ?? []" :key="option.name" class="payment-method-config-row">
+            <label>{{ option.label }}<span v-if="option.required" class="required-marker">*</span></label>
+            <RichSelectBox v-if="option.type === 'icon'"
+                           v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"
+                           :options="PAYMENT_METHOD_ICONS"
+                           placeholder="Symbol wählen…"/>
+            <TextEditor v-else-if="option.type === 'richtext'"
+                        v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"/>
+            <input v-else type="text"
+                   v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"
+                   class="width-full"/>
+            <span v-if="option.hint" class="option-hint">{{ option.hint }}</span>
+        </div>
+    </Modal>
 </template>
+
+<style scoped>
+.payment-method-row {
+    margin-bottom: 6px;
+}
+
+.payment-method-config-row {
+    margin-bottom: 12px;
+}
+
+.payment-method-config-row label {
+    display: block;
+    font-size: 0.85rem;
+    color: #374151;
+    margin-bottom: 2px;
+}
+
+.required-marker {
+    color: #ef4444;
+    margin-left: 2px;
+}
+
+.option-hint {
+    display: block;
+    margin-top: 4px;
+    font-size: 0.8rem;
+    color: #6b7280;
+}
+</style>

app/Domains/Event/Views/Partials/SignUpForm/SignupForm.vue

@@ -8,6 +8,7 @@ import StepArrival from './steps/StepArrival.vue'
 import StepAddons from './steps/StepAddons.vue'
 import StepPhotoPermissions from './steps/StepPhotoPermissions.vue'
 import StepAllergies from './steps/StepAllergies.vue'
+import StepPaymentMethod from './steps/StepPaymentMethod.vue'
 import StepSummary from './steps/StepSummary.vue'
 import SubmitSuccess from './after-submit/SubmitSuccess.vue'
 import SubmitAlreadyExists from './after-submit/SubmitAlreadyExists.vue'
@@ -16,15 +17,14 @@ const props = defineProps({
     event: Object,
     participantData: Object,
     localGroups: Array,
-    paymentMethod: String,
 })
 
 const emit = defineEmits(['registrationDone'])
 
 const {
     currentStep, goToStep, formData, selectedAddons,
-    submit, submitting, submitResult, summaryLoading, summaryAmount
+    submit, submitting, submitResult, summaryLoading, summaryAmount, summaryAmountValue
-} = useSignupForm(props.event, props.participantData, props.paymentMethod)
+} = useSignupForm(props.event, props.participantData)
 
 const steps = [
     { step: 1, label: 'Alter' },
@@ -35,7 +35,8 @@ const steps = [
     { step: 6, label: 'Zusatzoptionen' },
     { step: 7, label: 'Fotoerlaubnis' },
     { step: 8, label: 'Allergien' },
-    { step: 9, label: 'Zusammenfassung' },
+    {step: 9, label: 'Zahlungsart'},
+    {step: 10, label: 'Zusammenfassung'},
 ]
 </script>
 
@@ -94,11 +95,14 @@ const steps = [
                 <StepAddons         v-if="currentStep === 6" :formData="formData" :event="event" :selectedAddons="selectedAddons" @next="goToStep" @back="goToStep" />
                 <StepPhotoPermissions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
                 <StepAllergies      v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
+                <StepPaymentMethod v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
+                                   @back="goToStep"/>
                 <StepSummary
-                    v-if="currentStep === 9"
+                    v-if="currentStep === 10"
                     :formData="formData"
                     :event="event"
                     :summaryAmount="summaryAmount"
+                    :summaryAmountValue="summaryAmountValue"
                     :summaryLoading="summaryLoading"
                     :submitting="submitting"
                     @back="goToStep"

app/Domains/Event/Views/Partials/SignUpForm/components/PaymentMethodInputs.vue

@@ -0,0 +1,53 @@
+<script setup>
+import TextEditor from "../../../../../../Views/Components/TextEditor.vue";
+
+// Generische, schema-getriebene Eingabefelder eines Zahlungsmoduls. Wiederverwendbar für künftige
+// Verfahren (SEPA, PayPal): das jeweilige Modul liefert das Schema, hier wird nur gerendert.
+const props = defineProps({
+    // [{ name, label, type, required }] -- z.B. aus participantOptionsSchema einer Zahlungsmethode.
+    schema: {type: Array, default: () => []},
+    // v-model: Objekt { optionName: value }
+    modelValue: {type: Object, default: () => ({})},
+})
+const emit = defineEmits(['update:modelValue'])
+
+function setValue(name, value) {
+    emit('update:modelValue', {...props.modelValue, [name]: value})
+}
+</script>
+
+<template>
+    <table class="form-table">
+        <tr v-for="option in schema" :key="option.name">
+            <td>
+                {{ option.label }}<span v-if="option.required" class="required-marker">*</span>:
+            </td>
+            <td>
+                <TextEditor
+                    v-if="option.type === 'richtext'"
+                    :modelValue="modelValue[option.name] ?? ''"
+                    @update:modelValue="value => setValue(option.name, value)"
+                />
+                <input
+                    v-else-if="option.type === 'checkbox'"
+                    type="checkbox"
+                    :checked="modelValue[option.name] ?? false"
+                    @change="event => setValue(option.name, event.target.checked)"
+                />
+                <input
+                    v-else
+                    type="text"
+                    :value="modelValue[option.name] ?? ''"
+                    @input="event => setValue(option.name, event.target.value)"
+                />
+            </td>
+        </tr>
+    </table>
+</template>
+
+<style scoped>
+.required-marker {
+    color: #ef4444;
+    margin-left: 2px;
+}
+</style>

app/Domains/Event/Views/Partials/SignUpForm/composables/useSignupForm.js

@@ -1,7 +1,7 @@
-import { ref, reactive, computed } from 'vue'
+import {reactive, ref} from 'vue'
 import axios from 'axios'
 
-export function useSignupForm(event, participantData, paymentMethod) {
+export function useSignupForm(event, participantData) {
     const currentStep = ref(1)
     const submitting = ref(false)
     const summaryLoading = ref(false)
@@ -9,9 +9,13 @@ export function useSignupForm(event, participantData, paymentMethod) {
 
     const selectedAddons = reactive({})
 
+    // Für die Aktion freigeschaltete Zahlungsmethoden; ist genau eine aktiv, wird sie vorausgewählt.
+    const activeMethods = (event.paymentMethods ?? []).filter(m => m.active)
+
     const formData = reactive({
         eatingHabit: 'EATING_HABIT_VEGAN',
-        paymentMethod: paymentMethod ?? null,
+        paymentMethod: activeMethods.length === 1 ? activeMethods[0].slug : null,
+        paymentOptions: {},
         userId: participantData.id,
         eventId: event.id,
         vorname: participantData.firstname ?? '',
@@ -52,11 +56,10 @@ export function useSignupForm(event, participantData, paymentMethod) {
     })
 
     const summaryAmount = ref('')
+    const summaryAmountValue = ref(0)
 
-    const goToStep = async (step) => {
+    const fetchAmount = async () => {
-        if (step === 9) {
         summaryLoading.value = true
-            summaryAmount.value = ''
         try {
             const res = await axios.post('/api/v1/event/' + event.id + '/calculate-amount', {
                 arrival: formData.arrival,
@@ -70,15 +73,35 @@ export function useSignupForm(event, participantData, paymentMethod) {
                 sibling: formData.sibling,
             })
             summaryAmount.value = res.data.amount
+            summaryAmountValue.value = Number(res.data.amountValue ?? 0)
         } finally {
             summaryLoading.value = false
         }
     }
+
+    // Steps: ... 8 Allergien, 9 Zahlungsart, 10 Zusammenfassung.
+    const STEP_PAYMENT = 9
+    const STEP_SUMMARY = 10
+
+    const goToStep = async (step) => {
+        if (step === STEP_PAYMENT) {
+            // Betrag ermitteln: Bei 0 € wird die Zahlungsart-Auswahl übersprungen.
+            await fetchAmount()
+            if (summaryAmountValue.value <= 0) {
+                formData.paymentMethod = null
+                formData.paymentOptions = {}
+                currentStep.value = STEP_SUMMARY
+                return
+            }
+        } else if (step === STEP_SUMMARY) {
+            await fetchAmount()
+        }
         currentStep.value = step
     }
 
     const submit = async () => {
-        if (!formData.summary_information_correct || !formData.summary_accept_terms || !formData.legal_accepted || !formData.payment) {
+        // Zahlungs-Bestätigung wird im Summary-Schritt kontextabhängig erzwungen (nur bei Überweisung).
+        if (!formData.summary_information_correct || !formData.summary_accept_terms || !formData.legal_accepted) {
             return
         }
         submitting.value = true
@@ -96,5 +119,16 @@ export function useSignupForm(event, participantData, paymentMethod) {
         }
     }
 
-    return { currentStep, goToStep, formData, selectedAddons, submit, submitting, submitResult, summaryLoading, summaryAmount }
+    return {
+        currentStep,
+        goToStep,
+        formData,
+        selectedAddons,
+        submit,
+        submitting,
+        submitResult,
+        summaryLoading,
+        summaryAmount,
+        summaryAmountValue
+    }
 }

app/Domains/Event/Views/Partials/SignUpForm/steps/StepPaymentMethod.vue

@@ -0,0 +1,226 @@
+<script setup>
+import {computed} from "vue";
+import PaymentMethodInputs from "../components/PaymentMethodInputs.vue";
+import Icon from "../../../../../../Views/Components/Icon.vue";
+
+const props = defineProps({formData: Object, event: Object})
+const emit = defineEmits(['next', 'back'])
+
+// Für die Aktion freigeschaltete Zahlungsmethoden.
+const methods = computed(() => (props.event.paymentMethods ?? []).filter(m => m.active))
+
+const selectedMethod = computed(() =>
+    methods.value.find(m => m.slug === props.formData.paymentMethod) ?? null
+)
+
+const participantSchema = computed(() => selectedMethod.value?.participantOptionsSchema ?? [])
+
+// Font-Awesome-Icon je Zahlungsart: konfiguriertes Symbol hat Vorrang, sonst Slug-Default
+// (Fallback: generische Karte).
+function iconFor(method) {
+    const configured = method.configuration?.icon
+    if (configured) return configured
+    if (method.slug === 'PAYMENT_ACCOUNT_TRANSACTION') return 'building-columns'
+    if (method.slug === 'PAYMENT_NOT_DEFINED') return 'money-bill-wave'
+    return 'credit-card'
+}
+
+function selectMethod(slug) {
+    props.formData.paymentMethod = slug
+    // Eingaben zurücksetzen -- pro Methode eigene Felder.
+    props.formData.paymentOptions = {}
+}
+
+// "Weiter" ist erst möglich, wenn eine Methode gewählt und alle Pflicht-Eingaben befüllt sind.
+const canProceed = computed(() => {
+    if (!props.formData.paymentMethod) return false
+    return participantSchema.value
+        .filter(o => o.required)
+        .every(o => {
+            const value = props.formData.paymentOptions[o.name]
+            return value !== undefined && value !== null && String(value).trim() !== ''
+        })
+})
+</script>
+
+<template>
+    <div>
+        <h3 style="margin: 0 0 6px 0; color: #111827;">Zahlungsweise</h3>
+        <p style="margin: 0 0 24px 0; color: #6b7280; font-size: 0.95rem;">Bitte wähle, wie du deinen Teilnahmebeitrag
+            begleichen möchtest.</p>
+
+        <div class="pay-card-row">
+            <div
+                v-for="method in methods"
+                :key="method.slug"
+                class="pay-card"
+                :class="{ 'pay-card--active': formData.paymentMethod === method.slug }"
+                role="radio"
+                :aria-checked="formData.paymentMethod === method.slug"
+                tabindex="0"
+                @click="selectMethod(method.slug)"
+                @keydown.enter.prevent="selectMethod(method.slug)"
+                @keydown.space.prevent="selectMethod(method.slug)"
+            >
+                <div class="pay-card__badge">
+                    <Icon :name="iconFor(method)"/>
+                </div>
+                <div class="pay-card__body">
+                    <h4 class="pay-card__title">{{ method.name }}</h4>
+                    <p v-if="method.description" class="pay-card__desc">{{ method.description }}</p>
+                </div>
+                <div class="pay-card__check" aria-hidden="true">✓</div>
+            </div>
+        </div>
+
+        <div v-if="participantSchema.length > 0" class="pay-inputs">
+            <PaymentMethodInputs :schema="participantSchema" v-model="formData.paymentOptions"/>
+        </div>
+
+        <div class="btn-row">
+            <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
+            <button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 10)">Weiter →
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.pay-card-row {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.pay-card {
+    position: relative;
+    flex: 1 1 280px;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f8fafc;
+    border: 2px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 28px 20px;
+    cursor: pointer;
+    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
+    text-align: center;
+}
+
+.pay-card:hover {
+    border-color: #2563eb;
+    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
+    transform: translateY(-2px);
+}
+
+.pay-card--active {
+    border-color: #2563eb;
+    background: #eff6ff;
+    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
+}
+
+.pay-card__badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin-bottom: 14px;
+    font-size: 1.6rem;
+    color: #2563eb;
+    background: #e0f2fe;
+    border-radius: 50%;
+}
+
+.pay-card--active .pay-card__badge {
+    background: #dbeafe;
+}
+
+.pay-card__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+}
+
+.pay-card__title {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #111827;
+}
+
+.pay-card__desc {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #374151;
+}
+
+.pay-card__check {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: #2563eb;
+    color: #fff;
+    font-size: 0.8rem;
+    font-weight: 700;
+    opacity: 0;
+    transform: scale(0.6);
+    transition: opacity 0.12s, transform 0.12s;
+}
+
+.pay-card--active .pay-card__check {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.pay-inputs {
+    margin-top: 20px;
+    padding: 16px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+}
+
+/* ─── Smartphone ─── */
+@media (max-width: 639px) {
+    .pay-card-row {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .pay-card {
+        flex: 1 1 100%;
+        flex-direction: row;
+        text-align: left;
+        align-items: center;
+        gap: 14px;
+        padding: 16px 14px;
+    }
+
+    .pay-card__badge {
+        flex: 0 0 52px;
+        width: 52px;
+        height: 52px;
+        margin-bottom: 0;
+        font-size: 1.6rem;
+    }
+
+    .pay-card__body {
+        flex: 1;
+        align-items: flex-start;
+        text-align: left;
+    }
+
+    .pay-card__title {
+        font-size: 1rem;
+    }
+}
+</style>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepSummary.vue

@@ -1,15 +1,48 @@
 <script setup>
+import {computed} from "vue";
 import {format, parseISO} from "date-fns";
 
+const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'
+
 const props = defineProps({
     formData: Object,
     event: Object,
     summaryAmount: String,
+    summaryAmountValue: {type: Number, default: 0},
     summaryLoading: Boolean,
     submitting: Boolean,
 })
 const emit = defineEmits(['back', 'submit'])
 
+const selectedMethod = computed(() =>
+    (props.event.paymentMethods ?? []).find(m => m.slug === props.formData.paymentMethod) ?? null
+)
+
+// Die Überweisungs-Bestätigung wird nur bei Banküberweisung verlangt (AC #6).
+const requiresPaymentConfirmation = computed(() =>
+    props.formData.paymentMethod === PAYMENT_ACCOUNT_TRANSACTION
+)
+
+// Bestätigungstext ist ein admin-konfigurierbarer Freitext ({amount}-Platzhalter), sonst Default.
+const paymentConfirmationText = computed(() => {
+    const configured = selectedMethod.value?.configuration?.summary_confirmation_text
+    const template = (configured && String(configured).trim() !== '')
+        ? configured
+        : 'Ich bestätige, den Betrag von {amount} zu überweisen.'
+    return template.replaceAll('{amount}', props.summaryAmount ?? '')
+})
+
+// Zurück führt zur Zahlungsart (9), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (8).
+const backTarget = computed(() => props.summaryAmountValue > 0 ? 9 : 8)
+
+const canSubmit = computed(() =>
+    props.formData.summary_information_correct
+    && props.formData.summary_accept_terms
+    && props.formData.legal_accepted
+    && (!requiresPaymentConfirmation.value || props.formData.payment)
+    && !props.submitting
+)
+
 function formatDate(dateString) {
     if (!dateString) return ''
     return format(parseISO(dateString), 'dd.MM.yyyy')
@@ -129,18 +162,18 @@ function eatingHabit() {
                     <input type="checkbox" v-model="formData.legal_accepted" />
                     Ich stimme der Datenschutzerklärung zu.
                 </label>
-                <label style="display: flex; gap: 10px; cursor: pointer;">
+                <label v-if="requiresPaymentConfirmation" style="display: flex; gap: 10px; cursor: pointer;">
                     <input type="checkbox" v-model="formData.payment" />
-                    Ich bestätige, den Betrag von <strong>{{ summaryAmount }}</strong> zu überweisen.
+                    {{ paymentConfirmationText }}
                 </label>
             </div>
 
             <div class="btn-row">
-                <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
+                <button type="button" class="btn-secondary" @click="emit('back', backTarget)">← Zurück</button>
                 <button
                     type="submit"
                     class="btn-primary"
-                    :disabled="!formData.summary_information_correct || !formData.summary_accept_terms || !formData.legal_accepted || !formData.payment || submitting"
+                    :disabled="!canSubmit"
                     style="background: #059669;"
                 >
                     {{ submitting ? 'Wird gesendet…' : 'Jetzt anmelden ✓' }}

app/Domains/Event/Views/Signup.vue

@@ -12,7 +12,6 @@ const props = defineProps({
     availableEvents: Array,
     participantData: Object,
     localGroups: Array,
-    paymentMethod: String,
 })
 
 const showSignup = ref(true)
@@ -104,7 +103,6 @@ function close() {
                     :event="props.event"
                     :participantData="props.participantData ?? {}"
                     :localGroups="props.localGroups ?? []"
-                    :paymentMethod="props.paymentMethod ?? null"
                 />
                 <p v-else class="signup-closed-notice">
                     Die Anmeldung für diese Veranstaltung ist geschlossen.

app/EventPaymentModules/AbstractEventPaymentModule.php

@@ -22,36 +22,93 @@ abstract class AbstractEventPaymentModule implements EventPaymentModule
         return null;
     }
 
-    // -----------------------------------------------------------------------------------------
-    // Aus getOptions() abgeleitete Helfer (zuvor statisch auf PaymentMethod).
-    // -----------------------------------------------------------------------------------------
-
     /**
-     * Namen aller Pflicht-Optionen dieses Moduls.
+     * Standard-Konfiguration beim Anlegen der Tenant-Instanz. Standard: leer.
      *
-     * @return array<int, string>
+     * @return array<string, mixed>
      */
-    public function requiredOptionKeys(): array
+    public function defaultConfiguration(): array
     {
-        return array_values(array_map(
+        return [];
-            static fn (array $option) => $option['name'],
-            array_filter($this->getOptions(), static fn (array $option) => $option['required'] ?? false)
-        ));
     }
 
     /**
-     * Reduziert eine Konfiguration auf die im Schema definierten Options-Keys.
+     * Payer-seitige Eingaben, die eine Zahlungsart vom Teilnehmer benötigt (z.B. später SEPA-IBAN,
-     * Unbekannte Keys werden verworfen -- getOptions() ist die Autorität.
+     * PayPal-Mail). Standard: keine. Gleiche Form wie getOptions(): [{name,label,type,required}].
      *
+     * @return array<int, array{name: string, label: string, type: string, required: bool}>
+     */
+    public function getParticipantOptions(): array
+    {
+        return [];
+    }
+
+    // -----------------------------------------------------------------------------------------
+    // Aus dem jeweiligen Schema abgeleitete Helfer (Admin-Config = getOptions(),
+    // Teilnehmer-Eingaben = getParticipantOptions()).
+    // -----------------------------------------------------------------------------------------
+
+    /** @return array<int, string> */
+    public function requiredOptionKeys(): array
+    {
+        return $this->requiredKeys($this->getOptions());
+    }
+
+    /**
      * @param array<string, mixed> $config
      * @return array<string, mixed>
      */
     public function sanitizeConfiguration(array $config): array
+    {
+        return $this->sanitizeAgainst($this->getOptions(), $config);
+    }
+
+    /** @param array<string, mixed> $config */
+    public function isConfigurationComplete(array $config): bool
+    {
+        return $this->allRequiredFilled($this->getOptions(), $config);
+    }
+
+    /**
+     * @param array<string, mixed> $input
+     * @return array<string, mixed>
+     */
+    public function sanitizeParticipantOptions(array $input): array
+    {
+        return $this->sanitizeAgainst($this->getParticipantOptions(), $input);
+    }
+
+    /** @param array<string, mixed> $input */
+    public function participantOptionsComplete(array $input): bool
+    {
+        return $this->allRequiredFilled($this->getParticipantOptions(), $input);
+    }
+
+    /**
+     * @param array<int, array{name: string, required?: bool}> $schema
+     * @return array<int, string>
+     */
+    private function requiredKeys(array $schema): array
+    {
+        return array_values(array_map(
+            static fn (array $option) => $option['name'],
+            array_filter($schema, static fn(array $option) => $option['required'] ?? false)
+        ));
+    }
+
+    /**
+     * Reduziert Eingaben auf die im Schema definierten Keys (unbekannte werden verworfen).
+     *
+     * @param array<int, array{name: string}> $schema
+     * @param array<string, mixed> $input
+     * @return array<string, mixed>
+     */
+    private function sanitizeAgainst(array $schema, array $input): array
     {
         $result = [];
-        foreach ($this->getOptions() as $option) {
+        foreach ($schema as $option) {
-            if (array_key_exists($option['name'], $config)) {
+            if (array_key_exists($option['name'], $input)) {
-                $result[$option['name']] = $config[$option['name']];
+                $result[$option['name']] = $input[$option['name']];
             }
         }
 
@@ -59,14 +116,15 @@ abstract class AbstractEventPaymentModule implements EventPaymentModule
     }
 
     /**
-     * Prüft, ob alle Pflicht-Optionen befüllt (non-empty) sind.
+     * Sind alle Pflichtfelder des Schemas befüllt (non-empty)?
      *
-     * @param array<string, mixed> $config
+     * @param array<int, array{name: string, required?: bool}> $schema
+     * @param array<string, mixed> $input
      */
-    public function isConfigurationComplete(array $config): bool
+    private function allRequiredFilled(array $schema, array $input): bool
     {
-        foreach ($this->requiredOptionKeys() as $key) {
+        foreach ($this->requiredKeys($schema) as $key) {
-            $value = $config[$key] ?? null;
+            $value = $input[$key] ?? null;
             if ($value === null || $value === '' || $value === []) {
                 return false;
             }

app/EventPaymentModules/CLAUDE.md

@@ -19,16 +19,37 @@ Rechnung) liegt gekapselt in einem Modul pro Zahlungsart. Aufgelöst wird über
 
 ## Kernregeln
 
-- **Options-Schema lebt im Code**, nicht in der DB (`getOptions()` je Modul). In der DB stehen nur die Werte.
+- **Zwei getrennte Options-Schemata (beide im Code, gleiche Form `['name','label','type','required']`):**
-  Optionsform: `['name', 'label', 'type', 'required']`. `type` ist i.d.R. `'string'`; `'richtext'` wird im Frontend über
+    - `getOptions()` = **Admin-Config** (was der/die Veranstalter\*in pflegt, z.B. Empfänger-Konto). Werte in der DB
-  `Views/Components/TextEditor.vue` (TinyMCE, HTML) gerendert und via `v-html`/`{!! !!}` ausgegeben.
+      (`configuration`, s.u.).
+    - `getParticipantOptions()` = **Teilnehmer-Eingaben** beim Anmelden (payer-seitig, z.B. künftig
+      SEPA-IBAN/PayPal-Mail; beide Bestandsmodule: `[]`). Werte in `event_participants.payment_options` (JSON).
+      Abgesichert über
+      `sanitizeParticipantOptions()` / `participantOptionsComplete()` (Guard im `SignUpCommand`).
+    - `type` ist i.d.R. `'string'`; `'richtext'` wird über `Views/Components/TextEditor.vue` (TinyMCE, HTML) gerendert
+      und via `v-html`/`{!! !!}` ausgegeben; `'icon'` rendert die `Views/Components/RichSelectBox.vue` (kuratierte
+      FA-Symbol-Auswahl, Liste in `resources/js/constants/paymentMethodIcons.js`). Teilnehmer-Eingaben rendert die
+      generische `SignUpForm/components/PaymentMethodInputs.vue` schema-getrieben.
+  - Optionaler Schlüssel `'hint'` je Option: erklärender Hilfetext, den die Admin-Render-Stellen unter dem Feld anzeigen
+    (z.B. bei `payment_information`, dass der Text am Anmeldeende + in der Mail erscheint).
+  - `defaultConfiguration()` je Modul liefert die Start-Config beim Anlegen der Tenant-Instanz (`CreateTenantAction`),
+    aktuell das Default-Symbol (`icon`): Überweisung `building-columns`, Sonstiges `coins`.
 - **Aktivierungs-Guard:** Eine Tenant-Zahlungsmethode darf nur `active` werden, wenn alle `required`-Optionen befüllt
   sind (`isConfigurationComplete()`), erzwungen in `UpdateAvailablePaymentMethodAction`.
 - **Config-Speicherung (JSON):** pro Tenant auf `available_payment_methods.configuration`, pro Event auf dem Pivot
   `event_payment_methods.configuration`. Beim Zuweisen an ein Event wird die Tenant-Config als **Snapshot kopiert**
-  (Copy-on-Assign, spätere Tenant-Änderungen wirken NICHT nach). Sync erfolgt differenziell in `UpdateEventCommand`.
+  (Copy-on-Assign, spätere Tenant-Änderungen wirken NICHT nach). Sync erfolgt differenziell in
-- **`PaymentMethod` ist nur eine Fassade:** `PaymentMethod::optionsFor/requiredOptionKeys/sanitizeConfiguration/`
+  `SetPaymentMethodsCommand` (Endpoint `/api/v1/event/details/{event}/payment-methods`, ausgelöst aus dem
-  `isConfigurationComplete/defaults()` delegieren an die Registry. Bestehende Aufrufstellen bleiben so stabil.
+  „Teilnahmegebühren"-Bereich).
+- **`PaymentMethod` ist nur eine Fassade:** `PaymentMethod::optionsFor/participantOptionsFor/requiredOptionKeys/`
+  `sanitizeConfiguration/isConfigurationComplete/defaults()` delegieren an die Registry. Bestehende Aufrufstellen
+  bleiben stabil.
+- **Zahlungsauswahl im Anmeldeprozess:** Nach „Allergien" wählt der/die Teilnehmer\*in aus den **aktiven**
+  Event-Methoden (`StepPaymentMethod.vue`); bei Beitrag 0 € wird der Schritt übersprungen. Die Wahl landet in
+  `event_participants.payment_method`, die Eingaben in `payment_options`. Der Überweisungs-Bestätigungstext in der
+  Zusammenfassung ist eine Admin-Config-Option `summary_confirmation_text` (`{amount}`-Platzhalter) und erscheint nur
+  bei
+  `PAYMENT_ACCOUNT_TRANSACTION`.
 - **`PaymentStatus`** ist ein DB-gestütztes Enumerations-Model (`app/Enumerations/PaymentStatus.php`, Tabelle
   `payment_status`, geseedet in `ProductionDataSeeder`), analog zu `InvoiceStatus`. Reine Steuersignale (z.B. Redirect)
   gehören NICHT ins Status-Vokabular, sondern als transiente Felder aufs Response-DTO.
@@ -80,7 +101,8 @@ Beispiel GiroCode (nur Überweisung):
 ## Neues Zahlungsmodul hinzufügen
 
 1. Klasse unter `Modules/` anlegen, `extends AbstractEventPaymentModule`; `slug()`, `defaultName()`, `getOptions()`
-   implementieren; `registrationSummary()`/`doPayment()`/`createInvoice()` überschreiben, wo nötig.
+   implementieren; `defaultConfiguration()` (z.B. Default-`icon`) sowie
+   `registrationSummary()`/`doPayment()`/`createInvoice()` überschreiben, wo nötig.
 2. Zahlart-spezifische Extras als **eigenes Fähigkeits-Interface** (nicht ins Core-Interface).
 3. In `EventPaymentModuleRegistry::MODULES` eintragen. `PaymentMethod::create(['slug' => …])` wird dann automatisch über
    `ProductionDataSeeder` (iteriert `EventPaymentModuleRegistry::slugs()`) geseedet.
@@ -88,8 +110,10 @@ Beispiel GiroCode (nur Überweisung):
 
 ## Datenübernahme
 
-`storage/app/sync_payment_bank_data.php` überführt einmalig Bestands-Bankdaten (Tenant/Event) in die Modul-Config
+`storage/app/2026_08_05_backfill_payment_method_configuration.sql` überführt einmalig Bestands-IBAN-Daten (Tenant/Event)
-(idempotent). Bei Live-Inbetriebnahme einmal ausführen.
+**und** die Default-Symbole in die Modul-Config (idempotenter JSON-Merge, nichts wird überschrieben). Bei
+Live-Inbetriebnahme einmal gegen die Produktionsdatenbank ausführen — ersetzt das ältere PHP-Skript
+`sync_payment_bank_data.php`.
 
 ## Tests
 

app/EventPaymentModules/EventPaymentModule.php

@@ -30,12 +30,26 @@ interface EventPaymentModule
     public function defaultDescription(): ?string;
 
     /**
-     * Options-Schema dieses Moduls (welche Konfigurationsfelder es benötigt).
+     * Standard-Konfiguration beim Anlegen der Tenant-Instanz (z.B. Default-Symbol). Standard: leer.
+     *
+     * @return array<string, mixed>
+     */
+    public function defaultConfiguration(): array;
+
+    /**
+     * Admin-Options-Schema dieses Moduls (welche Konfigurationsfelder der/die Veranstalter\*in pflegt).
      *
      * @return array<int, array{name: string, label: string, type: string, required: bool}>
      */
     public function getOptions(): array;
 
+    /**
+     * Teilnehmer-Eingaben, die diese Zahlungsart beim Anmelden abfragt (payer-seitig; Standard: keine).
+     *
+     * @return array<int, array{name: string, label: string, type: string, required: bool}>
+     */
+    public function getParticipantOptions(): array;
+
     /**
      * Liefert den zahlungsspezifischen Teil der Anmelde-Zusammenfassung.
      * (In dieser Iteration nur als Stub vorhanden.)

app/EventPaymentModules/Modules/AccountTransferPaymentModule.php

@@ -27,12 +27,19 @@ class AccountTransferPaymentModule extends AbstractEventPaymentModule implements
         return 'Überweisung auf Veranstaltungskonto';
     }
 
+    public function defaultConfiguration(): array
+    {
+        return ['icon' => 'building-columns'];
+    }
+
     public function getOptions(): array
     {
         return [
             ['name' => 'account_owner', 'label' => 'Kontoinhaber', 'type' => 'string', 'required' => true],
             ['name' => 'iban', 'label' => 'IBAN', 'type' => 'string', 'required' => true],
             ['name' => 'bic', 'label' => 'BIC', 'type' => 'string', 'required' => false],
+            ['name' => 'summary_confirmation_text', 'label' => 'Bestätigung durch Teilnehmende (Zusammenfassung, {amount} als Platzhalter)', 'type' => 'string', 'required' => false],
+            ['name' => 'icon', 'label' => 'Symbol', 'type' => 'icon', 'required' => false],
         ];
     }
 

app/EventPaymentModules/Modules/UndefinedPaymentModule.php

@@ -25,10 +25,16 @@ class UndefinedPaymentModule extends AbstractEventPaymentModule
         return 'Sonstiges (Barzahlung, Zahlung vor Ort)';
     }
 
+    public function defaultConfiguration(): array
+    {
+        return ['icon' => 'coins'];
+    }
+
     public function getOptions(): array
     {
         return [
-            ['name' => 'payment_information', 'label' => 'Zahlungsinformationen', 'type' => 'richtext', 'required' => true],
+            ['name' => 'payment_information', 'label' => 'Zahlungsinformationen', 'type' => 'richtext', 'required' => true, 'hint' => 'Dieser Text wird der teilnehmenden Person am Ende der Anmeldung und in der Bestätigungs-E-Mail angezeigt.'],
+            ['name' => 'icon', 'label' => 'Symbol', 'type' => 'icon', 'required' => false],
         ];
     }
 

app/Models/EventParticipant.php

@@ -69,6 +69,7 @@ class EventParticipant extends InstancedModel
         'amount_paid',
         'payment_purpose',
         'payment_method',
+        'payment_options',
         'efz_status',
         'unregistered_at',
     ];
@@ -88,6 +89,7 @@ class EventParticipant extends InstancedModel
 
         'amount' => AmountCast::class,
         'amount_paid' => AmountCast::class,
+        'payment_options' => 'array',
     ];
 
     /*

app/Models/PaymentMethod.php

@@ -29,22 +29,26 @@ class PaymentMethod extends CommonModel
     ];
 
     /**
-     * Standard-Werte (name/description) je Slug -- aus den Zahlungsmodulen aufgebaut.
+     * Standard-Werte (name/description/configuration) je Slug -- aus den Zahlungsmodulen aufgebaut.
      *
-     * @return array<string, array{name: string, description: ?string}>
+     * @return array<string, array{name: string, description: ?string, configuration: array<string, mixed>}>
      */
     public static function defaults(): array
     {
         $defaults = [];
         foreach (EventPaymentModuleRegistry::all() as $slug => $module) {
-            $defaults[$slug] = ['name' => $module->defaultName(), 'description' => $module->defaultDescription()];
+            $defaults[$slug] = [
+                'name' => $module->defaultName(),
+                'description' => $module->defaultDescription(),
+                'configuration' => $module->defaultConfiguration(),
+            ];
         }
 
         return $defaults;
     }
 
     /**
-     * Options-Schema für einen Slug.
+     * Admin-Options-Schema für einen Slug.
      *
      * @return array<int, array{name: string, label: string, type: string, required: bool}>
      */
@@ -53,6 +57,16 @@ class PaymentMethod extends CommonModel
         return EventPaymentModuleRegistry::forSlug($slug)?->getOptions() ?? [];
     }
 
+    /**
+     * Teilnehmer-Eingabe-Schema für einen Slug (payer-seitig).
+     *
+     * @return array<int, array{name: string, label: string, type: string, required: bool}>
+     */
+    public static function participantOptionsFor(string $slug): array
+    {
+        return EventPaymentModuleRegistry::forSlug($slug)?->getParticipantOptions() ?? [];
+    }
+
     /**
      * Namen aller Pflicht-Optionen eines Slugs.
      *

app/Resources/AvailablePaymentMethodResource.php

@@ -10,6 +10,7 @@ class AvailablePaymentMethodResource extends JsonResource {
     private AvailablePaymentMethod $availablePaymentMethod;
 
     public function __construct(AvailablePaymentMethod $availablePaymentMethod) {
+        parent::__construct($availablePaymentMethod);
         $this->availablePaymentMethod = $availablePaymentMethod;
     }
 
@@ -29,6 +30,7 @@ class AvailablePaymentMethodResource extends JsonResource {
             'active' => $this->availablePaymentMethod->active,
             'configuration' => (object) $configuration,
             'optionsSchema' => PaymentMethod::optionsFor($this->availablePaymentMethod->slug),
+            'participantOptionsSchema' => PaymentMethod::participantOptionsFor($this->availablePaymentMethod->slug),
         ];
     }
 }

app/Resources/EventResource.php

@@ -135,7 +135,7 @@ class EventResource extends JsonResource{
             fn($eatingHabit) => new EatingHabitResource($eatingHabit))->toArray();
 
         $returnArray['paymentMethods'] = $this->event->paymentMethods()->get()->map(
-            fn($paymentMethod) => new AvailablePaymentMethodResource($paymentMethod))->toArray();
+            fn($paymentMethod) => new AvailablePaymentMethodResource($paymentMethod)->toArray($request))->toArray();
 
 
         $returnArray['participationTypes'] = [];

app/Views/Components/RichSelectBox.vue

@@ -0,0 +1,162 @@
+<script setup>
+import {computed, onBeforeUnmount, onMounted, ref} from 'vue'
+import Icon from './Icon.vue'
+
+// Generisches Custom-Dropdown, das je Option ein Icon + Label anzeigt (ein natives <select> kann
+// keine SVG-Icons rendern). Wiederverwendbar für Icon-/Rich-Selects.
+const props = defineProps({
+    // Ausgewählter Wert (value einer Option).
+    modelValue: {type: String, default: ''},
+    // [{ value, label, icon? }]
+    options: {type: Array, default: () => []},
+    placeholder: {type: String, default: 'Auswählen…'},
+})
+const emit = defineEmits(['update:modelValue'])
+
+const open = ref(false)
+const root = ref(null)
+
+const selected = computed(() => props.options.find(o => o.value === props.modelValue) ?? null)
+
+function toggle() {
+    open.value = !open.value
+}
+
+function select(option) {
+    emit('update:modelValue', option.value)
+    open.value = false
+}
+
+function onClickOutside(event) {
+    if (root.value && !root.value.contains(event.target)) {
+        open.value = false
+    }
+}
+
+function onKeydown(event) {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+        open.value = false
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('click', onClickOutside)
+    document.addEventListener('keydown', onKeydown)
+})
+onBeforeUnmount(() => {
+    document.removeEventListener('click', onClickOutside)
+    document.removeEventListener('keydown', onKeydown)
+})
+</script>
+
+<template>
+    <div ref="root" class="rich-select">
+        <button
+            type="button"
+            class="rich-select__trigger"
+            :aria-expanded="open"
+            @click="toggle"
+        >
+            <span class="rich-select__value">
+                <template v-if="selected">
+                    <Icon v-if="selected.icon" :key="selected.value" :name="selected.icon"/>
+                    <span>{{ selected.label }}</span>
+                </template>
+                <span v-else class="rich-select__placeholder">{{ placeholder }}</span>
+            </span>
+            <span class="rich-select__caret" aria-hidden="true">▾</span>
+        </button>
+
+        <ul v-if="open" class="rich-select__list" role="listbox">
+            <li
+                v-for="option in options"
+                :key="option.value"
+                class="rich-select__option"
+                :class="{ 'rich-select__option--active': option.value === modelValue }"
+                role="option"
+                :aria-selected="option.value === modelValue"
+                @click="select(option)"
+            >
+                <Icon v-if="option.icon" :name="option.icon"/>
+                <span>{{ option.label }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped>
+.rich-select {
+    position: relative;
+    width: 100%;
+}
+
+.rich-select__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 10px;
+    padding: 6px 10px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    background: #fff;
+    cursor: pointer;
+    font-size: 0.95rem;
+    box-sizing: border-box;
+}
+
+.rich-select__trigger:hover {
+    border-color: #2563eb;
+}
+
+.rich-select__value {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.rich-select__placeholder {
+    color: #9ca3af;
+}
+
+.rich-select__caret {
+    color: #6b7280;
+    font-size: 0.8rem;
+}
+
+.rich-select__list {
+    position: absolute;
+    z-index: 50;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 4px;
+    list-style: none;
+    background: #fff;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    max-height: 260px;
+    overflow: auto;
+}
+
+.rich-select__option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.rich-select__option:hover {
+    background: #eff6ff;
+}
+
+.rich-select__option--active {
+    background: #dbeafe;
+    font-weight: 600;
+}
+</style>

database/migrations/2026_08_05_140010_add_payment_options_to_event_participants.php

@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::table('event_participants', function (Blueprint $table) {
+            // Payer-seitige Eingaben der gewählten Zahlungsart (Schema je Modul: getParticipantOptions()).
+            $table->json('payment_options')->nullable()->after('payment_method');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('event_participants', function (Blueprint $table) {
+            $table->dropColumn('payment_options');
+        });
+    }
+};

resources/js/constants/paymentMethodIcons.js

@@ -0,0 +1,17 @@
+// Kuratierte Liste zahlungsrelevanter Font-Awesome-Solid-Icons für die Symbol-Auswahl einer
+// Zahlungsart. Die Namen sind über app/Views/Components/Icon.vue (free-solid) gedeckt und werden
+// beim Build gebündelt (kein Netzwerk-Load). value === icon (FA-Solid-Name im kebab-case).
+export const PAYMENT_METHOD_ICONS = [
+    {value: 'building-columns', label: 'Bank / Überweisung', icon: 'building-columns'},
+    {value: 'money-bill-wave', label: 'Bargeld', icon: 'money-bill-wave'},
+    {value: 'credit-card', label: 'Kreditkarte', icon: 'credit-card'},
+    {value: 'wallet', label: 'Geldbörse', icon: 'wallet'},
+    {value: 'coins', label: 'Münzen', icon: 'coins'},
+    {value: 'euro-sign', label: 'Euro', icon: 'euro-sign'},
+    {value: 'hand-holding-dollar', label: 'Spende', icon: 'hand-holding-dollar'},
+    {value: 'sack-dollar', label: 'Geldsack', icon: 'sack-dollar'},
+    {value: 'money-check-dollar', label: 'Scheck', icon: 'money-check-dollar'},
+    {value: 'receipt', label: 'Beleg', icon: 'receipt'},
+    {value: 'piggy-bank', label: 'Sparschwein', icon: 'piggy-bank'},
+    {value: 'mobile-screen', label: 'Mobil / App', icon: 'mobile-screen'},
+]

tests/Feature/PaymentMethodConfigurationTest.php

@@ -4,13 +4,12 @@ namespace Tests\Feature;
 
 use App\Domains\Admin\Actions\UpdateAvailablePaymentMethod\UpdateAvailablePaymentMethodAction;
 use App\Domains\Admin\Actions\UpdateAvailablePaymentMethod\UpdateAvailablePaymentMethodRequest;
-use App\Domains\Event\Actions\UpdateEvent\UpdateEventCommand;
+use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsCommand;
-use App\Domains\Event\Actions\UpdateEvent\UpdateEventRequest;
+use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsRequest;
 use App\Models\AvailablePaymentMethod;
 use App\Models\Event;
 use App\Models\PaymentMethod;
 use App\Models\Tenant;
-use App\ValueObjects\Amount;
 use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Support\Facades\DB;
 use Tests\TestCase;
@@ -156,26 +155,9 @@ class PaymentMethodConfigurationTest extends TestCase
      */
     private function runUpdateEvent(Event $event, array $slugs, array $configs = []): void
     {
-        $request = new UpdateEventRequest(
+        $request = new SetPaymentMethodsRequest($event, $slugs, $configs);
-            $event,
-            $event->name,
-            $event->location,
-            $event->postal_code,
-            $event->email,
-            new \DateTime('2026-07-01'),
-            new \DateTime('2026-07-20'),
-            16,
-            false,
-            false,
-            Amount::fromString('0'),
-            Amount::fromString('0'),
-            [],
-            [],
-            $slugs,
-            $configs,
-        );
 
-        $response = new UpdateEventCommand($request)->execute();
+        $response = new SetPaymentMethodsCommand($request)->execute();
         $this->assertTrue($response->success, $response->message);
     }
 }

tests/Feature/SignUpPaymentOptionsTest.php

@@ -0,0 +1,118 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Domains\Event\Actions\SignUp\SignUpCommand;
+use App\Domains\Event\Actions\SignUp\SignUpRequest;
+use App\Enumerations\EatingHabit;
+use App\Enumerations\EfzStatus;
+use App\Enumerations\FirstAidPermission;
+use App\Enumerations\ParticipationType;
+use App\Enumerations\SwimmingPermission;
+use App\Models\AvailablePaymentMethod;
+use App\Models\Event;
+use App\Models\PaymentMethod;
+use App\Models\Tenant;
+use App\Resources\AvailablePaymentMethodResource;
+use App\ValueObjects\Amount;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\DB;
+use Tests\TestCase;
+
+class SignUpPaymentOptionsTest extends TestCase
+{
+    use RefreshDatabase;
+
+    private Tenant $tenant;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->tenant = Tenant::create([
+            'slug' => 'tv', 'name' => 'Test', 'email' => 't@example.com', 'email_finance' => 'f@example.com',
+            'url' => 'test.local', 'account_name' => 'Test e.V.', 'account_iban' => 'DE00', 'account_bic' => 'XY',
+            'city' => 'Stadt', 'postcode' => '00000', 'is_active_local_group' => true, 'has_active_instance' => true,
+        ]);
+        app()->instance('tenant', $this->tenant);
+
+        PaymentMethod::create(['slug' => PaymentMethod::PAYMENT_ACCOUNT_TRANSACTION]);
+        DB::table('participation_fee_types')->insert(['slug' => 'FIXED', 'name' => 'Fixed', 'created_at' => now(), 'updated_at' => now()]);
+        ParticipationType::create(['slug' => ParticipationType::PARTICIPATION_TYPE_PARTICIPANT, 'name' => 'Teilnehmende']);
+        EfzStatus::create(['slug' => EfzStatus::EFZ_STATUS_NOT_CHECKED, 'name' => 'Nicht geprüft']);
+        EfzStatus::create(['slug' => EfzStatus::EFZ_STATUS_NOT_REQUIRED, 'name' => 'Nicht erforderlich']);
+        SwimmingPermission::create(['slug' => SwimmingPermission::SWIMMING_PERMISSION_ALLOWED, 'name' => 'Darf baden', 'short' => 'Erteilt']);
+        FirstAidPermission::create(['slug' => FirstAidPermission::FIRST_AID_PERMISSION_ALLOWED, 'name' => 'Zugestimmt', 'description' => '']);
+        EatingHabit::create(['slug' => EatingHabit::EATING_HABIT_VEGAN, 'name' => 'Vegan']);
+    }
+
+    private function createEvent(): Event
+    {
+        return Event::create([
+            'tenant' => $this->tenant->slug, 'name' => 'Event', 'identifier' => 'evt-1', 'location' => 'Ort',
+            'postal_code' => '00000', 'email' => 'e@example.com', 'start_date' => '2026-08-01', 'end_date' => '2026-08-05',
+            'early_bird_end' => '2026-07-01', 'registration_final_end' => '2026-07-20', 'early_bird_end_amount_increase' => 0,
+            'account_owner' => 'Owner', 'account_iban' => 'DE00', 'participation_fee_type' => 'FIXED',
+            'pay_per_day' => false, 'pay_direct' => false,
+        ]);
+    }
+
+    private function signUpRequest(Event $event, array $paymentOptions): SignUpRequest
+    {
+        return new SignUpRequest(
+            $event, null, 'Hans', 'Muster', null, ParticipationType::PARTICIPATION_TYPE_PARTICIPANT,
+            $this->tenant, new \DateTime('2000-01-01'), 'Weg 1', null, '00000', 'Stadt',
+            'h@example.com', '123', null, null, null, null, null, null, null,
+            'vegan', null, null, false, false, false, false, false,
+            new \DateTime('2026-08-01'), new \DateTime('2026-08-05'), 0, 0, null,
+            new Amount(50.0, ' Euro'), PaymentMethod::PAYMENT_ACCOUNT_TRANSACTION, $paymentOptions,
+        );
+    }
+
+    public function test_payment_options_are_sanitized_and_stored(): void
+    {
+        $event = $this->createEvent();
+
+        // Überweisung hat keine Teilnehmer-Eingaben -> alles wird verworfen, payment_options bleibt leer.
+        $response = new SignUpCommand($this->signUpRequest($event, ['evil' => 'x']))->execute();
+
+        $this->assertTrue($response->success);
+        $this->assertSame([], $response->participant->payment_options);
+        // payment_purpose wird immer erzeugt (AC #4).
+        $this->assertStringContainsString('Beitrag Hans Muster', $response->participant->payment_purpose);
+    }
+
+    public function test_resource_exposes_participant_options_schema(): void
+    {
+        $event = $this->createEvent();
+        AvailablePaymentMethod::create([
+            'tenant' => $this->tenant->slug, 'slug' => PaymentMethod::PAYMENT_ACCOUNT_TRANSACTION,
+            'name' => 'Überweisung', 'active' => true, 'configuration' => ['account_owner' => 'Kasse', 'iban' => 'DE1'],
+        ]);
+
+        $method = AvailablePaymentMethod::where('slug', PaymentMethod::PAYMENT_ACCOUNT_TRANSACTION)->first();
+        $array = new AvailablePaymentMethodResource($method)->toArray(request());
+
+        $this->assertArrayHasKey('participantOptionsSchema', $array);
+        $this->assertSame([], $array['participantOptionsSchema']); // Überweisung: keine Teilnehmer-Eingaben
+    }
+
+    public function test_payment_methods_serialize_without_data_wrapper(): void
+    {
+        AvailablePaymentMethod::create([
+            'tenant' => $this->tenant->slug, 'slug' => PaymentMethod::PAYMENT_ACCOUNT_TRANSACTION,
+            'name' => 'Überweisung', 'active' => true, 'configuration' => ['account_owner' => 'Kasse', 'iban' => 'DE1'],
+        ]);
+        $method = AvailablePaymentMethod::where('slug', PaymentMethod::PAYMENT_ACCOUNT_TRANSACTION)->first();
+
+        // Exakt so serialisiert EventResource die Methoden fürs Frontend.
+        $serialized = collect([$method])->map(
+            fn($m) => new AvailablePaymentMethodResource($m)->toArray(request())
+        )->toArray();
+
+        // Kein data-Wrapper: slug/active liegen top-level (sonst wäre m.active im Frontend undefined -> leere Liste).
+        $this->assertArrayNotHasKey('data', $serialized[0]);
+        $this->assertSame(PaymentMethod::PAYMENT_ACCOUNT_TRANSACTION, $serialized[0]['slug']);
+        $this->assertTrue($serialized[0]['active']);
+    }
+}

tests/Unit/EventPaymentModuleRegistryTest.php

@@ -50,6 +50,54 @@ class EventPaymentModuleRegistryTest extends TestCase
         $this->assertTrue($module->isConfigurationComplete(['iban' => 'DE123', 'account_owner' => 'Kasse']));
     }
 
+    public function test_participant_options_per_module(): void
+    {
+        // Überweisung: keine payer-seitigen Eingaben.
+        $this->assertSame([], (new AccountTransferPaymentModule())->getParticipantOptions());
+
+        // Sonstiges: exemplarische Teilnehmer-Eingaben (Betrag + Passend-Checkbox).
+        $undefined = (new UndefinedPaymentModule())->getParticipantOptions();
+        $this->assertSame(['amount_brought', 'has_exact_amount'], array_column($undefined, 'name'));
+        $this->assertSame('checkbox', $undefined[1]['type']);
+    }
+
+    public function test_participant_option_helpers(): void
+    {
+        // Anonymes Modul mit einer Pflicht-Teilnehmereingabe.
+        $module = new class extends \App\EventPaymentModules\AbstractEventPaymentModule {
+            public static function slug(): string
+            {
+                return 'TEST';
+            }
+
+            public function defaultName(): string
+            {
+                return 'Test';
+            }
+
+            public function getOptions(): array
+            {
+                return [];
+            }
+
+            public function getParticipantOptions(): array
+            {
+                return [['name' => 'iban', 'label' => 'IBAN', 'type' => 'string', 'required' => true]];
+            }
+
+            protected function invoiceClosingStatement(\App\EventPaymentModules\DTO\CreateInvoiceRequest $request): string
+            {
+                return '';
+            }
+        };
+
+        // sanitize verwirft unbekannte Keys, complete verlangt Pflichtfeld non-empty.
+        $this->assertSame(['iban' => 'DE1'], $module->sanitizeParticipantOptions(['iban' => 'DE1', 'evil' => 'x']));
+        $this->assertFalse($module->participantOptionsComplete([]));
+        $this->assertFalse($module->participantOptionsComplete(['iban' => '']));
+        $this->assertTrue($module->participantOptionsComplete(['iban' => 'DE1']));
+    }
+
     public function test_only_account_transfer_provides_giro_code(): void
     {
         $this->assertInstanceOf(ProvidesGiroCode::class, new AccountTransferPaymentModule());

version

@@ -1 +1 @@
-4.5.3
+4.6.1