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 617a72fd442c..f4500f3fe41d 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" data-cy="pay-now">
+                                        <button class="px-2 py-1 mr-3 text-xs uppercase button button-primary bg-primary" dusk="pay-now">
                                             {{ ctrans('texts.pay_now') }}
                                         </button>
                                     </form>
diff --git a/resources/views/portal/ninja2020/components/livewire/pay-now-dropdown.blade.php b/resources/views/portal/ninja2020/components/livewire/pay-now-dropdown.blade.php
index d0c53470b6fb..259f7f11e75e 100644
--- a/resources/views/portal/ninja2020/components/livewire/pay-now-dropdown.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/pay-now-dropdown.blade.php
@@ -1,10 +1,10 @@
 <div>
     @unless(count($methods) == 0)
         <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">
+             class="relative inline-block text-left" dusk="payment-methods-dropdown">
             <div>
                 <div class="rounded-md shadow-sm">
-                    <button data-cy="pay-now-dropdown" @click="open = !open" type="button"
+                    <button dusk="pay-now-dropdown" @click="open = !open" type="button"
                             class="button button-primary bg-primary hover:bg-primary-darken inline-flex items-center">
                         {{ ctrans('texts.pay_now') }}
                         <svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20">
@@ -20,19 +20,19 @@
                     <div class="py-1">
                         @foreach($methods as $index => $method)
                             @if($method['label'] == 'Custom')
-                                <a href="#" @click="{ open = false }" data-cy="pay-with-custom"
+                                <a href="#" @click="{ open = false }" dusk="pay-with-custom"
                                    data-company-gateway-id="{{ $method['company_gateway_id'] }}"
                                    data-gateway-type-id="{{ $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">
+                                   dusk="payment-method">
                                     {{ \App\Models\CompanyGateway::find($method['company_gateway_id'])->firstOrFail()->getConfigField('name') }}
                                 </a>
                             @elseif($total > 0)
-                                <a href="#" @click="{ open = false }" data-cy="pay-with-{{ $index }}"
+                                <a href="#" @click="{ open = false }" dusk="pay-with-{{ $index }}"
                                    data-company-gateway-id="{{ $method['company_gateway_id'] }}"
                                    data-gateway-type-id="{{ $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">
+                                   dusk="payment-method">
                                     {{ $method['label'] }}
                                 </a>
                             @endif
diff --git a/tests/Browser/ClientPortal/Gateways/Stripe/CreditCardTest.php b/tests/Browser/ClientPortal/Gateways/Stripe/CreditCardTest.php
new file mode 100644
index 000000000000..4becee0fed79
--- /dev/null
+++ b/tests/Browser/ClientPortal/Gateways/Stripe/CreditCardTest.php
@@ -0,0 +1,64 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+namespace Tests\Browser\ClientPortal\Gateways\Stripe;
+
+use App\DataMapper\FeesAndLimits;
+use App\Models\CompanyGateway;
+use App\Models\GatewayType;
+use Laravel\Dusk\Browser;
+use Tests\Browser\Pages\ClientPortal\Login;
+use Tests\DuskTestCase;
+
+class CreditCardTest extends DuskTestCase
+{
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        foreach (static::$browsers as $browser) {
+            $browser->driver->manage()->deleteAllCookies();
+        }
+
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visit(new Login())
+                ->auth();
+        });
+
+        $cg = CompanyGateway::where('gateway_key', 'd14dd26a37cecc30fdd65700bfb55b23')->firstOrFail();
+        $fees_and_limits = $cg->fees_and_limits;
+        $fees_and_limits->{GatewayType::CREDIT_CARD} = new FeesAndLimits();
+        $cg->fees_and_limits = $fees_and_limits;
+        $cg->save();
+    }
+
+    public function testPaymentWithNewCard()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser
+                ->visitRoute('client.invoices.index')
+                ->click('@pay-now')
+                ->click('@pay-now-dropdown')
+                ->click('@pay-with-1')
+                ->type('#cardholder-name', 'John Doe')
+                ->withinFrame('iframe', function (Browser $browser) {
+                    $browser
+                        ->type('cardnumber', '4242 4242 4242 4242')
+                        ->type('exp-date', '04/22')
+                        ->type('cvc', '242');
+                })
+                ->click('#pay-now')
+                ->waitForText('Details of the payment');
+        });
+    }    
+}