diff --git a/app/PaymentDrivers/CBAPowerBoard/CreditCard.php b/app/PaymentDrivers/CBAPowerBoard/CreditCard.php
index 1b4c24284d99..5ba8cab91516 100644
--- a/app/PaymentDrivers/CBAPowerBoard/CreditCard.php
+++ b/app/PaymentDrivers/CBAPowerBoard/CreditCard.php
@@ -34,12 +34,101 @@ class CreditCard implements LivewireMethodInterface
 
     public function authorizeView(array $data)
     {
+        $data['payment_method_id'] = GatewayType::CREDIT_CARD;
+
         return render('gateways.powerboard.credit_card.authorize', $this->paymentData($data));
     }
 
     public function authorizeResponse($request)
     {
-        $cgt = $this->powerboard->customer()->storePaymentMethod($request);
+
+        if($request->browser_details)
+        {        
+            $payment_source = $this->storePaymentSource($request);
+
+            nlog($payment_source);
+
+            $browser_details = json_decode($request->browser_details, true);
+
+            $payload = [
+                "amount" => 1,
+                "currency" => $this->powerboard->client->currency()->code,
+                "description" => "Card authorization",
+                "customer" => [
+                    "payment_source" => [
+                        "vault_token" => $payment_source->vault_token,
+                        "gateway_id" => $payment_source->gateway_id,
+                    ],
+                ],
+                "_3ds" => [
+                    "browser_details" => $browser_details,
+                ],
+            ];
+
+            nlog($payload);
+
+            $r = $this->powerboard->gatewayRequest('/v1/charges/3ds', (\App\Enum\HttpVerb::POST)->value, $payload, []);
+
+            if ($r->failed()) {
+                return $this->processUnsuccessfulPayment($r);
+            }
+
+            $charge = $r->json();
+            nlog($charge['resource']['data']);
+            return response()->json($charge['resource']['data'], 200);
+
+
+        }
+        elseif($request->charge) {
+
+            $charge_request = json_decode($request->charge, true);
+            nlog("we have the charge request");
+            nlog($charge_request);
+
+            $payload = [
+                '_3ds' => [
+                    'id' => $charge_request['charge_3ds_id'],
+                ],
+                "capture" => false,
+                "amount"=> 1,
+                "currency"=> $this->powerboard->client->currency()->code,
+                "store_cvv"=> true,
+            ];
+
+            nlog($payload);
+
+            $r = $this->powerboard->gatewayRequest("/v1/charges", (\App\Enum\HttpVerb::POST)->value, $payload, []);
+
+            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);
+
+            if ($charge->status == 'complete') {
+                $this->powerboard->logSuccessfulGatewayResponse(['response' => $charge, 'data' => $this->powerboard->payment_hash], SystemLog::TYPE_POWERBOARD);
+                
+                $vt = $charge->customer->payment_source->vault_token;
+
+                if($request->store_card){
+                    $data = [
+                        "payment_source" => [
+                            "vault_token" => $vt,
+                        ],
+                    ];
+                    
+                    $customer = $this->powerboard->customer()->findOrCreateCustomer($data);
+                    $cgt = $this->powerboard->customer()->storePaymentMethod($charge->customer->payment_source, $charge->customer);
+                }
+
+                return redirect()->route('client.payment_methods.index');
+            }
+
+
+        }
+
+        // $cgt = $this->powerboard->customer()->storePaymentMethod($request);
 
         return redirect()->route('client.payment_methods.index');
 
@@ -89,10 +178,6 @@ class CreditCard implements LivewireMethodInterface
 
         return $source;
 
-        // $cgt = $this->powerboard->customer()->storePaymentMethod(payment_source: $source, store_card: $request->store_card);
-
-        // return $cgt;
-
     }
 
 
@@ -165,7 +250,7 @@ class CreditCard implements LivewireMethodInterface
             "customer" => [
                 "payment_source" => [
                     "vault_token" => $source->vault_token,
-                    "gateway_id" => '66d65c5a68b7fa297a31c267',
+                    "gateway_id" => $source->gateway_id,
                 ],
             ],
             "_3ds" => [
diff --git a/app/PaymentDrivers/CBAPowerBoardPaymentDriver.php b/app/PaymentDrivers/CBAPowerBoardPaymentDriver.php
index 11840555f73d..ae301b650330 100644
--- a/app/PaymentDrivers/CBAPowerBoardPaymentDriver.php
+++ b/app/PaymentDrivers/CBAPowerBoardPaymentDriver.php
@@ -83,6 +83,30 @@ class CBAPowerBoardPaymentDriver extends BaseDriver
         return $this;
     }
 
