diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
index 1cff1957..3b9f17a9 100644
--- a/src/resources/vue/Admin/User.vue
+++ b/src/resources/vue/Admin/User.vue
@@ -1,644 +1,656 @@
 <template>
     <div class="container">
         <div class="card" id="user-info">
             <div class="card-body">
                 <h1 class="card-title">{{ user.email }}</h1>
                 <div class="card-text">
                     <form class="read-only short">
                         <div v-if="user.wallet.user_id != user.id" class="form-group row plaintext">
                             <label for="manager" class="col-sm-4 col-form-label">Managed by</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="manager">
                                     <router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link>
                                 </span>
                             </div>
                         </div>
                         <div class="form-group row plaintext">
                             <label for="userid" class="col-sm-4 col-form-label">ID <span class="text-muted">(Created at)</span></label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="userid">
                                     {{ user.id }} <span class="text-muted">({{ user.created_at }})</span>
                                 </span>
                             </div>
                         </div>
                         <div class="form-group row plaintext">
                             <label for="status" class="col-sm-4 col-form-label">Status</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="status">
                                     <span :class="$root.userStatusClass(user)">{{ $root.userStatusText(user) }}</span>
                                 </span>
                             </div>
                         </div>
                         <div class="form-group row plaintext" v-if="user.first_name">
                             <label for="first_name" class="col-sm-4 col-form-label">First name</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="first_name">{{ user.first_name }}</span>
                             </div>
                         </div>
                         <div class="form-group row plaintext" v-if="user.last_name">
                             <label for="last_name" class="col-sm-4 col-form-label">Last name</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="last_name">{{ user.last_name }}</span>
                             </div>
                         </div>
                         <div class="form-group row plaintext" v-if="user.organization">
                             <label for="organization" class="col-sm-4 col-form-label">Organization</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="organization">{{ user.organization }}</span>
                             </div>
                         </div>
                         <div class="form-group row plaintext" v-if="user.phone">
                             <label for="phone" class="col-sm-4 col-form-label">Phone</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="phone">{{ user.phone }}</span>
                             </div>
                         </div>
                         <div class="form-group row plaintext">
                             <label for="external_email" class="col-sm-4 col-form-label">External email</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="external_email">
                                     <a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a>
                                     <button type="button" class="btn btn-secondary btn-sm" @click="emailEdit">Edit</button>
                                 </span>
                             </div>
                         </div>
                         <div class="form-group row plaintext" v-if="user.billing_address">
                             <label for="billing_address" class="col-sm-4 col-form-label">Address</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span>
                             </div>
                         </div>
                         <div class="form-group row plaintext">
                             <label for="country" class="col-sm-4 col-form-label">Country</label>
                             <div class="col-sm-8">
                                 <span class="form-control-plaintext" id="country">{{ user.country }}</span>
                             </div>
                         </div>
                     </form>
                     <div class="mt-2">
                         <button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser">Suspend</button>
                         <button v-if="user.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendUser">Unsuspend</button>
                     </div>
                 </div>
             </div>
         </div>
         <ul class="nav nav-tabs mt-3" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="tab-finances" href="#user-finances" role="tab" aria-controls="user-finances" aria-selected="true">
                     Finances
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-aliases" href="#user-aliases" role="tab" aria-controls="user-aliases" aria-selected="false">
                     Aliases ({{ user.aliases.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-subscriptions" href="#user-subscriptions" role="tab" aria-controls="user-subscriptions" aria-selected="false">
                     Subscriptions ({{ skus.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-domains" href="#user-domains" role="tab" aria-controls="user-domains" aria-selected="false">
                     Domains ({{ domains.length }})
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="tab-users" href="#user-users" role="tab" aria-controls="user-users" aria-selected="false">
                     Users ({{ users.length }})
                 </a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances">
                 <div class="card-body">
                     <h2 class="card-title">Account balance <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance) }}</strong></span></h2>
                     <div class="card-text">
                         <form class="read-only short">
                             <div class="form-group row">
                                 <label class="col-sm-4 col-form-label">Discount</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" id="discount">
                                         <span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span>
                                         <button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">Edit</button>
                                     </span>
                                 </div>
                             </div>
                             <div class="form-group row" v-if="wallet.mandate && wallet.mandate.id">
                                 <label class="col-sm-4 col-form-label">Auto-payment</label>
                                 <div class="col-sm-8">
-                                    <span class="form-control-plaintext" id="autopayment">
+                                    <span id="autopayment" :class="'form-control-plaintext' + (wallet.mandateState ? ' text-danger' : '')">
                                         Fill up by <b>{{ wallet.mandate.amount }} CHF</b>
                                         when under <b>{{ wallet.mandate.balance }} CHF</b>
-                                        using {{ wallet.mandate.method }}<span v-if="wallet.mandate.isDisabled"> (disabled)</span>.
+                                        using {{ wallet.mandate.method }}
+                                        <span v-if="wallet.mandateState">({{ wallet.mandateState }})</span>.
                                     </span>
                                 </div>
                             </div>
                             <div class="form-group row" v-if="wallet.providerLink">
                                 <label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} ID</label>
                                 <div class="col-sm-8">
                                     <span class="form-control-plaintext" v-html="wallet.providerLink"></span>
                                 </div>
                             </div>
                         </form>
                         <div class="mt-2">
                             <button id="button-award" class="btn btn-success" type="button" @click="awardDialog">Add bonus</button>
                             <button id="button-penalty" class="btn btn-danger" type="button" @click="penalizeDialog">Add penalty</button>
                         </div>
                     </div>
                     <h2 class="card-title mt-4">Transactions</h2>
                     <transaction-log v-if="wallet.id && !walletReload" class="card-text" :wallet-id="wallet.id" :is-admin="true"></transaction-log>
                 </div>
             </div>
             <div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Email address</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="(alias, index) in user.aliases" :id="'alias' + index" :key="index">
                                     <td>{{ alias }}</td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>This user has no email aliases.</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-subscriptions" role="tabpanel" aria-labelledby="tab-subscriptions">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover mb-0">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Subscription</th>
                                     <th scope="col">Price</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="(sku, sku_id) in skus" :id="'sku' + sku.id" :key="sku_id">
                                     <td>{{ sku.name }}</td>
                                     <td>{{ sku.price }}</td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td colspan="2">This user has no subscriptions.</td>
                                 </tr>
                             </tfoot>
                         </table>
                         <small v-if="discount > 0" class="hint">
                             <hr class="m-0">
                             &sup1; applied discount: {{ discount }}% - {{ discount_description }}
                         </small>
                         <div class="mt-2">
                             <button type="button" class="btn btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">Reset 2-Factor Auth</button>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-domains" role="tabpanel" aria-labelledby="tab-domains">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Name</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="globe" :class="$root.domainStatusClass(domain)" :title="$root.domainStatusText(domain)"></svg-icon>
                                         <router-link :to="{ path: '/domain/' + domain.id }">{{ domain.namespace }}</router-link>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>There are no domains in this account.</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
             <div class="tab-pane" id="user-users" role="tabpanel" aria-labelledby="tab-users">
                 <div class="card-body">
                     <div class="card-text">
                         <table class="table table-sm table-hover">
                             <thead class="thead-light">
                                 <tr>
                                     <th scope="col">Primary Email</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <tr v-for="item in users" :id="'user' + item.id" :key="item.id" @click="$root.clickRecord">
                                     <td>
                                         <svg-icon icon="user" :class="$root.userStatusClass(item)" :title="$root.userStatusText(item)"></svg-icon>
                                         <router-link v-if="item.id != user.id" :to="{ path: '/user/' + item.id }">{{ item.email }}</router-link>
                                         <span v-else>{{ item.email }}</span>
                                     </td>
                                 </tr>
                             </tbody>
                             <tfoot class="table-fake-body">
                                 <tr>
                                     <td>There are no users in this account.</td>
                                 </tr>
                             </tfoot>
                         </table>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="discount-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">Account discount</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p class="form-group">
                             <select v-model="wallet.discount_id" class="custom-select">
                                 <option value="">- none -</option>
                                 <option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option>
                             </select>
                         </p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-primary modal-action" @click="submitDiscount()">
                             <svg-icon icon="check"></svg-icon> Submit
                         </button>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="email-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">External email</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p class="form-group">
                             <input v-model="external_email" name="external_email" class="form-control">
                         </p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-primary modal-action" @click="submitEmail()">
                             <svg-icon icon="check"></svg-icon> Submit
                         </button>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="oneoff-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">{{ oneoff_negative ? 'Add a penalty to the wallet' : 'Add a bonus to the wallet' }}</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <form data-validation-prefix="oneoff_">
                             <div class="form-group">
                                 <label for="oneoff_amount" class="col-form-label">Amount</label>
                                 <div class="input-group">
                                     <input type="text" class="form-control" id="oneoff_amount" v-model="oneoff_amount" required>
                                     <span class="input-group-append">
                                         <span class="input-group-text">{{ oneoff_currency }}</span>
                                     </span>
                                 </div>
                             </div>
                             <div class="form-group">
                                 <label for="oneoff_description" class="col-form-label">Description</label>
                                 <input class="form-control" id="oneoff_description" v-model="oneoff_description" required>
                             </div>
                         </form>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-primary modal-action" @click="submitOneOff()">
                             <svg-icon icon="check"></svg-icon> Submit
                         </button>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="reset-2fa-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">2-Factor Authentication Reset</h5>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <p>This will remove 2-Factor Authentication entitlement as well
                             as the user-configured factors.</p>
                         <p>Please, make sure to confirm the user identity properly.</p>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
                         <button type="button" class="btn btn-danger modal-action" @click="reset2FA()">Reset</button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import TransactionLog from '../Widgets/TransactionLog'
 
     export default {
         beforeRouteUpdate (to, from, next) {
             // An event called when the route that renders this component has changed,
             // but this component is reused in the new route.
             // Required to handle links from /user/XXX to /user/YYY
             next()
             this.$parent.routerReload()
         },
         components: {
             TransactionLog
         },
         data() {
             return {
                 oneoff_amount: '',
                 oneoff_currency: 'CHF',
                 oneoff_description: '',
                 oneoff_negative: false,
                 discount: 0,
                 discount_description: '',
                 discounts: [],
                 external_email: '',
                 has2FA: false,
                 wallet: {},
                 walletReload: false,
                 domains: [],
                 skus: [],
                 sku2FA: null,
                 users: [],
                 user: {
                     aliases: [],
                     wallet: {},
                     skus: {},
                 }
             }
         },
         created() {
             const user_id = this.$route.params.user
 
             this.$root.startLoading()
 
             axios.get('/api/v4/users/' + user_id)
                 .then(response => {
                     this.$root.stopLoading()
 
                     this.user = response.data
 
                     const financesTab = '#user-finances'
                     const keys = ['first_name', 'last_name', 'external_email', 'billing_address', 'phone', 'organization']
 
                     let country = this.user.settings.country
                     if (country && country in window.config.countries) {
                         country = window.config.countries[country][1]
                     }
 
                     this.user.country = country
 
                     keys.forEach(key => { this.user[key] = this.user.settings[key] })
 
                     this.discount = this.user.wallet.discount
                     this.discount_description = this.user.wallet.discount_description
 
                     // TODO: currencies, multi-wallets, accounts
                     // Get more info about the wallet (e.g. payment provider related)
                     this.$root.addLoader(financesTab)
                     axios.get('/api/v4/wallets/' + this.user.wallets[0].id)
                         .then(response => {
                             this.$root.removeLoader(financesTab)
                             this.wallet = response.data
+                            this.setMandateState()
                         })
                         .catch(error => {
                             this.$root.removeLoader(financesTab)
                         })
 
                     // Create subscriptions list
                     axios.get('/api/v4/skus')
                         .then(response => {
                             // "merge" SKUs with user entitlement-SKUs
                             response.data.forEach(sku => {
                                 if (sku.id in this.user.skus) {
                                     let count = this.user.skus[sku.id].count
                                     let item = {
                                         id: sku.id,
                                         name: sku.name,
                                         cost: sku.cost,
                                         units: count - sku.units_free,
                                         price: this.$root.priceLabel(sku.cost, count - sku.units_free, this.discount)
                                     }
 
                                     if (sku.range) {
                                         item.name += ' ' + count + ' ' + sku.range.unit
                                     }
 
                                     this.skus.push(item)
 
                                     if (sku.title == '2fa') {
                                         this.has2FA = true
                                         this.sku2FA = sku.id
                                     }
                                 }
                             })
                         })
 
                     // Fetch users
                     // TODO: Multiple wallets
                     axios.get('/api/v4/users?owner=' + user_id)
                         .then(response => {
                             this.users = response.data.list;
                         })
 
                     // Fetch domains
                     axios.get('/api/v4/domains?owner=' + user_id)
                         .then(response => {
                             this.domains = response.data.list
                         })
                 })
                 .catch(this.$root.errorHandler)
         },
         mounted() {
             $(this.$el).find('ul.nav-tabs a').on('click', e => {
                 e.preventDefault()
                 $(e.target).tab('show')
             })
         },
         methods: {
             capitalize(str) {
                 return str.charAt(0).toUpperCase() + str.slice(1)
             },
             awardDialog() {
                 this.oneOffDialog(false)
             },
             discountEdit() {
                 $('#discount-dialog')
                     .on('shown.bs.modal', e => {
                         $(e.target).find('select').focus()
                         // Note: Vue v-model is strict, convert null to a string
                         this.wallet.discount_id = this.wallet_discount_id || ''
                     })
                     .modal()
 
                 if (!this.discounts.length) {
                     // Fetch discounts
                     axios.get('/api/v4/discounts')
                         .then(response => {
                             this.discounts = response.data.list
                         })
                 }
             },
             emailEdit() {
                 this.external_email = this.user.external_email
                 this.$root.clearFormValidation($('#email-dialog'))
 
                 $('#email-dialog')
                     .on('shown.bs.modal', e => {
                         $(e.target).find('input').focus()
                     })
                     .modal()
             },
+            setMandateState() {
+                let mandate = this.wallet.mandate
+                if (mandate && mandate.id) {
+                    if (!mandate.isValid) {
+                        this.wallet.mandateState = mandate.isPending ? 'pending' : 'invalid'
+                    } else if (mandate.isDisabled) {
+                        this.wallet.mandateState = 'disabled'
+                    }
+                }
+            },
             oneOffDialog(negative) {
                 this.oneoff_negative = negative
                 this.dialog = $('#oneoff-dialog').on('shown.bs.modal', event => {
                     this.$root.clearFormValidation(event.target)
                     $(event.target).find('#oneoff_amount').focus()
                 }).modal()
             },
             penalizeDialog() {
                 this.oneOffDialog(true)
             },
             reload() {
                 // this is to reload transaction log
                 this.walletReload = true
                 this.$nextTick(() => { this.walletReload = false })
             },
             reset2FA() {
                 $('#reset-2fa-dialog').modal('hide')
                 axios.post('/api/v4/users/' + this.user.id + '/reset2FA')
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.skus = this.skus.filter(sku => sku.id != this.sku2FA)
                             this.has2FA = false
                         }
                     })
             },
             reset2FADialog() {
                 $('#reset-2fa-dialog').modal()
             },
             submitDiscount() {
                 $('#discount-dialog').modal('hide')
 
                 axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet.discount_id })
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.wallet = Object.assign({}, this.wallet, response.data)
 
                             // Update prices in Subscriptions tab
                             if (this.user.wallet.id == response.data.id) {
                                 this.discount = this.wallet.discount
                                 this.discount_description = this.wallet.discount_description
 
                                 this.skus.forEach(sku => {
                                     sku.price = this.$root.priceLabel(sku.cost, sku.units, this.discount)
                                 })
                             }
                         }
                     })
             },
             submitEmail() {
                 axios.put('/api/v4/users/' + this.user.id, { external_email: this.external_email })
                     .then(response => {
                         if (response.data.status == 'success') {
                             $('#email-dialog').modal('hide')
                             this.$toast.success(response.data.message)
                             this.user.external_email = this.external_email
                             this.external_email = null // required because of Vue
                         }
                     })
             },
             submitOneOff() {
                 let wallet_id = this.user.wallets[0].id
                 let post = {
                     amount: this.oneoff_amount,
                     description: this.oneoff_description
                 }
 
                 if (this.oneoff_negative && /^\d+(\.?\d+)?$/.test(post.amount)) {
                     post.amount *= -1
                 }
 
                 // TODO: We maybe should use system currency not wallet currency,
                 //       or have a selector so the operator does not have to calculate
                 //       exchange rates
 
                 this.$root.clearFormValidation(this.dialog)
 
                 axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post)
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.dialog.modal('hide')
                             this.$toast.success(response.data.message)
                             this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance})
                             this.oneoff_amount = ''
                             this.oneoff_description = ''
                             this.reload()
                         }
                     })
             },
             suspendUser() {
                 axios.post('/api/v4/users/' + this.user.id + '/suspend', {})
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.user = Object.assign({}, this.user, { isSuspended: true })
                         }
                     })
             },
             unsuspendUser() {
                 axios.post('/api/v4/users/' + this.user.id + '/unsuspend', {})
                     .then(response => {
                         if (response.data.status == 'success') {
                             this.$toast.success(response.data.message)
                             this.user = Object.assign({}, this.user, { isSuspended: false })
                         }
                     })
             }
         }
     }
 </script>
diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
index 6cad58c7..d6e82952 100644
--- a/src/resources/vue/Wallet.vue
+++ b/src/resources/vue/Wallet.vue
@@ -1,339 +1,354 @@
 <template>
     <div class="container" dusk="wallet-component">
         <div v-if="wallet.id" id="wallet" class="card">
             <div class="card-body">
                 <div class="card-title">Account balance <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>
                     <p>Add credit to your account or setup an automatic payment by using the button below.</p>
                     <button type="button" class="btn btn-primary" @click="paymentDialog()">Add credit</button>
                 </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">
                     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">
                     History
                 </a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane show active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts">
                 <div class="card-body">
                     <div class="card-text">
                         <p v-if="receipts.length">
                             Here you can download receipts (in PDF format) for payments in specified period.
                             Select the period and press the Download button.
                         </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>
                             <div class="input-group-append">
                                 <button type="button" class="btn btn-secondary" @click="receiptDownload">
                                     <svg-icon icon="download"></svg-icon> Download
                                 </button>
                             </div>
                         </div>
                         <p v-if="!receipts.length">
                             There are no receipts for payments in this account. Please, note that you can download
                             receipts after the month ends.
                         </p>
                     </div>
                 </div>
             </div>
             <div class="tab-pane show" 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>
 
         <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>
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
                     </div>
                     <div class="modal-body">
                         <div id="payment" v-if="paymentForm == 'init'">
                             <p>Choose the amount by which you want to top up your wallet.</p>
                             <form id="payment-form" @submit.prevent="payment">
                                 <div class="form-group">
                                     <div class="input-group">
                                         <input type="text" class="form-control" id="amount" v-model="amount" required>
                                         <span class="input-group-append">
                                             <span class="input-group-text">{{ wallet.currency }}</span>
                                         </span>
                                     </div>
                                 </div>
                                 <div class="w-100 text-center">
                                     <button type="submit" class="btn btn-primary">
                                         <svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue
                                     </button>
                                 </div>
                             </form>
                             <div class="form-separator"><hr><span>or</span></div>
