Improve user notifications during pre-authentication and confirmation

CRM/Stripe/AJAX.php

@@ -9,6 +9,8 @@
  +--------------------------------------------------------------------+
  */
 
+use CRM_Stripe_ExtensionUtil as E;
+
 /**
  * Class CRM_Stripe_AJAX
  */
@@ -154,7 +156,13 @@ class CRM_Stripe_AJAX {
     }
     else {
       // Invalid status
-      CRM_Utils_JSON::output(['error' => ['message' => 'Invalid PaymentIntent status: ' . $intent->status]]);
+      if (isset($intent->last_payment_error->message)) {
+        $message = E::ts('Payment failed: %1', [1 => $intent->last_payment_error->message]);
+      }
+      else {
+        $message = E::ts('Payment failed.');
+      }
+      CRM_Utils_JSON::output(['error' => ['message' => $message]]);
     }
   }
 

js/civicrmStripeConfirm.js

@@ -14,6 +14,10 @@
       if (result.error) {
         // Show error from server on payment form
         CRM.payment.debugging(confirm.scriptName, result.error.message);
+        confirm.swalFire({
+          title: result.error.message,
+          icon: 'error',
+        });
       }
       else
         if (result.requires_action) {
@@ -23,6 +27,10 @@
         else {
           // All good, nothing more to do
           CRM.payment.debugging(confirm.scriptName, 'success - payment captured');
+          confirm.swalFire({
+            title: 'Payment successful',
+            icon: 'success',
+          });
         }
     },
 
@@ -62,6 +70,13 @@
 
     handleCardConfirm: function() {
       CRM.payment.debugging(confirm.scriptName, 'handle card confirm');
+      confirm.swalFire({
+        title: 'Please wait...',
+        allowOutsideClick: false,
+        onBeforeOpen: () => {
+          Swal.showLoading();
+        },
+      });
       // Send paymentMethod.id to server
       var url = CRM.url('civicrm/stripe/confirm-payment');
       $.post(url, {
@@ -70,10 +85,15 @@
         id: CRM.vars.stripe.id,
         description: document.title,
         csrfToken: CRM.vars.stripe.csrfToken,
-      }).then(function (result) {
-        // Handle server response (see Step 3)
-        confirm.handleServerResponse(result);
-      });
+      })
+        .done(function (result) {
+          confirm.swalClose();
+          // Handle server response (see Step 3)
+          confirm.handleServerResponse(result);
+        })
+        .fail(function() {
+          confirm.swalClose();
+        });
     },
 
     checkAndLoad: function () {
@@ -103,6 +123,18 @@
           });
       }
     },