+    /**
+     * Proxy method to pass the data into payment method authorizeView().
+     *
+     * @param array $data
+     * @return \Illuminate\Http\RedirectResponse|mixed
+     */
+    public function authorizeView(array $data)
+    {
+        $this->init();
+
+        return $this->payment_method->authorizeView($data);
+    }
+
+    /**
+     * Processes the gateway response for credit card authorization.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @return \Illuminate\Http\RedirectResponse|mixed
+     */
+    public function authorizeResponse($request)
+    {
+        return $this->payment_method->authorizeResponse($request);
+    }
+
     /**
      * View for displaying custom content of the driver.
      *
diff --git a/resources/views/portal/ninja2020/gateways/powerboard/credit_card/authorize.blade.php b/resources/views/portal/ninja2020/gateways/powerboard/credit_card/authorize.blade.php
new file mode 100644
index 000000000000..3d78eb6d9345
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/powerboard/credit_card/authorize.blade.php
@@ -0,0 +1,246 @@
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Credit card', 'card_title' => 'Credit card'])
+
+@section('gateway_head')
+    <meta name="instant-payment" content="yes" />
+@endsection
+
+@section('gateway_content')
+
+    <form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" method="post" id="server-response">
+        @csrf
+        <input type="hidden" name="gateway_response">
+        <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
+        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+        <input type="hidden" name="browser_details">
+        <input type="hidden" name="charge">
+        <button type="submit" class="hidden" id="stub">Submit</button>
+    </form>
+
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
+    <div id="powerboard-payment-container" class="w-full">
+        <div id="widget" style="block"></div>
+        <div id="widget-3dsecure"></div>
+    </div>  
+    @endcomponent
+    
+    @component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'authorize-card'])
+        {{ ctrans('texts.add_payment_method') }}
+    @endcomponent
+
+@endsection
+
+@section('gateway_footer')
+
+    <style>
+        iframe {
+            border: 0;
+            width: 100%;
+            height: 400px;
+        }
+    </style>
+
+    <script src="{{ $widget_endpoint }}"></script>
+    
+    <script>
+        var widget = new cba.HtmlWidget('#widget', '{{ $public_key }}', 'not_configured');
+        widget.setEnv("{{ $environment }}");
+        widget.useAutoResize();
+        // widget.interceptSubmitForm('#server-response');
+        widget.onFinishInsert('input[name="gateway_response"]', "payment_source");
+        widget.load();
+    
+        widget.trigger('tab', function (data){
+
+            console.log("tab Response", data);
+
+            console.log(widget.isValidForm());
+
+            let payNow = document.getElementById('pay-now');
+
+            payNow.disabled = widget.isInvalidForm();
+
+        });
+
+        widget.trigger('submit_form',function (data){
+
+            console.log("submit_form Response", data);
+
+            console.log(widget.isValidForm());
+
+            let payNow = document.getElementById('pay-now');
+
+            payNow.disabled = widget.isInvalidForm();
+
+        });
+
+        widget.trigger('tab',function (data){
+
+            console.log("tab Response", data);
+
+            console.log(widget.isValidForm());
+
+            let payNow = document.getElementById('pay-now');
+
+            payNow.disabled = widget.isInvalidForm();
+
+        });
+
+        widget.on("systemError", function(data) {
+            console.log("systemError Response", data);
+        });
+
+        widget.on("validationError", function(data) {
+            console.log("validationError", data);
+        });
+        
+        widget.on("finish", async function(data) {
+            document.getElementById('errors').hidden = true;
+
+            console.log("finish", data);
+        
+            try {
+                const resource = await get3dsToken();
+                console.log("3DS Token:", resource);
+
+                console.log("pre canvas");
+                console.log(resource._3ds.token);
+                
+                var canvas = new cba.Canvas3ds('#widget-3dsecure', resource._3ds.token);        
+                canvas.load();
+            
+                let widget = document.getElementById('widget');
+                widget.classList.add('hidden');
+
+
+            } catch (error) {
+                console.error("Error fetching 3DS Token:", error);
+            }
+
+            canvas.on("chargeAuthSuccess", function(data) {
+                console.log(data);
+
+                document.querySelector(
+                    'input[name="browser_details"]'
+                ).value = null;
+                
+                document.querySelector(
+                    'input[name="charge"]'
+                ).value = JSON.stringify(data);
+                
+                document.getElementById('server-response').submit();
+
+            });
+
+            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();
+
+        });
+
+        widget.on("submit", async function (data){
+            console.log("submit");
+            console.log(data);        
+            document.getElementById('errors').hidden = true;
+        })
+
+        widget.on('form_submit', function (data) {
+            console.log("form_submit", data);
+            console.log(data);
+        });
+
+        widget.on('submit', function (data) {
+            console.log("submit", data);
+            console.log(data);
+        });
+
+        widget.on('tab', function (data) {
+            console.log("tab", data);
+            console.log(data);
+        });
+
+        let payNow = document.getElementById('authorize-card');
+
+        payNow.addEventListener('click', () => {
+        
+            payNow.disabled = true;
+            payNow.querySelector('svg').classList.remove('hidden');
+            payNow.querySelector('span').classList.add('hidden');
+        
+            document.getElementById('server-response').submit();
+
+        });
+
+
+        async function get3dsToken() {
+
+            const browserDetails = {
+                name: navigator.userAgent.substring(0, 100), // The full user agent string, which contains the browser name and version
+                java_enabled: navigator.javaEnabled() ? "true" : "false", // Indicates if Java is enabled in the browser
+                language: navigator.language || navigator.userLanguage, // The browser language
+                screen_height: window.screen.height.toString(), // Screen height in pixels
+                screen_width: window.screen.width.toString(), // Screen width in pixels
+                time_zone: (new Date().getTimezoneOffset() * -1).toString(), // Timezone offset in minutes (negative for behind UTC)
+                color_depth: window.screen.colorDepth.toString() // Color depth in bits per pixel
+            };
+            
+            document.querySelector(
+                'input[name="browser_details"]'
+            ).value = JSON.stringify(browserDetails);
+
+            const formData = JSON.stringify(Object.fromEntries(new FormData(document.getElementById("server-response"))));
+
+            try {
+                // Return the fetch promise to handle it externally
+                const response = await fetch('{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        "X-Requested-With": "XMLHttpRequest",
+                        "Accept": 'application/json',
+                        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
+                    },
+                    body: formData
+                })
+
+                    if (!response.ok) {
+
+                        return await response.json().then(errorData => {      
+                            throw new Error(errorData.message ?? 'Unknown error.');
+                        });
+
+                    }
+
+                    return await response.json()
+
+            }
+            catch(error) {
+                
+                document.getElementById('errors').textContent = `Sorry, your card could not be authorized...\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();
+        }
+
+    </script> 
+
+@endsection
+
+
+