ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: use correct mollie component types (expiryDate, verificationCode)

Browse Source
This commit is contained in:
Usman Baig
2026-03-26 22:11:30 +01:00
parent e089640fb9
commit 3e7a32dc91
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/checkout/PaymentForm.tsx
View File

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