stripe adding credit card

app/PaymentDrivers/Stripe/CreditCard.php

@@ -39,7 +39,7 @@ class CreditCard
     {
         $intent['intent'] = $this->stripe->getSetupIntent();
 
-        return render('gateways.stripe.add_credit_card', array_merge($data, $intent));
+        return render('gateways.stripe.credit_card.authorize', array_merge($data, $intent));
     }
 
     public function authorizeResponse($request)
@@ -107,7 +107,7 @@ class CreditCard
         $data['intent'] = $this->stripe->createPaymentIntent($payment_intent_data);
         $data['gateway'] = $this->stripe;
 
-        return render('gateways.stripe.credit_card', $data);
+        return render('gateways.stripe.credit_card.pay', $data);
     }
 
     public function paymentResponse($request)

resources/js/clients/payments/stripe-credit-card.js

@@ -9,10 +9,11 @@
  */
 
 class StripeCreditCard {
-    constructor(key, token, secret) {
+    constructor(key, token, secret, onlyAuthorization) {
         this.key = key;
         this.token = token;
         this.secret = secret;
+        this.onlyAuthorization = onlyAuthorization;
     }
 
     setupStripe() {
@@ -111,29 +112,82 @@ class StripeCreditCard {
         this.payNowButton.querySelector('span').classList.remove('hidden');
     }
 
+    handleAuthorization() {
+        let cardHolderName = document.getElementById('cardholder-name');
+
+        let payNowButton = document.getElementById('authorize-card');
+
+        this.payNowButton = payNowButton;
+        this.payNowButton.disabled = true;
+
+        this.payNowButton.querySelector('svg').classList.remove('hidden');
+        this.payNowButton.querySelector('span').classList.add('hidden');
+
+        this.stripe
+            .handleCardSetup(this.secret, this.cardElement, {
+                payment_method_data: {
+                    billing_details: { name: cardHolderName.value },
+                },
+            })
+            .then((result) => {
+                if (result.error) {
+                    return this.handleFailure(result);
+                }
+
+                return this.handleSuccessfulAuthorization(result);
+            });
+    }
+
+    handleSuccessfulAuthorization(result) {
+        document.getElementById('gateway_response').value = JSON.stringify(
+            result.setupIntent
+        );
+
+        document.getElementById('server_response').submit();
+    }
+
     handle() {
         this.setupStripe();
 
-        if (this.token) {
-            document
-                .getElementById('pay-now-with-token')
-                .addEventListener('click', () => {
-                    return this.completePaymentUsingToken();
-                });
-        }
-
-        if (!this.token) {
+        if (this.onlyAuthorization) {
             this.createElement().mountCardElement();
 
-            document.getElementById('pay-now').addEventListener('click', () => {
-                return this.completePaymentWithoutToken();
-            });
+            document
+                .getElementById('authorize-card')
+                .addEventListener('click', () => {
+                    return this.handleAuthorization();
+                });
+        } else {
+            if (this.token) {
+                document
+                    .getElementById('pay-now-with-token')
+                    .addEventListener('click', () => {
+                        return this.completePaymentUsingToken();
+                    });
+            }
+
+            if (!this.token) {
+                this.createElement().mountCardElement();
+
+                document
+                    .getElementById('pay-now')
+                    .addEventListener('click', () => {
+                        return this.completePaymentWithoutToken();
+                    });
+            }
         }
     }
 }
 
-const publishableKey = document.querySelector('meta[name="stripe-publishable-key"]').content;
-const token = document.querySelector('meta[name="stripe-token"]').content;
-const secret = document.querySelector('meta[name="stripe-secret"]').content;
+const publishableKey =
+    document.querySelector('meta[name="stripe-publishable-key"]').content ?? '';
 
-new StripeCreditCard(publishableKey, token, secret).handle();
+const token = document.querySelector('meta[name="stripe-token"]').content ?? '';
+
+const secret =
+    document.querySelector('meta[name="stripe-secret"]').content ?? '';
+
+const onlyAuthorization =
+    document.querySelector('meta[name="only-authorization"]').content ?? '';
+
+new StripeCreditCard(publishableKey, token, secret, onlyAuthorization).handle();

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

@@ -1,52 +0,0 @@
-@extends('portal.ninja2020.layout.app')
-@section('meta_title', ctrans('texts.add_credit_card'))
-
-@push('head')
-<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">
-    @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>
-
-<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>
-            <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-                <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
-                    <h3 class="text-lg leading-6 font-medium text-gray-900">
-                        {{ ctrans('texts.add_credit_card') }}
-                    </h3>
-                    <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
-                        {{ ctrans('texts.authorize_for_future_use') }}
-                    </p>
-                </div>
-                <div>
-                    @include('portal.ninja2020.gateways.stripe.includes.card_widget')
-
-                    <div class="bg-white px-4 py-5 flex justify-end">
-                        <button 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>
-                            </svg>
-                            <span>{{ __('texts.save') }}</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-@endsection
-
-@push('footer')
-<script src="https://js.stripe.com/v3/"></script>
-<script src="{{ asset('js/clients/payment_methods/authorize-stripe-card.js') }}"></script>
-@endpush

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

@@ -1,65 +0,0 @@
-@extends('portal.ninja2020.layout.app')
-@section('meta_title', ctrans('texts.pay_now'))
-
-@push('head')
-    <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
-    <meta name="using-token" content="{{ boolval($token) }}">
-@endpush
-
-@section('body')
-    <form action="{{ route('client.payments.response') }}" method="post" id="server-response">
-        @csrf
-        <input type="hidden" name="gateway_response">
-        <input type="hidden" name="store_card">
-        <input type="hidden" name="payment_hash" value="{{$payment_hash}}">
-
-        <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
-        <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
-    </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">
-                <div class="alert alert-failure mb-4" hidden id="errors"></div>
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-                    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
-                        <h3 class="text-lg leading-6 font-medium text-gray-900">
-                            {{ ctrans('texts.pay_now') }}
-                        </h3>
-                        <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
-                            {{ ctrans('texts.complete_your_payment') }}
-                        </p>
-                    </div>
-                    <div>
-                        <dl>
-                            @include('portal.ninja2020.gateways.includes.payment_details')
-
-                            @if((int)$total['amount_with_fee'] == 0)
-                                @include('portal.ninja2020.gateways.stripe.includes.pay_with_credit')
-                            @elseif($token)
-                                @include('portal.ninja2020.gateways.stripe.includes.pay_with_token')
-                            @else
-                                @include('portal.ninja2020.gateways.stripe.includes.card_widget')
-
-                                <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.pay_now') }}</span>
-                                    </button>
-                                </div>
-                            @endif
-                        </dl>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-@endsection
-
-@push('footer')
-    <script src="https://js.stripe.com/v3/"></script>
-    <script src="{{ asset('js/clients/payments/process.js') }}"></script>
-@endpush

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

@@ -0,0 +1,35 @@
+@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Stripe (Credit card)', 'card_title' => 'Stripe (Credit card)'])
+
+@section('gateway_head')
+    <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
+    <meta name="stripe-secret" content="{{ $intent->client_secret }}">
+    <meta name="only-authorization" content="true">
+    <meta name="stripe-token" content="">
+@endsection
+
+@section('gateway_content')
+    <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>
+
+    <div class="alert alert-failure mb-4" hidden id="errors"></div>
+
+    @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
+        {{ ctrans('texts.credit_card') }} (Stripe)
+    @endcomponent
+
+    @include('portal.ninja2020.gateways.stripe.includes.card_widget')
+
+    @component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'authorize-card'])
+        {{ __('texts.save') }}
+    @endcomponent
+@endsection
+
+@section('gateway_footer')
+    <script src="https://js.stripe.com/v3/"></script>
+    <script src="{{ asset('js/clients/payments/stripe-credit-card.js') }}"></script>
+@endsection

webpack.mix.js

@@ -2,10 +2,6 @@ const mix = require("laravel-mix");
 const tailwindcss = require("tailwindcss");
 
 mix.js("resources/js/app.js", "public/js")
-    .js(
-        "resources/js/clients/payment_methods/authorize-stripe-card.js",
-        "public/js/clients/payment_methods/authorize-stripe-card.js"
-    )
     .js(
         "resources/js/clients/payment_methods/authorize-authorize-card.js",
         "public/js/clients/payment_methods/authorize-authorize-card.js"
@@ -47,8 +43,8 @@ mix.js("resources/js/app.js", "public/js")
         "public/js/clients/quotes/approve.js"
     )
     .js(
-        "resources/js/clients/payments/process.js",
-        "public/js/clients/payments/process.js"
+        "resources/js/clients/payments/stripe-credit-card.js",
+        "public/js/clients/payments/stripe-credit-card.js"
     )
     .js(
         "resources/js/setup/setup.js",