From 3e7a32dc91e034bfc4b2eafe431d4c780ca3c4c7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:11:30 +0100
Subject: [PATCH] fix: use correct mollie component types (expiryDate,
 verificationCode)

---
 components/checkout/PaymentForm.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 85e8c2a..780c27e 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -34,8 +34,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
 
   const componentsRef = useRef<Record<string, MollieComponent | null>>({
     cardNumber: null,
-    cardExpiry: null,
-    cardCvc: null,
+    expiryDate: null,
+    verificationCode: null,
   })
 
   const [scriptLoaded, setScriptLoaded] = useState(false)
@@ -55,8 +55,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
       try {
         const fields: Array<{ type: string; selector: string }> = [
           { type: 'cardNumber', selector: '#mollie-card-number' },
-          { type: 'cardExpiry', selector: '#mollie-card-expiry' },
-          { type: 'cardCvc', selector: '#mollie-card-cvc' },
+          { type: 'expiryDate', selector: '#mollie-card-expiry' },
+          { type: 'verificationCode', selector: '#mollie-card-cvc' },
         ]
 
         for (const { type, selector } of fields) {
@@ -176,8 +176,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
                 <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
               )}
             </div>
-            {cardErrors.cardExpiry && (
-              <p className="mt-1 text-xs text-red-400">{cardErrors.cardExpiry}</p>
+            {cardErrors.expiryDate && (
+              <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
             )}
           </div>
           <div>
@@ -188,8 +188,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
                 <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
               )}
             </div>
-            {cardErrors.cardCvc && (
-              <p className="mt-1 text-xs text-red-400">{cardErrors.cardCvc}</p>
+            {cardErrors.verificationCode && (
+              <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}
           </div>
         </div>