develop

src/components/CompatibilityV2/pages/TrialPayment/styles.module.scss

@@ -26,6 +26,7 @@
   font-size: 20px;
   font-weight: 500;
   margin-top: 22px;
+  line-height: 1 !important;
 }
 
 .as-seen-in {

src/components/PalmistryV1/pages/TrialPayment/styles.module.scss

@@ -26,6 +26,7 @@
   font-size: 20px;
   font-weight: 500;
   margin-top: 22px;
+  line-height: 1 !important;
 }
 
 .as-seen-in {

src/hooks/payment/nmi/usePayment.ts

@@ -51,6 +51,7 @@ export const usePayment = ({
         ccexp: { isValid: false, message: '' },
         cvv: { isValid: false, message: '' }
     });
+    const [isCollectJSLoaded, setIsCollectJSLoaded] = useState(false);
 
     const { anonymousAuthorization } = useAuthentication();
 
@@ -84,7 +85,19 @@ export const usePayment = ({
     }, [products, activeProduct]);
 
     useEffect(() => {
-        if ((!activeProduct || !token) && !isAnonymous) return;
+        const checkCollectJSLoaded = () => {
+            if (window.CollectJS) {
+                setIsCollectJSLoaded(true);
+                return true;
+            }
+            return false;
+        };
+
+        const configureCollectJS = () => {
+            if (!checkCollectJSLoaded()) {
+                console.warn('CollectJS not loaded yet, retrying...');
+                return false;
+            }
 
             const config: any = {
                 variant: paymentFormType,
@@ -142,8 +155,19 @@ export const usePayment = ({
                     }));
                 },
             };
-
             window.CollectJS?.configure(config);
+            return true;
+        };
+
+        if ((!activeProduct || !token) && !isAnonymous) return;
+
+        const retryInterval = setInterval(() => {
+            if (configureCollectJS()) {
+                clearInterval(retryInterval);
+            }
+        }, 1000);
+
+        return () => clearInterval(retryInterval);
     }, [placementId, paywallId, activeProduct, token]);
 
     const finishSubmit = async (response: any) => {
@@ -227,7 +251,8 @@ export const usePayment = ({
         submitInlineForm,
         closeModal,
         formValidation,
-        isFormValid
+        isFormValid,
+        isCollectJSLoaded
     }), [
         isLoading,
         paymentResponse,
@@ -239,6 +264,7 @@ export const usePayment = ({
         submitInlineForm,
         closeModal,
         formValidation,
-        isFormValid
+        isFormValid,
+        isCollectJSLoaded
     ])
 }

src/routerComponents/Compatibility/v2/index.tsx

@@ -170,7 +170,9 @@ function CompatibilityV2Routes() {
             <Route
               path={removePrefix(routes.client.compatibilityV2Gender())}
               element={<Gender />}
-            />
+            >
+              <Route path="*" element={<Gender />} />
+            </Route>
             <Route
               path={removePrefix(routes.client.compatibilityV2GenderPartner())}
               element={<GenderPartner />}

src/routerComponents/Palmistry/v1/index.tsx

@@ -164,7 +164,9 @@ function PalmistryV1Routes() {
             <Route
               path={removePrefix(routes.client.palmistryV1Gender())}
               element={<GenderPalmistry />}
-            />
+            >
+              <Route path="*" element={<GenderPalmistry />} />
+            </Route>
             <Route
               path={removePrefix(routes.client.palmistryV1Welcome())}
               element={<FindHappiness />}