diff --git a/resources/views/portal/default/gateways/stripe/add_credit_card.blade.php b/resources/views/portal/default/gateways/stripe/add_credit_card.blade.php
index 67388a0e6998..dbb8d26c3442 100644
--- a/resources/views/portal/default/gateways/stripe/add_credit_card.blade.php
+++ b/resources/views/portal/default/gateways/stripe/add_credit_card.blade.php
@@ -2,19 +2,19 @@
 
 @section('credit_card')
 
-                    {!! Former::framework('TwitterBootstrap4'); !!}
+{!! Former::framework('TwitterBootstrap4'); !!}
 
-                    {!! Former::horizontal_open()
-                          ->id('server_response')
-                          ->route('client.payment_methods.store')
-                          ->method('POST');  !!}
+{!! Former::horizontal_open()
+      ->id('server_response')
+      ->route('client.payment_methods.store')
+      ->method('POST');  !!}
 
-                    {!! Former::hidden('company_gateway_id')->value($gateway->gateway_id) !!}
-                    {!! Former::hidden('gateway_type_id')->value(1) !!}
-                    {!! Former::hidden('gateway_response')->id('gateway_response') !!}
-                    {!! Former::hidden('is_default')->id('is_default') !!}
+{!! Former::hidden('company_gateway_id')->value($gateway->gateway_id) !!}
+{!! Former::hidden('gateway_type_id')->value(1) !!}
+{!! Former::hidden('gateway_response')->id('gateway_response') !!}
+{!! Former::hidden('is_default')->id('is_default') !!}
 
-                    {!! Former::close() !!}
+{!! Former::close() !!}
 
 
 <div class="py-md-5 ninja stripe">
diff --git a/resources/views/portal/default/gateways/stripe/credit_card.blade.php b/resources/views/portal/default/gateways/stripe/credit_card.blade.php
index 5fec358fd5a1..d3797afc0175 100644
--- a/resources/views/portal/default/gateways/stripe/credit_card.blade.php
+++ b/resources/views/portal/default/gateways/stripe/credit_card.blade.php
@@ -61,18 +61,14 @@
     var cardButton = document.getElementById('card-button');
     var clientSecret = cardButton.dataset.secret;
 
+@if($token)
     cardButton.addEventListener('click', function(ev) {
       stripe.handleCardPayment(
-        clientSecret, cardElement, {
-          payment_method_data: {
-            billing_details: {name: cardholderName.value}
-          }
+        clientSecret, {
+          payment_method: {{$token->token}},
         }
       ).then(function(result) {
         if (result.error) {
-          // Display error.message in your UI.
-          // console.log(result.error);
-          // console.log(result.error.message);
 
             $("#card-errors").empty();
             $("#card-errors").append("<b>" + result.error.message + "</b>");
@@ -85,7 +81,29 @@
         }
       });
     });
+@else
+    cardButton.addEventListener('click', function(ev) {
+      stripe.handleCardPayment(
+        clientSecret, cardElement, {
+          payment_method_data: {
+            billing_details: {name: cardholderName.value}
+          }
+        }
+      ).then(function(result) {
+        if (result.error) {
 
+            $("#card-errors").empty();
+            $("#card-errors").append("<b>" + result.error.message + "</b>");
+            $("#card-button").removeAttr("disabled");
+
+        } else {
+          // The setup has succeeded. Display a success message.
+          console.log(result);
+          postResult(result);
+        }
+      });
+    });
+@endif
     $("#card-button").attr("disabled", true);
 
     $('#cardholder-name').on('input',function(e){
diff --git a/resources/views/portal/default/payment_methods/index.blade.php b/resources/views/portal/default/payment_methods/index.blade.php
index ddc79d3c2f6a..585b14804ae5 100644
--- a/resources/views/portal/default/payment_methods/index.blade.php
+++ b/resources/views/portal/default/payment_methods/index.blade.php
@@ -69,6 +69,10 @@ $(function() {
 	        loadingRecords: "{{ trans('texts.loading') }}",
 	        zeroRecords:    "{{ trans('texts.no_records_found') }}"
     	},
+        ajax: {
+            url: '{!! route('client.payment_methods.index') !!}'
+
+        },
         columns: [
 
             {data: 'created_at', name: 'created_at', title: '{{ctrans('texts.created_at')}}', visible: true},