vuefilemanager/resources/js/components/Subscription/UserBalance.vue

<template>
    <div v-if="!hasPaymentMethod" class="card shadow-card">
        <FormLabel icon="dollar">
            {{ $t('Balance') }}
        </FormLabel>

        <b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
            {{ user.data.relationships.balance.data.attributes.formatted }}
        </b>

        <!-- Make payment form -->
        <ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
            <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Amount" :rules="`required|min_value:${user.data.meta.totalDebt.amount}`">
                <AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
                    <div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
                        <input
                            v-model="chargeAmount"
                            :placeholder="$t('Fund Your Account Balance...')"
                            type="number"
                            min="1"
                            max="999999999"
                            class="focus-border-theme input-dark"
                            :class="{ 'border-red': errors[0] }"
                        />
                        <ButtonBase type="submit" button-style="theme" class="w-full sm:w-auto">
                            {{ $t('Make a Payment') }}
                        </ButtonBase>
                    </div>
                </AppInputText>
            </ValidationProvider>
        </ValidationObserver>
    </div>
</template>
<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
import ButtonBase from '../FilesView/ButtonBase'
import FormLabel from '../Others/Forms/FormLabel'
import AppInputText from '../Admin/AppInputText'
import { mapGetters } from 'vuex'

export default {
    name: 'UserBalance',
    components: {
        ValidationObserver,
        ValidationProvider,
        AppInputText,
        ButtonBase,
        FormLabel,
    },
    computed: {
        ...mapGetters(['user']),
        hasPaymentMethod() {
            return this.user.data.relationships.creditCards && this.user.data.relationships.creditCards.data.length > 0
        },
    },
    data() {
        return {
            chargeAmount: undefined,
        }
    },
    methods: {
        async makePayment() {
            // Validate fields
            const isValid = await this.$refs.fundAccount.validate()

            if (!isValid) return

            // Show payment methods popup
            this.$store.dispatch('callSingleChargeProcess', this.chargeAmount)
        },
    },
}
</script>