From 58a3cc69a9f3df7102a863f1bea37b2151136caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= <k1pstabug@gmail.com>
Date: Tue, 29 Sep 2020 12:46:28 +0200
Subject: [PATCH] Stripe: Pay with credit card

---
 resources/js/clients/payments/process.js         | 15 +++++++++------
 .../gateways/stripe/credit_card.blade.php        | 16 ++++++++++------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/resources/js/clients/payments/process.js b/resources/js/clients/payments/process.js
index 2f00c94d285d..4772de550bff 100644
--- a/resources/js/clients/payments/process.js
+++ b/resources/js/clients/payments/process.js
@@ -39,7 +39,8 @@ class ProcessStripePayment {
         this.payNowButton = payNowButton;
         this.payNowButton.disabled = true;
 
-        processingOverlay(true);
+        this.payNowButton.querySelector('svg').classList.remove('hidden');
+        this.payNowButton.querySelector('span').classList.add('hidden');
 
         this.stripe
             .handleCardPayment(payNowButton.dataset.secret, {
@@ -57,11 +58,14 @@ class ProcessStripePayment {
     completePaymentWithoutToken() {
         let payNowButton = document.getElementById('pay-now');
         this.payNowButton = payNowButton;
+        
+        this.payNowButton.disabled = true;
+
+        this.payNowButton.querySelector('svg').classList.remove('hidden');
+        this.payNowButton.querySelector('span').classList.add('hidden');
 
         let cardHolderName = document.getElementById('cardholder-name');
 
-        processingOverlay(true);
-
         this.stripe
             .handleCardPayment(payNowButton.dataset.secret, this.cardElement, {
                 payment_method_data: {
@@ -82,8 +86,6 @@ class ProcessStripePayment {
     }
 
     handleSuccess(result) {
-        processingOverlay(false);
-
         document.querySelector(
             'input[name="gateway_response"]'
         ).value = JSON.stringify(result.paymentIntent);
@@ -107,8 +109,9 @@ class ProcessStripePayment {
         errors.textContent = message;
         errors.hidden = false;
 
-        processingOverlay(false);
         this.payNowButton.disabled = false;
+        this.payNowButton.querySelector('svg').classList.add('hidden');
+        this.payNowButton.querySelector('span').classList.remove('hidden');
     }
 
     handle() {
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
index e2b40fe4f885..dcce02532b66 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
@@ -69,11 +69,11 @@
                                         data-token="{{ $token->token }}"
                                         id="pay-now-with-token"
                                         class="button button-primary inline-flex items-center">
-                                            <svg class="hidden animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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>
-                                        {{ ctrans('texts.pay_now') }}
+                                        <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>
                             @else
@@ -131,7 +131,11 @@
                                         id="pay-now"
                                         data-secret="{{ $intent->client_secret }}"
                                         class="button button-primary">
-                                        {{ ctrans('texts.pay_now') }}
+                                        <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