diff --git a/app/PaymentDrivers/CheckoutComPaymentDriver.php b/app/PaymentDrivers/CheckoutComPaymentDriver.php
index 4d854817df27..2179cbc0ece8 100644
--- a/app/PaymentDrivers/CheckoutComPaymentDriver.php
+++ b/app/PaymentDrivers/CheckoutComPaymentDriver.php
@@ -163,7 +163,7 @@ class CheckoutComPaymentDriver extends BaseDriver
         $state = array_merge($state, $request->all());
         $state['store_card'] = boolval($state['store_card']);
 
-        if ($request->has('token') && ! is_null($request->token)) {
+        if ($request->has('token') && !is_null($request->token)) {
             $method = new IdSource($state['token']);
             $payment = new CheckoutPayment($method, $state['currency']);
             $payment->amount = $state['value'];
@@ -355,6 +355,9 @@ class CheckoutComPaymentDriver extends BaseDriver
 
     public function saveCard($state)
     {
+        // TODO: @wip Fix card tokenization.
+        return;
+
         //some cards just can't be tokenized....
         if(!$state['payment_response']->source['id'])
             return;
diff --git a/resources/lang/en/texts.php b/resources/lang/en/texts.php
index c5ee6460babd..5e9ddc8dea0f 100644
--- a/resources/lang/en/texts.php
+++ b/resources/lang/en/texts.php
@@ -3286,4 +3286,5 @@ return [
     'credit_subject' => 'New credit :number from :account',
     'credit_message' => 'To view your credit for :amount, click the link below.',
 
+    'store_for_future_use' => 'Store for future use',
 ];
diff --git a/resources/views/portal/ninja2020/components/general/card-element.blade.php b/resources/views/portal/ninja2020/components/general/card-element.blade.php
new file mode 100644
index 000000000000..d41c1cc8b471
--- /dev/null
+++ b/resources/views/portal/ninja2020/components/general/card-element.blade.php
@@ -0,0 +1,8 @@
+<div class="px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+    <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+        {{ $title }}
+    </dt>
+    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+        {{ $slot }}
+    </dd>
+</div>
diff --git a/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php
index 71f54319f938..4bc8648506c7 100644
--- a/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php
@@ -1,17 +1,14 @@
-@extends('portal.ninja2020.layout.app')
-@section('meta_title', ctrans('texts.checkout_com'))
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Checkout.com'])
 
-@push('head')
+@section('payment-head')
     <meta name="public-key" content="{{ $gateway->getPublishableKey() }}">
     <meta name="customer-email" content="{{ $customer_email }}">
     <meta name="value" content="{{ $value }}">
     <meta name="currency" content="{{ $currency }}">
     <meta name="reference" content="{{ $payment_hash }}">
+@endsection
 
-    <script src="{{ asset('js/clients/payments/checkout.com.js') }}"></script>
-@endpush
-
-@section('body')
+@section('payment-content')
     <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
         @csrf
         <input type="hidden" name="gateway_response">
@@ -23,106 +20,30 @@
         <input type="hidden" name="value" value="{{ $value }}">
         <input type="hidden" name="raw_value" value="{{ $raw_value }}">
         <input type="hidden" name="currency" value="{{ $currency }}">
+        
         @isset($token)
             <input type="hidden" name="token" value="{{ $token->meta->id }}">
         @endisset
     </form>
 
-    <div class="container mx-auto">
-        <div class="grid grid-cols-6 gap-4">
-            <div class="col-span-6 md:col-start-2 md:col-span-4">
-                <div class="alert alert-failure mb-4" hidden id="errors"></div>
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-                    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
-                        <h3 class="text-lg leading-6 font-medium text-gray-900">
-                            {{ ctrans('texts.pay_now') }}
-                        </h3>
-                        <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
-                            {{ ctrans('texts.complete_your_payment') }}
-                        </p>
-                    </div>
-                    <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
-                        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
-                            {{ ctrans('texts.payment_type') }}
-                        </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            {{ ctrans('texts.checkout_com') }} ({{ ctrans('texts.credit_card') }})
-                        </dd>
-                    </div>
-                    <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
-                        <dt class="text-sm leading-5 font-medium text-gray-500">
-                            {{ ctrans('texts.subtotal') }}
-                        </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            {{ App\Utils\Number::formatMoney($total['invoice_totals'], $client) }}
-                        </dd>
-                        <dt class="text-sm leading-5 font-medium text-gray-500">
-                            {{ ctrans('texts.gateway_fees') }}
-                        </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            {{ App\Utils\Number::formatMoney($total['fee_total'], $client) }}
-                        </dd>
-                        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
-                            {{ ctrans('texts.amount') }}
-                        </dt>
-                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                            <span class="font-bold">{{ App\Utils\Number::formatMoney($total['amount_with_fee'], $client) }}</span>
-                        </dd>
-                    </div>
-                    @isset($token)
-                        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                            <dt class="text-sm leading-5 font-medium text-gray-500">
-                                {{ ctrans('texts.card_number') }}
-                            </dt>
-                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                **** {{ ucfirst($token->meta->last4) }}
-                            </dd>
-                        </div>
-                        <div class="bg-white px-4 py-5 flex justify-end">
-                            <button class="button button-primary bg-primary" onclick="document.getElementById('server-response').submit()">
-                                {{ ctrans('texts.pay_now') }}
-                            </button>
-                        </div>
-                    @else
-                        <div class="{{ ($gateway->company_gateway->token_billing == 'optin' || $gateway->company_gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
-                            <dt class="text-sm leading-5 font-medium text-gray-500">
-                                {{ ctrans('texts.token_billing_checkbox') }}
-                            </dt>
-                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                <label class="mr-4">
-                                    <input 
-                                        type="radio"
-                                        class="form-radio cursor-pointer" 
-                                        name="token-billing-checkbox" 
-                                        id="proxy_is_default"
-                                        value="true"
-                                        {{ ($gateway->company_gateway->token_billing == 'always' || $gateway->company_gateway->token_billing == 'optout') ? 'checked' : '' }} />
-                                    <span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
-                                </label>
-                                <label>
-                                    <input 
-                                        type="radio" 
-                                        class="form-radio cursor-pointer" 
-                                        name="token-billing-checkbox" 
-                                        id="proxy_is_default" 
-                                        value="false"
-                                        {{ ($gateway->company_gateway->token_billing == 'off' || $gateway->company_gateway->token_billing == 'optin') ? 'checked' : '' }} />
-                                    <span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
-                                </label>
-                            </dd>
-                        </div>
-                        <div class="bg-white px-4 py-5 flex justify-end">
-                            <form class="payment-form" method="POST" action="https://merchant.com/successUrl">
-                                @if(app()->environment() == 'production')
-                                    <script async src="https://cdn.checkout.com/js/checkout.js"></script>
-                                @else
-                                    <script async src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
-                                @endif
-                            </form>
-                        </div>
-                    @endisset
-                </div>
-            </div>
-        </div>
-    </div>
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
+        {{ ctrans('texts.credit_card') }} (Checkout.com)
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.includes.payment_details')
+    @include('portal.ninja2020.gateways.includes.store_for_future')
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ''])
+        <form class="payment-form" method="POST" action="#">
+            @if(app()->environment() == 'production')
+                <script async src="https://cdn.checkout.com/js/checkout.js"></script>
+            @else
+                <script async src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
+            @endif
+        </form>
+    @endcomponent
+@endsection
+
+@section('payment-footer')
+    <script src="{{ asset('js/clients/payments/checkout.com.js') }}"></script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php.old b/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php.old
new file mode 100644
index 000000000000..71f54319f938
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php.old
@@ -0,0 +1,128 @@
+@extends('portal.ninja2020.layout.app')
+@section('meta_title', ctrans('texts.checkout_com'))
+
+@push('head')
+    <meta name="public-key" content="{{ $gateway->getPublishableKey() }}">
+    <meta name="customer-email" content="{{ $customer_email }}">
+    <meta name="value" content="{{ $value }}">
+    <meta name="currency" content="{{ $currency }}">
+    <meta name="reference" content="{{ $payment_hash }}">
+
+    <script src="{{ asset('js/clients/payments/checkout.com.js') }}"></script>
+@endpush
+
+@section('body')
+    <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
+        @csrf
+        <input type="hidden" name="gateway_response">
+        <input type="hidden" name="store_card">
+        <input type="hidden" name="reference" value="{{ $payment_hash }}">
+        <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
+        <input type="hidden" name="company_gateway_id" value="{{ $company_gateway->id }}">
+        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+        <input type="hidden" name="value" value="{{ $value }}">
+        <input type="hidden" name="raw_value" value="{{ $raw_value }}">
+        <input type="hidden" name="currency" value="{{ $currency }}">
+        @isset($token)
+            <input type="hidden" name="token" value="{{ $token->meta->id }}">
+        @endisset
+    </form>
+
+    <div class="container mx-auto">
+        <div class="grid grid-cols-6 gap-4">
+            <div class="col-span-6 md:col-start-2 md:col-span-4">
+                <div class="alert alert-failure mb-4" hidden id="errors"></div>
+                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+                    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
+                        <h3 class="text-lg leading-6 font-medium text-gray-900">
+                            {{ ctrans('texts.pay_now') }}
+                        </h3>
+                        <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+                            {{ ctrans('texts.complete_your_payment') }}
+                        </p>
+                    </div>
+                    <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+                        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+                            {{ ctrans('texts.payment_type') }}
+                        </dt>
+                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            {{ ctrans('texts.checkout_com') }} ({{ ctrans('texts.credit_card') }})
+                        </dd>
+                    </div>
+                    <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+                        <dt class="text-sm leading-5 font-medium text-gray-500">
+                            {{ ctrans('texts.subtotal') }}
+                        </dt>
+                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            {{ App\Utils\Number::formatMoney($total['invoice_totals'], $client) }}
+                        </dd>
+                        <dt class="text-sm leading-5 font-medium text-gray-500">
+                            {{ ctrans('texts.gateway_fees') }}
+                        </dt>
+                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            {{ App\Utils\Number::formatMoney($total['fee_total'], $client) }}
+                        </dd>
+                        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+                            {{ ctrans('texts.amount') }}
+                        </dt>
+                        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                            <span class="font-bold">{{ App\Utils\Number::formatMoney($total['amount_with_fee'], $client) }}</span>
+                        </dd>
+                    </div>
+                    @isset($token)
+                        <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt class="text-sm leading-5 font-medium text-gray-500">
+                                {{ ctrans('texts.card_number') }}
+                            </dt>
+                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                                **** {{ ucfirst($token->meta->last4) }}
+                            </dd>
+                        </div>
+                        <div class="bg-white px-4 py-5 flex justify-end">
+                            <button class="button button-primary bg-primary" onclick="document.getElementById('server-response').submit()">
+                                {{ ctrans('texts.pay_now') }}
+                            </button>
+                        </div>
+                    @else
+                        <div class="{{ ($gateway->company_gateway->token_billing == 'optin' || $gateway->company_gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt class="text-sm leading-5 font-medium text-gray-500">
+                                {{ ctrans('texts.token_billing_checkbox') }}
+                            </dt>
+                            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                                <label class="mr-4">
+                                    <input 
+                                        type="radio"
+                                        class="form-radio cursor-pointer" 
+                                        name="token-billing-checkbox" 
+                                        id="proxy_is_default"
+                                        value="true"
+                                        {{ ($gateway->company_gateway->token_billing == 'always' || $gateway->company_gateway->token_billing == 'optout') ? 'checked' : '' }} />
+                                    <span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
+                                </label>
+                                <label>
+                                    <input 
+                                        type="radio" 
+                                        class="form-radio cursor-pointer" 
+                                        name="token-billing-checkbox" 
+                                        id="proxy_is_default" 
+                                        value="false"
+                                        {{ ($gateway->company_gateway->token_billing == 'off' || $gateway->company_gateway->token_billing == 'optin') ? 'checked' : '' }} />
+                                    <span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
+                                </label>
+                            </dd>
+                        </div>
+                        <div class="bg-white px-4 py-5 flex justify-end">
+                            <form class="payment-form" method="POST" action="https://merchant.com/successUrl">
+                                @if(app()->environment() == 'production')
+                                    <script async src="https://cdn.checkout.com/js/checkout.js"></script>
+                                @else
+                                    <script async src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
+                                @endif
+                            </form>
+                        </div>
+                    @endisset
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file