-                            <div id="mandate-form" v-if="!mandate.id">
+                            <div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
                                 <p>Add auto-payment, so you never run out.</p>
+                                <div v-if="mandate.id && !mandate.isValid" class="alert alert-danger">
+                                    The setup of automatic payments failed. Restart the process to enable automatic top-ups.
+                                </div>
                                 <div class="w-100 text-center">
                                     <button type="button" class="btn btn-primary" @click="autoPaymentForm">Set up auto-payment</button>
                                 </div>
                             </div>
-                            <div id="mandate-info" v-if="mandate.id">
-                                <p>Auto-payment is set to fill up your account by <b>{{ mandate.amount }} CHF</b>
+                            <div id="mandate-info" v-else>
+                                <p>
+                                    Auto-payment is set to fill up your account by <b>{{ mandate.amount }} CHF</b>
                                     every time your account balance gets under <b>{{ mandate.balance }} CHF</b>.
                                     You will be charged via {{ mandate.method }}.
                                 </p>
-                                <p v-if="mandate.isDisabled" class="disabled-mandate text-danger">
+                                <div v-if="mandate.isPending" class="alert alert-warning">
+                                    The setup of the automatic payment is still in progress.
+                                </div>
+                                <div v-else-if="mandate.isDisabled" class="disabled-mandate alert alert-danger">
                                     The configured auto-payment has been disabled. Top up your wallet or
                                     raise the auto-payment amount.
