New payment flow: Refactor base driver (#70)

* pass livewirePaymentView & processPaymentView thru base driver

* add paymentData to the interface

app/PaymentDrivers/CheckoutComPaymentDriver.php

@@ -46,7 +46,7 @@ use App\Http\Requests\ClientPortal\Payments\PaymentResponseRequest;
 use Checkout\Payments\Previous\PaymentRequest as PreviousPaymentRequest;
 use Checkout\Payments\Previous\Source\RequestIdSource as SourceRequestIdSource;
 
-class CheckoutComPaymentDriver extends BaseDriver implements LivewireMethodInterface
+class CheckoutComPaymentDriver extends BaseDriver
 {
     use SystemLogTrait;
     use Utilities;
@@ -190,17 +190,6 @@ class CheckoutComPaymentDriver extends BaseDriver implements LivewireMethodInter
         return $this->payment_method->paymentView($data);
     }
 
-    /**
-     * Process payment view for the Livewire payments.
-     * 
-     * @param array $data
-     * @return array
-     */
-    public function processPaymentViewData(array $data): array
-    {
-        return $this->payment_method->paymentData($data);
-    }
-
     /**
      * Process the payment response
      *
@@ -631,9 +620,4 @@ class CheckoutComPaymentDriver extends BaseDriver implements LivewireMethodInter
 
              });
     }
-
-    public function livewirePaymentView(array $data): string
-    {
-        return $this->payment_method->livewirePaymentView($data);
-    }
 }

app/PaymentDrivers/Forte/ACH.php

@@ -19,11 +19,12 @@ use App\Models\Payment;
 use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\FortePaymentDriver;
 use App\Utils\Traits\MakesHash;
 use Illuminate\Support\Facades\Validator;
 
-class ACH
+class ACH implements LivewireMethodInterface
 {
     use MakesHash;
 
@@ -79,10 +80,8 @@ class ACH
 
     public function paymentView(array $data)
     {
-        $this->forte->payment_hash->data = array_merge((array) $this->forte->payment_hash->data, $data);
-        $this->forte->payment_hash->save();
+        $data = $this->paymentData($data);
 
-        $data['gateway'] = $this->forte;
         return render('gateways.forte.ach.pay', $data);
     }
 
@@ -175,4 +174,25 @@ class ACH
         return redirect()->route('client.payments.show', ['payment' => $payment->hashed_id]);
 
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.forte.ach.pay_livewire';
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->forte->payment_hash->data = array_merge((array) $this->forte->payment_hash->data, $data);
+        $this->forte->payment_hash->save();
+
+        $data['gateway'] = $this->forte;
+
+        return $data;
+    }
 }

app/PaymentDrivers/Forte/CreditCard.php

@@ -20,11 +20,12 @@ use App\Models\Payment;
 use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
+use App\PaymentDrivers\Common\LivewireMethodInterface;
 use App\PaymentDrivers\FortePaymentDriver;
 use App\Utils\Traits\MakesHash;
 use Illuminate\Support\Facades\Validator;
 
-class CreditCard
+class CreditCard implements LivewireMethodInterface
 {
     use MakesHash;
 
@@ -157,10 +158,8 @@ class CreditCard
 
     public function paymentView(array $data)
     {
-        $this->forte->payment_hash->data = array_merge((array) $this->forte->payment_hash->data, $data);
-        $this->forte->payment_hash->save();
+        $data = $this->paymentData($data);
         
-        $data['gateway'] = $this->forte;
         return render('gateways.forte.credit_card.pay', $data);
     }
 
@@ -287,4 +286,25 @@ class CreditCard
         return redirect()->route('client.payments.show', ['payment' => $payment->hashed_id]);
 
     }
+
+    /**
+     * @inheritDoc
+     */
+    public function livewirePaymentView(array $data): string 
+    {
+        return 'gateways.forte.credit_card.pay_livewire';        
+    }
+    
+    /**
+     * @inheritDoc
+     */
+    public function paymentData(array $data): array 
+    {
+        $this->forte->payment_hash->data = array_merge((array) $this->forte->payment_hash->data, $data);
+        $this->forte->payment_hash->save();
+
+        $data['gateway'] = $this->forte;
+
+        return $data;
+    }
 }

