diff --git a/app/Models/Document/Document.php b/app/Models/Document/Document.php
index 7855528f8..9928ff50b 100644
--- a/app/Models/Document/Document.php
+++ b/app/Models/Document/Document.php
@@ -538,7 +538,7 @@ class Document extends Model
                     'permission' => 'read-' . $group . '-' . $permission_prefix,
                     'attributes' => [
                         'id' => 'index-line-actions-payment-' . $this->type . '-' . $this->id,
-                        '@click' => 'onPayment("' . $this->id . '")',
+                        '@click' => 'onAddPayment("' . route('modals.documents.document.transactions.create', $this->id) . '")',
                     ],
                 ];
             } catch (\Exception $e) {}
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index b262b5e60..cbeed6dd8 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -586,19 +586,311 @@ export default {
             this.onChangeCurrency(currency_code);
         },
 
-        async onSendEmail(route) {
-            let email = {
+        async onAddPayment(url) {
+            let payment = {
                 modal: false,
-                route: route,
+                url: url,
                 title: '',
                 html: '',
                 buttons:{}
             };
 
-            let email_promise = Promise.resolve(window.axios.get(email.route));
+            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-payment-component"><akaunting-modal-add-new modal-dialog-class="max-w-md" modal-position-top :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+
+                        components: {
+                            AkauntingDropzoneFileUpload,
+                            AkauntingContactCard,
+                            AkauntingCompanyEdit,
+                            AkauntingEditItemColumns,
+                            AkauntingItemButton,
+                            AkauntingDocumentButton,
+                            AkauntingSearch,
+                            AkauntingRadioGroup,
+                            AkauntingSelect,
+                            AkauntingSelectRemote,
+                            AkauntingMoney,
+                            AkauntingModal,
+                            AkauntingModalAddNew,
+                            AkauntingDate,
+                            AkauntingRecurring,
+                            AkauntingHtmlEditor,
+                            AkauntingCountdown,
+                            AkauntingCurrencyConversion,
+                            AkauntingConnectTransactions,
+                            AkauntingSwitch,
+                            AkauntingSlider,
+                            AkauntingColor,
+                            CardForm,
+                            [Select.name]: Select,
+                            [Option.name]: Option,
+                            [Steps.name]: Steps,
+                            [Step.name]: Step,
+                            [Button.name]: Button,
+                            [Link.name]: Link,
+                            [Tooltip.name]: Tooltip,
+                            [ColorPicker.name]: ColorPicker,
+                        },
+
+                        data: function () {
+                            return {
+                                form:{},
+                                payment: payment,
+                            }
+                        },
+
+                        methods: {
+                            onSubmit(event) {
+                                this.form = event;
+
+                                this.form.response = {};
+
+                                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;
+                                        }
+                                    }
+
+                                    if (response.data.error) {
+                                        this.form.loading = false;
+
+                                        this.form.response = response.data;
+                                    }
+                                })
+                                .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('overflow-y-hidden', 'overflow-overlay', '-ml-4');
+                            },
+                        }
+                    })
+                });
+            })
+            .catch(error => {
+            })
+            .finally(function () {
+                // always executed
+            });
+        },
+
+        async onEditPayment(url) {
+            let payment = {
+                modal: false,
+                url: url,
+                title: '',
+                html: '',
+                buttons:{}
+            };
+
+            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-payment-component"><akaunting-modal-add-new modal-dialog-class="max-w-md" modal-position-top :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+
+                        components: {
+                            AkauntingDropzoneFileUpload,
+                            AkauntingContactCard,
+                            AkauntingCompanyEdit,
+                            AkauntingEditItemColumns,
+                            AkauntingItemButton,
+                            AkauntingDocumentButton,
+                            AkauntingSearch,
+                            AkauntingRadioGroup,
+                            AkauntingSelect,
+                            AkauntingSelectRemote,
+                            AkauntingMoney,
+                            AkauntingModal,
+                            AkauntingModalAddNew,
+                            AkauntingDate,
+                            AkauntingRecurring,
+                            AkauntingHtmlEditor,
+                            AkauntingCountdown,
+                            AkauntingCurrencyConversion,
+                            AkauntingConnectTransactions,
+                            AkauntingSwitch,
+                            AkauntingSlider,
+                            AkauntingColor,
+                            CardForm,
+                            [Select.name]: Select,
+                            [Option.name]: Option,
+                            [Steps.name]: Steps,
+                            [Step.name]: Step,
+                            [Button.name]: Button,
+                            [Link.name]: Link,
+                            [Tooltip.name]: Tooltip,
+                            [ColorPicker.name]: ColorPicker,
+                        },
+
+                        data: function () {
+                            return {
+                                form:{},
+                                payment: payment,
+                            }
+                        },
+
+                        methods: {
+                            onSubmit(event) {
+                                this.form = event;
+
+                                this.form.response = {};
+
+                                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;
+                                        }
+                                    }
+
+                                    if (response.data.error) {
+                                        this.form.loading = false;
+
+                                        this.form.response = response.data;
+                                    }
+                                })
+                                .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('overflow-y-hidden', 'overflow-overlay', '-ml-4');
+                            },
+                        }
+                    })
+                });
+            })
+            .catch(error => {
+            })
+            .finally(function () {
+                // always executed
+            });
+        },
+
+        async onSendEmail(url) {
+            let email = {
+                modal: false,
+                url: url,
+                title: '',
+                html: '',
+                buttons:{}
+            };
+
+            let email_promise = Promise.resolve(window.axios.get(email.url));
 
             if (this.email_template) {
-                email_promise = Promise.resolve(window.axios.get(email.route, {
+                email_promise = Promise.resolve(window.axios.get(email.url, {
                     params: {
                         email_template: this.email_template
                     }
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index f0d1b1a3b..f94c05ba1 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -589,244 +589,6 @@ const app = new Vue({
             this.form.items[item_index][field_name] = this.items[item_index][field_name];
         },
 
-        async onPayment(document_id) {
-            if (typeof  document_id == 'object') {
-                document_id = document.getElementById('document_id').value;
-            }
-
-            let payment = {
-                modal: false,
-                url: url + '/modals/documents/' + document_id + '/transactions/create',
-                title: '',
-                html: '',
-                buttons:{}
-            };
-
-            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-payment-component"><akaunting-modal-add-new modal-dialog-class="max-w-md" modal-position-top :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.form.response = {};
-
-                                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;
-                                        }
-                                    }
-
-                                    if (response.data.error) {
-                                        this.form.loading = false;
-
-                                        this.form.response = response.data;
-                                    }
-                                })
-                                .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('overflow-y-hidden', 'overflow-overlay', '-ml-4');
-                            },
-                        }
-                    })
-                });
-            })
-            .catch(error => {
-            })
-            .finally(function () {
-                // always executed
-            });
-        },
-
-        async onEditPayment(transaction_id) {
-            let document_id = document.getElementById('document_id').value;
-
-            let payment = {
-                modal: false,
-                url: url + '/modals/documents/' + document_id + '/transactions/' + transaction_id + '/edit',
-                title: '',
-                html: '',
-                buttons:{}
-            };
-
-            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-payment-component"><akaunting-modal-add-new modal-dialog-class="max-w-md" modal-position-top :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.form.response = {};
-
-                                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;
-                                        }
-                                    }
-
-                                    if (response.data.error) {
-                                        this.form.loading = false;
-
-                                        this.form.response = response.data;
-                                    }
-                                })
-                                .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('overflow-y-hidden', 'overflow-overlay', '-ml-4');
-                            },
-                        }
-                    })
-                });
-            })
-            .catch(error => {
-            })
-            .finally(function () {
-                // always executed
-            });
-        },
-
         onEmailViaTemplate(route, template) {
             this.email_template = template;
 
diff --git a/resources/views/components/documents/show/get-paid.blade.php b/resources/views/components/documents/show/get-paid.blade.php
index f2cf8d4b4..7e7ecc7d9 100644
--- a/resources/views/components/documents/show/get-paid.blade.php
+++ b/resources/views/components/documents/show/get-paid.blade.php
@@ -13,7 +13,7 @@
             @if (! $hideAddPayment)
                 @if (empty($document->transactions->count()) || (! empty($document->transactions->count()) && $document->paid != $document->amount))
                     <x-button
-                        @click="onPayment"
+                        @click="onAddPayment('{{ route('modals.documents.document.transactions.create', $document->id) }}')"
                         id="show-slider-actions-payment-{{ $document->type }}"
                         class="px-3 py-1.5 mb-3 sm:mb-0 rounded-lg text-xs font-medium leading-6 bg-green hover:bg-green-700 text-white disabled:bg-green-100"
                         override="class"
@@ -80,7 +80,7 @@
                         <span> - </span>
 
                         <x-button
-                            @click="onEditPayment('{{ $transaction->id }}')"
+                            @click="onEditPayment('{{ route('modals.documents.document.transactions.edit', ['document' => $document->id, 'transaction' => $transaction->id]) }}')"
                             id="show-slider-actions-transaction-edit-{{ $document->type }}-{{ $transaction->id }}"
                             class="text-purple mt-1"
                             override="class"
diff --git a/resources/views/components/documents/show/make-payment.blade.php b/resources/views/components/documents/show/make-payment.blade.php
index f6e205939..5bb726798 100644
--- a/resources/views/components/documents/show/make-payment.blade.php
+++ b/resources/views/components/documents/show/make-payment.blade.php
@@ -13,7 +13,7 @@
             @if (! $hideAddPayment)
                 @if(empty($document->transactions->count()) || (! empty($document->transactions->count()) && $document->paid != $document->amount))
                     <x-button
-                        @click="onPayment"
+                        @click="onAddPayment('{{ route('modals.documents.document.transactions.create', $document->id) }}')"
                         id="show-slider-actions-payment-{{ $document->type }}"
                         class="px-3 py-1.5 mb-3 sm:mb-0 rounded-lg text-xs font-medium leading-6 bg-green hover:bg-green-700 text-white disabled:bg-green-100"
                         override="class"
@@ -63,7 +63,7 @@
                         <span> - </span>
 
                         <x-button
-                            @click="onEditPayment('{{ $transaction->id }}')"
+                            @click="onEditPayment('{{ route('modals.documents.document.transactions.edit', ['document' => $document->id, 'transaction' => $transaction->id]) }}')"
                             id="show-slider-actions-transaction-edit-{{ $document->type }}-{{ $transaction->id }}"
                             class="text-purple mt-1"
                             override="class"