diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
index 1b506553..97290317 100644
--- a/src/resources/vue/Wallet.vue
+++ b/src/resources/vue/Wallet.vue
@@ -1,446 +1,446 @@
 <template>
     <div class="container" dusk="wallet-component">
         <div v-if="wallet.id" id="wallet" class="card">
             <div class="card-body">
                 <div class="card-title">{{ $t('wallet.title') }} <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'">{{ $root.price(wallet.balance, wallet.currency) }}</span></div>
                 <div class="card-text">
                     <p v-if="wallet.notice" id="wallet-notice">{{ wallet.notice }}</p>
 
                     <div v-if="showPendingPayments" class="alert alert-warning">
                         {{ $t('wallet.pending-payments-warning') }}
                     </div>
                     <p>
                         <btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn>
                     </p>
                     <div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
                         <template v-if="mandate.id && !mandate.isValid">
                             <div class="alert alert-danger">
                                 {{ $t('wallet.auto-payment-failed') }}
                             </div>
                             <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
                         </template>
                         <btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn>
                     </div>
                     <div id="mandate-info" v-else>
                         <div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger">
                             {{ $t('wallet.auto-payment-disabled') }}
                         </div>
                         <template v-else>
                             <p v-html="$t('wallet.auto-payment-info', { amount: mandate.amount + ' ' + wallet.currency, balance: mandate.balance + ' ' + wallet.currency})"></p>
                             <p>{{ $t('wallet.payment-method', { method: mandate.method }) }}</p>
                         </template>
                         <div v-if="mandate.isPending" class="alert alert-warning">
                             {{ $t('wallet.auto-payment-inprogress') }}
                         </div>
                         <p class="buttons">
                             <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
                             <btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn>
                         </p>
                     </div>
                 </div>
             </div>
         </div>
 
         <ul class="nav nav-tabs mt-3" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="tab-receipts" href="#wallet-receipts" role="tab" aria-controls="wallet-receipts" aria-selected="true">
                     {{ $t('wallet.receipts') }}
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false">
                     {{ $t('wallet.history') }}
                 </a>
             </li>
             <li v-if="showPendingPayments" class="nav-item">
                 <a class="nav-link" id="tab-payments" href="#wallet-payments" role="tab" aria-controls="wallet-payments" aria-selected="false">
                     {{ $t('wallet.pending-payments') }}
                 </a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts">
                 <div class="card-body">
                     <div class="card-text">
                         <p v-if="receipts.length">
                             {{ $t('wallet.receipts-hint') }}
                         </p>
                         <div v-if="receipts.length" class="input-group">
                             <select id="receipt-id" class="form-control">
                                 <option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option>
                             </select>
                             <btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn>
                         </div>
                         <p v-if="!receipts.length">
                             {{ $t('wallet.receipts-none') }}
                         </p>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="wallet-history" role="tabpanel" aria-labelledby="tab-history">
                 <div class="card-body">
                     <transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log>
                 </div>
             </div>
             <div class="tab-pane" id="wallet-payments" role="tabpanel" aria-labelledby="tab-payments">
                 <div class="card-body">
                     <payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log>
                 </div>
             </div>
         </div>
 
         <div id="payment-dialog" class="modal" tabindex="-1" role="dialog">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">{{ paymentDialogTitle }}</h5>
                         <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
                     </div>
                     <div class="modal-body">
                         <div id="payment-method" v-if="paymentForm == 'method'">
                             <form data-validation-prefix="mandate_">
                                 <div id="payment-method-selection">
