diff --git a/app/PaymentDrivers/WePay/CreditCard.php b/app/PaymentDrivers/WePay/CreditCard.php
index 5d8bc96d4a9f..2c1d76878db1 100644
--- a/app/PaymentDrivers/WePay/CreditCard.php
+++ b/app/PaymentDrivers/WePay/CreditCard.php
@@ -12,6 +12,8 @@
 
 namespace App\PaymentDrivers\WePay;
 
+use App\Exceptions\PaymentFailed;
+use App\Models\GatewayType;
 use App\PaymentDrivers\WePayPaymentDriver;
 
 class CreditCard
@@ -33,21 +35,79 @@ class CreditCard
  	public function authorizeResponse($request)
  	{
  		//https://developer.wepay.com/api/api-calls/credit_card#authorize
-
         $data = $request->all();
 		// authorize the credit card
         
         nlog($data);
+        /*
+          '_token' => '1Fk5CRj34up5ntKPvrFyMIAJhDdUNF3boqT3iIN3',
+          'company_gateway_id' => '39',
+          'payment_method_id' => '1',
+          'gateway_response' => NULL,
+          'is_default' => NULL,
+          'credit_card_id' => '180642154638',
+          'q' => '/client/payment_methods',
+          'method' => '1',
+         */
 
 		$response = $this->wepay_payment_driver->wepay->request('credit_card/authorize', array(
-            'account_id'         => $this->wepay_payment_driver->company_gateway->getConfigField('accountId'),
 		    'client_id'          => config('ninja.wepay.client_id'),
 		    'client_secret'      => config('ninja.wepay.client_secret'),
-		    'credit_card_id'     => $data['credit_card_id'],
+		    'credit_card_id'     => (int)$data['credit_card_id'],
 		));
 
 		// display the response
-		print_r($response);
-        nlog($response);
- 	}   
+        //nlog($response);
+        
+        if(in_array($response->state, ['new', 'authorized'])){
+
+            $this->storePaymentMethod($response, GatewayType::CREDIT_CARD);
+
+            return redirect()->route('client.payment_methods.index');
+        }
+    
+        throw new PaymentFailed("There was a problem adding this payment method.", 400);
+        
+        /*
+            [credit_card_id] => 348084962473
+            [credit_card_name] => Visa xxxxxx4018
+            [state] => authorized
+            [user_name] => Joey Diaz
+            [email] => user@example.com
+            [create_time] => 1623798172
+            [expiration_month] => 10
+            [expiration_year] => 2023
+            [last_four] => 4018
+            [input_source] => card_keyed
+            [virtual_terminal_mode] => none
+            [card_on_file] => 
+            [recurring] => 
+            [cvv_provided] => 1
+            [auto_update] => 
+        */    
+    
+ 	}  
+
+
+    private function storePaymentMethod($response, $payment_method_id)
+    {
+
+        $payment_meta = new \stdClass;
+        $payment_meta->exp_month = (string) $response->expiration_month;
+        $payment_meta->exp_year = (string) $response->expiration_year;
+        $payment_meta->brand = (string) $response->credit_card_name;
+        $payment_meta->last4 = (string) $response->last_four;
+        $payment_meta->type = GatewayType::CREDIT_CARD;
+
+        $data = [
+            'payment_meta' => $payment_meta,
+            'token' => $response->credit_card_id,
+            'payment_method_id' => $payment_method_id,
+        ];
+
+        $this->wepay_payment_driver->storeGatewayToken($data);
+
+    } 
+
 }
