Redirect to authorization when token is not available (#100)

* gocardless: sepa

* gocardless: direct debit

* braintree ach (wip)

* braintree: ach

* rotessa: ach

app/PaymentDrivers/Braintree/ACH.php

@@ -12,11 +12,14 @@
 namespace App\PaymentDrivers\Braintree;
 
 use App\Exceptions\PaymentFailed;
+use App\Http\Controllers\ClientPortal\InvoiceController;
+use App\Http\Requests\ClientPortal\Invoices\ProcessInvoicesInBulkRequest;
 use App\Http\Requests\ClientPortal\Payments\PaymentResponseRequest;
 use App\Jobs\Util\SystemLogger;
 use App\Models\ClientGatewayToken;
 use App\Models\GatewayType;
 use App\Models\Payment;
+use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
 use App\PaymentDrivers\BraintreePaymentDriver;
@@ -87,6 +90,22 @@ class ACH implements MethodInterface, LivewireMethodInterface
 
                 $this->braintree->storeGatewayToken($data, ['gateway_customer_reference' => $customer->id]);
 
+                if ($request->authorize_then_redirect) {
+                    $this->braintree->payment_hash = PaymentHash::where('hash', $request->payment_hash)->firstOrFail();
+
+                    $data = [
+                        'invoices' => collect($this->braintree->payment_hash->data->invoices)->map(fn ($invoice) => $invoice->invoice_id)->toArray(),
+                        'action' => 'payment',
+                    ];
+
+                    $request = new ProcessInvoicesInBulkRequest();
+                    $request->replace($data);
+
+                    session()->flash('message', ctrans('texts.payment_method_added'));
+
+                    return app(InvoiceController::class)->bulk($request);
+                }
+
                 return redirect()->route('client.payment_methods.index')->withMessage(ctrans('texts.payment_method_added'));
             } catch (\Exception $e) {
                 return $this->braintree->processInternallyFailedPayment($this->braintree, $e);
@@ -100,6 +119,10 @@ class ACH implements MethodInterface, LivewireMethodInterface
     {
         $data = $this->paymentData($data);
 
+        if (array_key_exists('authorize_then_redirect', $data)) {
+            return render('gateways.braintree.ach.authorize', array_merge($data));
+        }
+
         return render('gateways.braintree.ach.pay', $data);
     }
 
@@ -184,6 +207,10 @@ class ACH implements MethodInterface, LivewireMethodInterface
      */
     public function livewirePaymentView(array $data): string 
     {
+        if (array_key_exists('authorize_then_redirect', $data)) {
+            return 'gateways.braintree.ach.authorize_livewire';
+        }
+
         return 'gateways.braintree.ach.pay_livewire';
     }
     
@@ -196,6 +223,12 @@ class ACH implements MethodInterface, LivewireMethodInterface
         $data['currency'] = $this->braintree->client->getCurrencyCode();
         $data['payment_method_id'] = GatewayType::BANK_TRANSFER;
         $data['amount'] = $this->braintree->payment_hash->data->amount_with_fee;
+        $data['client_token'] = $this->braintree->gateway->clientToken()->generate();
+        $data['payment_hash'] = $this->braintree->payment_hash->hash;
+
+        if (count($data['tokens']) === 0) {
+            $data['authorize_then_redirect'] = true;
+        }
 
         return $data;
     }

app/PaymentDrivers/GoCardless/DirectDebit.php

@@ -13,12 +13,15 @@
 namespace App\PaymentDrivers\GoCardless;
 
 use App\Exceptions\PaymentFailed;
+use App\Http\Controllers\ClientPortal\InvoiceController;
+use App\Http\Requests\ClientPortal\Invoices\ProcessInvoicesInBulkRequest;
 use App\Http\Requests\ClientPortal\Payments\PaymentResponseRequest;
 use App\Jobs\Mail\PaymentFailureMailer;
 use App\Jobs\Util\SystemLogger;
 use App\Models\GatewayType;
 use App\Models\Invoice;
 use App\Models\Payment;