-                                </p>
+                                </div>
                                 <p>You can cancel or change the auto-payment at any time.</p>
                                 <div class="form-group d-flex justify-content-around">
                                     <button type="button" class="btn btn-danger" @click="autoPaymentDelete">Cancel auto-payment</button>
                                     <button type="button" class="btn btn-primary" @click="autoPaymentChange">Change auto-payment</button>
                                 </div>
                             </div>
                         </div>
                         <div id="auto-payment" v-if="paymentForm == 'auto'">
                             <form data-validation-prefix="mandate_">
-                                <p>Here is how it works: Every time your account runs low,
+                                <p>
+                                    Here is how it works: Every time your account runs low,
                                     we will charge your preferred payment method for an amount you choose.
                                     You can cancel or change the auto-payment option at any time.
                                 </p>
                                 <div class="form-group row">
                                     <label for="mandate_amount" class="col-sm-6 col-form-label">Fill up by</label>
                                     <div class="input-group col-sm-6">
                                         <input type="text" class="form-control" id="mandate_amount" v-model="mandate.amount" required>
                                         <span class="input-group-append">
                                             <span class="input-group-text">{{ wallet.currency }}</span>
                                         </span>
                                     </div>
                                 </div>
                                 <div class="form-group row">
                                     <label for="mandate_balance" class="col-sm-6 col-form-label">when account balance is 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-append">
                                                 <span class="input-group-text">{{ wallet.currency }}</span>
                                             </span>
                                         </div>
                                     </div>
                                 </div>
