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,66 +85,89 @@ export const usePayment = ({
     }, [products, activeProduct]);
 
     useEffect(() => {
-        if ((!activeProduct || !token) && !isAnonymous) return;
+        const checkCollectJSLoaded = () => {
-
+            if (window.CollectJS) {
-        const config: any = {
+                setIsCollectJSLoaded(true);
-            variant: paymentFormType,
+                return true;
-            callback: (token: any) => {
+            }
-                finishSubmit(token);
+            return false;
-            },
-            paymentSelector: '#customPayButton',
-            primaryColor: '#066fde',
-            theme: "material",
-            price: formPrice,
-            styleSniffer: true,
-            customCss: {
-                "background-color": "#F0F5FF",
-                "height": "51px",
-                "padding": "11px 0",
-                "letter-spacing": "6px",
-                "border": "none",
-                "font-size": "18px",
-                "margin-right": "auto",
-                "margin-left": "auto"
-            },
-            focusCss: {
-                "border": "none",
-            },
-            placeholderCss: {
-                "letter-spacing": "6px",
-                "font-size": "18px",
-            },
-            fields: {
-                ccnumber: {
-                    placeholder: '____ ____ ____ ____',
-                    selector: '#card-number',
-                    title: "Card Number",
-                    // enableCardBrandPreviews: true
-                },
-                ccexp: {
-                    placeholder: '__ / __',
-                    selector: '#card-expiry',
-                    title: "Card Expiry"
-                },
-                cvv: {
-                    placeholder: 'CVC',
-                    selector: '#card-cvv',
-                    title: "Card CVC",
-                    // display: "hide"
-                }
-            },
-            validationCallback: (field: string, status: boolean, message: string) => {
-                setFormValidation(prev => ({
-                    ...prev,
-                    [field]: {
-                        isValid: status,
-                        message: status ? '' : message
-                    }
-                }));
-            },
         };
 
-        window.CollectJS?.configure(config);
+        const configureCollectJS = () => {
+            if (!checkCollectJSLoaded()) {
+                console.warn('CollectJS not loaded yet, retrying...');
+                return false;
+            }
+
+            const config: any = {
+                variant: paymentFormType,
+                callback: (token: any) => {
+                    finishSubmit(token);
+                },
+                paymentSelector: '#customPayButton',
+                primaryColor: '#066fde',
+                theme: "material",
+                price: formPrice,
+                styleSniffer: true,
+                customCss: {
+                    "background-color": "#F0F5FF",
+                    "height": "51px",
+                    "padding": "11px 0",
+                    "letter-spacing": "6px",
+                    "border": "none",
+                    "font-size": "18px",
+                    "margin-right": "auto",
+                    "margin-left": "auto"
+                },
+                focusCss: {
+                    "border": "none",
+                },
+                placeholderCss: {
+                    "letter-spacing": "6px",
+                    "font-size": "18px",
+                },
+                fields: {
+                    ccnumber: {
+                        placeholder: '____ ____ ____ ____',
+                        selector: '#card-number',
+                        title: "Card Number",
+                        // enableCardBrandPreviews: true
+                    },
+                    ccexp: {
+                        placeholder: '__ / __',
+                        selector: '#card-expiry',
+                        title: "Card Expiry"
+                    },
+                    cvv: {
+                        placeholder: 'CVC',
+                        selector: '#card-cvv',
+                        title: "Card CVC",
+                        // display: "hide"
+                    }
+                },
+                validationCallback: (field: string, status: boolean, message: string) => {
+                    setFormValidation(prev => ({
+                        ...prev,
+                        [field]: {
+                            isValid: status,
+                            message: status ? '' : message
+                        }
+                    }));
+                },
+            };
+            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 />}