fix(#2515): roll-back stripe to version clover and lock it in

.gitignore

@@ -7,6 +7,7 @@ vendor/
 node_modules/
 composer.lock
 yarn.lock
+.pnpm-store/
 
 yarn-error.log
 lerna-debug.log

packages/scripts/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@friendlycaptcha/sdk": "^1.0.0",
     "@paypal/paypal-js": "^9.6.0",
-    "@stripe/stripe-js": "^9.1.0",
+    "@stripe/stripe-js": "^8.11.0",
     "expression-language": "^2.5.4"
   },
   "devDependencies": {

packages/scripts/src/components/front-end/payments/stripe/elements.config.ts

@@ -1,29 +1,27 @@
 import type { Stripe } from "@stripe/stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
-
+import { loadStripe } from "@stripe/stripe-js/pure";
 import type { Config } from "./elements.types";
 
+const selector = "[data-freeform-stripe-card][data-config]";
 const stripeInstances = new Map<string, Stripe>();
 
-const config = (container: HTMLDivElement): Config | undefined => {
-  const configElement = container.querySelector<HTMLScriptElement>(
-    "[data-freeform-stripe-card][data-config]",
-  );
+const config = (container: HTMLDivElement): Config => {
+  const configElement = container.querySelector<HTMLScriptElement>(selector);
   if (!configElement) {
-    return undefined;
+    throw new Error("Stripe config element not found");
   }
 
-  const config = JSON.parse(configElement.dataset.config) as Config;
+  const config = JSON.parse(configElement.dataset.config || "{}") as Config;
 
   return {
     ...config,
     loadStripe: async (): Promise<Stripe> => {
       if (!stripeInstances.has(config.apiKey)) {
         const stripeInstance = await loadStripe(config.apiKey);
-        stripeInstances.set(config.apiKey, stripeInstance);
+        stripeInstances.set(config.apiKey, stripeInstance!);
       }
 
-      return stripeInstances.get(config.apiKey);
+      return stripeInstances.get(config.apiKey)!;
     },
   };
 };

packages/scripts/src/components/front-end/payments/stripe/elements.init.ts

@@ -9,6 +9,8 @@ import queries from "./elements.queries";
 import { isHidden } from "./elements.selectors";
 import type { StripeFunctionConstructorProps } from "./elements.types";
 
+const intentSelector = "[data-freeform-stripe-intent]";
+
 const workers: string[] = [];
 const initializedContainers = new WeakSet<HTMLDivElement>();
 
@@ -45,8 +47,8 @@ export const initStripe =
     }
 
     let stripe: Stripe;
-    if (elementMap.has(field) && elementMap.get(field).stripe) {
-      stripe = elementMap.get(field).stripe;
+    if (elementMap.has(field) && elementMap.get(field)?.stripe) {
+      stripe = elementMap.get(field)!.stripe;
     } else {
       stripe = await getStripe();
     }
@@ -67,9 +69,9 @@ export const initStripe =
       .create(integration, form, site)
       .then(({ data: { id, secret } }) => {
         // Set the PaymentIntent ID as the field value
-        field.parentElement.querySelector<HTMLInputElement>(
-          "[data-freeform-stripe-intent]",
-        ).value = id;
+        field.parentElement!.querySelector<HTMLInputElement>(
+          intentSelector,
+        )!.value = id;
 
         const { elementOptions, paymentOptions } = generateElementOptions({
           theme,

packages/scripts/src/components/front-end/payments/stripe/elements.submit.ts

@@ -9,6 +9,8 @@ import {
 } from "./elements.selectors";
 import type { StripeFunctionConstructorProps } from "./elements.types";
 
+const cardSelector = "[data-freeform-stripe-card]";
+
 export const loadStripeContainers =
   (props: StripeFunctionConstructorProps) => async () => {
     const { form } = props;
@@ -33,15 +35,19 @@ export const submitStripe =
       const containers = selectVisibleContainers(form);
       for (const container of containers) {
         const { required, integration, site } = config(container);
-        const field = container.querySelector<HTMLDivElement>(
-          "[data-freeform-stripe-card]",
-        );
+        const field = container.querySelector<HTMLDivElement>(cardSelector)!;
+
+        const element = elementMap.get(field);
+        if (!element) {
+          throw new Error("Stripe element not found for container");
+        }
+
         const {
           empty,
           stripe,
           elements,
           paymentIntent: { id, secret },
-        } = elementMap.get(field);
+        } = element;
 
         if (empty && !required) {
           continue;
@@ -68,7 +74,10 @@ export const submitStripe =
 
         const { error: submitError } = await elements.submit();
         if (submitError) {
-          event.freeform._renderFormErrors([submitError.message]);
+          event.freeform._renderFormErrors([
+            submitError.message ||
+              "An error occurred while submitting the payment.",
+          ]);
           event.freeform._scrollToForm();
           return false;
         }
@@ -81,7 +90,9 @@ export const submitStripe =
         });
 
         if (error) {
-          event.freeform._renderFormErrors([error.message]);
+          event.freeform._renderFormErrors([
+            error.message || "An error occurred while confirming the payment.",
+          ]);
           event.freeform._scrollToForm();
         }
 

packages/scripts/src/components/front-end/payments/stripe/elements.ts

@@ -47,12 +47,13 @@ document.addEventListener("DOMContentLoaded", () => {
   document.dispatchEvent(new CustomEvent(ffStripeEvents.load));
 });
 
-const recursiveFreeformAttachment = (node: HTMLFormElement) => {
-  if (node.nodeName === "FORM" || node.dataset?.freeform !== undefined) {
-    attachStripeToForm(node);
+const recursiveFreeformAttachment = (node: HTMLFormElement | ChildNode) => {
+  const element = node as HTMLElement;
+  if (element.nodeName === "FORM" || element.dataset?.freeform !== undefined) {
+    attachStripeToForm(node as HTMLFormElement);
   }
 
-  node?.childNodes.forEach(recursiveFreeformAttachment);
+  element?.childNodes.forEach(recursiveFreeformAttachment);
 };
 
 // Add an observer which listens for new forms