+use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
 use App\PaymentDrivers\Common\LivewireMethodInterface;
@@ -27,8 +30,6 @@ use App\PaymentDrivers\GoCardlessPaymentDriver;
 use App\Utils\Traits\MakesHash;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
-use Illuminate\Routing\Redirector;
-use Illuminate\View\View;
 
 class DirectDebit implements MethodInterface, LivewireMethodInterface
 {
@@ -94,6 +95,8 @@ class DirectDebit implements MethodInterface, LivewireMethodInterface
                             'method' => GatewayType::DIRECT_DEBIT,
                             'session_token' => $session_token,
                             'billing_request' => $response->id,
+                            'authorize_then_redirect' => true,
+                            'payment_hash' => $this->go_cardless->payment_hash?->hash,
                         ]),
                     "exit_uri" => $exit_uri,
                     "links" => [
@@ -143,7 +146,6 @@ class DirectDebit implements MethodInterface, LivewireMethodInterface
      */
     public function authorizeResponse(Request $request)
     {
-
         try {
 
             $billing_request = $this->go_cardless->gateway->billingRequests()->get($request->billing_request);
@@ -166,6 +168,22 @@ class DirectDebit implements MethodInterface, LivewireMethodInterface
 
             nlog($mandate);
 
+            if ($request->has('authorize_then_redirect') && $request->payment_hash !== null) {
+                $this->go_cardless->payment_hash = PaymentHash::where('hash', $request->payment_hash)->firstOrFail();
+
+                $data = [
+                    'invoices' => collect($this->go_cardless->payment_hash->data->invoices)->map(fn ($invoice) => $invoice->invoice_id)->toArray(),
+                    'action' => 'payment',
+                ];
+                
+                $request = new ProcessInvoicesInBulkRequest();
+                $request->replace($data);
+    
+                session()->flash('message', ctrans('texts.payment_method_added'));
+    
+                return app(InvoiceController::class)->bulk($request);
+            }
+
             return redirect()->route('client.payment_methods.show', $payment_method->hashed_id);
 
         } catch (\Exception $exception) {
@@ -215,9 +233,8 @@ class DirectDebit implements MethodInterface, LivewireMethodInterface
      * Payment view for Direct Debit.
      *
      * @param array $data
-     * @return \Illuminate\View\View
      */
-    public function paymentView(array $data): View
+    public function paymentView(array $data)
     {
         $data = $this->paymentData($data);
 
@@ -347,6 +364,12 @@ class DirectDebit implements MethodInterface, LivewireMethodInterface
         $data['amount'] = $this->go_cardless->convertToGoCardlessAmount($data['total']['amount_with_fee'], $this->go_cardless->client->currency()->precision);
         $data['currency'] = $this->go_cardless->client->getCurrencyCode();
 
+        if (count($data['tokens']) === 0) {
+            $data['authorize_then_redirect'] = true;
+
+            $this->authorizeView($data);
+        }
+
         return $data;
     }
 }

app/PaymentDrivers/GoCardless/SEPA.php

@@ -13,11 +13,14 @@
 namespace App\PaymentDrivers\GoCardless;
 
 use App\Exceptions\PaymentFailed;
+use App\Http\Controllers\ClientPortal\InvoiceController;
+use App\Http\Requests\ClientPortal\Invoices\ProcessInvoicesInBulkRequest;
 use App\Http\Requests\ClientPortal\Payments\PaymentResponseRequest;
 use App\Jobs\Util\SystemLogger;
 use App\Models\GatewayType;
 use App\Models\Invoice;
 use App\Models\Payment;
+use App\Models\PaymentHash;
 use App\Models\PaymentType;
 use App\Models\SystemLog;
 use App\PaymentDrivers\Common\LivewireMethodInterface;
@@ -61,6 +64,8 @@ class SEPA implements MethodInterface, LivewireMethodInterface
                     'success_redirect_url' => route('client.payment_methods.confirm', [
                         'method' => GatewayType::SEPA,
                         'session_token' => $session_token,
+                        'authorize_then_redirect' => true,
+                        'payment_hash' => $this->go_cardless->payment_hash?->hash,
                     ]),
                     'prefilled_customer' => [
                         'given_name' => auth()->guard('contact')->user()->client->present()->first_name(),
@@ -132,6 +137,22 @@ class SEPA implements MethodInterface, LivewireMethodInterface
 
             $payment_method = $this->go_cardless->storeGatewayToken($data, ['gateway_customer_reference' => $redirect_flow->links->customer]);
 
+            if ($request->has('authorize_then_redirect') && $request->payment_hash !== null) {
+                $this->go_cardless->payment_hash = PaymentHash::where('hash', $request->payment_hash)->firstOrFail();
+
+                $data = [
+                    'invoices' => collect($this->go_cardless->payment_hash->data->invoices)->map(fn ($invoice) => $invoice->invoice_id)->toArray(),
+                    'action' => 'payment',
+                ];
+                
+                $request = new ProcessInvoicesInBulkRequest();
+                $request->replace($data);
+    
+                session()->flash('message', ctrans('texts.payment_method_added'));
+    
+                return app(InvoiceController::class)->bulk($request);
+            }
+
             return redirect()->route('client.payment_methods.show', $payment_method->hashed_id);
         } catch (\Exception $exception) {
             return $this->processUnsuccessfulAuthorization($exception);
@@ -274,6 +295,12 @@ class SEPA implements MethodInterface, LivewireMethodInterface
         $data['amount'] = $this->go_cardless->convertToGoCardlessAmount($data['total']['amount_with_fee'], $this->go_cardless->client->currency()->precision);
         $data['currency'] = $this->go_cardless->client->getCurrencyCode();
 
+        if (count($data['tokens']) === 0) {
+            $data['authorize_then_redirect'] = true;
+
+            $this->authorizeView($data);
+        }
+
         return $data;
     }
 }

app/PaymentDrivers/Rotessa/PaymentMethod.php

@@ -12,7 +12,10 @@
 
 namespace App\PaymentDrivers\Rotessa;
 
+use App\Http\Controllers\ClientPortal\InvoiceController;
+use App\Http\Requests\ClientPortal\Invoices\ProcessInvoicesInBulkRequest;
 use App\Models\Payment;
+use App\Models\PaymentHash;
 use App\Models\SystemLog;
 use App\PaymentDrivers\Common\LivewireMethodInterface;
 use Illuminate\View\View;
@@ -112,8 +115,23 @@ class PaymentMethod implements MethodInterface, LivewireMethodInterface
 
         }
 
