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 9bf42c2b22a2..61b758aebe14 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,7 +1,44 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Credit card', 'card_title' => 'Credit card'])
 
+@section('gateway_head')
+    @include('portal.ninja2020.gateways.checkout.credit_card.includes.styles')
+
+    <script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
+@endsection
+
 @section('gateway_content')
-    @component('portal.ninja2020.components.general.card-element-single', ['title' => 'Credit card', 'show_title' => false])
-        {{ __('texts.checkout_authorize_label') }}
+    @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="#">
+                <div class="one-liner">
+                    <div class="card-frame">
+                        <!-- form will be added here -->
+                    </div>
+                    <!-- add submit button -->
+                    <button id="pay-button" disabled>
+                        {{ ctrans('texts.add_payment_method') }}
+                    </button>
+                </div>
+                <p class="success-payment-message"></p>
+            </form>
+        </div>
     @endcomponent
 @endsection
+
+@section('gateway_footer')
+    <script>
+       class CheckoutCreditCardAuthorization {
+           constructor() {}
+
+           handle() {
+               console.log('It works...');
+           }
+       }
+
+       new CheckoutCreditCardAuthorization().handle();
+    </script>
+@endsection
diff --git a/resources/views/portal/ninja2020/gateways/checkout/credit_card/includes/styles.blade.php b/resources/views/portal/ninja2020/gateways/checkout/credit_card/includes/styles.blade.php
new file mode 100644
index 000000000000..d3a529340b49
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/checkout/credit_card/includes/styles.blade.php
@@ -0,0 +1,101 @@
+<style>
+    *,
+    *::after,
+    *::before {
+        box-sizing: border-box
+    }
+
+    #payment-form {
+        width: 100%;
+    }
+
+    iframe {
+        width: 100%
+    }
+
+    .one-liner {
+        display: flex;
+        flex-direction: column
+    }
+
+    #pay-button {
+        border: none;
+        border-radius: 3px;
+        color: #FFF;
+        font-weight: 500;
+        height: 40px;
+        width: 100%;
+        background-color: #13395E;
+        box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
+    }
+
+    #pay-button:active {
+        background-color: #0B2A49;
+        box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
+    }
+
+    #pay-button:hover {
+        background-color: #15406B;
+        box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.4)
+    }
+
+    #pay-button:disabled {
+        background-color: #697887;
+        box-shadow: none
+    }
+
+    #pay-button:not(:disabled) {
+        cursor: pointer
+    }
+
+    .card-frame {
+        border: solid 1px #13395E;
+        border-radius: 3px;
+        width: 100%;
+        margin-bottom: 8px;
+        height: 40px;
+        box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2)
+    }
+
+    .card-frame.frame--rendered {
+        opacity: 1
+    }
+
+    .card-frame.frame--rendered.frame--focus {
+        border: solid 1px #13395E;
+        box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15)
+    }
+
+    .card-frame.frame--rendered.frame--invalid {
+        border: solid 1px #D96830;
+        box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15)
+    }
+
+    .success-payment-message {
+        color: #13395E;
+        line-height: 1.4
+    }
+
+    .token {
+        color: #b35e14;
+        font-size: 0.9rem;
+        font-family: monospace
+    }
+
+    @media screen and (min-width: 31rem) {
+        .one-liner {
+            flex-direction: row
+        }
+
+        .card-frame {
+            width: 318px;
+            margin-bottom: 0
+        }
+
+        #pay-button {
+            width: 175px;
+            margin-left: 8px
+        }
+    }
+
+</style>
diff --git a/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php
index 3a2a67fc400c..4ac991261daa 100644
--- a/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php
@@ -7,101 +7,7 @@
     <meta name="currency" content="{{ $currency }}">
     <meta name="reference" content="{{ $payment_hash }}">
 
-    <style>*, *::after, *::before {
-            box-sizing: border-box
-        }
-        #payment-form {
-            width: 100%;
-        }
-
-        iframe {
-            width: 100%
-        }
-
-        .one-liner {
-            display: flex;
-            flex-direction: column
-        }
-
-        #pay-button {
-            border: none;
-            border-radius: 3px;
-            color: #FFF;
-            font-weight: 500;
-            height: 40px;
-            width: 100%;
-            background-color: #13395E;
-            box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
-        }
-
-        #pay-button:active {
-            background-color: #0B2A49;
-            box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
-        }
-
-        #pay-button:hover {
-            background-color: #15406B;
-            box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.4)
-        }
-
-        #pay-button:disabled {
-            background-color: #697887;
-            box-shadow: none
-        }
-
-        #pay-button:not(:disabled) {
-            cursor: pointer
-        }
-
-        .card-frame {
-            border: solid 1px #13395E;
-            border-radius: 3px;
-            width: 100%;
-            margin-bottom: 8px;
-            height: 40px;
-            box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2)
-        }
-
-        .card-frame.frame--rendered {
-            opacity: 1
-        }
-
-        .card-frame.frame--rendered.frame--focus {
-            border: solid 1px #13395E;
-            box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15)
-        }
-
-        .card-frame.frame--rendered.frame--invalid {
-            border: solid 1px #D96830;
-            box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15)
-        }
-
-        .success-payment-message {
-            color: #13395E;
-            line-height: 1.4
-        }
-
-        .token {
-            color: #b35e14;
-            font-size: 0.9rem;
-            font-family: monospace
-        }
-
-        @media screen and (min-width: 31rem) {
-            .one-liner {
-                flex-direction: row
-            }
-
-            .card-frame {
-                width: 318px;
-                margin-bottom: 0
-            }
-
-            #pay-button {
-                width: 175px;
-                margin-left: 8px
-            }
-        }</style>
+    @include('portal.ninja2020.gateways.checkout.credit_card.includes.styles')
 
     <script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
 @endsection