diff --git a/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/CA/details.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/CA/details.blade.php
new file mode 100644
index 000000000000..9492f3036fc1
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/CA/details.blade.php
@@ -0,0 +1,4 @@
+<dd> Gateway: </dd>
+<dt>{{ $brand }}</dt>
+<dd> Account Number: </dd>
+<dt>{{ $account_number }}</dt>
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/authorize.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/authorize.blade.php
new file mode 100755
index 000000000000..70a0cfb7ba59
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/authorize.blade.php
@@ -0,0 +1,35 @@
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => $gateway->company_gateway->label, 'card_title' =>\App\Models\GatewayType::getAlias($gateway_type_id )])
+
+@section('gateway_content')
+    @if(session()->has('ach_error'))
+        <div class="alert alert-failure mb-4">
+            <p>{{ session('ach_error') }}</p>
+        </div>
+    @endif
+
+    <form action="{{ route('client.payment_methods.store', ['method' => $gateway_type_id ]) }}"
+          method="post" id="server_response">
+        @csrf
+        <input type="hidden" name="company_gateway_id" value="{{ $gateway->company_gateway->id }}">
+        <input type="hidden" name="gateway_type_id" value="{{ $gateway_type_id }}">
+        <input type="hidden" name="gateway_response" id="gateway_response">
+        <input type="hidden" name="is_default" id="is_default">
+
+        <x-rotessa::contact-component :contact="$contact"></x-rotessa::contact-component>
+
+        <x-rotessa::address-component :address="$address"></x-rotessa::address-component>
+
+        <x-rotessa::account-component :account="$account"></x-rotessa::account-component>
+
+        @component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'authorize-bank-account', 'type' => 'submit'])
+            {{ ctrans('texts.add_payment_method') }}
+        @endcomponent
+    </form>
+
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+   
+@endsection
+
+@section('gateway_footer')
+
+@endsection
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/pay.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/pay.blade.php
new file mode 100644
index 000000000000..4e6e0c2a0b22
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/pay.blade.php
@@ -0,0 +1,91 @@
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Direct Debit', 'card_title' => 'Direct Debit'])
+
+@section('gateway_content')
+    @if (count($tokens) > 0)
+        <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+        @include('portal.ninja2020.gateways.includes.payment_details')
+
+        <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
+            @csrf
+            <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
+            <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
+            <input type="hidden" name="source" value="">
+            <input type="hidden" name="amount" value="{{ $amount }}">
+            <input type="hidden" name="currency" value="{{ $currency }}">
+            <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
+            <input type="hidden" name="token_id" value="">
+            <input type="hidden" name="frequency" value="Once">
+            <input type="hidden" name="installments" value="1">
+            <input type="hidden" name="comment" value="Payment for invoice # {{ $invoice_nums }}">
+
+        @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
+            @if (count($tokens) > 0)
+                @foreach ($tokens as $token)
+                    <label class="mr-4">
+                        <input type="radio" data-token="{{ $token->token }}" data-token_id="{{ $token->id }}" name="payment-type"
+                            class="form-radio cursor-pointer toggle-payment-with-token" />
+                        <span class="ml-1 cursor-pointer">
+                            {{ App\Models\GatewayType::getAlias($token->gateway_type_id) }} ({{ $token->meta->brand }})
+                             &nbsp; Acc#: {{ $token->meta->account_number }}
+                        </span>
+                    </label><br/>
+                @endforeach
+            @endisset
+            <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+                Process Date
+            </dt>
+            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                <input autocomplete="new-password" readonly type="date" min="{{ $due_date }}" name="process_date" id="process_date" required class="input w-full" placeholder="" value="{{ old('process_date', $process_date ) }}">
+            </dd>
+            {{--
+            <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+                Insallments
+            </dt>
+            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                <input class="input w-full" id="installments" name="installments" type="number" placeholder="Installments" required value="{{ old('installments',$installments) }}">
+            </dd>
+            
+            <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+                Frequency
+            </dt>
+            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                <input class="input w-full" id="frequency" name="frequency" type="text" placeholder="Once/Weekly/Monthly/Annually" required >
+            </dd>
+            
+            <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+                Comments
+            </dt>
+            <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+                <textarea autocomplete="new-password" id="comment" name="comment" type="text" class="w-full py-2 px-3 rounded text-sm disabled:opacity-75 disabled:cursor-not-allowed undefined border border-gray-300" placeholder="" rows="5" style="background-color: rgb(255, 255, 255); border-color: rgb(209, 213, 219); color: rgb(42, 48, 61);"> </textarea>
+            </dd> --}}
+        @endcomponent
+        </form>
+    @else
+        @component('portal.ninja2020.components.general.card-element-single', ['title' => 'Direct Debit', 'show_title' => false])
+            <span>{{ ctrans('texts.bank_account_not_linked') }}</span>
+
+            <a class="button button-link text-primary"
+                href="{{ route('client.payment_methods.index') }}">{{ ctrans('texts.add_payment_method') }}</a>
+        @endcomponent
+    @endif
+
+    @if (count($tokens) > 0)
+        @include('portal.ninja2020.gateways.includes.pay_now')
+    @endif
+@endsection
+
+@push('footer')
+    <script>
+        Array
+            .from(document.getElementsByClassName('toggle-payment-with-token'))
+            .forEach((element) => element.addEventListener('click', (element) => {
+                document.querySelector('input[name=source]').value = element.target.dataset.token;
+                document.querySelector('input[name=token_id]').value = element.target.dataset.token_id;
+            }));
+
+        document.getElementById('pay-now').addEventListener('click', function() {
+            document.getElementById('server-response').submit();
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/components/account.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/components/account.blade.php
new file mode 100644
index 000000000000..c42672255b00
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/components/account.blade.php
@@ -0,0 +1,31 @@
+<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
+                <h3 class="text-lg font-medium leading-6 text-gray-900">
+                   Account Information
+                </h3>
+
+                <p class="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
+                    Enter the information for the bank account 
+                </p>
+            </div>
+            <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Bank Name
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="bank_name" name="bank_name" type="text" placeholder="Bank Name" required value="{{ old('bank_name', $bank_name) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Account Number
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="account_number" name="account_number" type="text" placeholder="Account Number" required value="{{ old('account_number', $account_number) }}">
+        </dd>
+    </div>
+
+
+    <input type="hidden" name="authorization_type" id="authorization_type" value="{{ old('authorization_type',$authorization_type) }}" >
+
+@include("rotessa::components.banks.$country.bank", compact('bank_account_type','routing_number','institution_number','transit_number'))
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/components/address.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/components/address.blade.php
new file mode 100644
index 000000000000..2db721cd4e28
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/components/address.blade.php
@@ -0,0 +1,62 @@
+
+<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+               Address Information
+            </h3>
+
+            <p class="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
+                Enter the address information for the account holder
+            </p>
+        </div>
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Address Line 1
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="address_1" name="address_1" type="text" placeholder="Address Line 1" required value="{{ old('address_1', $address_1) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Address Line 2
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="address_2" name="address_2" type="text" placeholder="Address Line 2" required value="{{ old('address_2', $address_2) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            City
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="city" name="city" type="text" placeholder="City" required value="{{ old('city', $city) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Postal Code
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="postal_code" name="postal_code" type="text" placeholder="Postal Code" required value="{{ old('postal_code', $postal_code ) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Country
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            @if('US' == $country)
+                <input type="radio" id="us" name="country" value="US" required @checked(old('country', $country) == 'US')>
+                <label for="us">United States</label><br>
+            @else
+                <input type="radio" id="ca" name="country" value="CA" required @checked(old('country', $country) == 'CA')>
+                <label for="ca">Canada</label><br>
+            @endif
+        </dd>
+    </div>
+
+    @include("rotessa::components.dropdowns.country.$country",compact('province_code'))
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/components/banks/CA/bank.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/components/banks/CA/bank.blade.php
new file mode 100644
index 000000000000..3c37b84741c6
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/components/banks/CA/bank.blade.php
@@ -0,0 +1,17 @@
+<div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Transit Number
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="transit_number" max="5" name="transit_number" type="text" placeholder="Transit Number" required value="{{ old('transit_number',$transit_number) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Institution Number
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="institution_number" max="3" name="institution_number" type="text" placeholder="Institution Number" required value="{{ old('institution_number',$institution_number) }}">
+        </dd>
+    </div>
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/components/banks/US/bank.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/components/banks/US/bank.blade.php
new file mode 100644
index 000000000000..891fbe421a9a
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/components/banks/US/bank.blade.php
@@ -0,0 +1,28 @@
+
+   
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Routing Number
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="routing_number" name="routing_number" type="text" placeholder="Routing Number" required value="{{ old('routing_number',$routing_number) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Account Type
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+        <div class="sm:grid-cols-2 sm:flex">
+            <div class="flex items-center px-2">
+                <input id="bank_account_type_savings" name="bank_account_type" value="Savings" required @checked(old('bank_account_type', $bank_account_type)) type="radio" class="focus:ring-gray-500 h-4 w-4 border-gray-300 disabled:opacity-75 disabled:cursor-not-allowed">
+                <label for="bank_account_type_savings" class="ml-3 block text-sm font-medium cursor-pointer">Savings</label>
+            </div>
+            <div class="flex items-center px-2">
+                <input id="bank_account_type_checking" name="bank_account_type" value="Checking"  required @checked(old('bank_account_type', $bank_account_type))  type="radio" class="focus:ring-gray-500 h-4 w-4 border-gray-300 disabled:opacity-75 disabled:cursor-not-allowed">
+                <label for="bank_account_type_checking" class="ml-3 block text-sm font-medium cursor-pointer">Checking</label>
+            </div>
+        </div>
+        </dd>
+    </div>
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/components/contact.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/components/contact.blade.php
new file mode 100644
index 000000000000..827fc587f5ad
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/components/contact.blade.php
@@ -0,0 +1,69 @@
+
+<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">
+                Account Holder Information
+            </h3>
+
+            <p class="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
+                Enter the information for the account holder
+            </p>
+        </div>
+
+<div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Full Name
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="name" name="name" type="text" placeholder="Full Name" required value="{{ old('name',$name) }}">
+        </dd>
+    </div>
+
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Email Address
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" name="email" id="email" type="email" placeholder="Email Address" required value="{{ old('email',$email) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Home Phone
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="home_phone" name="home_phone" type="text" placeholder="Home Phone" required value="{{ old('phone',$phone) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Other Phone
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <input class="input w-full" id="phone" name="phone" type="text" placeholder="Phone" required value="{{ old('phone',$phone) }}">
+        </dd>
+    </div>
+
+    <div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Customer Type
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+        <div class="sm:grid-cols-2 sm:flex">
+            <div class="flex items-center px-2">
+                <input id="customer_type_personal" name="customer_type" value="Personal" required @checked(old('customer_type', $customer_type) == 'Personal') type="radio" class="focus:ring-gray-500 h-4 w-4 border-gray-300 disabled:opacity-75 disabled:cursor-not-allowed">
+                <label for="customer_type_personal" class="ml-3 block text-sm font-medium cursor-pointer">Personal</label>
+            </div>
+            <div class="flex items-center px-2">
+                <input id="customer_type_business" name="customer_type" value="Business" required @checked(old('customer_type', $customer_type) == 'Business') type="radio" class="focus:ring-gray-500 h-4 w-4 border-gray-300 disabled:opacity-75 disabled:cursor-not-allowed">
+                <label for="customer_type_business" class="ml-3 block text-sm font-medium cursor-pointer">Business</label>
+            </div>
+        </div>
+        </dd>
+    </div>
+
+
+    <input name="id" type="hidden" value="{{ old('id',  $id ) }}">
+        <input name="custom_identifier" type="hidden" value="{{ old('custom_identifer', $contact['custom_identifier']) }}">
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/components/dropdowns/country/CA.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/components/dropdowns/country/CA.blade.php
new file mode 100644
index 000000000000..f2d7a38a5ecb
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/components/dropdowns/country/CA.blade.php
@@ -0,0 +1,12 @@
+<div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            Province Code
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <select class="input w-full" id="province_code" name="province_code" required>
+                @foreach($provinces as $code => $province)
+                    <option value="{{ $code }}" @selected(old('province_code', $province_code) == $code ) >{{ $province }}</option>
+                @endforeach
+            </select>
+        </dd>
+    </div>
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/rotessa/components/dropdowns/country/US.blade.php b/resources/views/portal/ninja2020/gateways/rotessa/components/dropdowns/country/US.blade.php
new file mode 100644
index 000000000000..7c33af78d31a
--- /dev/null
+++ b/resources/views/portal/ninja2020/gateways/rotessa/components/dropdowns/country/US.blade.php
@@ -0,0 +1,12 @@
+<div class="px-4 py-2 sm:px-6 lg:grid lg:grid-cols-3 lg:gap-4 lg:flex lg:items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            State
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <select class="input w-full" id="province_code" required name="province_code">
+                @foreach($states as $code => $state)
+                    <option value="{{ $code }}"  @selected(old('province_code', $province_code) == $code ) >{{ $state }}</option>
+                @endforeach
+            </select>
+        </dd>
+    </div>
\ No newline at end of file