+
diff --git a/resources/views/portal/ninja2020/gateways/wepay/authorize/authorize.blade.php b/resources/views/portal/ninja2020/gateways/wepay/authorize/authorize.blade.php
index 160fdd847c94..8be02b9c9b17 100644
--- a/resources/views/portal/ninja2020/gateways/wepay/authorize/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/wepay/authorize/authorize.blade.php
@@ -44,10 +44,11 @@
 <script type="text/javascript" src="https://static.wepay.com/min/js/tokenization.4.latest.js"></script>
 <script type="text/javascript">
 (function() {
+
     @if(config('ninja.wepay.environment') == 'staging')
-    WePay.set_endpoint("stage"); // change to "production" when live
+    WePay.set_endpoint("stage"); 
     @else
-    WePay.set_endpoint("production"); // change to "production" when live
+    WePay.set_endpoint("production");
     @endif
     // Shortcuts
     var d = document;
@@ -62,11 +63,50 @@
         else { e.addEventListener(v, f, false); }
     };
 
+    let errors = document.getElementById('errors');
+
     // Attach the event to the DOM
     addEvent(document.getElementById('card_button'), 'click', function() {
 
         var myCard = $('#my-card');
 
+        if(document.getElementById('cardholder_name') == "") {
+            document.getElementById('cardholder_name').focus();
+            errors.textContent = "Cardholder name required.";
+            errors.hidden = false;
+            return;
+        }
+        else if(myCard.CardJs('cardNumber') == ""){
+            document.getElementById('card_number').focus();
+            errors.textContent = "Card number required.";
+            errors.hidden = false;
+            return;
+        }
+        else if(myCard.CardJs('cvc') == ""){
+            document.getElementById('cvv').focus();
+            errors.textContent = "CVV number required.";
+            errors.hidden = false;
+            return;
+        }
+        else if(myCard.CardJs('expiryMonth') == ""){
+            // document.getElementById('expiry_month').focus();
+            errors.textContent = "Expiry Month number required.";
+            errors.hidden = false;
+            return;
+        }
+        else if(myCard.CardJs('expiryYear') == ""){
+            // document.getElementById('expiry_year').focus();
+            errors.textContent = "Expiry Year number required.";
+            errors.hidden = false;
+            return;
+        }
+ 
+        cardButton = document.getElementById('card_button');
+        cardButton.disabled = true;
+
+        cardButton.querySelector('svg').classList.remove('hidden');
+        cardButton.querySelector('span').classList.add('hidden');
+
         var userName = [valueById('cardholder_name')].join(' ');
             response = WePay.credit_card.create({
             "client_id":        "{{ config('ninja.wepay.client_id') }}",
@@ -80,22 +120,24 @@
                 "postal_code": "{{ $contact->client->postal_code }}"
             }
         }, function(data) {
-            if (data.error) {
-                console.log(data);
-                // handle error response error_description
-                let errors = document.getElementById('errors');
-                 errors.textContent = '';
-                 errors.textContent = data.error_description;
-                 errors.hidden = false;
-            } else {
-                // call your own app's API to save the token inside the data;
-                // show a success page
-                var token = data.credit_card_id;
-                // Insert the token into the form so it gets submitted to the server
-                // console.log(data);
 
-                document.querySelector('input[name="credit_card_id"]').value = token;
-                        
+            if (data.error) {
+                //console.log(data);
+                // handle error response error_description
+                cardButton = document.getElementById('card_button');
+                cardButton.disabled = false;
+                cardButton.querySelector('svg').classList.add('hidden');
+                cardButton.querySelector('span').classList.remove('hidden'); 
+                
+                errors.textContent = '';
+                errors.textContent = data.error_description;
+                errors.hidden = false;
+
+            } else {
+
+                var token = data.credit_card_id;
+
+                document.querySelector('input[name="credit_card_id"]').value = token;                      
                 document.getElementById('server_response').submit();
 
             }
diff --git a/resources/views/portal/ninja2020/gateways/wepay/includes/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/wepay/includes/credit_card.blade.php
index 49da5ff160fd..a2c546846347 100644
--- a/resources/views/portal/ninja2020/gateways/wepay/includes/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/wepay/includes/credit_card.blade.php
@@ -1,11 +1,11 @@
 <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
      style="display: flex!important; justify-content: center!important;" id="authorize--credit-card-container">
     <div class="card-js" id="my-card" data-capture-name="true">
-        <input class="name" id="cardholder_name" name="card-holders-name" placeholder="{{ ctrans('texts.name')}}">
-        <input class="card-number my-custom-class" id="card_number" name="card-number">
-        <input class="expiry-month" name="expiry-month" id="expiration_month">
-        <input class="expiry-year" name="expiry-year" id="expiration_year">
-        <input class="cvc" name="cvc" id="cvv">
+        <input class="name" id="cardholder_name" name="card-holders-name" placeholder="{{ ctrans('texts.name')}}" required>
+        <input class="card-number my-custom-class" id="card_number" name="card-number" required>
+        <input class="expiry-month" name="expiry-month" id="expiration_month" required>
+        <input class="expiry-year" name="expiry-year" id="expiration_year" required>
+        <input class="cvc" name="cvc" id="cvv" required>
     </div>
 
     <div id="errors"></div>