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";
 
@@ -97,7 +99,9 @@ async function save() {
                 <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"/>
                     </td>
                 </tr>

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/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/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,30 +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
-        }
-
         const response = await request('/api/v1/event/details/' + props.event.id + '/common-settings', {
             method: 'POST',
             headers: {
@@ -94,8 +68,6 @@ const emit = defineEmits(['close'])
                 supportPerson: formData.supportPerson,
                 contributingLocalGroups: contributingLocalGroups.value,
                 eatingHabits: eatingHabits.value,
-                paymentMethods: paymentMethods.value,
-                paymentMethodConfigurations: paymentMethodConfigurations,
             }
         })
 
@@ -227,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>
 
 
@@ -308,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/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,73 @@
             </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"/>
+        </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;
+}
+</style>

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

@@ -15,10 +15,13 @@ const selectedMethod = computed(() =>
 
 const participantSchema = computed(() => selectedMethod.value?.participantOptionsSchema ?? [])
 
-// Font-Awesome-Icon je Zahlungsart (Fallback: generische Karte).
+// Font-Awesome-Icon je Zahlungsart: konfiguriertes Symbol hat Vorrang, sonst Slug-Default
-function iconFor(slug) {
+// (Fallback: generische Karte).
-    if (slug === 'PAYMENT_ACCOUNT_TRANSACTION') return 'building-columns'
+function iconFor(method) {
-    if (slug === 'PAYMENT_NOT_DEFINED') return 'money-bill-wave'
+    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'
 }
 
@@ -60,7 +63,7 @@ const canProceed = computed(() => {
                 @keydown.space.prevent="selectMethod(method.slug)"
             >
                 <div class="pay-card__badge">
-                    <Icon :name="iconFor(method.slug)"/>
+                    <Icon :name="iconFor(method)"/>
                 </div>
                 <div class="pay-card__body">
                     <h4 class="pay-card__title">{{ method.name }}</h4>

app/EventPaymentModules/Modules/AccountTransferPaymentModule.php

@@ -33,7 +33,8 @@ class AccountTransferPaymentModule extends AbstractEventPaymentModule implements
             ['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ätigungstext (Zusammenfassung, {amount} als Platzhalter)', '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

@@ -29,6 +29,7 @@ class UndefinedPaymentModule extends AbstractEventPaymentModule
     {
         return [
             ['name' => 'payment_information', 'label' => 'Zahlungsinformationen', 'type' => 'richtext', 'required' => true],
+            ['name' => 'icon', 'label' => 'Symbol', 'type' => 'icon', 'required' => false],
         ];
     }
 

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>

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);
     }
 }