diff --git a/app/PaymentDrivers/CBAPowerBoard/CreditCard.php b/app/PaymentDrivers/CBAPowerBoard/CreditCard.php
index 2315b56a0130..c14be334fc6e 100644
--- a/app/PaymentDrivers/CBAPowerBoard/CreditCard.php
+++ b/app/PaymentDrivers/CBAPowerBoard/CreditCard.php
@@ -19,6 +19,7 @@ use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Jobs\Util\SystemLogger;
 use App\Exceptions\PaymentFailed;
+use Illuminate\Http\Client\RequestException;
 use App\PaymentDrivers\CBAPowerBoardPaymentDriver;
 use App\PaymentDrivers\CBAPowerBoard\Models\Charge;
 use App\PaymentDrivers\Common\LivewireMethodInterface;
@@ -123,6 +124,31 @@ class CreditCard implements LivewireMethodInterface
     public function tokenBilling($request, $cgt, $client_present = false)
     {
 
+        $payload = [
+            "amount" => $this->powerboard->payment_hash->data->amount_with_fee,
+            "currency" => $this->powerboard->client->currency()->code,
+            "customer" => [
+                "payment_source" => [
+                    "vault_token" => $cgt->token,
+                    "gateway_id" => $cgt->gateway_customer_reference
+                ]
+            ]
+        ];
+
+        $r = $this->powerboard->gatewayRequest('/v1/charges', (\App\Enum\HttpVerb::POST)->value, $payload, []);
+
+        nlog($r->body());
+
+        if($r->failed());
+            return $this->processUnsuccessfulPayment($r);
+
+        $charge = (new \App\PaymentDrivers\CBAPowerBoard\Models\Parse())->encode(Charge::class, $r->object()->resource->data) ?? $r->throw();
+
+        nlog($charge);
+
+        $this->powerboard->logSuccessfulGatewayResponse(['response' => $charge, 'data' => $this->powerboard->payment_hash], SystemLog::TYPE_POWERBOARD);
+
+        return $this->processSuccessfulPayment($charge);
     }
 
     private function get3dsToken(PaymentSource $source, $request)
@@ -167,11 +193,9 @@ class CreditCard implements LivewireMethodInterface
     {
         nlog($request->all());
      
-        $request->headers->set('Accept', 'application/json');
         $this->powerboard->payment_hash->data = array_merge((array) $this->powerboard->payment_hash->data, ['response' => $request->all()]);
         $this->powerboard->payment_hash->save();
 
-
         // $token = $request->payment_source;
         $payload = [];
 
@@ -185,13 +209,8 @@ class CreditCard implements LivewireMethodInterface
                         ->where('token', $request->token)
                         ->first();
 
-            $payload["customer"] = [
-                    "payment_source" => [
-                        "vault_token" => $cgt->token,
-                        "gateway_id" => $cgt->meta->gateway_id
-                    ]
-                ];
-
+            return $this->tokenBilling($request, $cgt, true);
+            
         }
         elseif($request->browser_details)
         {
@@ -290,7 +309,7 @@ class CreditCard implements LivewireMethodInterface
         try{
             $response->throw();
         }
-        catch(\Throwable $exception){
+        catch(RequestException $exception){
             $error_object = $exception->response->object();
 
             nlog($error_object);
diff --git a/resources/views/portal/ninja2020/gateways/powerboard/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/powerboard/credit_card/pay.blade.php
index 67aed5950259..054e93e3167d 100644
--- a/resources/views/portal/ninja2020/gateways/powerboard/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/powerboard/credit_card/pay.blade.php
@@ -63,7 +63,7 @@
         @endcomponent
 
     <div id="powerboard-payment-container" class="w-full">
-        <div id="widget" style="block"></div>
+        <div id="widget" style="block" class="hidden"></div>
         <div id="widget-3dsecure"></div>
     </div>
 
@@ -137,6 +137,7 @@
         });
         
         widget.on("finish", async function(data) {
+            document.getElementById('errors').hidden = true;
 
             console.log("finish", data);
         
@@ -185,8 +186,11 @@
 
             canvas.on("chargeAuthReject", function(data) {
                 console.log(data);
-            });
 
+                document.getElementById('errors').textContent = `Sorry, your transaction could not be processed...`;
+                document.getElementById('errors').hidden = false;
+
+            });
 
             canvas.load();
 
@@ -195,6 +199,7 @@
         widget.on("submit", async function (data){
             console.log("submit");
             console.log(data);        
+            document.getElementById('errors').hidden = true;
         })
 
         widget.on('form_submit', function (data) {
@@ -216,12 +221,12 @@
 
         payNow.addEventListener('click', () => {
             
-            widget.getValidationState();
+            // widget.getValidationState();
 
-            if(!widget.isValidForm()){
-                console.log("invalid");
-                return;
-            }
+            // if(!widget.isValidForm()){
+            //     console.log("invalid");
+            //     return;
+            // }
 
             payNow.disabled = true;
             payNow.querySelector('svg').classList.remove('hidden');
@@ -235,7 +240,7 @@
                 document.getElementById('store_card').value = storeCard.value;
             }
 
-            document.getElementById('stub').click();
+            document.getElementById('server-response').submit();
 
         });
 
@@ -286,11 +291,48 @@
             }
             catch(error) {
                 
+                document.getElementById('errors').textContent = `Sorry, your transaction could not be processed...\n\n${error.message}`;
+                document.getElementById('errors').hidden = false;
+
                 console.error('Fetch error:', error); // Log error for debugging
                 throw error; //
            
             }
         }
+        
+        const first = document.querySelector('input[name="payment-type"]');
+
+        if (first) {
+            first.click();
+        }
+
+
+        document
+            .getElementById('toggle-payment-with-credit-card')
+            .addEventListener('click', (element) => {
+
+                let widget = document.getElementById('widget');
+                widget.classList.remove('hidden');
+                document.getElementById('save-card--container').style.display ='grid';
+                document.querySelector('input[name=token]').value = '';
+
+            });
+
+
+            Array.from(
+                document.getElementsByClassName('toggle-payment-with-token')
+            ).forEach((element) =>
+                element.addEventListener('click', (element) => {
+                    document
+                        .getElementById('widget')
+                        .classList.add('hidden');
+                    document.getElementById(
+                        'save-card--container'
+                    ).style.display = 'none';
+                    document.querySelector('input[name=token]').value =
+                        element.target.dataset.token;
+                })
+            );
     </script> 
 
 @endsection