-        return redirect()->route('client.payment_methods.index')->withMessage(ctrans('texts.payment_method_added'));
+        if ($request->authorize_then_redirect) {
+            $this->rotessa->payment_hash = PaymentHash::where('hash', $request->payment_hash)->firstOrFail();
 
+            $data = [
+                'invoices' => collect($this->rotessa->payment_hash->data->invoices)->map(fn ($invoice) => $invoice->invoice_id)->toArray(),
+                'action' => 'payment',
+            ];
+
+            $request = new ProcessInvoicesInBulkRequest();
+            $request->replace($data);
+
+            session()->flash('message', ctrans('texts.payment_method_added'));
+
+            return app(InvoiceController::class)->bulk($request);
+        }
+
+        return redirect()->route('client.payment_methods.index')->withMessage(ctrans('texts.payment_method_added'));
     }
 
     /**
@@ -126,6 +144,10 @@ class PaymentMethod implements MethodInterface, LivewireMethodInterface
     {
         $data = $this->paymentData($data);
 
+        if ($data['authorize_then_redirect']) {
+            return $this->authorizeView($data);
+        }
+
         return render('gateways.rotessa.bank_transfer.pay', $data );
     }
 
@@ -221,6 +243,10 @@ class PaymentMethod implements MethodInterface, LivewireMethodInterface
      */
     public function livewirePaymentView(array $data): string 
     {
+        if (array_key_exists('authorize_then_redirect', $data)) {
+            return 'gateways.rotessa.bank_transfer.authorize_livewire';
+        }
+
         return 'gateways.rotessa.bank_transfer.pay_livewire';
     }
     