resources/js/clients/payments/forte-ach-payment.js

@@ -8,6 +8,8 @@
  * @license https://opensource.org/licenses/AAL
  */
 
+import { wait, instant } from '../wait'; 
+
 class ForteAuthorizeACH {
     constructor(apiLoginId) {
         this.apiLoginId = apiLoginId;
@@ -73,9 +75,13 @@ class ForteAuthorizeACH {
     };
 }
 
+function boot() {
     const apiLoginId = document.querySelector(
         'meta[name="forte-api-login-id"]'
     ).content;
     
     /** @handle */
     new ForteAuthorizeACH(apiLoginId).handle();
+}
+
+instant() ? boot() : wait('#force-ach-payment').then(() => boot());

resources/js/clients/payments/forte-credit-card-payment.js

@@ -8,21 +8,34 @@
  * @license https://opensource.org/licenses/AAL
  */
 
+import { wait, instant } from '../wait';
+import { SimpleCard } from '@invoiceninja/simple-card';
+
 class ForteAuthorizeCard {
     constructor(apiLoginId) {
         this.apiLoginId = apiLoginId;
         this.cardHolderName = document.getElementById('cardholder_name');
+
+        this.sc = new SimpleCard({
+            fields: {
+                card: {
+                    number: '#number',
+                    date: '#date',
+                    cvv: '#cvv',
+                },
+            },
+        });
+
+        this.sc.mount();
     }
 
     handleAuthorization = () => {
-        var myCard = $('#my-card');
-
-        var data = {
+        const data = {
             api_login_id: this.apiLoginId,
-            card_number: myCard.CardJs('cardNumber').replace(/[^\d]/g, ''),
-            expire_year: myCard.CardJs('expiryYear').replace(/[^\d]/g, ''),
-            expire_month: myCard.CardJs('expiryMonth').replace(/[^\d]/g, ''),
-            cvv: document.getElementById('cvv').value.replace(/[^\d]/g, ''),
+            card_number: this.sc.value('number')?.replace(/[^\d]/g, ''),
+            expire_year: `20${this.sc.value('year')?.replace(/[^\d]/g, '')}`,
+            expire_month: this.sc.value('month')?.replace(/[^\d]/g, ''),
+            cvv: this.sc.value('cvv')?.replace(/[^\d]/g, ''),
         };
 
         let payNowButton = document.getElementById('pay-now');
@@ -162,9 +175,13 @@ class ForteAuthorizeCard {
 
 }
 
+function boot() {
     const apiLoginId = document.querySelector(
         'meta[name="forte-api-login-id"]'
     ).content;
 
     /** @handle */
     new ForteAuthorizeCard(apiLoginId).handle();
+}
+
+instant() ? boot() : wait('#forte-credit-card-payment').then(() => boot());

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

@@ -2,6 +2,7 @@
 
 @section('gateway_head')
     <meta name="forte-api-login-id" content="{{$gateway->company_gateway->getConfigField("apiLoginId")}}">
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')

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

@@ -2,6 +2,8 @@
 
 @section('gateway_head')
     <meta name="forte-api-login-id" content="{{$gateway->company_gateway->getConfigField("apiLoginId")}}">
+    <meta name="instant-payment" content="yes" />
+
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="{{ asset('js/clients/payments/forte-card-js.min.js') }}"></script>
 

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

@@ -1,11 +1,13 @@
 <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="forte--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">
-        <input type="hidden" name="expiry_month" id="expiration_month">
-        <input type="hidden" name="expiry_year" id="expiration_year">
-        <input class="cvc" name="cvc" id="cvv">
+        <input class="input w-full" id="cardholder_name" name="card_holders_name"
+            placeholder="{{ ctrans('texts.name')}}">
+        <input type="text" class="input w-full" id="number" placeholder="0000 0000 0000 0000">
+        <div class="flex items-center gap-2">
+        <input type="text" class="input w-1/2" id="date" placeholder="MM/YY">
+        <input type="text" class="input w-1/2" id="cvv" placeholder="000">
+        </div>
     </div>
 
     <div id="errors"></div>