diff --git a/app/Http/Controllers/Modals/BillTransactions.php b/app/Http/Controllers/Modals/BillTransactions.php
index e4c3d551c..cded8de72 100644
--- a/app/Http/Controllers/Modals/BillTransactions.php
+++ b/app/Http/Controllers/Modals/BillTransactions.php
@@ -67,6 +67,19 @@ class BillTransactions extends Controller
             'error' => false,
             'message' => 'null',
             'html' => $html,
+            'data' => [
+                'title' => trans('general.title.new', ['type' => trans_choice('general.payments', 1)]),
+                'buttons' => [
+                    'cancel' => [
+                        'text' => trans('general.cancel'),
+                        'class' => 'btn-outline-secondary'
+                    ],
+                    'confirm' => [
+                        'text' => trans('general.save'),
+                        'class' => 'btn-success'
+                    ]
+                ]
+            ]
         ]);
     }
 
diff --git a/app/Http/Controllers/Modals/InvoiceTransactions.php b/app/Http/Controllers/Modals/InvoiceTransactions.php
index 693e10bff..e19a65e54 100644
--- a/app/Http/Controllers/Modals/InvoiceTransactions.php
+++ b/app/Http/Controllers/Modals/InvoiceTransactions.php
@@ -67,6 +67,24 @@ class InvoiceTransactions extends Controller
             'error' => false,
             'message' => 'null',
             'html' => $html,
+            'data' => [
+                'title' => trans('general.title.new', ['type' => trans_choice('general.payments', 1)]),
+                'buttons' => [
+                    'cancel' => [
+                        'text' => trans('general.cancel'),
+                        'class' => 'btn-outline-secondary'
+                    ],
+                    'payment' => [
+                        'text' => trans('invoices.accept_payments'),
+                        'class' => 'long-texts',
+                        'url' => route('apps.categories.show', 'payment-method')
+                    ],
+                    'confirm' => [
+                        'text' => trans('general.save'),
+                        'class' => 'btn-success'
+                    ]
+                ]
+            ]
         ]);
     }
 
diff --git a/resources/assets/js/components/AkauntingModalAddNew.vue b/resources/assets/js/components/AkauntingModalAddNew.vue
index f8315de5c..ccc6dbe05 100644
--- a/resources/assets/js/components/AkauntingModalAddNew.vue
+++ b/resources/assets/js/components/AkauntingModalAddNew.vue
@@ -33,7 +33,11 @@
                                         {{ buttons.cancel.text }}
                                     </button>
 
-                                    <button :disabled="form.loading" type="button" class="btn button-submit" :class="buttons.confirm.class" @click="onSubmit">
+                                    <a v-if="buttons.payment" :href="buttons.payment.url" class="btn btn-white" :class="buttons.payment.class">
+                                        {{ buttons.payment.text }}
+                                    </a>
+
+                                    <button  :disabled="form.loading" type="button" class="btn button-submit" :class="buttons.confirm.class" @click="onSubmit">
                                         <div class="aka-loader"></div><span>{{ buttons.confirm.text }}</span>
                                     </button>
                                 </div>
@@ -217,7 +221,24 @@ export default {
                             })
                             .catch(error => {
                             });
-                        }
+                        },
+
+                        // Change bank account get money and currency rate
+                        async onChangePaymentAccount(account_id) {
+                            let payment_account = Promise.resolve(window.axios.get(url + '/banking/accounts/currency', {
+                                params: {
+                                    account_id: account_id
+                                }
+                            }));
+
+                            payment_account.then(response => {
+                                this.form.currency = response.data.currency_name;
+                                this.form.currency_code = response.data.currency_code;
+                                this.form.currency_rate = response.data.currency_rate;
+                            })
+                            .catch(error => {
+                            });
+                        },
                     }
                 })
             });