@@ -237,6 +263,27 @@ class PaymentMethod implements MethodInterface, LivewireMethodInterface
         $data['frequency'] = 'Once';
         $data['installments'] = 1;
         $data['invoice_nums'] = $data['invoices']->pluck('invoice_number')->join(', '); 
+        $data['payment_hash'] = $this->rotessa->payment_hash->hash;
+
+        if (count($data['tokens']) === 0) {
+            $data['authorize_then_redirect'] = true;
+
+            $data['contact'] = collect($data['client']->contacts->first()->toArray())->merge([
+                'home_phone' => $data['client']->phone, 
+                'custom_identifier' => $data['client']->number,
+                'name' => $data['client']->name,
+                'id' => null
+            ] )->all();
+            $data['gateway'] = $this->rotessa;
+            $data['gateway_type_id'] =   GatewayType::ACSS ;
+            $data['account'] = [
+                'routing_number' => $data['client']->routing_id,
+                'country' => $data['client']->country->iso_3166_2
+            ];
+            $data['address'] = collect($data['client']->toArray())->merge(['country' => $data['client']->country->iso_3166_2 ])->all();
+
+            $this->authorizeView($data);
+        }
 
         return $data;
     }

public/build/assets/braintree-ach-3d6b328f.js

@@ -0,0 +1,9 @@
+import{i as l,w as c}from"./wait-8f4ae121.js";/**
+ * 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
+ */function i(){var o;window.braintree.client.create({authorization:(o=document.querySelector('meta[name="client-token"]'))==null?void 0:o.content}).then(function(t){return braintree.usBankAccount.create({client:t})}).then(function(t){var a;(a=document.getElementById("authorize-bank-account"))==null||a.addEventListener("click",r=>{r.target.parentElement.disabled=!0,document.getElementById("errors").hidden=!0,document.getElementById("errors").textContent="";let n={accountNumber:document.getElementById("account-number").value,routingNumber:document.getElementById("routing-number").value,accountType:document.querySelector('input[name="account-type"]:checked').value,ownershipType:document.querySelector('input[name="ownership-type"]:checked').value,billingAddress:{streetAddress:document.getElementById("billing-street-address").value,extendedAddress:document.getElementById("billing-extended-address").value,locality:document.getElementById("billing-locality").value,region:document.getElementById("billing-region").value,postalCode:document.getElementById("billing-postal-code").value}};if(n.ownershipType==="personal"){let e=document.getElementById("account-holder-name").value.split(" ",2);n.firstName=e[0],n.lastName=e[1]}else n.businessName=document.getElementById("account-holder-name").value;t.tokenize({bankDetails:n,mandateText:'By clicking ["Checkout"], I authorize Braintree, a service of PayPal, on behalf of [your business name here] (i) to verify my bank account information using bank information and consumer reports and (ii) to debit my bank account.'}).then(function(e){document.querySelector("input[name=nonce]").value=e.nonce,document.getElementById("server_response").submit()}).catch(function(e){r.target.parentElement.disabled=!1,document.getElementById("errors").textContent=`${e.details.originalError.message} ${e.details.originalError.details.originalError[0].message}`,document.getElementById("errors").hidden=!1})})}).catch(function(t){document.getElementById("errors").textContent=t.message,document.getElementById("errors").hidden=!1})}l()?i():c("#braintree-ach-authorize").then(()=>i());

public/build/assets/braintree-ach-b29d040e.js

