diff --git a/app/Http/Controllers/ClientPortal/InvoiceController.php b/app/Http/Controllers/ClientPortal/InvoiceController.php
index 1c18142d390c..be0ef7fee459 100644
--- a/app/Http/Controllers/ClientPortal/InvoiceController.php
+++ b/app/Http/Controllers/ClientPortal/InvoiceController.php
@@ -122,6 +122,7 @@ class InvoiceController extends Controller
 
         $total = $invoices->sum('balance');
                  
+                 
         $invoices->filter(function ($invoice){
             return $invoice->isPayable();
         })->map(function ($invoice){
@@ -130,6 +131,8 @@ class InvoiceController extends Controller
             return $invoice;
         });
 
+
+
         $formatted_total = Number::formatMoney($total, auth()->user()->client);
 
         $payment_methods = auth()->user()->client->getPaymentMethods($total);
diff --git a/database/factories/InvoiceFactory.php b/database/factories/InvoiceFactory.php
index 0a1a75b7bf0d..25085f4bd837 100644
--- a/database/factories/InvoiceFactory.php
+++ b/database/factories/InvoiceFactory.php
@@ -25,5 +25,6 @@ $factory->define(App\Models\Invoice::class, function (Faker $faker) {
 		'due_date' => $faker->date(),
 		'line_items' => InvoiceItemFactory::generate(5),
 		'backup' => '', 
+		'terms' => $faker->text(500),
     ];
 });
\ No newline at end of file
diff --git a/package.json b/package.json
index 08c3ef51ccc0..ed60a1ed7c9f 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "dropzone": "^5.5.1",
     "font-awesome": "^4.7.0",
     "jquery": "^3.4.1",
+    "jsignature": "^2.1.3",
     "laravel-mix": "^4.1.2",
     "perfect-scrollbar": "^1.3.0",
     "popper.js": "^1.14.3",
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 8d93e3798de1..378ed869cd17 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -7,6 +7,9 @@
     "/vendors/js/bootstrap.bundle.min.js": "/vendors/js/bootstrap.bundle.min.js?id=a454220fc07088bf1fdd",
     "/vendors/js/jquery.min.js": "/vendors/js/jquery.min.js?id=220afd743d9e9643852e",
     "/vendors/js/perfect-scrollbar.min.js": "/vendors/js/perfect-scrollbar.min.js?id=4a10bcfa0a9c9fa9d503",
+    "/vendors/js/jSignature.min.js": "/vendors/js/jSignature.min.js?id=4dc38fc88461b30ab711",
+    "/vendors/js/flashcanvas.min.js": "/vendors/js/flashcanvas.min.js?id=50f6e0a09e8a939c1da9",
+    "/vendors/js/flashcanvas.swf": "/vendors/js/flashcanvas.swf?id=d1a52ac12da100808048",
     "/vendors/css/select2.min.css": "/vendors/css/select2.min.css?id=8e44c39add2364bdb469",
     "/vendors/js/select2.min.js": "/vendors/js/select2.min.js?id=0a96cf2d3a193019a91b",
     "/vendors/css/select2-bootstrap4.css": "/vendors/css/select2-bootstrap4.css?id=85167d868d2bf2dc5603",
diff --git a/resources/views/portal/default/invoices/payment.blade.php b/resources/views/portal/default/invoices/payment.blade.php
index 41ef15e350b2..7397f928ec1b 100644
--- a/resources/views/portal/default/invoices/payment.blade.php
+++ b/resources/views/portal/default/invoices/payment.blade.php
@@ -42,17 +42,115 @@
                             </ul>
                         </div>
 
-                        <button class="btn btn-primary pull-right">{{ ctrans('texts.pay_now') }}</button>
+                        <button class="btn btn-primary pull-right" id="pay_now">{{ ctrans('texts.pay_now') }}</button>
                     </div>
                 </div>
             </div>
 		</div>
     </div>
 </main>
+
+
+
+
+
+
+
+
+
+
+<!-- Terms Modal -->
+<div class="modal fade" id="terms_modal" tabindex="-1" role="dialog" aria-labelledby="terms_modal_ttle" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="terms_modal_ttle">{{ ctrans('texts.terms') }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {!! $invoice->terms !!}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ ctrans('texts.close') }}</button>
+        <button type="button" class="btn btn-primary" id="terms_accepted">{{ trans('texts.agree_to_terms', ['terms' => trans('texts.invoice_terms')]) }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Authorization / Signature Modal -->
+<div class="modal fade" id="signature_modal" tabindex="-1" role="dialog" aria-labelledby="authorizationModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="terms_modal_ttle">{{ ctrans('texts.authorization') }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body" style="height:400px;">
+                <div>
+                    {{ trans('texts.sign_here') }}
+                </div>
+                <div id="signature"></div><br/>
+      </div>
+      <div class="modal-footer">
+        <button id="modalPayNowButton" type="button" class="btn btn-success" onclick="onModalPayNowClick()" disabled="">
+            {{ ctrans('texts.pay_now') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
 </body>
 @endsection
+@push('css')
+<style type="text/css">
+    #signature {
+        border: 2px dotted black;
+        background-color:lightgrey;
+    }
+</style>
+@endpush
 @push('scripts')
+<script src="/vendors/js/jSignature.min.js"></script>
 
+<script type="text/javascript">
+
+$('#pay_now').on('click', function(e) {
+    //check if terms must be accepted
+    $('#terms_modal').modal('show');
+
+    //push to signature check
+});
+
+$('#terms_accepted').on('click', function(e){
+
+        $('#terms_modal').modal('hide');
+
+    //check in signature is required 
+        $("#signature").jSignature({ 'UndoButton': true, }).bind('change', function(e) {});
+        $("#signature").resize();
+
+        $("#signature").jSignature('reset');
+        $('#signature_modal').modal();
+    //push to payment
+    
+
+});
+
+    function onModalPayNowClick() {
+            var data = {
+                signature: $('#signature').jSignature('getData', 'svgbase64')[1]
+            };
+            //var data = false;
+
+    }
+    
+</script>
 @endpush
 @section('footer')
 @endsection
diff --git a/webpack.mix.js b/webpack.mix.js
index ffc5dd2ed315..8be0d1f7f669 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -20,6 +20,9 @@ mix.copyDirectory('node_modules/@coreui/coreui/dist/js/coreui.min.js', 'public/v
 mix.copyDirectory('node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', 'public/vendors/js/bootstrap.bundle.min.js');
 mix.copyDirectory('node_modules/jquery/dist/jquery.min.js', 'public/vendors/js/jquery.min.js');
 mix.copyDirectory('node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js', 'public/vendors/js/perfect-scrollbar.min.js');
+mix.copyDirectory('node_modules/jsignature/libs/jSignature.min.js', 'public/vendors/js/jSignature.min.js');
+mix.copyDirectory('node_modules/jsignature/libs/flashcanvas.min.js', 'public/vendors/js/flashcanvas.min.js');
+mix.copyDirectory('node_modules/jsignature/libs/flashcanvas.swf', 'public/vendors/js/flashcanvas.swf');
 
 
 mix.copyDirectory('node_modules/select2/dist/css/select2.min.css', 'public/vendors/css/select2.min.css');