fix: mount mollie components after DOM ready via useEffect

components/checkout/PaymentForm.tsx

@@ -38,7 +38,14 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
     cardCvc: null,
   })
 
-  const mountMollieComponents = () => {
+  const [scriptLoaded, setScriptLoaded] = useState(false)
+
+  // Mount Mollie components AFTER both script loaded AND DOM elements exist
+  useEffect(() => {
+    if (!scriptLoaded) return
+
+    // Small delay to ensure DOM elements are painted
+    const timer = setTimeout(() => {
       const mollie = initMollie()
       if (!mollie) {
         setMollieError(true)
@@ -53,8 +60,13 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         ]
 
         for (const { type, selector } of fields) {
+          const el = document.querySelector(selector)
+          if (!el) {
+            setMollieError(true)
+            return
+          }
           const component = mollie.createComponent(type, { styles: MOLLIE_FIELD_STYLES })
-        component.mount(selector)
+          component.mount(el)
           component.addEventListener('change', (event: unknown) => {
             const e = event as { error?: string; touched?: boolean }
             setCardErrors((prev) => {
@@ -68,10 +80,14 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         }
 
         setMollieReady(true)
-    } catch {
+      } catch (err) {
+        console.error('Mollie mount error:', err)
         setMollieError(true)
       }
-  }
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [scriptLoaded])
 
   // Cleanup Mollie components on unmount
   useEffect(() => {
@@ -126,7 +142,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
     <>
       <Script
         src="https://js.mollie.com/v1/mollie.js"
-        onLoad={mountMollieComponents}
+        onLoad={() => setScriptLoaded(true)}
         onError={() => setMollieError(true)}
       />