-                                <p v-if="!mandate.id">
+                                <p v-if="!mandate.isValid">
                                     Next, you will be redirected to the checkout page, where you can provide
                                     your credit card details.
                                 </p>
-                                <p v-if="mandate.isDisabled" class="disabled-mandate text-danger">
+                                <div v-if="mandate.isValid && mandate.isDisabled" class="disabled-mandate alert alert-danger">
                                     The auto-payment is disabled. Immediately after you submit new settings we'll
-                                    attempt to top up your wallet.
-                                </p>
+                                    enable it and attempt to top up your wallet.
+                                </div>
                             </form>
                         </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
-                        <button type="button" class="btn btn-primary modal-action" v-if="paymentForm == 'auto' && mandate.id" @click="autoPayment">
+                        <button type="button" class="btn btn-primary modal-action"
+                                v-if="paymentForm == 'auto' && (mandate.isValid || mandate.isPending)"
+                                @click="autoPayment"
+                        >
                             <svg-icon icon="check"></svg-icon> Submit
                         </button>
-                        <button type="button" class="btn btn-primary modal-action" v-if="paymentForm == 'auto' && !mandate.id" @click="autoPayment">
+                        <button type="button" class="btn btn-primary modal-action"
+                                v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
+                                @click="autoPayment"
+                        >
                             <svg-icon :icon="['far', 'credit-card']"></svg-icon> Continue
                         </button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
     import TransactionLog from './Widgets/TransactionLog'
 
     export default {
         components: {
             TransactionLog
         },
         data() {
             return {
                 amount: '',
                 mandate: { amount: 10, balance: 0 },
                 paymentDialogTitle: null,
                 paymentForm: 'init',
                 receipts: [],
                 stripe: null,
                 loadTransactions: false,
                 wallet: {},
                 walletId: null
             }
         },
         mounted() {
             $('#wallet button').focus()
 
             this.walletId = this.$store.state.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.$el).find('ul.nav-tabs a').on('click', e => {
                 e.preventDefault()
                 $(e.target).tab('show')
                 if ($(e.target).is('#tab-history')) {
                     this.loadTransactions = true
                 }
             })
         },
         methods: {
             paymentDialog() {
                 const dialog = $('#payment-dialog')
                 const mandate_form = $('#mandate-form')
 
                 this.$root.removeLoader(mandate_form)
 
-                if (!this.mandate.id) {
+                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)
                         })
                 }
 
                 this.paymentForm = 'init'
                 this.paymentDialogTitle = 'Top up your wallet'
 
                 this.dialog = dialog.on('shown.bs.modal', () => {
                         dialog.find('#amount').focus()
                     }).modal()
             },
             payment() {
                 this.$root.clearFormValidation($('#payment-form'))
 
                 axios.post('/api/v4/payments', {amount: this.amount})
                     .then(response => {
                         if (response.data.redirectUrl) {
                             location.href = response.data.redirectUrl
                         } else {
                             this.stripeCheckout(response.data)
                         }
                     })
             },
             autoPayment() {
-                const method = this.mandate.id ? 'put' : 'post'
+                const method = this.mandate.id && (this.mandate.isValid || this.mandate.isPending) ? 'put' : 'post'
                 const post = {
                     amount: this.mandate.amount,
                     balance: this.mandate.balance
                 }
 
                 this.$root.clearFormValidation($('#auto-payment form'))
 
                 axios[method]('/api/v4/payments/mandate', post)
                     .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.modal('hide');
                                 this.mandate = response.data
                                 this.$toast.success(response.data.message)
                             }
                         }
                     })
             },
             autoPaymentChange(event) {
                 this.autoPaymentForm(event, 'Update auto-payment')
             },
             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)
                         }
                     })
             },
             autoPaymentForm(event, title) {
                 this.paymentForm = 'auto'
                 this.paymentDialogTitle = title || 'Add auto-payment'
                 setTimeout(() => { this.dialog.find('#mandate_amount').focus()}, 10)
             },
             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/Pages/PaymentMollie.php b/src/tests/Browser/Pages/PaymentMollie.php
