diff --git a/app/Http/Controllers/WePayController.php b/app/Http/Controllers/WePayController.php
index d2e5363e446d..7813e94ccf70 100644
--- a/app/Http/Controllers/WePayController.php
+++ b/app/Http/Controllers/WePayController.php
@@ -13,6 +13,7 @@
 namespace App\Http\Controllers;
 
 use App\Libraries\MultiDB;
+use App\Models\Company;
 use App\Models\CompanyGateway;
 use App\Models\User;
 use App\PaymentDrivers\WePayPaymentDriver;
diff --git a/app/Http/Livewire/WepaySignup.php b/app/Http/Livewire/WepaySignup.php
index 0a471672bd20..93623e54f10c 100644
--- a/app/Http/Livewire/WepaySignup.php
+++ b/app/Http/Livewire/WepaySignup.php
@@ -124,7 +124,7 @@ class WepaySignup extends Component
             'original_ip' => request()->ip(),
             'original_device' => request()->server('HTTP_USER_AGENT'),
             'tos_acceptance_time' => time(),
-            'redirect_uri' => route('wepay.process_signup'),
+            'redirect_uri' => route('wepay.finished'),
             'scope' => 'manage_accounts,collect_payments,view_user,preapprove_payments,send_money',
         ];
 
diff --git a/app/PaymentDrivers/WePay/CreditCard.php b/app/PaymentDrivers/WePay/CreditCard.php
index 0c7151909752..10f9a020826a 100644
--- a/app/PaymentDrivers/WePay/CreditCard.php
+++ b/app/PaymentDrivers/WePay/CreditCard.php
@@ -25,6 +25,8 @@ class CreditCard
 
     public function authorizeView($data)
     {
+        $data['gateway'] = $this->wepay;
+        
         return render('gateways.wepay.authorize.authorize', $data);
     }
  
diff --git a/resources/views/portal/ninja2020/gateways/wepay/authorize/authorize.blade.php b/resources/views/portal/ninja2020/gateways/wepay/authorize/authorize.blade.php
index 43a5650f72cb..489e09618cb2 100644
--- a/resources/views/portal/ninja2020/gateways/wepay/authorize/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/wepay/authorize/authorize.blade.php
@@ -1,6 +1,9 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.credit_card')])
 
 @section('gateway_head')
+    <meta name="year-invalid" content="{{ ctrans('texts.year_invalid') }}">
+    <meta name="month-invalid" content="{{ ctrans('texts.month_invalid') }}">
+    <meta name="credit-card-invalid" content="{{ ctrans('texts.credit_card_invalid') }}">
 
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
@@ -18,41 +21,22 @@
         <input type="hidden" name="gateway_response" id="gateway_response">
         <input type="hidden" name="is_default" id="is_default">
     </form>
-<table>
-    <tr>
-        <td>Name: </td>
-        <td><input id="name" type="text"></td>
-    </tr>
-    <tr>
-        <td>Email: </td>
-        <td><input id="email" type="text"></td>
-    </tr>
-    <tr>
-        <td>Credit Card Number: </td>
-        <td><input id="cc-number" type="text"></td>
-    </tr>
-    <tr>
-        <td>Expiration Month: </td>
-        <td><input id="cc-month" type="text"></td>
-    </tr>
-    <tr>
-        <td>Expiration Year: </td>
-        <td><input id="cc-year" type="text"></td>
-    </tr>
-    <tr>
-        <td>CVV: </td>
-        <td><input id="cc-cvv" type="text"></td>
-    </tr>
-    <tr>
-        <td>Postal Code: </td>
-        <td><input id="postal_code" type="text"></td>
-    </tr>
-    <tr>
-        <td></td>
-        <td><input type="submit" name="Submit" value="Submit" id="cc-submit"></td>
-    </tr>
-</table>
 
+    @if(!Request::isSecure())
+        <p class="alert alert-failure">{{ ctrans('texts.https_required') }}</p>
+    @endif
+
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
+        {{ ctrans('texts.credit_card') }}
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.wepay.includes.credit_card')
+
+    @component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'card_button'])
+        {{ ctrans('texts.add_payment_method') }}
+    @endcomponent
 @endsection
 
 @section('gateway_footer')
@@ -76,16 +60,16 @@
     };
 
     // Attach the event to the DOM
-    addEvent(d.id('cc-submit'), 'click', function() {
-        var userName = [valueById('name')].join(' ');
+    addEvent(d.id('card_button'), 'click', function() {
+        var userName = [valueById('cardholder_name')].join(' ');
             response = WePay.credit_card.create({
-            "client_id":        118711,
-            "user_name":        valueById('name'),
+            "client_id":        valueById('client_id'),
+            "user_name":        valueById('cardholder_name'),
             "email":            valueById('email'),
-            "cc_number":        valueById('cc-number'),
-            "cvv":              valueById('cc-cvv'),
-            "expiration_month": valueById('cc-month'),
-            "expiration_year":  valueById('cc-year'),
+            "cc_number":        valueById('card-number'),
+            "cvv":              valueById('cvv'),
+            "expiration_month": valueById('expiration_month'),
+            "expiration_year":  valueById('expiration_year'),
             "address": {
                 "postal_code": valueById('postal_code')
             }
diff --git a/resources/views/portal/ninja2020/gateways/wepay/includes/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/wepay/includes/credit_card.blade.php
new file mode 100644
index 000000000000..49da5ff160fd
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/wepay/includes/credit_card.blade.php
@@ -0,0 +1,12 @@
+<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+     style="display: flex!important; justify-content: center!important;" id="authorize--credit-card-container">
+    <div class="card-js" id="my-card" data-capture-name="true">
+        <input class="name" id="cardholder_name" name="card-holders-name" placeholder="{{ ctrans('texts.name')}}">
+        <input class="card-number my-custom-class" id="card_number" name="card-number">
+        <input class="expiry-month" name="expiry-month" id="expiration_month">
+        <input class="expiry-year" name="expiry-year" id="expiration_year">
+        <input class="cvc" name="cvc" id="cvv">
+    </div>
+
+    <div id="errors"></div>
+</div>