diff --git a/app/Http/Controllers/ClientPortal/InvoiceController.php b/app/Http/Controllers/ClientPortal/InvoiceController.php
index ef76bf96d60e..c656b116f314 100644
--- a/app/Http/Controllers/ClientPortal/InvoiceController.php
+++ b/app/Http/Controllers/ClientPortal/InvoiceController.php
@@ -44,7 +44,7 @@ class InvoiceController extends Controller
      * @return \Illuminate\Http\Response
      */
     public function index(InvoiceFilters $filters, Builder $builder)
-    {//
+    {
         $invoices = Invoice::filter($filters)->with('client', 'client.country');
 
         if (request()->ajax()) {
@@ -68,7 +68,6 @@ class InvoiceController extends Controller
                 })
                 ->rawColumns(['checkbox', 'action', 'status_id'])
                 ->make(true);
-        
         }
 
         $data['html'] = $builder;
@@ -82,8 +81,10 @@ class InvoiceController extends Controller
         $buttons = '<div>';
 
         if($invoice->isPayable()){
-            $buttons .= '<a href="/client/invoices/'. $invoice->hashed_id .'" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-edit"></i>'.ctrans('texts.pay_now').'</a>';
+            $buttons .= "<button type=\"button\" class=\"btn btn-sm btn-info\" onclick=\"payInvoice('".$invoice->hashed_id."')\"><i class=\"glyphicon glyphicon-edit\"></i>".ctrans('texts.pay_now')."</button>";
+        //    $buttons .= '<a href="/client/invoices/'. $invoice->hashed_id .'" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-edit"></i>'.ctrans('texts.pay_now').'</a>';
         }
+
         $buttons .= '<a href="/client/invoices/'. $invoice->hashed_id .'" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-edit"></i>'.ctrans('texts.view').'</a>';
 
         $buttons .="</div>";
diff --git a/resources/views/portal/default/invoices/index.blade.php b/resources/views/portal/default/invoices/index.blade.php
index 29b505bdb83a..33d42065bc0e 100644
--- a/resources/views/portal/default/invoices/index.blade.php
+++ b/resources/views/portal/default/invoices/index.blade.php
@@ -218,6 +218,18 @@ function filterTable() {
     data_table.ajax.reload();
 }
 
+function payInvoice(hashed_id) {
+
+    $('#pay_invoices_drop').addClass('disabled');
+    $('#download_invoices').addClass('disabled');
+    
+    $('#hashed_ids').val(hashed_id);
+    $('#action').val('payment');
+
+    $('#payment_form').submit();
+
+}
+
 // Setup status filter
 $('#statuses').select2({
     placeholder: "{{ ctrans('texts.status') }}",
@@ -251,7 +263,6 @@ $('#statuses').select2({
     data_table.ajax.reload();
 
 });
-
 </script>
 @endpush