-                                    <a :id="method.id" v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" :class="'card link-' + method.id">
+                                    <a v-for="method in paymentMethods" :key="method.id" @click="selectPaymentMethod(method)" href="#" :class="'card link-' + method.id">
                                         <svg-icon v-if="method.icon" :icon="[method.icon.prefix, method.icon.name]" />
                                         <img v-if="method.image" :src="method.image" />
                                         <span class="name">{{ method.name }}</span>
                                     </a>
                                 </div>
                             </form>
                         </div>
                         <div id="manual-payment" v-if="paymentForm == 'manual'">
                             <p v-if="wallet.currency != selectedPaymentMethod.currency">
                                 {{ $t('wallet.currency-conv', { wc: wallet.currency, pc: selectedPaymentMethod.currency }) }}
                             </p>
                             <p v-if="selectedPaymentMethod.id == 'banktransfer'">
                                 {{ $t('wallet.banktransfer-hint') }}
                             </p>
                             <p>
                                 {{ $t('wallet.payment-amount-hint') }}
                             </p>
                             <form id="payment-form" @submit.prevent="payment">
                                 <div class="input-group">
                                     <input type="text" class="form-control" id="amount" v-model="amount" required>
                                     <span class="input-group-text">{{ wallet.currency }}</span>
                                 </div>
                                 <div v-if="wallet.currency != selectedPaymentMethod.currency && !isNaN(amount)" class="alert alert-warning m-0 mt-3">
                                     {{ $t('wallet.payment-warning', { price: $root.price(amount * selectedPaymentMethod.exchangeRate * 100, selectedPaymentMethod.currency) }) }}
                                 </div>
                             </form>
                         </div>
                         <div id="auto-payment" v-if="paymentForm == 'auto'">
                             <form data-validation-prefix="mandate_">
                                 <p>
                                     {{ $t('wallet.auto-payment-hint') }}
                                 </p>
                                 <div class="row mb-3">
                                     <label for="mandate_amount" class="col-sm-6 col-form-label">{{ $t('wallet.fill-up') }}</label>
                                     <div class="col-sm-6">
                                         <div class="input-group">
                                             <input type="text" class="form-control" id="mandate_amount" v-model="mandate.amount" required>
                                             <span class="input-group-text">{{ wallet.currency }}</span>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="row mb-3">
                                     <label for="mandate_balance" class="col-sm-6 col-form-label">{{ $t('wallet.when-below') }}</label>
                                     <div class="col-sm-6">
                                         <div class="input-group">
                                             <input type="text" class="form-control" id="mandate_balance" v-model="mandate.balance" required>
                                             <span class="input-group-text">{{ wallet.currency }}</span>
                                         </div>
                                     </div>
                                 </div>
                                 <p v-if="!mandate.isValid">
                                     {{ $t('wallet.auto-payment-next') }}
                                 </p>
                                 <div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger m-0">
                                     {{ $t('wallet.auto-payment-disabled-next') }}
                                 </div>
                             </form>
                         </div>
                     </div>
                     <div class="modal-footer">
                         <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
                         <btn class="btn-primary modal-action" icon="check" @click="autoPayment"
                              v-if="paymentForm == 'auto' && (mandate.isValid || mandate.isPending)"
                         >
                             {{ $t('btn.submit') }}
                         </btn>
                         <btn class="btn btn-primary modal-action" icon="check" @click="autoPayment"
                              v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
                         >
                             {{ $t('btn.continue') }}
                         </btn>
                         <btn class="btn-primary modal-action" icon="check" @click="payment"
                              v-if="paymentForm == 'manual'"
                         >
                             {{ $t('btn.continue') }}
                         </btn>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import { Modal } from 'bootstrap'
     import TransactionLog from './Widgets/TransactionLog'
     import PaymentLog from './Widgets/PaymentLog'
 
     import { library } from '@fortawesome/fontawesome-svg-core'
 
     library.add(
         require('@fortawesome/free-brands-svg-icons/faPaypal').definition,
         require('@fortawesome/free-regular-svg-icons/faCreditCard').definition,
         require('@fortawesome/free-solid-svg-icons/faBuildingColumns').definition,
     )
 
     export default {
         components: {
             TransactionLog,
             PaymentLog
         },
         data() {
             return {
                 amount: '',
                 mandate: { amount: 10, balance: 0, method: null },
                 paymentDialogTitle: null,
                 paymentForm: null,
                 nextForm: null,
                 receipts: [],
                 stripe: null,
                 loadTransactions: false,
                 loadPayments: false,
                 showPendingPayments: false,
                 wallet: {},
                 walletId: null,
                 paymentMethods: [],
                 selectedPaymentMethod: null
             }
         },
         mounted() {
             $('#wallet button').focus()
 
             this.walletId = this.$root.authInfo.wallets[0].id
 
             this.$root.startLoading()
             axios.get('/api/v4/wallets/' + this.walletId)
                 .then(response => {
                     this.$root.stopLoading()
                     this.wallet = response.data
 
                     const receiptsTab = $('#wallet-receipts')
 
                     this.$root.addLoader(receiptsTab)
                     axios.get('/api/v4/wallets/' + this.walletId + '/receipts')
                         .then(response => {
                             this.$root.removeLoader(receiptsTab)
                             this.receipts = response.data.list
                         })
                         .catch(error => {
                             this.$root.removeLoader(receiptsTab)
                         })
 
                     if (this.wallet.provider == 'stripe') {
                         this.stripeInit()
                     }
                 })
                 .catch(this.$root.errorHandler)
 
             this.loadMandate()
 
             axios.get('/api/v4/payments/has-pending')
                 .then(response => {
                     this.showPendingPayments = response.data.hasPending
                 })
         },
         updated() {
             $(this.$el).find('ul.nav-tabs a').on('click', e => {
                 this.$root.tab(e)
 
                 if ($(e.target).is('#tab-history')) {
                     this.loadTransactions = true
                 } else if ($(e.target).is('#tab-payments')) {
                     this.loadPayments = true
                 }
             })
         },
         methods: {
             loadMandate() {
                 const mandate_form = $('#mandate-form')
 
                 this.$root.removeLoader(mandate_form)
 
                 if (!this.mandate.id || this.mandate.isPending) {
                     this.$root.addLoader(mandate_form)
                     axios.get('/api/v4/payments/mandate')
                         .then(response => {
                             this.$root.removeLoader(mandate_form)
                             this.mandate = response.data
                         })
                         .catch(error => {
                             this.$root.removeLoader(mandate_form)
                         })
                 }
             },
             selectPaymentMethod(method) {
                 this.formLock = false
                 this.selectedPaymentMethod = method
                 this.paymentForm = this.nextForm
 
                 setTimeout(() => { $('#payment-dialog').find('#amount,#mandate_amount').focus() }, 10)
             },
             payment() {
                 if (this.formLock) {
                     return
                 }
 
                 // Lock the form to prevent from double submission
                 this.formLock = true
                 let onFinish = () => { this.formLock = false }
 
                 this.$root.clearFormValidation($('#payment-form'))
 
                 const post =  {
                     amount: this.amount,
                     methodId: this.selectedPaymentMethod.id,
                     currency: this.selectedPaymentMethod.currency
                 }
 
                 axios.post('/api/v4/payments', post, { onFinish })
                     .then(response => {
                         if (response.data.redirectUrl) {
                             location.href = response.data.redirectUrl
                         } else {
                             this.stripeCheckout(response.data)
                         }
                     })
             },
             autoPayment() {
                 if (this.formLock) {
                     return
                 }
 
                 // Lock the form to prevent from double submission
                 this.formLock = true
                 let onFinish = () => { this.formLock = false }
 
                 const method = this.mandate.id && (this.mandate.isValid || this.mandate.isPending) ? 'put' : 'post'
                 let post = {
                     amount: this.mandate.amount,
                     balance: this.mandate.balance,
                 }
 
                 // Modifications can't change the method of payment
                 if (this.selectedPaymentMethod) {
                     post.methodId = this.selectedPaymentMethod.id
                     post.currency = this.selectedPaymentMethod.currency
                 }
 
                 this.$root.clearFormValidation($('#auto-payment form'))
 
                 axios[method]('/api/v4/payments/mandate', post, { onFinish })
                     .then(response => {
                         if (method == 'post') {
                             this.mandate.id = null
                             // a new mandate, redirect to the chackout page
                             if (response.data.redirectUrl) {
                                 location.href = response.data.redirectUrl
                             } else if (response.data.id) {
                                 this.stripeCheckout(response.data)
                             }
                         } else {
                             // an update
                             if (response.data.status == 'success') {
                                 this.dialog.hide();
                                 this.mandate = response.data
                                 this.$toast.success(response.data.message)
                             }
                         }
                     })
             },
             autoPaymentChange(event) {
                 this.autoPaymentForm(event, this.$t('wallet.auto-payment-update'))
             },
             autoPaymentDelete() {
                 axios.delete('/api/v4/payments/mandate')
                     .then(response => {
                         this.mandate = { amount: 10, balance: 0 }
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                         }
                     })
             },
             paymentMethodForm(nextForm) {
                 this.formLock = false
                 this.paymentMethods = []
                 this.paymentForm = 'method'
                 this.nextForm = nextForm
                 this.paymentDialogTitle = this.$t(nextForm == 'auto' ? 'wallet.auto-payment-setup' : 'wallet.top-up')
 
                 this.dialog = new Modal('#payment-dialog')
                 this.dialog.show()
 
                 this.$nextTick().then(() => {
                     const form = $('#payment-method')
                     const type = nextForm == 'manual' ? 'oneoff' : 'recurring'
 
                     this.$root.addLoader(form, false, { 'min-height': '10em' })
 
                     axios.get('/api/v4/payments/methods', { params: { type } })
                         .then(response => {
                             this.$root.removeLoader(form)
                             this.paymentMethods = response.data
                         })
                 })
             },
             autoPaymentForm(event, title) {
                 this.paymentForm = 'auto'
                 this.paymentDialogTitle = title
                 this.formLock = false
 
                 this.dialog = new Modal('#payment-dialog')
                 this.dialog.show()
             },
             receiptDownload() {
                 const receipt = $('#receipt-id').val()
                 this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt)
             },
             stripeInit() {
                 let script = $('#stripe-script')
 
                 if (!script.length) {
                     script = document.createElement('script')
 
                     script.onload = () => {
                         this.stripe = Stripe(window.config.stripePK)
                     }
 
                     script.id = 'stripe-script'
                     script.src = 'https://js.stripe.com/v3/'
 
                     document.getElementsByTagName('head')[0].appendChild(script)
                 } else {
                     this.stripe = Stripe(window.config.stripePK)
                 }
             },
             stripeCheckout(data) {
                 if (!this.stripe) {
                     return
                 }
 
                 this.stripe.redirectToCheckout({
                     sessionId: data.id
                 }).then(result => {
                     // If it fails due to a browser or network error,
                     // display the localized error message to the user
                     if (result.error) {
                         this.$toast.error(result.error.message)
                     }
                 })
             }
         }
     }
 </script>
