Merge pull request #4170 from beganovich/v2-extract-stripe-into-partials

(v5) Split Stripe credit card payments into partials

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/app.js": "/js/app.js?id=a33a5a58bfc6e2174841",
-    "/css/app.css": "/css/app.css?id=b2e7d49a848e3cfb6370",
+    "/css/app.css": "/css/app.css?id=fc37092c9a39881e5e2e",
     "/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=b0f29d5fdfa492962c22",
     "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=d7e708d66a9c769b4c6e",
     "/js/clients/payment_methods/authorize-ach.js": "/js/clients/payment_methods/authorize-ach.js?id=c73d32c192c36fe44123",

resources/views/portal/ninja2020/gateways/includes/payment_details.blade.php

@@ -0,0 +1,37 @@
+<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+    <dt class="text-sm leading-5 font-medium text-gray-500">
+        {{ ctrans('texts.subtotal') }}
+    </dt>
+
+    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+        {{ App\Utils\Number::formatMoney($total['invoice_totals'], $client) }}
+    </dd>
+
+    @if($total['fee_total'] > 0)
+        <dt class="text-sm leading-5 font-medium text-gray-500">
+            {{ ctrans('texts.gateway_fees') }}
+        </dt>
+
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            {{ App\Utils\Number::formatMoney($total['fee_total'], $client) }}
+        </dd>
+    @endif
+
+    @if($total['credit_totals'] > 0)
+        <dt class="text-sm leading-5 font-medium text-gray-500">
+            {{ ctrans('texts.credit_amount') }}
+        </dt>
+
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            {{ App\Utils\Number::formatMoney($total['credit_totals'], $client) }}
+        </dd>
+    @endif
+
+    <dt class="text-sm leading-5 font-medium text-gray-500">
+        {{ ctrans('texts.amount_due') }}
+    </dt>
+    
+    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+        {{ App\Utils\Number::formatMoney($total['amount_with_fee'], $client) }}
+    </dd>
+</div>

resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php

@@ -2,18 +2,19 @@
 @section('meta_title', ctrans('texts.add_credit_card'))
 
 @push('head')
-    <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
+<meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
 @endpush
 
 @section('body')
-    <form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" method="post" id="server_response">
+<form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" method="post" id="server_response">
     @csrf
     <input type="hidden" name="company_gateway_id" value="{{ $gateway->gateway_id }}">
     <input type="hidden" name="payment_method_id" value="1">
     <input type="hidden" name="gateway_response" id="gateway_response">
     <input type="hidden" name="is_default" id="is_default">
-    </form>
+</form>
-    <div class="container mx-auto">
+
+<div class="container mx-auto">
     <div class="grid grid-cols-6 gap-4">
         <div class="col-span-6 md:col-start-2 md:col-span-4">
             <div class="alert alert-failure mb-4" hidden id="errors"></div>
@@ -27,55 +28,10 @@
                     </p>
                 </div>
                 <div>
