diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index d1dae06..250653b 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -170,6 +170,8 @@ function CheckoutContent() {
   const planId = plan!
   const billingInterval = interval as 'month' | 'year'
   const pageviewLimit = Number(limit)
+  const [country, setCountry] = useState('')
+  const [vatId, setVatId] = useState('')
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -208,6 +210,10 @@ function CheckoutContent() {
               plan={planId}
               interval={billingInterval}
               limit={pageviewLimit}
+              country={country}
+              vatId={vatId}
+              onCountryChange={setCountry}
+              onVatIdChange={setVatId}
             />
 
             {/* Payment form */}
@@ -215,6 +221,8 @@ function CheckoutContent() {
               plan={planId}
               interval={billingInterval}
               limit={pageviewLimit}
+              country={country}
+              vatId={vatId}
             />
           </motion.div>
         </div>