@@ -1,9 +0,0 @@
-/**
- * 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
- */var a;window.braintree.client.create({authorization:(a=document.querySelector('meta[name="client-token"]'))==null?void 0:a.content}).then(function(t){return braintree.usBankAccount.create({client:t})}).then(function(t){var o;(o=document.getElementById("authorize-bank-account"))==null||o.addEventListener("click",r=>{r.target.parentElement.disabled=!0,document.getElementById("errors").hidden=!0,document.getElementById("errors").textContent="";let n={accountNumber:document.getElementById("account-number").value,routingNumber:document.getElementById("routing-number").value,accountType:document.querySelector('input[name="account-type"]:checked').value,ownershipType:document.querySelector('input[name="ownership-type"]:checked').value,billingAddress:{streetAddress:document.getElementById("billing-street-address").value,extendedAddress:document.getElementById("billing-extended-address").value,locality:document.getElementById("billing-locality").value,region:document.getElementById("billing-region").value,postalCode:document.getElementById("billing-postal-code").value}};if(n.ownershipType==="personal"){let e=document.getElementById("account-holder-name").value.split(" ",2);n.firstName=e[0],n.lastName=e[1]}else n.businessName=document.getElementById("account-holder-name").value;t.tokenize({bankDetails:n,mandateText:'By clicking ["Checkout"], I authorize Braintree, a service of PayPal, on behalf of [your business name here] (i) to verify my bank account information using bank information and consumer reports and (ii) to debit my bank account.'}).then(function(e){document.querySelector("input[name=nonce]").value=e.nonce,document.getElementById("server_response").submit()}).catch(function(e){r.target.parentElement.disabled=!1,document.getElementById("errors").textContent=`${e.details.originalError.message} ${e.details.originalError.details.originalError[0].message}`,document.getElementById("errors").hidden=!1})})}).catch(function(t){document.getElementById("errors").textContent=t.message,document.getElementById("errors").hidden=!1});

public/build/manifest.json

@@ -57,7 +57,10 @@
     "src": "resources/js/clients/payment_methods/authorize-stripe-acss.js"
   },
   "resources/js/clients/payment_methods/braintree-ach.js": {
-    "file": "assets/braintree-ach-b29d040e.js",
+    "file": "assets/braintree-ach-3d6b328f.js",
+    "imports": [
+      "_wait-8f4ae121.js"
+    ],
     "isEntry": true,
     "src": "resources/js/clients/payment_methods/braintree-ach.js"
   },
@@ -345,7 +348,7 @@
     "src": "resources/js/setup/setup.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-fee1da41.css",
+    "file": "assets/app-106dcc58.css",
     "isEntry": true,
     "src": "resources/sass/app.scss"
   }

resources/js/clients/payment_methods/braintree-ach.js

@@ -8,13 +8,16 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
-window.braintree.client.create({
+import { instant, wait } from '../wait';
+
+function boot() {
+    window.braintree.client.create({
         authorization: document.querySelector('meta[name="client-token"]')?.content
-}).then(function (clientInstance) {
+    }).then(function (clientInstance) {
         return braintree.usBankAccount.create({
             client: clientInstance
         });
-}).then(function (usBankAccountInstance) {
+    }).then(function (usBankAccountInstance) {
         document
             .getElementById('authorize-bank-account')
             ?.addEventListener('click', (e) => {
@@ -60,9 +63,12 @@ window.braintree.client.create({
                         document.getElementById('errors').hidden = false;
                     });
             });
-}).catch(function (err) {
+    }).catch(function (err) {
     
         document.getElementById('errors').textContent = err.message;
         document.getElementById('errors').hidden = false;
     
-});
+    });
+}
+
+instant() ? boot() : wait('#braintree-ach-authorize').then(() => boot());

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

@@ -1,7 +1,8 @@
 @extends('portal.ninja2020.layout.payments', ['gateway_title' => 'ACH', 'card_title' => 'ACH'])
 
 @section('gateway_head')
-    <meta name="client-token" content="{{ $client_token ?? '' }}"/>
+    <meta name="client-token" content="{{ $client_token ?? '' }}" />
+    <meta name="instant-payment" content="yes" />
 @endsection
 
 @section('gateway_content')
@@ -19,7 +20,15 @@
         <input type="hidden" name="gateway_type_id" value="2">
         <input type="hidden" name="gateway_response" id="gateway_response">
         <input type="hidden" name="is_default" id="is_default">