diff --git a/src/tests/Browser/PaymentMollieTest.php b/src/tests/Browser/PaymentMollieTest.php
index 99241290..be1fd720 100644
--- a/src/tests/Browser/PaymentMollieTest.php
+++ b/src/tests/Browser/PaymentMollieTest.php
@@ -1,313 +1,313 @@
 <?php
 
 namespace Tests\Browser;
 
 use App\Providers\PaymentProvider;
 use App\Wallet;
 use Tests\Browser;
 use Tests\Browser\Components\Dialog;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\PaymentMollie;
 use Tests\Browser\Pages\Wallet as WalletPage;
 use Tests\TestCaseDusk;
 
 class PaymentMollieTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
 
         $this->deleteTestUser('payment-test@kolabnow.com');
     }
 
     /**
      * {@inheritDoc}
      */
     public function tearDown(): void
     {
         $this->deleteTestUser('payment-test@kolabnow.com');
 
         parent::tearDown();
     }
 
     /**
      * Test the payment process
      *
      * @group mollie
      */
     public function testPayment(): void
     {
         $user = $this->getTestUser('payment-test@kolabnow.com', [
                 'password' => 'simple123',
         ]);
 
         $this->browse(function (Browser $browser) use ($user) {
             $browser->visit(new Home())
                 ->submitLogon('payment-test@kolabnow.com', 'simple123', true, ['paymentProvider' => 'mollie'])
                 ->on(new Dashboard())
                 ->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertSeeIn('@main button', 'Add credit')
                 ->click('@main button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Top up your wallet')
-                        ->waitFor('#payment-method-selection #creditcard')
-                        ->waitFor('#payment-method-selection #paypal')
-                        ->waitFor('#payment-method-selection #banktransfer')
-                        ->click('#creditcard');
+                        ->waitFor('#payment-method-selection .link-creditcard svg')
+                        ->waitFor('#payment-method-selection .link-paypal svg')
+                        ->waitFor('#payment-method-selection .link-banktransfer svg')
+                        ->click('#payment-method-selection .link-creditcard');
                 })
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Top up your wallet')
                         ->assertFocused('#amount')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Continue')
                         // Test error handling
                         ->type('@body #amount', 'aaa')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertSeeIn('#amount + span + .invalid-feedback', 'The amount must be a number.')
                         // Submit valid data
                         ->type('@body #amount', '12.34')
                         // Note we use double click to assert it does not create redundant requests
                         ->click('@button-action')
                         ->click('@button-action');
                 })
                 ->on(new PaymentMollie())
                 ->assertSeeIn('@title', $user->tenant->title . ' Payment')
                 ->assertSeeIn('@amount', 'CHF 12.34');
 
             $this->assertSame(1, $user->wallets()->first()->payments()->count());
 
             // Looks like the Mollie testing mode is limited.
             // We'll select credit card method and mark the payment as paid
             // We can't do much more, we have to trust Mollie their page works ;)
 
             // For some reason I don't get the method selection form, it
             // immediately jumps to the next step. Let's detect that
             if ($browser->element('@methods')) {
                 $browser->click('@methods button.grid-button-creditcard')
                     ->waitFor('button.form__button');
             }
 
             $browser->click('@status-table input[value="paid"]')
                 ->click('button.form__button');
 
             // Now it should redirect back to wallet page and in background
             // use the webhook to update payment status (and balance).
 
             // Looks like in test-mode the webhook is executed before redirect
             // so we can expect balance updated on the wallet page
 
             $browser->waitForLocation('/wallet')
                 ->on(new WalletPage())
                 ->assertSeeIn('@main .card-title', 'Account balance 12,34 CHF');
         });
     }
 
     /**
      * Test the auto-payment setup process
      *
      * @group mollie
      */
     public function testAutoPaymentSetup(): void
     {
         $user = $this->getTestUser('payment-test@kolabnow.com', [
                 'password' => 'simple123',
         ]);
 
         $this->browse(function (Browser $browser) use ($user) {
             $browser->visit(new Home())
                 ->submitLogon('payment-test@kolabnow.com', 'simple123', true, ['paymentProvider' => 'mollie'])
                 ->on(new Dashboard())
                 ->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertMissing('@body #mandate-form .alert')
                 ->click('@main #mandate-form button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Set up auto-payment')
-                        ->waitFor('#payment-method-selection #creditcard')
-                        ->assertMissing('#payment-method-selection #paypal')
-                        ->assertMissing('#payment-method-selection #banktransfer')
-                        ->click('#creditcard');
+                        ->waitFor('#payment-method-selection .link-creditcard svg')
+                        ->assertMissing('#payment-method-selection .link-paypal')
+                        ->assertMissing('#payment-method-selection .link-banktransfer')
+                        ->click('#payment-method-selection .link-creditcard');
                 })
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Set up auto-payment')
                         ->assertSeeIn('@body label[for="mandate_amount"]', 'Fill up by')
                         ->assertValue('@body #mandate_amount', PaymentProvider::MIN_AMOUNT / 100)
                         ->assertSeeIn('@body label[for="mandate_balance"]', 'when account balance is below') // phpcs:ignore
                         ->assertValue('@body #mandate_balance', '0')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Continue')
                         // Test error handling
                         ->type('@body #mandate_amount', 'aaa')
                         ->type('@body #mandate_balance', '-1')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertVisible('@body #mandate_amount.is-invalid')
                         ->assertVisible('@body #mandate_balance.is-invalid')
                         ->assertSeeIn('#mandate_amount + span + .invalid-feedback', 'The amount must be a number.')
                         ->assertSeeIn('#mandate_balance + span + .invalid-feedback', 'The balance must be at least 0.')
                         ->type('@body #mandate_amount', 'aaa')
                         ->type('@body #mandate_balance', '0')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertVisible('@body #mandate_amount.is-invalid')
                         ->assertMissing('@body #mandate_balance.is-invalid')
                         ->assertSeeIn('#mandate_amount + span + .invalid-feedback', 'The amount must be a number.')
                         ->assertMissing('#mandate_balance + span + .invalid-feedback')
                         // Submit valid data
                         ->type('@body #mandate_amount', '100')
                         ->type('@body #mandate_balance', '0')
                         // Note we use double click to assert it does not create redundant requests
                         ->click('@button-action')
                         ->click('@button-action');
                 })
                 ->on(new PaymentMollie())
                 ->assertSeeIn('@title', $user->tenant->title . ' Auto-Payment Setup')
                 ->assertMissing('@amount')
                 ->submitValidCreditCard()
                 ->waitForLocation('/wallet')
                 ->visit('/wallet?paymentProvider=mollie')
                 ->waitFor('#mandate-info')
                 ->assertPresent('#mandate-info p:first-child')
                 ->assertSeeIn(
                     '#mandate-info p:first-child',
                     'Auto-payment is set to fill up your account by 100 CHF ' .
                     'every time your account balance gets under 0 CHF.'
                 )
                 ->assertSeeIn(
                     '#mandate-info p:nth-child(2)',
                     'Mastercard (**** **** **** 6787)'
                 )
                 ->assertMissing('@body .alert');
 
             $this->assertSame(1, $user->wallets()->first()->payments()->count());
         });
 
         // Test updating (disabled) auto-payment
         $this->browse(function (Browser $browser) use ($user) {
             $wallet = $user->wallets()->first();
             $wallet->setSetting('mandate_disabled', 1);
 
             $browser->refresh()
                 ->on(new WalletPage())
                 ->waitFor('#mandate-info')
                 ->assertSeeIn(
                     '#mandate-info .disabled-mandate',
                     'The configured auto-payment has been disabled'
                 )
                 ->assertSeeIn('#mandate-info button.btn-primary', 'Change auto-payment')
                 ->click('#mandate-info button.btn-primary')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Update auto-payment')
                     ->assertSeeIn(
                         '@body form .disabled-mandate',
                         'The auto-payment is disabled.'
                     )
                     ->assertValue('@body #mandate_amount', '100')
                     ->assertValue('@body #mandate_balance', '0')
                     ->assertSeeIn('@button-cancel', 'Cancel')
                     ->assertSeeIn('@button-action', 'Submit')
                     // Test error handling
                     ->type('@body #mandate_amount', 'aaa')
                     ->click('@button-action')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                     ->assertVisible('@body #mandate_amount.is-invalid')
                     ->assertSeeIn('#mandate_amount + span + .invalid-feedback', 'The amount must be a number.')
                     // Submit valid data
                     ->type('@body #mandate_amount', '50')
                     ->click('@button-action');
                 })
                 ->waitUntilMissing('#payment-dialog')
                 ->assertToast(Toast::TYPE_SUCCESS, 'The auto-payment has been updated.')
                 // make sure the "disabled" text isn't there
                 ->assertMissing('#mandate-info .disabled-mandate')
                 ->click('#mandate-info button.btn-primary')
                 ->assertMissing('form .disabled-mandate')
                 ->click('button.modal-cancel');
         });
 
         // Test deleting auto-payment
         $this->browse(function (Browser $browser) {
             $browser->on(new WalletPage())
             ->waitFor('#mandate-info')
             ->assertSeeIn('#mandate-info * button.btn-danger', 'Cancel auto-payment')
             ->assertVisible('#mandate-info * button.btn-danger')
             ->click('#mandate-info * button.btn-danger')
             ->assertToast(Toast::TYPE_SUCCESS, 'The auto-payment has been removed.')
             ->assertVisible('#mandate-form')
             ->assertMissing('#mandate-info');
         });
 
         // Test pending and failed mandate
         $this->browse(function (Browser $browser) {
             $browser->on(new WalletPage())
                 ->assertMissing('@body #mandate-form .alert')
                 ->click('@main #mandate-form button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Set up auto-payment')
-                        ->waitFor('#payment-method-selection #creditcard')
-                        ->click('#creditcard');
+                        ->waitFor('#payment-method-selection .link-creditcard')
+                        ->click('#payment-method-selection .link-creditcard');
                 })
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Set up auto-payment')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Continue')
                         // Submit valid data
                         ->type('@body #mandate_amount', '100')
                         ->type('@body #mandate_balance', '0')
                         ->click('@button-action');
                 })
                 ->on(new PaymentMollie())
                 ->submitValidCreditCard('open')
                 ->waitForLocation('/wallet')
                 ->visit('/wallet?paymentProvider=mollie')
                 ->on(new WalletPage())
                 ->assertSeeIn(
                     '#mandate-info .alert-warning',
                     'The setup of the automatic payment is still in progress.'
                 )
                 // Delete the mandate
                 ->click('#mandate-info * button.btn-danger')
                 ->assertToast(Toast::TYPE_SUCCESS, 'The auto-payment has been removed.')
                 ->assertMissing('@body #mandate-form .alert')
 
                 // Create a new mandate
                 ->click('@main #mandate-form button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Set up auto-payment')
