payment details added on payment page.

resources/views/portal/ninja2020/gateways/forte/ach/authorize.blade.php

@@ -102,7 +102,6 @@
 @section('gateway_footer')
     <script>
         function onTokenCreated(params) {
-            console.log(params);
             document.getElementById('one_time_token').value=params.onetime_token;
             document.getElementById('last_4').value=params.last_4;
             let button = document.querySelector("#form_btn");

resources/views/portal/ninja2020/gateways/forte/ach/pay.blade.php

@@ -1,13 +1,11 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Bank Transfer', 'card_title' => 'Bank Transfer'])
 
 @section('gateway_head')
-    {{-- <meta name="authorize-public-key" content="{{ $public_client_id }}">
+    @if($gateway->forte->company_gateway->getConfigField('testMode'))
-    <meta name="authorize-login-id" content="{{ $api_login_id }}"> --}}
+    <script type="text/javascript" src="https://sandbox.forte.net/api/js/v1"></script>
-
+    @else
-    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script type="text/javascript" src="https://api.forte.net/js/v1"></script>
-    <script src="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
+    @endif
-
-    <link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
 @endsection
 
 @section('gateway_content')
@@ -22,7 +20,7 @@
         <input type="hidden" name="token" id="token"/>
         <input type="hidden" name="store_card" id="store_card"/>
 
-        <div id="errors"></div>
+        <div id="forte_errors"></div>
 
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
             Bank Transfer
@@ -31,29 +29,19 @@
         @include('portal.ninja2020.gateways.includes.payment_details')
 
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
-            @if(count($tokens) > 0)
+            <input type="hidden" name="payment_token" id="payment_token">
-                @foreach($tokens as $token)
+            @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.routing_number')])
-                    <label class="mr-4">
+                <input class="input w-full" id="routing-number" type="text" required>
-                        <input
+            @endcomponent
-                            type="radio"
-                            data-token="{{ $token->hashed_id }}"
-                            name="payment_token"
-                            id="payment_token"
-                            value="{{ $token->token }}"
-                            class="form-radio cursor-pointer toggle-payment-with-token"/>
-                        <span class="ml-1 cursor-pointer">**** {{ optional($token->meta)->last4 }}</span>
-                    </label>
-                @endforeach
-            @else
-                <div class="relative" x-data="{ open: false }" x-on:click.away="open = false">
-                    @if($client->getBankTransferGateway())
-                        <a data-cy="add-bank-account-link" href="{{ route('client.payment_methods.create', ['method' => $client->getBankTransferMethodType()]) }}" class="button button-primary bg-primary">
-                            {{ ctrans('texts.bank_account') }}
-                        </a>
-                    @endif
-                </div>
-            @endif
     
+            @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.account_number')])
+                <input class="input w-full" id="account-number" type="text" required>
+            @endcomponent
+    
+            @component('portal.ninja2020.components.general.card-element-single')
+                <input type="checkbox" class="form-checkbox mr-1" name="accept_terms" id="accept-terms" required>
+                <label for="accept-terms" class="cursor-pointer">{{ ctrans('texts.ach_authorization', ['company' => auth()->user()->company->present()->name, 'email' => auth('contact')->user()->client->company->settings->email]) }}</label>
+            @endcomponent
         @endcomponent
         <div class="bg-white px-4 py-5 flex justify-end">
             <button type="button"
@@ -64,22 +52,39 @@
                         <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>{{ $slot ?? ctrans('texts.pay_now') }}</span>
-                <input type="submit" style="display: none" id="form_btn">
             </button>
         </div>
+        <input type="submit" style="display: none" id="form_btn">
     </form>
 
 @endsection
 
 @section('gateway_footer')
     <script>
-        function submitPay(){
+        function onTokenCreated(params) {
-            if ($("input:radio[name='payment_token']").is(":checked") == true) {
+            document.getElementById('payment_token').value=params.onetime_token;
             let button = document.querySelector("#form_btn");
             button.click();
-            }else{
-                document.getElementById('errors').innerHTML='<div class="alert alert-failure mb-4">Please select payemnt method</div>'
         }
+        function onTokenFailed(params) {
+            var errors = '<div class="alert alert-failure mb-4"><ul><li>'+ params.response_description +'</li></ul></div>';
+            document.getElementById("forte_errors").innerHTML = errors;
+        }
+        function submitPay(){
+            var account_number=document.getElementById('account-number').value;
+            var routing_number=document.getElementById('routing-number').value;
+
+            var data = {
+               api_login_id: '{{$gateway->forte->company_gateway->getConfigField("apiLoginId")}}',
+               account_number: account_number,
+               routing_number: routing_number, 
+               account_type: "checking",
+            }
+
+            forte.createToken(data)
+               .success(onTokenCreated)
+               .error(onTokenFailed);
+            return false;
         }
     </script>
 @endsection

resources/views/portal/ninja2020/gateways/forte/credit_card/authorize.blade.php

@@ -21,7 +21,6 @@
           method="post" id="server_response">
         @csrf
 
-        {{-- <input type="hidden" name="company_gateway_id" value="{{ $gateway->company_gateway->id }}"> --}}
         <input type="hidden" name="payment_method_id" value="1">
         <input type="hidden" name="one_time_token" id="one_time_token">
         <input type="hidden" name="card_type" id="card_type">
@@ -73,7 +72,6 @@
 @section('gateway_footer')
     <script>
         function onTokenCreated(params) {
-            console.log(params);
             document.getElementById('one_time_token').value=params.onetime_token;
             document.getElementById('last_4').value=params.last_4;
             let button = document.querySelector("#form_btn");

resources/views/portal/ninja2020/gateways/forte/credit_card/pay.blade.php

@@ -1,13 +1,16 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.payment_type_credit_card'), 'card_title' => ctrans('texts.payment_type_credit_card')])
 
 @section('gateway_head')
-    {{-- <meta name="authorize-public-key" content="{{ $public_client_id }}">
-    <meta name="authorize-login-id" content="{{ $api_login_id }}"> --}}
-
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
-    <script src="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
+    <script src="{{ asset('js/clients/payments/forte-card-js.min.js') }}"></script>
 
     <link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
+
+    @if($gateway->forte->company_gateway->getConfigField('testMode'))
+        <script type="text/javascript" src="https://sandbox.forte.net/api/js/v1"></script>
+    @else
+        <script type="text/javascript" src="https://api.forte.net/js/v1"></script>
+    @endif
 @endsection
 
 @section('gateway_content')
@@ -22,7 +25,7 @@
         <input type="hidden" name="token" id="token"/>
         <input type="hidden" name="store_card" id="store_card"/>
 
-        <div id="errors"></div>
+        <div id="forte_errors"></div>
 
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
             {{ ctrans('texts.credit_card') }}
@@ -31,30 +34,9 @@
         @include('portal.ninja2020.gateways.includes.payment_details')
 
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
-            @if(count($tokens) > 0)
+            <input type="hidden" name="card_brand" id="card_brand">
-                @foreach($tokens as $token)
+            <input type="hidden" name="payment_token" id="payment_token">
-                    <label class="mr-4">
+            @include('portal.ninja2020.gateways.forte.includes.credit_card')
-                        <input type="hidden" name="card_brand" value="{{optional($token->meta)->brand}}">
-                        <input
-                            type="radio"
-                            data-token="{{ $token->hashed_id }}"
-                            name="payment_token"
-                            id="payment_token"
-                            value="{{ $token->token }}"
-                            class="form-radio cursor-pointer toggle-payment-with-token"/>
-                        <span class="ml-1 cursor-pointer">**** {{ optional($token->meta)->last4 }}</span>
-                    </label>
-                @endforeach
-            @else
-                <div class="relative" x-data="{ open: false }" x-on:click.away="open = false">
-                    <!-- Add payment method button -->
-                    @if($client->getCreditCardGateway())
-                        <a data-cy="add-credit-card-link" href="{{ route('client.payment_methods.create', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" class="button button-primary bg-primary">
-                            {{ ctrans('texts.credit_card') }}
-                        </a>
-                    @endif
-                </div>
-            @endif
 
         @endcomponent
         <div class="bg-white px-4 py-5 flex justify-end">
@@ -66,22 +48,43 @@
                         <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>{{ $slot ?? ctrans('texts.pay_now') }}</span>
-                <input type="submit" style="display: none" id="form_btn">
             </button>
         </div>
+        <input type="submit" style="display: none" id="form_btn">
     </form>
 
 @endsection
 
 @section('gateway_footer')
     <script>
-        function submitPay(){
+        function onTokenCreated(params) {
-            if ($("input:radio[name='payment_token']").is(":checked") == true) {
+            document.getElementById('payment_token').value=params.onetime_token;
+            document.getElementById('card_brand').value=params.card_type;
             let button = document.querySelector("#form_btn");
             button.click();
-            }else{
-                document.getElementById('errors').innerHTML='<div class="alert alert-failure mb-4">Please select payemnt method</div>'
         }
+        function onTokenFailed(params) {
+            var errors = '<div class="alert alert-failure mb-4"><ul><li>'+ params.response_description +'</li></ul></div>';
+            document.getElementById("forte_errors").innerHTML = errors;
+        }
+        function submitPay(){
+            var month=document.querySelector('input[name=expiry-month]').value;
+            var year=document.querySelector('input[name=expiry-year]').value;
+            var cc=document.getElementById('card_number').value.replaceAll(' ','');
+            var cvv=document.getElementById('cvv').value;
+
+            var data = {
+               api_login_id: '{{$gateway->forte->company_gateway->getConfigField("apiLoginId")}}',
+               card_number: cc,
+               expire_year: year, 
+               expire_month: month,
+               cvv: cvv,
+            }
+
+            forte.createToken(data)
+               .success(onTokenCreated)
+               .error(onTokenFailed);
+            return false;
         }
     </script>
 @endsection