+
+    swalFire: function(parameters) {
+      if (typeof Swal === 'function') {
+        Swal.fire(parameters);
+      }
+    },
+
+    swalClose: function() {
+      if (typeof Swal === 'function') {
+        Swal.close();
+      }
+    }
   };
 
   if (typeof CRM.payment === 'undefined') {

js/civicrm_stripe.js

@@ -86,7 +86,7 @@ CRM.$(function($) {
     var errorElement = document.getElementById('card-errors');
     errorElement.style.display = 'block';
     errorElement.textContent = errorMessage;
-    form.dataset.submitted = false;
+    form.dataset.submitted = 'false';
     if (typeof submitButtons !== 'undefined') {
       for (i = 0; i < submitButtons.length; ++i) {
         submitButtons[i].removeAttribute('disabled');
@@ -152,6 +152,14 @@ CRM.$(function($) {
         }
         else {
           // Send paymentMethod.id to server
+          debugging('Waiting for pre-auth');
+          Swal.fire({
+            title: 'Please wait while we pre-authorize your card...',
+            allowOutsideClick: false,
+            onBeforeOpen: () => {
+              Swal.showLoading();
+            },
+          });
           var url = CRM.url('civicrm/stripe/confirm-payment');
           $.post(url, {
             payment_method_id: result.paymentMethod.id,
@@ -160,10 +168,14 @@ CRM.$(function($) {
             id: CRM.vars.stripe.id,
             description: document.title,
             csrfToken: CRM.vars.stripe.csrfToken,
-          }).then(function (result) {
-            // Handle server response (see Step 3)
-            handleServerResponse(result);
-          });
+          })
+            .done(function (result) {
+              // Handle server response (see Step 3)
+              handleServerResponse(result);
+            })
+            .always(function() {
+              Swal.close();
+            });
         }
       }
     });
@@ -270,6 +282,7 @@ CRM.$(function($) {
         dataType: 'script',
         cache: true,
         timeout: 5000,
+        crossDomain: true,
       })
         .done(function(data) {
           stripeLoading = false;
@@ -352,7 +365,7 @@ CRM.$(function($) {
 
     // If another submit button on the form is pressed (eg. apply discount)
     //  add a flag that we can set to stop payment submission
-    form.dataset.submitdontprocess = false;
+    form.dataset.submitdontprocess = 'false';
 
     // Find submit buttons which should not submit payment
     var nonPaymentSubmitButtons = form.querySelectorAll('[type="submit"][formnovalidate="1"], ' +
@@ -365,7 +378,7 @@ CRM.$(function($) {
 
     function submitDontProcess() {
       debugging('adding submitdontprocess');
-      form.dataset.submitdontprocess = true;
+      form.dataset.submitdontprocess = 'true';
     }
 
     for (i = 0; i < submitButtons.length; ++i) {
@@ -373,17 +386,13 @@ CRM.$(function($) {
     }
 
     function submitButtonClick(event) {
-      if (form.dataset.submitted === true) {
-        return;
-      }
-      form.dataset.submitted = true;
       // Take over the click function of the form.
       if (typeof CRM.vars.stripe === 'undefined') {
         // Submit the form
         return nonStripeSubmit();
       }
       debugging('clearing submitdontprocess');
-      form.dataset.submitdontprocess = false;
+      form.dataset.submitdontprocess = 'false';
 
       // Run through our own submit, that executes Stripe submission if
       // appropriate for this submit.
@@ -420,6 +429,11 @@ CRM.$(function($) {
       event.preventDefault();
       debugging('submit handler');
 
+      if (form.dataset.submitted === 'true') {
+        return;
+      }
+      form.dataset.submitted = 'true';
+
       if (($(form).valid() === false) || $(form).data('crmBillingFormValid') === false) {
         debugging('Form not valid');
         $('div#card-errors').hide();
@@ -462,11 +476,6 @@ CRM.$(function($) {
         return true;
       }
 
-      if (form.dataset.submitted === true) {
-        debugging('form already submitted');
-        return false;
-      }
-
       var stripeProcessorId = parseInt(CRM.vars.stripe.id);
       var chosenProcessorId = null;
 
@@ -510,7 +519,7 @@ CRM.$(function($) {
         return true;
       }
       // Don't handle submits generated by the CiviDiscount button.
-      if (form.dataset.submitdontprocess === true) {
+      if (form.dataset.submitdontprocess === 'true') {
         debugging('non-payment submit detected - not submitting payment');
         return true;
       }
@@ -538,16 +547,6 @@ CRM.$(function($) {
         return nonStripeSubmit();
       }
 
-      // Lock to prevent multiple submissions
-      if (form.dataset.submitted === true) {
-        // Previously submitted - don't submit again
-        alert('Form already submitted. Please wait.');
-        return false;
-      } else {
-        // Mark it so that the next submit can be ignored
-        form.dataset.submitted = true;
-      }
-
       // Disable the submit button to prevent repeated clicks
       for (i = 0; i < submitButtons.length; ++i) {
         submitButtons[i].setAttribute('disabled', true);
@@ -723,7 +722,7 @@ CRM.$(function($) {
         if (event.code === 'Enter') {
           event.preventDefault();
           debugging('adding submitdontprocess');
-          form.dataset.submitdontprocess = true;
+          form.dataset.submitdontprocess = 'true';
         }
     };