index 498493a8..0f1c91b0 100644
--- a/src/tests/Browser/Pages/PaymentMollie.php
+++ b/src/tests/Browser/Pages/PaymentMollie.php
@@ -1,64 +1,65 @@
 <?php
 
 namespace Tests\Browser\Pages;
 
 use Laravel\Dusk\Page;
 
 class PaymentMollie extends Page
 {
     /**
      * Get the URL for the page.
      *
      * @return string
      */
     public function url(): string
     {
         return '';
     }
 
     /**
      * Assert that the browser is on the page.
      *
      * @param \Laravel\Dusk\Browser $browser The browser object
      *
      * @return void
      */
     public function assert($browser)
     {
         $browser->waitFor('#container');
     }
 
     /**
      * Get the element shortcuts for the page.
      *
      * @return array
      */
     public function elements(): array
     {
         return [
             '@form' => '#container',
             '@title' => '#container .header__info',
             '@amount' => '#container .header__amount',
             '@methods' => '#payment-method-list',
             '@status-table' => 'table.table--select-status',
         ];
     }
 
     /**
      * Submit payment form.
      *
-     * @param \Laravel\Dusk\Browser $browser  The browser object
+     * @param \Laravel\Dusk\Browser $browser The browser object
+     * @param string                $state   Test payment status (paid, open, failed, canceled, expired)
      *
      * @return void
      */
-    public function submitValidCreditCard($browser)
+    public function submitValidCreditCard($browser, $status = 'paid')
     {
         if ($browser->element('@methods')) {
             $browser->click('@methods button.grid-button-creditcard')
                 ->waitFor('button.form__button');
         }
 
-        $browser->click('input[value="paid"]')
+        $browser->click('input[value="' . $status . '"]')
             ->click('button.form__button');
     }
 }