-        <input type="hidden" name="nonce" hidden>
+        <input type="hidden" name="nonce" hidden />
+        
+        @isset($payment_hash)
+            <input type="hidden" name="payment_hash" value="{{ $payment_hash }}" />
+        @endisset
+
+        @isset($authorize_then_redirect)
+            <input type="hidden" name="authorize_then_redirect" value="true" />
+        @endisset
     </form>
 
     <div class="alert alert-failure mb-4" hidden id="errors"></div>
@@ -93,6 +102,5 @@
     <script src="https://js.braintreegateway.com/web/3.81.0/js/client.min.js"></script>
     <script src="https://js.braintreegateway.com/web/3.81.0/js/us-bank-account.min.js"></script>
     
-    <script defer src="{{ asset('js/clients/payment_methods/braintree-ach.js') }}"></script>
-
+    @vite('resources/js/clients/payment_methods/braintree-ach.js')
 @endsection

resources/views/portal/ninja2020/gateways/braintree/ach/authorize_livewire.blade.php

@@ -0,0 +1,102 @@
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden py-5 bg-white sm:gap-4"
+    id="braintree-ach-authorize">
+    <meta name="client-token" content="{{ $client_token ?? '' }}"/>
+
+    @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' => App\Models\GatewayType::BANK_TRANSFER]) }}"
+          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="2">
+        <input type="hidden" name="gateway_response" id="gateway_response">
+        <input type="hidden" name="is_default" id="is_default">
+        <input type="hidden" name="nonce" hidden />
+
+        @isset($payment_hash)
+            <input type="hidden" name="payment_hash" value="{{ $payment_hash }}" />
+        @endif
+
+        @isset($authorize_then_redirect)
+            <input type="hidden" name="authorize_then_redirect" value="true" />
+        @endisset
+    </form>
+
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.account_type')])
+        <span class="flex items-center mr-4">
+            <input class="form-radio mr-2" type="radio" value="checking" name="account-type" checked>
+            <span>{{ __('texts.checking') }}</span>
+        </span>
+        <span class="flex items-center mt-2">
+            <input class="form-radio mr-2" type="radio" value="savings" name="account-type">
+            <span>{{ __('texts.savings') }}</span>
+        </span>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.account_holder_type')])
+        <span class="flex items-center mr-4">
+            <input class="form-radio mr-2" type="radio" value="personal" name="ownership-type" checked>
+            <span>{{ __('texts.individual_account') }}</span>
+        </span>
+        <span class="flex items-center mt-2">
+            <input class="form-radio mr-2" type="radio" value="business" name="ownership-type">
+            <span>{{ __('texts.company_account') }}</span>
+        </span>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.account_holder_name')])
+        <input class="input w-full" id="account-holder-name" type="text" placeholder="{{ ctrans('texts.name') }}"
+               required>
+    @endcomponent
+
+    @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', ['title' => ctrans('texts.routing_number')])
+        <input class="input w-full" id="routing-number" type="text" required>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.address1')])
+        <input class="input w-full" id="billing-street-address" type="text" required>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.address2')])
+        <input class="input w-full" id="billing-extended-address" type="text" required>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.locality')])
+        <input class="input w-full" id="billing-locality" type="text" required>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.state')])
+        <select class="input w-full" id="billing-region">
+            <option disabled selected></option>
+            @foreach(\App\DataProviders\USStates::get() as $code => $state)
+                <option value="{{ $code }}">{{ $state }} ({{ $code }})</option>
+            @endforeach
+        </select>
+    @endcomponent
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.postal_code')])
+        <input class="input w-full" id="billing-postal-code" type="text" required>
+    @endcomponent
+
+    @component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'authorize-bank-account'])
+        {{ ctrans('texts.add_payment_method') }}
+    @endcomponent
+</div>
+
+@assets
+    <script src="https://js.braintreegateway.com/web/3.81.0/js/client.min.js"></script>
+    <script src="https://js.braintreegateway.com/web/3.81.0/js/us-bank-account.min.js"></script>
+    
+    @vite('resources/js/clients/payment_methods/braintree-ach.js')
+@endassets

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