-                        <dl>
+                    @include('portal.ninja2020.gateways.stripe.includes.card_widget')
-                            <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+
-                                <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
-                                    {{ ctrans('texts.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="cardholder-name" type="text" placeholder="{{ ctrans('texts.name') }}">
-                                </dd>
-                            </div><div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                                <dt class="text-sm leading-5 font-medium text-gray-500">
-                                    {{ ctrans('texts.credit_card') }}
-                                </dt>
-                                <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                    <div id="card-element"></div>
-                                </dd>
-                            </div>
-                            <div class="{{ ($gateway->token_billing == 'optin' || $gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
-                                <dt class="text-sm leading-5 font-medium text-gray-500">
-                                    {{ ctrans('texts.token_billing_checkbox') }}
-                                </dt>
-                                <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                    <label class="mr-4">
-                                        <input 
-                                            type="radio"
-                                            class="form-radio cursor-pointer" 
-                                            name="token-billing-checkbox" 
-                                            id="proxy_is_default"
-                                            value="true"
-                                            {{ ($gateway->token_billing == 'always' || $gateway->token_billing == 'optout') ? 'checked' : '' }} />
-                                        <span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
-                                    </label>
-                                    <label>
-                                        <input 
-                                            type="radio" 
-                                            class="form-radio cursor-pointer" 
-                                            name="token-billing-checkbox" 
-                                            id="proxy_is_default" 
-                                            value="false"
-                                            {{ ($gateway->token_billing == 'off' || $gateway->token_billing == 'optin') ? 'checked' : '' }} />
-                                        <span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
-                                    </label>
-                                </dd>
-                            </div>
                     <div class="bg-white px-4 py-5 flex justify-end">
-                                <button
+                        <button type="button" id="card-button" data-secret="{{ $intent->client_secret }}" class="button button-primary bg-primary">
-                                    type="button"
-                                    id="card-button"
-                                    data-secret="{{ $intent->client_secret }}"
-                                    class="button button-primary bg-primary">
                             <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                 <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>
@@ -83,15 +39,14 @@
                             <span>{{ __('texts.save') }}</span>
                         </button>
                     </div>
-                        </dl>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @push('footer')
-    <script src="https://js.stripe.com/v3/"></script>
+<script src="https://js.stripe.com/v3/"></script>
-    <script src="{{ asset('js/clients/payment_methods/authorize-stripe-card.js') }}"></script>
+<script src="{{ asset('js/clients/payment_methods/authorize-stripe-card.js') }}"></script>
 @endpush

resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php

@@ -16,10 +16,7 @@
         <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
         <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
     </form>
-    <form action="{{route('client.payments.credit_response')}}" method="post" id="credit-payment">
+
-        @csrf
-        <input type="hidden" name="payment_hash" value="{{$payment_hash}}">
-    </form>
     <div class="container mx-auto">
         <div class="grid grid-cols-6 gap-4">
             <div class="col-span-6 md:col-start-2 md:col-span-4">
@@ -35,58 +32,17 @@
                     </div>
                     <div>
                         <dl>
+                            @include('portal.ninja2020.gateways.includes.payment_details')
 
-                            <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                                <dt class="text-sm leading-5 font-medium text-gray-500">
-                                    {{ ctrans('texts.subtotal') }}
-                                </dt>
-                                <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                    {{ App\Utils\Number::formatMoney($total['invoice_totals'], $client) }}
-                                </dd>
-                                @if($total['fee_total'] > 0)
-                                <dt class="text-sm leading-5 font-medium text-gray-500">
-                                    {{ ctrans('texts.gateway_fees') }}
-                                </dt>
-                                <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                    {{ App\Utils\Number::formatMoney($total['fee_total'], $client) }}
-                                </dd>
-                                @endif
-                                @if($total['credit_totals'] > 0)
-                                <dt class="text-sm leading-5 font-medium text-gray-500">
-                                    {{ ctrans('texts.credit_amount') }}
-                                </dt>
-                                <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                    {{ App\Utils\Number::formatMoney($total['credit_totals'], $client) }}
-                                </dd>                                
-                                @endif
-                                <dt class="text-sm leading-5 font-medium text-gray-500">
-                                    {{ ctrans('texts.amount_due') }}
-                                </dt>
-                                <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                    {{ App\Utils\Number::formatMoney($total['amount_with_fee'], $client) }}
-                                </dd>
-                            </div>
                             @if((int)$total['amount_with_fee'] == 0)
-                                <!-- finalize with credits only -->
+                                @include('portal.ninja2020.gateways.stripe.includes.pay_with_credit')
-                                <div class="bg-white px-4 py-5 flex justify-end">
-                                    <button form="credit-payment" class="button button-primary bg-primary inline-flex items-center">Pay with credit</button>
-                                </div>
                             @elseif($token)
-                                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+                                @include('portal.ninja2020.gateways.stripe.includes.pay_with_token')
-                                    <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+                            @else
-                                        {{ ctrans('texts.credit_card') }}
+                                @include('portal.ninja2020.gateways.stripe.includes.card_widget')
-                                    </dt>
+
-                                    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                        {{ strtoupper($token->meta->brand) }} - **** {{ $token->meta->last4 }}
-                                    </dd>
-                                </div>
                                 <div class="bg-white px-4 py-5 flex justify-end">
-                                    <button
+                                    <button type="button" id="pay-now" data-secret="{{ $intent->client_secret }}" class="button button-primary bg-primary">
-                                        type="button"
-                                        data-secret="{{ $intent->client_secret }}"
-                                        data-token="{{ $token->token }}"
-                                        id="pay-now-with-token"
-                                        class="button button-primary bg-primary inline-flex items-center">
                                         <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                             <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>
@@ -94,68 +50,6 @@
                                         <span>{{ __('texts.pay_now') }}</span>
                                     </button>
                                 </div>
-                            @else
-                                <div
-                                    class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
-                                    <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
-                                        {{ ctrans('texts.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="cardholder-name" type="text"
-                                               placeholder="{{ ctrans('texts.name') }}">
-                                    </dd>
-                                </div>
-
-                                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-                                    <dt class="text-sm leading-5 font-medium text-gray-500">
-                                        {{ ctrans('texts.credit_card') }}
-                                    </dt>
-                                    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                        <div id="card-element"></div>
-                                    </dd>
-                                </div>
-
-                                <div class="{{ ($gateway->company_gateway->token_billing == 'optin' || $gateway->company_gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
-                                    <dt class="text-sm leading-5 font-medium text-gray-500">
-                                        {{ ctrans('texts.token_billing_checkbox') }}
-                                    </dt>
-                                    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                        <label class="mr-4">
-                                            <input 
-                                                type="radio"
-                                                class="form-radio cursor-pointer" 
-                                                name="token-billing-checkbox" 
-                                                id="proxy_is_default"
-                                                value="true"
-                                                {{ ($gateway->company_gateway->token_billing == 'always' || $gateway->company_gateway->token_billing == 'optout') ? 'checked' : '' }} />
-                                            <span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
-                                        </label>
-                                        <label>
-                                            <input 
-                                                type="radio" 
-                                                class="form-radio cursor-pointer" 
-                                                name="token-billing-checkbox" 
-                                                id="proxy_is_default" 
-                                                value="false"
-                                                {{ ($gateway->company_gateway->token_billing == 'off' || $gateway->company_gateway->token_billing == 'optin') ? 'checked' : '' }} />
-                                            <span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
-                                        </label>
-                                    </dd>
-                                </div>
-
-                                <div class="bg-white px-4 py-5 flex justify-end">
-                                    <button
-                                        type="button"
-                                        id="pay-now"
-                                        data-secret="{{ $intent->client_secret }}"
-                                        class="button button-primary bg-primary">
-                                        <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                            <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>{{ __('texts.save') }}</span>
-                                    </button>
-                                </div>
                             @endif
                         </dl>
                     </div>

resources/views/portal/ninja2020/gateways/stripe/includes/card_widget.blade.php

@@ -0,0 +1,39 @@
+@unless(isset($show_name) && $show_name == false)
+    <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+        <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+            {{ ctrans('texts.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="cardholder-name" type="text" placeholder="{{ ctrans('texts.name') }}">
+        </dd>
+    </div>
+@endunless
+
+@unless(isset($show_card_element) && $show_card_element == false)
+    <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm leading-5 font-medium text-gray-500">
+            {{ ctrans('texts.credit_card') }}
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <div id="card-element"></div>
+        </dd>
+    </div>
+@endunless
+
+@unless(isset($show_save) && $show_save == false)
+    <div class="{{ ($gateway->token_billing == 'optin' || $gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm leading-5 font-medium text-gray-500">
+            {{ ctrans('texts.token_billing_checkbox') }}
+        </dt>
+        <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+            <label class="mr-4">
+                <input type="radio" class="form-radio cursor-pointer" name="token-billing-checkbox" id="proxy_is_default" value="true" {{ ($gateway->token_billing == 'always' || $gateway->token_billing == 'optout') ? 'checked' : '' }} />
+                <span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
+            </label>
+            <label>
+                <input type="radio" class="form-radio cursor-pointer" name="token-billing-checkbox" id="proxy_is_default" value="false" {{ ($gateway->token_billing == 'off' || $gateway->token_billing == 'optin') ? 'checked' : '' }} />
+                <span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
+            </label>
+        </dd>
+    </div>
+@endunless

resources/views/portal/ninja2020/gateways/stripe/includes/pay_with_credit.blade.php

@@ -0,0 +1,8 @@
+<form action="{{ route('client.payments.credit_response') }}" method="post" id="credit-payment">
+    @csrf
+    <input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
+</form>
+
+<div class="bg-white px-4 py-5 flex justify-end">
+    <button form="credit-payment" class="button button-primary bg-primary inline-flex items-center">Pay with credit</button>
+</div>

resources/views/portal/ninja2020/gateways/stripe/includes/pay_with_token.blade.php

@@ -0,0 +1,17 @@
+<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
+    <dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
+        {{ ctrans('texts.credit_card') }}
+    </dt>
+    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
+        {{ strtoupper($token->meta->brand) }} - **** {{ $token->meta->last4 }}
+    </dd>
+</div>
+<div class="bg-white px-4 py-5 flex justify-end">
+    <button type="button" data-secret="{{ $intent->client_secret }}" data-token="{{ $token->token }}" id="pay-now-with-token" class="button button-primary bg-primary inline-flex items-center">
+        <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <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>{{ __('texts.pay_now') }}</span>
+    </button>
+</div>