diff --git a/src/components/PricingTable.tsx b/src/components/PricingTable.tsx
index 9ac56bc..95a8cb8 100644
--- a/src/components/PricingTable.tsx
+++ b/src/components/PricingTable.tsx
@@ -2,26 +2,26 @@
 
 import {Elements} from "@stripe/react-stripe-js";
 import {loadStripe} from "@stripe/stripe-js";
-import React from "react";
 import {useEffect} from "react";
 
 const stripePromise = loadStripe("pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHaxsrjjB7WqDYqN7Y3eF8mq3sF354F00l30L5GuJ");
 
 export default function PricingTable() {
 	useEffect(() => {
-		const script = document.createElement("script");
-		script.src = "https://js.stripe.com/v3/pricing-table.js";
-		script.async = true;
-		document.body.appendChild(script);
-		return () => {
-			document.body.removeChild(script);
-		};
+		console.log(process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE, process.env.NEXT_PUBLIC_STRIPE_KEY);
 	}, []);
-	return React.createElement("stripe-pricing-table", {
-		id: process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE,
-		"pricing-table-id": process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE,
-		"publishable-key": process.env.NEXT_PUBLIC_STRIPE_KEY,
-	});
+
+	return (
+		<Elements stripe={stripePromise}>
+			<div id={process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE}>
+				<stripe-pricing-table
+					id="pricing"
+					pricing-table-id={process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE}
+					publishable-key={process.env.NEXT_PUBLIC_STRIPE_KEY}
+				/>
+			</div>
+		</Elements>
+	);
 }
 
 // If using TypeScript, add the following snippet to your file as well.