diff --git a/app/Repositories/BaseRepository.php b/app/Repositories/BaseRepository.php
index 578cf0741b86..e6dfa1f00c6c 100644
--- a/app/Repositories/BaseRepository.php
+++ b/app/Repositories/BaseRepository.php
@@ -330,8 +330,6 @@ class BaseRepository
 
             $model = $model->calc()->getCredit();
 
-            // $model->ledger()->updateCreditBalance(-1*($state['finished_amount'] - $state['starting_amount']));
-
             if (! $model->design_id) 
                 $model->design_id = $this->decodePrimaryKey($client->getSetting('credit_design_id'));
             
@@ -339,12 +337,18 @@ class BaseRepository
 
         if ($model instanceof Quote) {
 
+            if (! $model->design_id) 
+                $model->design_id = $this->decodePrimaryKey($client->getSetting('quote_design_id'));
+
             $model = $model->calc()->getQuote();
 
         }
 
         if ($model instanceof RecurringInvoice) {
 
+            if (! $model->design_id) 
+                $model->design_id = $this->decodePrimaryKey($client->getSetting('invoice_design_id'));
+            
             $model = $model->calc()->getRecurringInvoice();
 
         }
diff --git a/resources/views/portal/ninja2020/gateways/wepay/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/wepay/credit_card/pay.blade.php
index dc0163c5bfd9..ad470d9d3cf8 100644
--- a/resources/views/portal/ninja2020/gateways/wepay/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/wepay/credit_card/pay.blade.php
@@ -84,9 +84,82 @@
     };
 
     let errors = document.getElementById('errors');
+        
+    /* handle the switch between token and cc */
+    Array
+        .from(document.getElementsByClassName('toggle-payment-with-token'))
+        .forEach((element) => element.addEventListener('click', (e) => {
+            document
+                .getElementById('save-card--container').style.display = 'none';
+            document
+                .getElementById('wepay--credit-card-container').style.display = 'none';
+
+            document
+                .getElementById('token').value = e.target.dataset.token;
+        }));
+
+    let payWithCreditCardToggle = document.getElementById('toggle-payment-with-credit-card');
+
+    if (payWithCreditCardToggle) {
+        payWithCreditCardToggle
+            .addEventListener('click', () => {
+                document
+                    .getElementById('save-card--container').style.display = 'grid';
+                document
+                    .getElementById('wepay--credit-card-container').style.display = 'flex';
+
+                document
+                    .getElementById('token').value = null;
+            });
+    }
+    /* handle the switch between token and cc */
+
+    /* Attach store card value to form */
+    let storeCard = document.querySelector('input[name=token-billing-checkbox]:checked');
+
+    if (storeCard) {
+        document.getElementById("store_card").value = storeCard.value;
+    }
+    /* Attach store card value to form */
+
+    /* Pay Now Button */
+    let payNowButton = document.getElementById('pay-now');
+
+    if (payNowButton) {
+        payNowButton
+            .addEventListener('click', (e) => {
+                let token = document.getElementById('token').value;
+
+                if(token){
+                    handleTokenPayment($token)
+                }
+                else{
+                    handleCardPayment();
+                }
+            });
+                
+    }
+    /* Pay Now Button */
+
+
+
+
+    function handleTokenPayment($token)
+    {
+
+        document.querySelector('input[name="credit_card_id"]').value = token;                      
+        document.getElementById('server_response').submit();
+
+    }
+
+
+
+
+
+
 
     // Attach the event to the DOM
-    addEvent(document.getElementById('card_button'), 'click', function() {
+    function handleCardPayment(){
 
         var myCard = $('#my-card');
 
@@ -162,7 +235,7 @@
 
             }
         });
-    });
+    }
 
 })();
 </script>
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 a2c546846347..94c621a6f4f3 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,5 +1,5 @@
 <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">
+     style="display: flex!important; justify-content: center!important;" id="wepay--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')}}" required>
         <input class="card-number my-custom-class" id="card_number" name="card-number" required>