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

Add Mollie checkout flow, billing UI, and payment UX polish #71

Merged
uz1mani merged 73 commits from staging into main 2026-03-28 10:28:03 +00:00
Conversation 0 Commits 73 Files Changed 39 +839 -100
13 changed files with 839 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4c6020535a - Show all commits

20
components/checkout/PaymentForm.tsx
View File

@@ -162,7 +162,10 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
{/* Cardholder name */} {/* Cardholder name */}
<div className="mb-4"> <div className="mb-4">
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label> <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
<div id="mollie-card-holder" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} /> <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
<div id="mollie-card-holder" className={mollieFieldBase} />
</div>
{!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
{submitted && cardErrors.cardHolder && ( {submitted && cardErrors.cardHolder && (
<p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p> <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
)} )}
@@ -171,7 +174,10 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
{/* Card number */} {/* Card number */}
<div className="mb-4"> <div className="mb-4">
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label> <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
<div id="mollie-card-number" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} /> <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
<div id="mollie-card-number" className={mollieFieldBase} />
</div>
{!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
{submitted && cardErrors.cardNumber && ( {submitted && cardErrors.cardNumber && (
<p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p> <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
)} )}
@@ -181,14 +187,20 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
<div className="mb-4 grid grid-cols-2 gap-4"> <div className="mb-4 grid grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label> <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
<div id="mollie-card-expiry" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} /> <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
<div id="mollie-card-expiry" className={mollieFieldBase} />
</div>
{!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
{submitted && cardErrors.expiryDate && ( {submitted && cardErrors.expiryDate && (
<p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p> <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
)} )}
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label> <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
<div id="mollie-card-cvc" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} /> <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
<div id="mollie-card-cvc" className={mollieFieldBase} />
</div>
{!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
{submitted && cardErrors.verificationCode && ( {submitted && cardErrors.verificationCode && (
<p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p> <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
)} )}