diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx index 94487c0..fdd0a92 100644 --- a/components/checkout/PaymentForm.tsx +++ b/components/checkout/PaymentForm.tsx @@ -1,11 +1,9 @@ 'use client' import { useEffect, useRef, useState } from 'react' -import { useRouter, useSearchParams } from 'next/navigation' +import { useRouter } from 'next/navigation' import Script from 'next/script' import { Lock, ShieldCheck } from '@phosphor-icons/react' -import { Select } from '@ciphera-net/ui' -import { COUNTRY_OPTIONS } from '@/lib/countries' import { initMollie, getMollie, MOLLIE_FIELD_STYLES, type MollieComponent } from '@/lib/mollie' import { createEmbeddedCheckout } from '@/lib/api/billing' @@ -13,20 +11,16 @@ interface PaymentFormProps { plan: string interval: string limit: number + country: string + vatId: string } -const inputClass = - 'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors' const mollieFieldBase = 'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-3 h-[48px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange' -export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) { +export default function PaymentForm({ plan, interval, limit, country, vatId }: PaymentFormProps) { const router = useRouter() - const searchParams = useSearchParams() - const currentInterval = searchParams.get('interval') || interval - const [country, setCountry] = useState('') - const [vatId, setVatId] = useState('') const [mollieReady, setMollieReady] = useState(false) const [mollieError, setMollieError] = useState(false) const [formError, setFormError] = useState(null) @@ -130,7 +124,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) const result = await createEmbeddedCheckout({ plan_id: plan, - interval: currentInterval, + interval: interval, limit, country, vat_id: vatId || undefined, @@ -209,31 +203,6 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) - {/* Country */} -
- - setVatId(e.target.value)} - placeholder="e.g. BE0123456789" - className={inputClass} - /> -
- {/* Form / API errors */} {formError && (
@@ -246,7 +215,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
Card fields could not load.{' '} Use the hosted checkout instead