diff --git a/src/tests/Browser/PaymentMollieTest.php b/src/tests/Browser/PaymentMollieTest.php
index 5b66eefe..a0db9238 100644
--- a/src/tests/Browser/PaymentMollieTest.php
+++ b/src/tests/Browser/PaymentMollieTest.php
@@ -1,233 +1,307 @@
 <?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) {
             $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')
                         ->assertFocused('#amount')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@body #payment-form button', 'Continue')
                         // Test error handling
                         ->type('@body #amount', 'aaa')
                         ->click('@body #payment-form button')
                         ->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')
                         ->click('@body #payment-form button');
                 })
                 ->on(new PaymentMollie())
                 ->assertSeeIn('@title', \config('app.name') . ' Payment')
                 ->assertSeeIn('@amount', 'CHF 12.34');
 
             // 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) {
             $browser->visit(new Home())
                 ->submitLogon('payment-test@kolabnow.com', 'simple123', true, ['paymentProvider' => 'mollie'])
                 ->on(new Dashboard())
                 ->click('@links .link-wallet')
                 ->on(new WalletPage())
                 ->click('@main button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Top up your wallet')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@body #mandate-form button', 'Set up auto-payment')
+                        ->assertSeeIn('@body #mandate-form p', 'Add auto-payment, so you never')
+                        ->assertMissing('@body #mandate-form .alert')
                         ->click('@body #mandate-form button')
                         ->assertSeeIn('@title', 'Add 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')
                         ->click('@button-action');
                 })
                 ->on(new PaymentMollie())
                 ->assertSeeIn('@title', \config('app.name') . ' Auto-Payment Setup')
                 ->assertMissing('@amount')
                 ->submitValidCreditCard()
                 ->waitForLocation('/wallet')
                 ->visit('/wallet?paymentProvider=mollie')
                 ->on(new WalletPage())
                 ->click('@main button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $expected = 'Auto-payment is set to fill up your account by 100 CHF every'
                         . ' time your account balance gets under 0 CHF. You will be charged'
                         . ' via Mastercard (**** **** **** 6787).';
 
                     $browser->assertSeeIn('@title', 'Top up your wallet')
                         ->waitFor('#mandate-info')
                         ->assertSeeIn('#mandate-info p:first-child', $expected)
+                        ->assertMissing('@body .alert')
                         ->click('@button-cancel');
                 });
         });
 
