diff --git a/resources/views/portal/ninja2020/gateways/checkout/credit_card/authorize.blade.php b/resources/views/portal/ninja2020/gateways/checkout/credit_card/authorize.blade.php
index 61b758aebe14..327ab1fbaedd 100644
--- a/resources/views/portal/ninja2020/gateways/checkout/credit_card/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/checkout/credit_card/authorize.blade.php
@@ -1,19 +1,29 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Credit card', 'card_title' => 'Credit card'])
 
 @section('gateway_head')
+    <meta name="public-key" content="{{ $gateway->getPublishableKey() }}">
+
     @include('portal.ninja2020.gateways.checkout.credit_card.includes.styles')
 
     <script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
 @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="payment_method_id" value="{{ \App\Models\GatewayType::CREDIT_CARD }}">
+        <input type="hidden" name="gateway_response" id="gateway_response">
+    </form>
+
     @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
         {{ ctrans('texts.credit_card') }}
     @endcomponent
 
     @component('portal.ninja2020.components.general.card-element-single')
         <div id="checkout--container">
-            <form class="xl:flex xl:justify-center" id="payment-form" method="POST" action="#">
+            <form class="xl:flex xl:justify-center" id="authorization-form" method="POST" action="#">
                 <div class="one-liner">
                     <div class="card-frame">
                         <!-- form will be added here -->
@@ -31,14 +41,43 @@
 
 @section('gateway_footer')
     <script>
-       class CheckoutCreditCardAuthorization {
-           constructor() {}
+        class CheckoutCreditCardAuthorization {
+            constructor() {
+                this.button = document.querySelector('#pay-button');
+            }
 
-           handle() {
-               console.log('It works...');
-           }
-       }
+            init() {
+                this.frames = Frames.init(
+                    document.querySelector('meta[name=public-key]').content
+                );
+            }
 
-       new CheckoutCreditCardAuthorization().handle();
+            handle() {
+                this.init();
+
+                Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED, (event) => {
+                    this.button.disabled = !Frames.isCardValid();
+                });
+
+                Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, (event) => {
+                    document.querySelector(
+                        'input[name="gateway_response"]'
+                    ).value = JSON.stringify(event);
+
+                    document.getElementById('server_response').submit();
+                });
+
+                document
+                    .querySelector('#authorization-form')
+                    .addEventListener('submit', (event) => {
+                        this.button.disabled = true;
+
+                        event.preventDefault();
+                        Frames.submitCard();
+                    });
+            }
+        }
+
+        new CheckoutCreditCardAuthorization().handle();
     </script>
 @endsection