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

fix: checkout UX — no auto-select payment method, stable price table during loading, add spacing before submit button

Browse Source
This commit is contained in:
Usman Baig
2026-03-27 22:04:09 +01:00
parent a9cf1484fd
commit 6aea24f018
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/checkout/PaymentForm.tsx
View File

@@ -57,7 +57,7 @@ const mollieFieldBase =
export default function PaymentForm({ plan, interval, limit, country, vatId }: PaymentFormProps) {
const router = useRouter()
const [selectedMethod, setSelectedMethod] = useState('card')
const [selectedMethod, setSelectedMethod] = useState('')
const [mollieReady, setMollieReady] = useState(false)
const [mollieError, setMollieError] = useState(false)
const [formError, setFormError] = useState<string | null>(null)
@@ -141,6 +141,11 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
setSubmitted(true)
setFormError(null)
if (!selectedMethod) {
setFormError('Please select a payment method')
return
}
if (!country) {
setFormError('Please select your country')
return
@@ -319,8 +324,8 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
{/* Submit */}
<button
type="submit"
disabled={submitting || (isCard && !mollieReady && !mollieError)}
className="w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={submitting || !selectedMethod || (isCard && !mollieReady && !mollieError)}
className="mt-4 w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
>
{submitting ? 'Processing...' : 'Start free trial'}
</button>