-        // Test updating auto-payment
+        // 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())
                 ->click('@main button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->waitFor('@body #mandate-info')
                         ->assertSeeIn(
-                            '@body #mandate-info p.disabled-mandate',
+                            '@body #mandate-info .disabled-mandate',
                             'The configured auto-payment has been disabled'
                         )
                         ->assertSeeIn('@body #mandate-info button.btn-primary', 'Change auto-payment')
                         ->click('@body #mandate-info button.btn-primary')
                         ->assertSeeIn('@title', 'Update auto-payment')
                         ->assertSeeIn(
-                            '@body form p.disabled-mandate',
+                            '@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.')
                 // Open the dialog again and make sure the "disabled" text isn't there
                 ->click('@main button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
-                    $browser->assertMissing('@body #mandate-info p.disabled-mandate')
+                    $browser->assertMissing('@body #mandate-info .disabled-mandate')
                         ->click('@body #mandate-info button.btn-primary')
-                        ->assertMissing('@body form p.disabled-mandate')
+                        ->assertMissing('@body form .disabled-mandate')
                         ->click('@button-cancel');
                 });
         });
 
         // Test deleting auto-payment
         $this->browse(function (Browser $browser) {
             $browser->on(new WalletPage())
                 ->click('@main button')
                 ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@body #mandate-info button.btn-danger', 'Cancel auto-payment')
                         ->click('@body #mandate-info button.btn-danger')
                         ->assertToast(Toast::TYPE_SUCCESS, 'The auto-payment has been removed.')
                         ->assertVisible('@body #mandate-form')
-                        ->assertMissing('@body #mandate-info');
+                        ->assertMissing('@body #mandate-info')
+                        ->click('@button-cancel');
+                });
+        });
+
+        // Test pending and failed mandate
+        $this->browse(function (Browser $browser) {
+            $browser->on(new WalletPage())
+                ->click('@main button')
+                ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
+                    $browser->assertSeeIn('@title', 'Top up your wallet')
+                        ->assertSeeIn('@button-cancel', 'Cancel')
+                        ->assertSeeIn('@body #mandate-form button', 'Set up auto-payment')
+                        ->assertSeeIn('@body #mandate-form p', 'Add auto-payment, so you never')
+                        ->assertMissing('@body #mandate-form .alert')
+                        ->click('@body #mandate-form button')
+                        ->assertSeeIn('@title', 'Add auto-payment')
+                        ->assertMissing('@body .alert')
+                        // 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())
+                ->click('@main button')
+                ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
+                    $expected = 'Auto-payment is set to fill up your account by 100 CHF every'
+                        . ' time your account balance gets under 0 CHF. You will be charged'
+                        . ' via Credit Card.';
+
+                    $browser->assertSeeIn('@title', 'Top up your wallet')
+                        ->waitFor('#mandate-info')
+                        ->assertSeeIn('#mandate-info p:first-child', $expected)
+                        ->assertSeeIn(
+                            '#mandate-info .alert-warning',
+                            'The setup of the automatic payment is still in progress.'
+                        )
+                        ->assertSeeIn('@body #mandate-info .btn-danger', 'Cancel auto-payment')
+                        ->assertSeeIn('@body #mandate-info .btn-primary', 'Change auto-payment')
+                        // Delete the mandate
+                        ->click('@body #mandate-info .btn-danger')
+                        ->assertToast(Toast::TYPE_SUCCESS, 'The auto-payment has been removed.')
+                        ->assertSeeIn('@body #mandate-form p', 'Add auto-payment, so you never')
+                        ->assertMissing('@body #mandate-form .alert')
+                        ->click('@body #mandate-form button')
+                        ->assertSeeIn('@title', 'Add auto-payment')
+                        ->assertMissing('@body .alert')
+                        // 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())
+                ->click('@main button')
+                ->with(new Dialog('@payment-dialog'), function (Browser $browser) {
+                    $browser->waitFor('#mandate-form')
+                        ->assertMissing('#mandate-info')
+                        ->assertSeeIn('#mandate-form p', 'Add auto-payment')
+                        ->waitFor('#mandate-form .alert-danger')
+                        ->assertSeeIn(
+                            '#mandate-form .alert-danger',
+                            'The setup of automatic payments failed. Restart the process to enable'
+                        )
+                        ->assertSeeIn('@body #mandate-form .btn-primary', 'Set up auto-payment');
                 });
         });
     }
 }