@@ -55,5 +55,14 @@
 
             document.getElementById('server-response').submit();
         });
+
+    /**
+    * @type {HTMLInputElement|null}
+    */
+    const first = document.querySelector('input[name="payment-type"]');
+
+    if (first) {
+        first.click();
+    }
     </script>
 @endpush

resources/views/portal/ninja2020/gateways/braintree/ach/pay_livewire.blade.php

@@ -54,5 +54,15 @@
 
             document.getElementById('server-response').submit();
         });
+
+
+    /**
+    * @type {HTMLInputElement|null}
+    */
+    const first = document.querySelector('input[name="payment-type"]');
+
+    if (first) {
+        first.click();
+    }
     </script>
 @endscript

resources/views/portal/ninja2020/gateways/gocardless/direct_debit/pay.blade.php

@@ -19,7 +19,7 @@
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
             @if (count($tokens) > 0)
                 @foreach ($tokens as $token)
-                    <label class="mr-4">
+                    <label class="mr-4 block my-2">
                         <input type="radio" data-token="{{ $token->token }}" 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) }}

resources/views/portal/ninja2020/gateways/gocardless/direct_debit/pay_livewire.blade.php

@@ -17,7 +17,7 @@
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
             @if (count($tokens) > 0)
                 @foreach ($tokens as $token)
-                    <label class="mr-4">
+                    <label class="mr-4 block my-2">
                         <input type="radio" data-token="{{ $token->token }}" 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) }}

resources/views/portal/ninja2020/gateways/gocardless/sepa/pay.blade.php

@@ -19,7 +19,7 @@
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
             @if (count($tokens) > 0)
                 @foreach ($tokens as $token)
-                    <label class="mr-4">
+                    <label class="mr-4 block my-2">
                         <input type="radio" data-token="{{ $token->token }}" name="payment-type"
                             class="form-radio cursor-pointer toggle-payment-with-token" />
                         <span class="ml-1 cursor-pointer">{{ ctrans('texts.payment_type_SEPA') }}

resources/views/portal/ninja2020/gateways/gocardless/sepa/pay_livewire.blade.php

@@ -17,7 +17,7 @@
         @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
             @if (count($tokens) > 0)
                 @foreach ($tokens as $token)
-                    <label class="mr-4">
+                    <label class="mr-4 block my-2">
                         <input type="radio" data-token="{{ $token->token }}" name="payment-type"
                             class="form-radio cursor-pointer toggle-payment-with-token" />
                         <span class="ml-1 cursor-pointer">{{ ctrans('texts.payment_type_SEPA') }}

resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/authorize.blade.php

@@ -15,6 +15,14 @@
         <input type="hidden" name="gateway_response" id="gateway_response">
         <input type="hidden" name="is_default" id="is_default">
 
+        @isset($payment_hash)
+            <input type="hidden" name="payment_hash" value="{{ $payment_hash }}" />
+        @endif
+
+        @isset($authorize_then_redirect)
+            <input type="hidden" name="authorize_then_redirect" value="true" />
+        @endisset
+
         <x-rotessa::contact-component :contact="$contact"></x-rotessa::contact-component>
 
         <x-rotessa::address-component :address="$address"></x-rotessa::address-component>

resources/views/portal/ninja2020/gateways/rotessa/bank_transfer/authorize_livewire.blade.php

@@ -0,0 +1,37 @@
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden bg-white sm:gap-4"
+    id="rotessa-bank-transfer-authorize">
+    @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">
+
+        @isset($payment_hash)
+            <input type="hidden" name="payment_hash" value="{{ $payment_hash }}" />
+        @endif
+
+        @isset($authorize_then_redirect)
+            <input type="hidden" name="authorize_then_redirect" value="true" />
+        @endisset
+
+        <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>
+</div>