diff --git a/resources/assets/js/views/purchases/bills.js b/resources/assets/js/views/purchases/bills.js
index 074161131..5e524aad2 100644
--- a/resources/assets/js/views/purchases/bills.js
+++ b/resources/assets/js/views/purchases/bills.js
@@ -38,15 +38,6 @@ const app = new Vue({
                 tax: 0,
                 total: 0
             },
-            transaction_form: new Form('transaction'),
-            payment: {
-                modal: false,
-                amount: 0,
-                title: '',
-                message: '',
-                html: '',
-                errors: new Error()
-            },
             transaction: [],
             items: '',
             discount: false,
@@ -60,7 +51,9 @@ const app = new Vue({
     },
 
     mounted() {
-        this.colspan = document.getElementById("items").rows[0].cells.length - 1;
+        if ((document.getElementById('items') != null) && (document.getElementById('items').rows)) {
+            this.colspan = document.getElementById("items").rows[0].cells.length - 1;
+        }
         this.form.items = [];
 
         if (this.form.method) {
@@ -322,51 +315,113 @@ const app = new Vue({
             this.onCalculateTotal();
         },
 
-        onPayment() {
-            this.payment.modal = true;
+        async onPayment() {
+            let bill_id = document.getElementById('bill_id').value;
 
-            let form = this.transaction_form;
-
-            this.transaction_form = new Form('transaction');
-
-            this.transaction_form.paid_at = form.paid_at;
-            this.transaction_form.account_id = form.account_id;
-            this.transaction_form.payment_method = form.payment_method;
-        },
-
-        addPayment() {
-            this.transaction_form.submit();
-
-            this.payment.errors = this.transaction_form.errors;
-
-            this.form.loading = true;
-
-            this.$emit("confirm");
-        },
-
-        closePayment() {
-            this.payment = {
+            let payment = {
                 modal: false,
-                amount: 0,
+                url: url + '/modals/bills/' + bill_id + '/transactions/create',
                 title: '',
-                message: '',
-                errors: this.transaction_form.errors
+                html: '',
+                buttons:{}
             };
-        },
 
-        // Change bank account get money and currency rate
-        onChangePaymentAccount(account_id) {
-            axios.get(url + '/banking/accounts/currency', {
-                params: {
-                    account_id: account_id
-                }
-            })
-            .then(response => {
-                this.transaction_form.currency = response.data.currency_name;
-                this.transaction_form.currency_code = response.data.currency_code;
-                this.transaction_form.currency_rate = response.data.currency_rate;
+            let payment_promise = Promise.resolve(window.axios.get(payment.url));
+
+            payment_promise.then(response => {
+                payment.modal = true;
+                payment.title = response.data.data.title;
+                payment.html = response.data.html;
+                payment.buttons = response.data.data.buttons;
+
+                this.component = Vue.component('add-new-component', (resolve, reject) => {
+                    resolve({
+                        template: '<div id="dynamic-component"><akaunting-modal-add-new :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+
+                        mixins: [
+                            Global
+                        ],
+
+                        data: function () {
+                            return {
+                                form:{},
+                                payment: payment,
+                            }
+                        },
+
+                        methods: {
+                            onSubmit(event) {
+                                this.form = event;
+
+                                this.loading = true;
+
+                                let data = this.form.data();
+
+                                FormData.prototype.appendRecursive = function(data, wrapper = null) {
+                                    for(var name in data) {
+                                        if (wrapper) {
+                                            if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
+                                                this.appendRecursive(data[name], wrapper + '[' + name + ']');
+                                            } else {
+                                                this.append(wrapper + '[' + name + ']', data[name]);
+                                            }
+                                        } else {
+                                            if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
+                                                this.appendRecursive(data[name], name);
+                                            } else {
+                                                this.append(name, data[name]);
+                                            }
+                                        }
+                                    }
+                                };
+
+                                let form_data = new FormData();
+                                form_data.appendRecursive(data);
+
+                                window.axios({
+                                    method: this.form.method,
+                                    url: this.form.action,
+                                    data: form_data,
+                                    headers: {
+                                        'X-CSRF-TOKEN': window.Laravel.csrfToken,
+                                        'X-Requested-With': 'XMLHttpRequest',
+                                        'Content-Type': 'multipart/form-data'
+                                    }
+                                })
+                                .then(response => {
+                                    if (response.data.success) {
+                                        if (response.data.redirect) {
+                                            this.form.loading = true;
+
+                                            window.location.href = response.data.redirect;
+                                        }
+                                    }
+                                })
+                                .catch(error => {
+                                    this.form.loading = false;
+
+                                    this.form.onFail(error);
+
+                                    this.method_show_html = error.message;
+                                });
+                            },
+
+                            onCancel() {
+                                this.payment.modal = false;
+                                this.payment.html = null;
+
+                                let documentClasses = document.body.classList;
+
+                                documentClasses.remove("modal-open");
+                            },
+                        }
+                    })
+                });
             })
             .catch(error => {
+            })
+            .finally(function () {
+                // always executed
             });
         },
     }
diff --git a/resources/assets/js/views/sales/invoices.js b/resources/assets/js/views/sales/invoices.js
index 5d98d9e13..5b9e2a3fe 100644
--- a/resources/assets/js/views/sales/invoices.js
+++ b/resources/assets/js/views/sales/invoices.js
@@ -38,15 +38,6 @@ const app = new Vue({
                 tax: 0,
                 total: 0
             },
-            transaction_form: new Form('transaction'),
-            payment: {
-                modal: false,
-                amount: 0,
-                title: '',
-                message: '',
-                html: '',
-                errors: new Error()
-            },
             transaction: [],
             items: '',
             discount: false,
@@ -60,7 +51,10 @@ const app = new Vue({
     },
 
     mounted() {
-        this.colspan = document.getElementById("items").rows[0].cells.length - 1;
+        if ((document.getElementById('items') != null) && (document.getElementById('items').rows)) {
+            this.colspan = document.getElementById("items").rows[0].cells.length - 1;
+        }
+
         this.form.items = [];
 
         if (this.form.method) {
@@ -322,51 +316,113 @@ const app = new Vue({
             this.onCalculateTotal();
         },
 
-        onPayment() {
-            this.payment.modal = true;
+        async onPayment() {
+            let invoice_id = document.getElementById('invoice_id').value;
 
-            let form = this.transaction_form;
-
-            this.transaction_form = new Form('transaction');
-
-            this.transaction_form.paid_at = form.paid_at;
-            this.transaction_form.account_id = form.account_id;
-            this.transaction_form.payment_method = form.payment_method;
-        },
-
-        addPayment() {
-            this.transaction_form.submit();
-
-            this.payment.errors = this.transaction_form.errors;
-
-            this.form.loading = true;
-
-            this.$emit("confirm");
-        },
-
-        closePayment() {
-            this.payment = {
+            let payment = {
                 modal: false,
-                amount: 0,
+                url: url + '/modals/invoices/' + invoice_id + '/transactions/create',
                 title: '',
-                message: '',
-                errors: this.transaction_form.errors
+                html: '',
+                buttons:{}
             };
-        },
 
-        // Change bank account get money and currency rate
-        onChangePaymentAccount(account_id) {
-            axios.get(url + '/banking/accounts/currency', {
-                params: {
-                    account_id: account_id
-                }
-            })
-            .then(response => {
-                this.transaction_form.currency = response.data.currency_name;
-                this.transaction_form.currency_code = response.data.currency_code;
-                this.transaction_form.currency_rate = response.data.currency_rate;
+            let payment_promise = Promise.resolve(window.axios.get(payment.url));
+
+            payment_promise.then(response => {
+                payment.modal = true;
+                payment.title = response.data.data.title;
+                payment.html = response.data.html;
+                payment.buttons = response.data.data.buttons;
+
+                this.component = Vue.component('add-new-component', (resolve, reject) => {
+                    resolve({
+                        template: '<div id="dynamic-component"><akaunting-modal-add-new :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+
+                        mixins: [
+                            Global
+                        ],
+
+                        data: function () {
+                            return {
+                                form:{},
+                                payment: payment,
+                            }
+                        },
+
+                        methods: {
+                            onSubmit(event) {
+                                this.form = event;
+
+                                this.loading = true;
+
+                                let data = this.form.data();
+
+                                FormData.prototype.appendRecursive = function(data, wrapper = null) {
+                                    for(var name in data) {
+                                        if (wrapper) {
+                                            if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
+                                                this.appendRecursive(data[name], wrapper + '[' + name + ']');
+                                            } else {
+                                                this.append(wrapper + '[' + name + ']', data[name]);
+                                            }
+                                        } else {
+                                            if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
+                                                this.appendRecursive(data[name], name);
+                                            } else {
+                                                this.append(name, data[name]);
+                                            }
+                                        }
+                                    }
+                                };
+
+                                let form_data = new FormData();
+                                form_data.appendRecursive(data);
+
+                                window.axios({
+                                    method: this.form.method,
+                                    url: this.form.action,
+                                    data: form_data,
+                                    headers: {
+                                        'X-CSRF-TOKEN': window.Laravel.csrfToken,
+                                        'X-Requested-With': 'XMLHttpRequest',
+                                        'Content-Type': 'multipart/form-data'
+                                    }
+                                })
+                                .then(response => {
+                                    if (response.data.success) {
+                                        if (response.data.redirect) {
+                                            this.form.loading = true;
+
+                                            window.location.href = response.data.redirect;
+                                        }
+                                    }
+                                })
+                                .catch(error => {
+                                    this.form.loading = false;
+
+                                    this.form.onFail(error);
+
+                                    this.method_show_html = error.message;
+                                });
+                            },
+
+                            onCancel() {
+                                this.payment.modal = false;
+                                this.payment.html = null;
+
+                                let documentClasses = document.body.classList;
+
+                                documentClasses.remove("modal-open");
+                            },
+                        }
+                    })
+                });
             })
             .catch(error => {
+            })
+            .finally(function () {
+                // always executed
             });
         },
     }
diff --git a/resources/views/modals/bills/payment.blade.php b/resources/views/modals/bills/payment.blade.php
index a1553b3cd..ec524893d 100644
--- a/resources/views/modals/bills/payment.blade.php
+++ b/resources/views/modals/bills/payment.blade.php
@@ -1,39 +1,34 @@
-<div class="modal-body">
-    {!! Form::open([
-        'route' => ['modals.bills.bill.transactions.store', $bill->id],
-        'id' => 'transaction',
-        '@submit.prevent' => 'onSubmit',
-        '@keydown' => 'transaction_form.errors.clear($event.target.name)',
-        'files' => true,
-        'role' => 'form',
-        'class' => 'form-loading-button',
-        'novalidate' => true
-    ]) !!}
-        <div class="row">
-            <base-alert type="warning" v-if="typeof transaction_form.response !== 'undefined' && transaction_form.response.error" v-html="transaction_form.response.message"></base-alert>
+{!! Form::open([
+    'id' => 'form-transaction',
+    '@submit.prevent' => 'onSubmit',
+    '@keydown' => 'form.errors.clear($event.target.name)',
+    'role' => 'form',
+    'class' => 'form-loading-button',
+    'route' => ['modals.bills.bill.transactions.store', $bill->id],
+    'novalidate' => true
+]) !!}
+    <div class="row">
+        <base-alert type="warning" v-if="typeof form.response !== 'undefined' && form.response.error" v-html="form.response.message"></base-alert>
 
-            {{ Form::dateGroup('paid_at', trans('general.date'), 'calendar', ['id' => 'paid_at', 'required' => 'required', 'date-format' => 'Y-m-d', 'autocomplete' => 'off', 'v-model' => 'transaction_form.paid_at', 'v-error' => 'payment.errors.get("paid_at")', 'v-error-message' => 'payment.errors.get("paid_at")'], Date::now()->toDateString()) }}
+        {{ Form::dateGroup('paid_at', trans('general.date'), 'calendar', ['id' => 'paid_at', 'required' => 'required', 'date-format' => 'Y-m-d', 'autocomplete' => 'off'], Date::now()->toDateString()) }}
 
-            {{ Form::moneyGroup('amount', trans('general.amount'), 'money-bill-alt', ['required' => 'required', 'autofocus' => 'autofocus', 'v-model' => 'transaction_form.amount', 'v-error' => 'payment.errors.get("amount")', 'v-error-message' => 'payment.errors.get("amount")', 'currency' => $currency, 'dynamic-currency' => 'currency'], $bill->grand_total) }}
+        {{ Form::moneyGroup('amount', trans('general.amount'), 'money-bill-alt', ['required' => 'required', 'autofocus' => 'autofocus', 'currency' => $currency, 'dynamic-currency' => 'currency'], $bill->grand_total) }}
 
-            {{ Form::selectGroup('account_id', trans_choice('general.accounts', 1), 'university', $accounts, setting('default.account'), ['required' => 'required', 'v-model' => 'transaction_form.account_id', 'v-error' => 'payment.errors.get("account_id")', 'v-error-message' => 'payment.errors.get("account_id")', 'change' => 'onChangePaymentAccount']) }}
+        {{ Form::selectGroup('account_id', trans_choice('general.accounts', 1), 'university', $accounts, setting('default.account'), ['required' => 'required', 'change' => 'onChangePaymentAccount']) }}
 
-            @stack('currency_code_input_start')
-                {{ Form::textGroup('currency', trans_choice('general.currencies', 1), 'exchange-alt', ['disabled' => 'true', 'v-model' => 'transaction_form.currency', 'v-error' => 'payment.errors.get("currency")', 'v-error-message' => 'payment.errors.get("currency")'], $currencies[$bill->currency_code]) }}
-            @stack('currency_code_input_end')
+        {{ Form::textGroup('currency', trans_choice('general.currencies', 1), 'exchange-alt', ['disabled' => 'true'], $currencies[$bill->currency_code]) }}
 
-            {{ Form::textareaGroup('description', trans('general.description'), '', null, ['rows' => '3', 'v-model' => 'transaction_form.description', 'v-error' => 'payment.errors.get("description")', 'v-error-message' => 'payment.errors.get("description")']) }}
+        {{ Form::textareaGroup('description', trans('general.description'), '', null, ['rows' => '3']) }}
 
-            {{ Form::selectGroup('payment_method', trans_choice('general.payment_methods', 1), 'credit-card', $payment_methods, setting('default.payment_method'), ['required' => 'requied', 'v-model' => 'transaction_form.payment_method', 'v-error' => 'payment.errors.get("payment_method")', 'v-error-message' => 'payment.errors.get("payment_method")']) }}
+        {{ Form::selectGroup('payment_method', trans_choice('general.payment_methods', 1), 'credit-card', $payment_methods, setting('default.payment_method'), ['required' => 'requied']) }}
 
-            {{ Form::textGroup('reference', trans('general.reference'), 'fa fa-file', ['v-model' => 'transaction_form.reference', 'v-error' => 'payment.errors.get("reference")', 'v-error-message' => 'payment.errors.get("reference")']) }}
+        {{ Form::textGroup('reference', trans('general.reference'), 'fa fa-file') }}
 
-            {!! Form::hidden('bill_id', $bill->id, ['id' => 'bill_id', 'class' => 'form-control', 'required' => 'required']) !!}
-            {!! Form::hidden('category_id', $bill->category->id, ['id' => 'category_id', 'class' => 'form-control', 'required' => 'required']) !!}
-            {!! Form::hidden('currency_code', $bill->currency_code, ['id' => 'currency_code', 'class' => 'form-control', 'required' => 'required']) !!}
-            {!! Form::hidden('currency_rate', $bill->currency_rate, ['id' => 'currency_rate', 'class' => 'form-control', 'required' => 'required']) !!}
+        {!! Form::hidden('bill_id', $bill->id, ['id' => 'bill_id', 'class' => 'form-control', 'required' => 'required']) !!}
+        {!! Form::hidden('category_id', $bill->category->id, ['id' => 'category_id', 'class' => 'form-control', 'required' => 'required']) !!}
+        {!! Form::hidden('currency_code', $bill->currency_code, ['id' => 'currency_code', 'class' => 'form-control', 'required' => 'required']) !!}
+        {!! Form::hidden('currency_rate', $bill->currency_rate, ['id' => 'currency_rate', 'class' => 'form-control', 'required' => 'required']) !!}
 
-            {!! Form::hidden('type', 'expense') !!}
-        </div>
-    {!! Form::close() !!}
-</div>
+        {!! Form::hidden('type', 'expense') !!}
+    </div>
+{!! Form::close() !!}
diff --git a/resources/views/modals/invoices/payment.blade.php b/resources/views/modals/invoices/payment.blade.php
index a9d13d28c..a76c7e085 100644
--- a/resources/views/modals/invoices/payment.blade.php
+++ b/resources/views/modals/invoices/payment.blade.php
@@ -1,37 +1,34 @@
-<div class="modal-body pb-0">
-    {!! Form::open([
-        'route' => ['modals.invoices.invoice.transactions.store', $invoice->id],
-        'id' => 'transaction',
-        '@submit.prevent' => 'onSubmit',
-        '@keydown' => 'transaction_form.errors.clear($event.target.name)',
-        'files' => true,
-        'role' => 'form',
-        'class' => 'form-loading-button',
-        'novalidate' => true
-    ]) !!}
-        <div class="row">
-            <base-alert type="warning" v-if="typeof transaction_form.response !== 'undefined' && transaction_form.response.error" v-html="transaction_form.response.message"></base-alert>
+{!! Form::open([
+    'id' => 'form-transaction',
+    '@submit.prevent' => 'onSubmit',
+    '@keydown' => 'form.errors.clear($event.target.name)',
+    'role' => 'form',
+    'class' => 'form-loading-button',
+    'route' => ['modals.invoices.invoice.transactions.store', $invoice->id],
+    'novalidate' => true
+]) !!}
+    <div class="row">
+        <base-alert type="warning" v-if="typeof form.response !== 'undefined' && form.response.error" v-html="form.response.message"></base-alert>
 
-            {{ Form::dateGroup('paid_at', trans('general.date'), 'calendar', ['id' => 'paid_at', 'required' => 'required', 'date-format' => 'Y-m-d', 'autocomplete' => 'off', 'v-model' => 'transaction_form.paid_at', 'v-error' => 'payment.errors.get("paid_at")', 'v-error-message' => 'payment.errors.get("paid_at")'], Date::now()->toDateString()) }}
+        {{ Form::dateGroup('paid_at', trans('general.date'), 'calendar', ['id' => 'paid_at', 'required' => 'required', 'date-format' => 'Y-m-d', 'autocomplete' => 'off'], Date::now()->toDateString()) }}
 
-            {{ Form::moneyGroup('amount', trans('general.amount'), 'money-bill-alt', ['required' => 'required', 'autofocus' => 'autofocus', 'v-model' => 'transaction_form.amount', 'v-error' => 'payment.errors.get("amount")', 'v-error-message' => 'payment.errors.get("amount")', 'currency' => $currency, 'dynamic-currency' => 'currency'], $invoice->grand_total) }}
+        {{ Form::moneyGroup('amount', trans('general.amount'), 'money-bill-alt', ['required' => 'required', 'autofocus' => 'autofocus', 'currency' => $currency, 'dynamic-currency' => 'currency'], $invoice->grand_total) }}
 
-            {{ Form::selectGroup('account_id', trans_choice('general.accounts', 1), 'university', $accounts, setting('default.account'), ['required' => 'required', 'v-model' => 'transaction_form.account_id', 'v-error' => 'payment.errors.get("account_id")', 'v-error-message' => 'payment.errors.get("account_id")', 'change' => 'onChangePaymentAccount']) }}
+        {{ Form::selectGroup('account_id', trans_choice('general.accounts', 1), 'university', $accounts, setting('default.account'), ['required' => 'required', 'change' => 'onChangePaymentAccount']) }}
 
-            {{ Form::textGroup('currency', trans_choice('general.currencies', 1), 'exchange-alt', ['disabled' => 'true', 'v-model' => 'transaction_form.currency', 'v-error' => 'payment.errors.get("currency")', 'v-error-message' => 'payment.errors.get("currency")'], $currencies[$invoice->currency_code]) }}
+        {{ Form::textGroup('currency', trans_choice('general.currencies', 1), 'exchange-alt', ['disabled' => 'true'], $currencies[$invoice->currency_code]) }}
 
-            {{ Form::textareaGroup('description', trans('general.description'), '', null, ['rows' => '3', 'v-model' => 'transaction_form.description', 'v-error' => 'payment.errors.get("description")', 'v-error-message' => 'payment.errors.get("description")']) }}
+        {{ Form::textareaGroup('description', trans('general.description'), '', null, ['rows' => '3']) }}
 
-            {{ Form::selectGroup('payment_method', trans_choice('general.payment_methods', 1), 'credit-card', $payment_methods, setting('default.payment_method'), ['required' => 'requied', 'v-model' => 'transaction_form.payment_method', 'v-error' => 'payment.errors.get("payment_method")', 'v-error-message' => 'payment.errors.get("payment_method")']) }}
+        {{ Form::selectGroup('payment_method', trans_choice('general.payment_methods', 1), 'credit-card', $payment_methods, setting('default.payment_method'), ['required' => 'requied']) }}
 
-            {{ Form::textGroup('reference', trans('general.reference'), 'fa fa-file', ['v-model' => 'transaction_form.reference', 'v-error' => 'payment.errors.get("reference")', 'v-error-message' => 'payment.errors.get("reference")']) }}
+        {{ Form::textGroup('reference', trans('general.reference'), 'fa fa-file') }}
 
-            {!! Form::hidden('invoice_id', $invoice->id, ['id' => 'invoice_id', 'class' => 'form-control', 'required' => 'required']) !!}
-            {!! Form::hidden('category_id', $invoice->category->id, ['id' => 'category_id', 'class' => 'form-control', 'required' => 'required']) !!}
-            {!! Form::hidden('currency_code', $invoice->currency_code, ['id' => 'currency_code', 'class' => 'form-control', 'required' => 'required']) !!}
-            {!! Form::hidden('currency_rate', $invoice->currency_rate, ['id' => 'currency_rate', 'class' => 'form-control', 'required' => 'required']) !!}
+        {!! Form::hidden('invoice_id', $invoice->id, ['id' => 'invoice_id', 'class' => 'form-control', 'required' => 'required']) !!}
+        {!! Form::hidden('category_id', $invoice->category->id, ['id' => 'category_id', 'class' => 'form-control', 'required' => 'required']) !!}
+        {!! Form::hidden('currency_code', $invoice->currency_code, ['id' => 'currency_code', 'class' => 'form-control', 'required' => 'required']) !!}
+        {!! Form::hidden('currency_rate', $invoice->currency_rate, ['id' => 'currency_rate', 'class' => 'form-control', 'required' => 'required']) !!}
 
-            {!! Form::hidden('type', 'income') !!}
-        </div>
-    {!! Form::close() !!}
-</div>
+        {!! Form::hidden('type', 'income') !!}
+    </div>
+{!! Form::close() !!}
diff --git a/resources/views/purchases/bills/show.blade.php b/resources/views/purchases/bills/show.blade.php
index 9aa7006d8..ab9f1625e 100644
--- a/resources/views/purchases/bills/show.blade.php
+++ b/resources/views/purchases/bills/show.blade.php
@@ -601,35 +601,10 @@
             @stack('row_footer_transaction_end')
         </div>
     @stack('row_footer_end')
+
+    {{ Form::hidden('bill_id', $bill->id, ['id' => 'bill_id']) }}
 @endsection
 
-@push('content_content_end')
-    <akaunting-modal
-        class="modal-payment"
-        :show="payment.modal"
-        @cancel="payment.modal = false"
-        :title="'{{ trans('general.title.new', ['type' => trans_choice('general.payments', 1)]) }}'"
-        :message="payment.html"
-        :button_cancel="'{{ trans('general.button.save') }}'"
-        :button_delete="'{{ trans('general.button.cancel') }}'">
-        <template #modal-body>
-            @include('modals.bills.payment')
-        </template>
-
-        <template #card-footer>
-            <div class="float-right">
-                <button type="button" class="btn btn-outline-secondary header-button-top" @click="closePayment">
-                    {{ trans('general.cancel') }}
-                </button>
-
-                <button :disabled="form.loading" type="button" class="btn btn-success button-submit header-button-top" @click="addPayment">
-                    <div class="aka-loader"></div><span>{{ trans('general.confirm') }}</span>
-                </button>
-            </div>
-        </template>
-    </akaunting-modal>
-@endpush
-
 @push('scripts_start')
     <script src="{{ asset('public/js/purchases/bills.js?v=' . version('short')) }}"></script>
 @endpush
diff --git a/resources/views/sales/invoices/show.blade.php b/resources/views/sales/invoices/show.blade.php
index ebecd242c..90dfebf9e 100644
--- a/resources/views/sales/invoices/show.blade.php
+++ b/resources/views/sales/invoices/show.blade.php
@@ -636,39 +636,10 @@
             @stack('row_footer_transaction_end')
         </div>
     @stack('row_footer_end')
+
+    {{ Form::hidden('invoice_id', $invoice->id, ['id' => 'invoice_id']) }}
 @endsection
 
-@push('content_content_end')
-    <akaunting-modal
-        class="modal-payment"
-        :show="payment.modal"
-        @cancel="payment.modal = false"
-        :title="'{{ trans('general.title.new', ['type' => trans_choice('general.payments', 1)]) }}'"
-        :message="payment.html"
-        :button_cancel="'{{ trans('general.button.save') }}'"
-        :button_delete="'{{ trans('general.button.cancel') }}'">
-        <template #modal-body>
-            @include('modals.invoices.payment')
-        </template>
-
-        <template #card-footer>
-            <div class="float-right">
-                <button type="button" class="btn btn-outline-secondary header-button-top" @click="closePayment">
-                    {{ trans('general.cancel') }}
-                </button>
-
-                <a href="{{ route('apps.categories.show', 'payment-method') }}" class="btn btn-white header-button-top long-texts">
-                    {{ trans('invoices.accept_payments') }}</span>
-                </a>
-
-                <button :disabled="form.loading" type="button" class="btn btn-success button-submit header-button-top" @click="addPayment">
-                    <div class="aka-loader"></div><span>{{ trans('general.confirm') }}</span>
-                </button>
-            </div>
-        </template>
-    </akaunting-modal>
-@endpush
-
 @push('scripts_start')
     <script src="{{ asset('public/js/sales/invoices.js?v=' . version('short')) }}"></script>
 @endpush