-                        ->waitFor('#payment-method-selection #creditcard')
-                        ->click('#creditcard');
+                        ->waitFor('#payment-method-selection .link-creditcard')
+                        ->click('#payment-method-selection .link-creditcard');
                 })
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Set up auto-payment')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Continue')
                         // Submit valid data
                         ->type('@body #mandate_amount', '100')
                         ->type('@body #mandate_balance', '0')
                         ->click('@button-action');
                 })
                 ->on(new PaymentMollie())
                 ->submitValidCreditCard('failed')
                 ->waitForLocation('/wallet')
                 ->visit('/wallet?paymentProvider=mollie')
                 ->on(new WalletPage())
                 ->waitFor('#mandate-form .alert-danger')
                 ->assertSeeIn(
                     '#mandate-form .alert-danger',
                     'The setup of automatic payments failed. Restart the process to enable'
                 )
                 ->click('@main button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->waitFor('#mandate-form')
                         ->assertMissing('#mandate-info');
                 });
         });
     }
 }
diff --git a/src/tests/Browser/PaymentStripeTest.php b/src/tests/Browser/PaymentStripeTest.php
index 9ddc0c1b..ce0db9e0 100644
--- a/src/tests/Browser/PaymentStripeTest.php
+++ b/src/tests/Browser/PaymentStripeTest.php
@@ -1,234 +1,234 @@
 <?php
 
 namespace Tests\Browser;
 
 use App\Providers\PaymentProvider;
 use App\Wallet;
 use Tests\Browser;
 use Tests\Browser\Components\Dialog;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\Browser\Pages\PaymentStripe;
 use Tests\Browser\Pages\Wallet as WalletPage;
 use Tests\TestCaseDusk;
 
 class PaymentStripeTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
 
         $this->deleteTestUser('payment-test@kolabnow.com');
     }
 
     /**
      * {@inheritDoc}
      */
     public function tearDown(): void
     {
         $this->deleteTestUser('payment-test@kolabnow.com');
 
         parent::tearDown();
     }
 
     /**
      * Test the payment process
      *
      * @group stripe
      */
     public function testPayment(): void
     {
         $user = $this->getTestUser('payment-test@kolabnow.com', [
                 'password' => 'simple123',
         ]);
 
         $this->browse(function (Browser $browser) use ($user) {
             $browser->visit(new Home())
                 ->submitLogon('payment-test@kolabnow.com', 'simple123', true, ['paymentProvider' => 'stripe'])
                 ->on(new Dashboard())
                 ->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertSeeIn('@main button', 'Add credit')
                 ->click('@main button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Top up your wallet')
-                        ->waitFor('#payment-method-selection #creditcard')
-                        ->waitFor('#payment-method-selection #paypal')
-                        ->assertMissing('#payment-method-selection #banktransfer')
-                        ->click('#creditcard');
+                        ->waitFor('#payment-method-selection .link-creditcard svg')
+                        ->waitFor('#payment-method-selection .link-paypal svg')
+                        ->assertMissing('#payment-method-selection .link-banktransfer svg')
+                        ->click('#payment-method-selection .link-creditcard');
                 })
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Top up your wallet')
                         ->assertFocused('#amount')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Continue')
                         // Test error handling
                         ->type('@body #amount', 'aaa')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertSeeIn('#amount + span + .invalid-feedback', 'The amount must be a number.')
                         // Submit valid data
                         ->type('@body #amount', '12.34')
                         // Note we use double click to assert it does not create redundant requests
                         ->click('@button-action')
                         ->click('@button-action');
                 })
                 ->on(new PaymentStripe())
                 ->assertSeeIn('@title', $user->tenant->title . ' Payment')
                 ->assertSeeIn('@amount', 'CHF 12.34')
                 ->assertValue('@email-input', $user->email)
                 ->submitValidCreditCard();
 
             // Now it should redirect back to wallet page and in background
             // use the webhook to update payment status (and balance).
 
             // Looks like in test-mode the webhook is executed before redirect
             // so we can expect balance updated on the wallet page
 
             $browser->waitForLocation('/wallet', 30) // need more time than default 5 sec.
                 ->on(new WalletPage())
                 ->assertSeeIn('@main .card-title', 'Account balance 12,34 CHF');
         });
     }
 
     /**
      * Test the auto-payment setup process
      *
      * @group stripe
      */
     public function testAutoPaymentSetup(): void
     {
         $user = $this->getTestUser('payment-test@kolabnow.com', [
                 'password' => 'simple123',
         ]);
 
         // Test creating auto-payment
         $this->browse(function (Browser $browser) use ($user) {
             $browser->visit(new Home())
                 ->submitLogon('payment-test@kolabnow.com', 'simple123', true, ['paymentProvider' => 'stripe'])
                 ->on(new Dashboard())
                 ->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->assertMissing('@body #mandate-form .alert')
                 ->click('@main #mandate-form button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Set up auto-payment')
-                        ->waitFor('#payment-method-selection #creditcard')
-                        ->assertMissing('#payment-method-selection #paypal')
-                        ->assertMissing('#payment-method-selection #banktransfer')
-                        ->click('#creditcard');
+                        ->waitFor('#payment-method-selection .link-creditcard')
+                        ->assertMissing('#payment-method-selection .link-paypal')
+                        ->assertMissing('#payment-method-selection .link-banktransfer')
+                        ->click('#payment-method-selection .link-creditcard');
                 })
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Set up auto-payment')
                         ->assertSeeIn('@body label[for="mandate_amount"]', 'Fill up by')
                         ->assertValue('@body #mandate_amount', PaymentProvider::MIN_AMOUNT / 100)
                         ->assertSeeIn('@body label[for="mandate_balance"]', 'when account balance is below') // phpcs:ignore
                         ->assertValue('@body #mandate_balance', '0')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Continue')
                         // Test error handling
                         ->type('@body #mandate_amount', 'aaa')
                         ->type('@body #mandate_balance', '-1')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertVisible('@body #mandate_amount.is-invalid')
                         ->assertVisible('@body #mandate_balance.is-invalid')
                         ->assertSeeIn('#mandate_amount + span + .invalid-feedback', 'The amount must be a number.')
                         ->assertSeeIn('#mandate_balance + span + .invalid-feedback', 'The balance must be at least 0.')
                         ->type('@body #mandate_amount', 'aaa')
                         ->type('@body #mandate_balance', '0')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertVisible('@body #mandate_amount.is-invalid')
                         ->assertMissing('@body #mandate_balance.is-invalid')
                         ->assertSeeIn('#mandate_amount + span + .invalid-feedback', 'The amount must be a number.')
                         ->assertMissing('#mandate_balance + span + .invalid-feedback')
                         // Submit valid data
                         ->type('@body #mandate_amount', '100')
                         ->type('@body #mandate_balance', '0')
                         // Note we use double click to assert it does not create redundant requests
                         ->click('@button-action')
                         ->click('@button-action');
                 })
                 ->on(new PaymentStripe())
                 ->assertMissing('@title')
                 ->assertMissing('@amount')
                 ->assertValue('@email-input', $user->email)
                 ->submitValidCreditCard()
                 ->waitForLocation('/wallet', 30) // need more time than default 5 sec.
                 ->visit('/wallet?paymentProvider=stripe')
                 ->waitFor('#mandate-info')
                 ->assertPresent('#mandate-info p:first-child')
                 ->assertSeeIn(
                     '#mandate-info p:first-child',
                     'Auto-payment is set to fill up your account by 100 CHF ' .
                     'every time your account balance gets under 0 CHF.'
                 )
                 ->assertSeeIn(
                     '#mandate-info p:nth-child(2)',
                     'Visa (**** **** **** 4242)'
                 )
                 ->assertMissing('@body .alert');
         });
 
 
         // Test updating (disabled) auto-payment
         $this->browse(function (Browser $browser) use ($user) {
             $wallet = $user->wallets()->first();
             $wallet->setSetting('mandate_disabled', 1);
 
             $browser->refresh()
                 ->on(new WalletPage())
                 ->waitFor('#mandate-info')
                 ->assertSeeIn(
                     '#mandate-info .disabled-mandate',
                     'The configured auto-payment has been disabled'
                 )
                 ->assertSeeIn('#mandate-info button.btn-primary', 'Change auto-payment')
                 ->click('#mandate-info button.btn-primary')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Update auto-payment')
                     ->assertSeeIn(
                         '@body form .disabled-mandate',
                         'The auto-payment is disabled.'
                     )
                     ->assertValue('@body #mandate_amount', '100')
                     ->assertValue('@body #mandate_balance', '0')
                     ->assertSeeIn('@button-cancel', 'Cancel')
                     ->assertSeeIn('@button-action', 'Submit')
                     // Test error handling
                     ->type('@body #mandate_amount', 'aaa')
                     ->click('@button-action')
                     ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                     ->assertVisible('@body #mandate_amount.is-invalid')
                     ->assertSeeIn('#mandate_amount + span + .invalid-feedback', 'The amount must be a number.')
                     // Submit valid data
                     ->type('@body #mandate_amount', '50')
                     ->click('@button-action');
                 })
                 ->waitUntilMissing('#payment-dialog')
                 ->assertToast(Toast::TYPE_SUCCESS, 'The auto-payment has been updated.')
                 // make sure the "disabled" text isn't there
                 ->assertMissing('#mandate-info .disabled-mandate')
                 ->click('#mandate-info button.btn-primary')
                 ->assertMissing('form .disabled-mandate')
                 ->click('button.modal-cancel');
         });
 
         // Test deleting auto-payment
         $this->browse(function (Browser $browser) {
             $browser->on(new WalletPage())
             ->waitFor('#mandate-info')
             ->assertSeeIn('#mandate-info * button.btn-danger', 'Cancel auto-payment')
             ->assertVisible('#mandate-info * button.btn-danger')
             ->click('#mandate-info * button.btn-danger')
             ->assertToast(Toast::TYPE_SUCCESS, 'The auto-payment has been removed.')
             ->assertVisible('#mandate-form')
             ->assertMissing('#mandate-info');
         });
     }
 }