diff --git a/app/Console/Commands/CreateSingleAccount.php b/app/Console/Commands/CreateSingleAccount.php
index fba9fcb378cf..8a6db251766e 100644
--- a/app/Console/Commands/CreateSingleAccount.php
+++ b/app/Console/Commands/CreateSingleAccount.php
@@ -101,7 +101,7 @@ class CreateSingleAccount extends Command
         $this->warmCache();
 
         $this->createSmallAccount();
-        
+
     }
 
     private function createSmallAccount()
@@ -176,8 +176,8 @@ class CreateSingleAccount extends Command
 
             $client = $company->clients->random();
 
-            $this->info('creating credit for client #'.$client->id);
-            $this->createCredit($client);
+            // $this->info('creating credit for client #'.$client->id);
+            // $this->createCredit($client); /** Prevents Stripe from running payments. */
 
             $client = $company->clients->random();
 
@@ -497,7 +497,7 @@ class CreateSingleAccount extends Command
     }
 
     private function createGateways($company, $user)
-    {        
+    {
 
         if (config('ninja.testvars.stripe') && ($this->gateway == 'all' || $this->gateway == 'stripe')) {
             $cg = new CompanyGateway;
diff --git a/cypress.json b/cypress.json
index 92e52adf8c0c..e959015b2688 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,5 +1,5 @@
 {
     "video": false,
-    "baseUrl": "http://ninja.test:8000/",
+    "baseUrl": "http://localhost:8000/",
     "chromeWebSecurity": false
 }
diff --git a/cypress/excluded/checkout_credit_card.spec.js b/cypress/excluded/checkout_credit_card.spec.js
new file mode 100644
index 000000000000..d0a6ab0325c4
--- /dev/null
+++ b/cypress/excluded/checkout_credit_card.spec.js
@@ -0,0 +1,48 @@
+import { second } from '../fixtures/example.json';
+
+describe('Checkout Credit Card Payments', () => {
+    beforeEach(() => {
+        // cy.useGateway(second);
+        cy.clientLogin();
+    });
+
+    it('should be able to complete payment using checkout credit card', () => {
+        cy.visit('/client/invoices');
+
+        cy.get('#unpaid-checkbox').click();
+
+        cy.get('[data-cy=pay-now')
+            .first()
+            .click();
+
+        cy.location('pathname').should('eq', '/client/invoices/payment');
+
+        cy.get('[data-cy=payment-methods-dropdown').click();
+
+        cy.get('[data-cy=payment-method')
+            .first()
+            .click();
+
+        cy.wait(8000);
+
+        cy.get('.cko-pay-now.show')
+            .first()
+            .click();
+
+        cy.wait(3000);
+
+        cy.getWithinIframe('[data-checkout="card-number"]').type(
+            '4242424242424242'
+        );
+        cy.getWithinIframe('[data-checkout="expiry-month"]').type('12');
+        cy.getWithinIframe('[data-checkout="expiry-year"]').type('30');
+        cy.getWithinIframe('[data-checkout="cvv"]').type('100');
+
+        cy.getWithinIframe('.form-submit')
+            .first()
+            .click();
+
+        cy.wait(5000);
+        cy.url().should('contain', '/client/payments');
+    });
+});
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
index da18d9352a17..f0300d2d471c 100644
--- a/cypress/fixtures/example.json
+++ b/cypress/fixtures/example.json
@@ -1,5 +1,10 @@
 {
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
\ No newline at end of file
+    "name": "Using fixtures to represent data",
+    "email": "hello@cypress.io",
+    "body": "Fixtures are a great way to mock data for responses to routes",
+
+    "first": "VolejRejNm",
+    "second": "Wpmbk5ezJn",
+
+    "url": "http://localhost:8000"
+}
diff --git a/cypress/integration/client_portal/credits.spec.js b/cypress/integration/client_portal/credits.spec.js
index 184a0e25ca66..41e94ca8eabc 100644
--- a/cypress/integration/client_portal/credits.spec.js
+++ b/cypress/integration/client_portal/credits.spec.js
@@ -19,7 +19,7 @@ describe('Credits', () => {
             .should('contain.text', 'Credits');
     });
 
-    it('should have required table elements', () => {
+   /* it('should have required table elements', () => {
         cy.visit('/client/credits');
 
         cy.get('body')
@@ -33,5 +33,5 @@ describe('Credits', () => {
             .should(location => {
                 expect(location.pathname).to.eq('/client/credits/VolejRejNm');
             });
-    });
+    });*/
 });
diff --git a/cypress/integration/client_portal/payment_methods.spec.js b/cypress/integration/client_portal/payment_methods.spec.js
index 76e998233070..4c87e5547d04 100644
--- a/cypress/integration/client_portal/payment_methods.spec.js
+++ b/cypress/integration/client_portal/payment_methods.spec.js
@@ -19,35 +19,6 @@ context('Payment methods', () => {
             .should('contain.text', 'Payment Method');
     });
 
-    it('should add stripe credit card', () => {
-        cy.visit('/client/payment_methods');
-
-        cy.get('body')
-            .find('#add-payment-method')
-            .first()
-            .should('contain.text', 'Add Payment Method')
-            .click()
-
-        cy.location().should(location => {
-            expect(location.pathname).to.eq('/client/payment_methods/create');
-        });
-
-        cy.wait(3000);
-
-        cy.get('#cardholder-name').type('Invoice Ninja');
-
-        cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242');
-        cy.getWithinIframe('[name="exp-date"]').type('2442');
-        cy.getWithinIframe('[name="cvc"]').type('242');
-        cy.getWithinIframe('[name="postal"]').type('12345');
-
-        cy.get('#card-button').click();
-
-        cy.location().should(location => {
-            expect(location.pathname).to.eq('/client/payment_methods');
-        });
-    });
-
     it('should have per page options dropdown', () => {
         cy.visit('/client/payment_methods');
 
diff --git a/cypress/integration/client_portal/payments.spec.js b/cypress/integration/client_portal/payments.spec.js
index b00aea77593d..e569acc86507 100644
--- a/cypress/integration/client_portal/payments.spec.js
+++ b/cypress/integration/client_portal/payments.spec.js
@@ -27,20 +27,4 @@ context('Payments', () => {
             .first()
             .should('have.value', '10');
     });
-
-    it('should have required table elements', () => {
-        cy.visit('/client/payments');
-
-        cy.get('body')
-            .find('table.payments-table > tbody > tr')
-            .first()
-            .find('a')
-            .first()
-            .should('contain.text', 'View')
-            .click()
-            .location()
-            .should(location => {
-                expect(location.pathname).to.eq('/client/payments/VolejRejNm');
-            });
-    });
-})
\ No newline at end of file
+});
diff --git a/cypress/integration/client_portal/recurring_invoices.spec.js b/cypress/integration/client_portal/recurring_invoices.spec.js
index 91e24f14d5cb..5041301d4a06 100644
--- a/cypress/integration/client_portal/recurring_invoices.spec.js
+++ b/cypress/integration/client_portal/recurring_invoices.spec.js
@@ -3,8 +3,6 @@ context('Recurring invoices', () => {
         cy.clientLogin();
     });
 
-    // test url
-
     it('should show recurring invoices page', () => {
         cy.visit('/client/recurring_invoices');
 
@@ -29,20 +27,4 @@ context('Recurring invoices', () => {
             .first()
             .should('have.value', '10');
     });
-
-    it('should have required table elements', () => {
-        cy.visit('/client/recurring_invoices');
-
-        cy.get('body')
-            .find('table.recurring-invoices-table > tbody > tr')
-            .first()
-            .find('a')
-            .first()
-            .should('contain.text', 'View')
-            .click()
-            .location()
-            .should(location => {
-                expect(location.pathname).to.eq('/client/recurring_invoices/VolejRejNm');
-            });
-    });
 });
diff --git a/cypress/integration/client_portal/stripe_credit_card.spec.js b/cypress/integration/client_portal/stripe_credit_card.spec.js
new file mode 100644
index 000000000000..f9d40b0f2e11
--- /dev/null
+++ b/cypress/integration/client_portal/stripe_credit_card.spec.js
@@ -0,0 +1,47 @@
+describe('Stripe Credit Card Payments', () => {
+    beforeEach(() => {
+        cy.clientLogin();
+    });
+
+    it('should be able to add credit card using Stripe', () => {
+        cy.visit('/client/payment_methods');
+
+        cy.get('[data-cy=add-payment-method]').click();
+        cy.get('[data-cy=add-credit-card-link]').click();
+
+        cy.get('#cardholder-name').type('Invoice Ninja');
+
+        cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242');
+        cy.getWithinIframe('[name="exp-date"]').type('1230');
+        cy.getWithinIframe('[name="cvc"]').type('100');
+        cy.getWithinIframe('[name="postal"]').type('12345');
+
+        cy.get('#card-button').click();
+
+        cy.get('#errors').should('be.empty');
+
+        cy.location('pathname').should('eq', '/client/payment_methods');
+    });
+
+    it('should be able to complete payment with added credit card', () => {
+        cy.visit('/client/invoices');
+
+        cy.get('#unpaid-checkbox').click();
+
+        cy.get('[data-cy=pay-now')
+            .first()
+            .click();
+
+        cy.location('pathname').should('eq', '/client/invoices/payment');
+
+        cy.get('[data-cy=payment-methods-dropdown').click();
+
+        cy.get('[data-cy=payment-method')
+            .first()
+            .click();
+
+        cy.get('#pay-now-with-token').click();
+
+        cy.url().should('contain', '/client/payments');
+    });
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 67b07104f176..93673ec6ca38 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -23,15 +23,17 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+const axios = require('axios');
+const fixture = require('../fixtures/example.json');
 
 Cypress.Commands.add('clientLogin', () => {
     cy.visit('/client/login');
     cy.get('#test_email')
         .invoke('val')
-        .then(emailValue => {
+        .then((emailValue) => {
             cy.get('#test_password')
                 .invoke('val')
-                .then(passwordValue => {
+                .then((passwordValue) => {
                     cy.get('#email')
                         .type(emailValue)
                         .should('have.value', emailValue);
@@ -45,32 +47,62 @@ Cypress.Commands.add('clientLogin', () => {
         });
 });
 
-Cypress.Commands.add(
-    'iframeLoaded',
-    {prevSubject: 'element'},
-    ($iframe) => {
-        const contentWindow = $iframe.prop('contentWindow');
-        return new Promise(resolve => {
-            if (
-                contentWindow
-            ) {
-                resolve(contentWindow)
-            } else {
-                $iframe.on('load', () => {
-                    resolve(contentWindow)
-                })
-            }
-        })
+Cypress.Commands.add('iframeLoaded', { prevSubject: 'element' }, ($iframe) => {
+    const contentWindow = $iframe.prop('contentWindow');
+    return new Promise((resolve) => {
+        if (contentWindow) {
+            resolve(contentWindow);
+        } else {
+            $iframe.on('load', () => {
+                resolve(contentWindow);
+            });
+        }
     });
-
+});
 
 Cypress.Commands.add(
     'getInDocument',
-    {prevSubject: 'Permission denied to access property "document" on cross-origin object'},
+    {
+        prevSubject:
+            'Permission denied to access property "document" on cross-origin object',
+    },
     (document, selector) => Cypress.$(selector, document)
 );
 
-Cypress.Commands.add(
-    'getWithinIframe',
-    (targetElement) => cy.get('iframe').iframeLoaded().its('document').getInDocument(targetElement)
+Cypress.Commands.add('getWithinIframe', (targetElement) =>
+    cy
+        .get('iframe')
+        .iframeLoaded()
+        .its('document')
+        .getInDocument(targetElement)
 );
+
+Cypress.Commands.add('useGateway', (gateway) => {
+    let body = {
+        settings: {
+            entity: 'App\\Models\\Client',
+            industry_id: '',
+            size_id: '',
+            currency_id: '1',
+            company_gateway_ids: gateway,
+        },
+    };
+
+    let options = {
+        headers: {
+            'X-Api-Secret': 'superdoopersecrethere',
+            'X-Api-Token':
+                'S0x8behDk8HG8PI0i8RXdpf2AVud5b993pE8vata7xmm4RgW6u3NeGC8ibWIUjZv',
+            'X-Requested-With': 'XMLHttpRequest',
+        },
+    };
+
+    axios
+        .put(
+            `http://localhost:8000/api/v1/clients/${fixture.first}`,
+            body,
+            options
+        )
+        .then((response) => console.log(response))
+        .catch((error) => console.log(error.message));
+});
diff --git a/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php b/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
index 8abdc3d15b7b..201acda85477 100644
--- a/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
@@ -99,7 +99,7 @@
                                         @csrf
                                         <input type="hidden" name="invoices[]" value="{{ $invoice->hashed_id }}">
                                         <input type="hidden" name="action" value="payment">
-                                        <button class="px-2 py-1 mr-3 text-xs uppercase button button-primary bg-primary">
+                                        <button class="px-2 py-1 mr-3 text-xs uppercase button button-primary bg-primary" data-cy="pay-now">
                                             @lang('texts.pay_now')
                                         </button>
                                     </form>
diff --git a/resources/views/portal/ninja2020/components/livewire/payment-methods-table.blade.php b/resources/views/portal/ninja2020/components/livewire/payment-methods-table.blade.php
index 32809625b4c7..e0f7704ec53f 100644
--- a/resources/views/portal/ninja2020/components/livewire/payment-methods-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/payment-methods-table.blade.php
@@ -12,16 +12,16 @@
         <div class="relative" x-data="{ open: false }" x-on:click.away="open = false">
             <!-- Add payment method button -->
             @if($client->getCreditCardGateway() || $client->getBankTransferGateway())
-                <button x-on:click="open = !open" class="button button-primary bg-primary">{{ ctrans('texts.add_payment_method') }}</button>
+                <button x-on:click="open = !open" class="button button-primary bg-primary" data-cy="add-payment-method">{{ ctrans('texts.add_payment_method') }}</button>
                 <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
                     <div class="py-1 rounded-md bg-white shadow-xs">
                         @if($client->getCreditCardGateway())
-                            <a href="{{ route('client.payment_methods.create', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150">
+                            <a data-cy="add-credit-card-link" href="{{ route('client.payment_methods.create', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150">
                                 {{ ctrans('texts.credit_card') }}
                             </a>
                         @endif
                         @if($client->getBankTransferGateway())
-                            <a href="{{ route('client.payment_methods.create', ['method' => $client->getBankTransferMethodType()]) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150">
+                            <a data-cy="add-bank-account-link" href="{{ route('client.payment_methods.create', ['method' => $client->getBankTransferMethodType()]) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150">
                                 {{ ctrans('texts.bank_account') }}
                             </a>
                         @endif
@@ -91,7 +91,7 @@
                                 </svg>
                             @endif
                         </td>
-                        <td class="px-6 py-4 whitespace-no-wrap flex items-center justify-end text-sm leading-5 font-medium">
+                        <td class="px-6 py-4 whitespace-no-wrap flex items-center justify-end text-sm leading-5 font-medium" data-cy="view-payment-method">
                             <a href="{{ route('client.payment_methods.show', $payment_method->hashed_id) }}"
                                class="text-blue-600 hover:text-indigo-900 focus:outline-none focus:underline">
                                 @lang('texts.view')
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
index 6248f80a52eb..52e7dcf9529d 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
@@ -91,7 +91,7 @@
                                             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                         </svg>
-                                        <span>{{ __('texts.save') }}</span>
+                                        <span>{{ __('texts.pay_now') }}</span>
                                     </button>
                                 </div>
                             @else
diff --git a/resources/views/portal/ninja2020/invoices/payment.blade.php b/resources/views/portal/ninja2020/invoices/payment.blade.php
index a72d67c72e0f..3295cbd72bbc 100644
--- a/resources/views/portal/ninja2020/invoices/payment.blade.php
+++ b/resources/views/portal/ninja2020/invoices/payment.blade.php
@@ -21,7 +21,7 @@
                     <div class="flex justify-end mb-2">
                         <!-- Pay now button -->
                         @if(count($payment_methods) > 0)
-                        <div x-data="{ open: false }" @keydown.window.escape="open = false" @click.away="open = false" class="relative inline-block text-left">
+                        <div x-data="{ open: false }" @keydown.window.escape="open = false" @click.away="open = false" class="relative inline-block text-left" data-cy="payment-methods-dropdown">
                             <div>
                                 <div class="rounded-md shadow-sm">
                                     <button @click="open = !open" type="button" class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800">
@@ -36,7 +36,7 @@
                                 <div class="bg-white rounded-md shadow-xs">
                                     <div class="py-1">
                                         @foreach($payment_methods as $payment_method)
-                                        <a href="#" @click="{ open = false }" data-company-gateway-id="{{ $payment_method['company_gateway_id'] }}" data-gateway-type-id="{{ $payment_method['gateway_type_id'] }}" class="block px-4 py-2 text-sm leading-5 text-gray-700 dropdown-gateway-button hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900">
+                                        <a href="#" @click="{ open = false }" data-company-gateway-id="{{ $payment_method['company_gateway_id'] }}" data-gateway-type-id="{{ $payment_method['gateway_type_id'] }}" class="block px-4 py-2 text-sm leading-5 text-gray-700 dropdown-gateway-button hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" data-cy="payment-method">
                                             {{ $payment_method['label'] }}
                                         </a>
                                         @endforeach
diff --git a/resources/views/portal/ninja2020/payment_methods/includes/modals/removal.blade.php b/resources/views/portal/ninja2020/payment_methods/includes/modals/removal.blade.php
index dca664c78404..4fe4ba90996b 100644
--- a/resources/views/portal/ninja2020/payment_methods/includes/modals/removal.blade.php
+++ b/resources/views/portal/ninja2020/payment_methods/includes/modals/removal.blade.php
@@ -36,7 +36,7 @@
                 <form action="{{ route('client.payment_methods.destroy', [$payment_method->hashed_id, 'method' => $payment_method->gateway_type->id]) }}" method="post">
                     @csrf
                     @method('DELETE')
-                    <button type="submit" class="button button-danger button-block">
+                    <button type="submit" class="button button-danger button-block" data-cy="confirm-payment-removal">
                         {{ ctrans('texts.remove') }}
                     </button>
                 </form>
diff --git a/resources/views/portal/ninja2020/payment_methods/show.blade.php b/resources/views/portal/ninja2020/payment_methods/show.blade.php
index 5d7f624d3a4a..bfd4e3fa7436 100644
--- a/resources/views/portal/ninja2020/payment_methods/show.blade.php
+++ b/resources/views/portal/ninja2020/payment_methods/show.blade.php
@@ -98,7 +98,7 @@
                     </div>
                     <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
                         <div class="inline-flex rounded-md shadow-sm" x-data="{ open: false }">
-                            <button class="button button-danger" translate @click="open = true">
+                            <button class="button button-danger" @click="open = true" id="open-delete-popup">
                                 {{ ctrans('texts.remove_payment_method') }}
                             </button>
                             @include('portal.ninja2020.payment_methods.includes.modals.removal')