Improved the way the PayPal integration works

src/pages/payment.tsx

@@ -5,7 +5,6 @@ import {sessionOptions} from "@/lib/session";
 import useUser from "@/hooks/useUser";
 import PaymentDue from "./(status)/PaymentDue";
 import {useRouter} from "next/router";
-import {PayPalScriptProvider} from "@paypal/react-paypal-js";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -50,16 +49,12 @@ export default function Home({envVariables}: {envVariables: {[key: string]: stri
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			{user && (
-				<PayPalScriptProvider
-					options={{
-						clientId: envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || "",
-						currency: "EUR",
-						intent: "capture",
-						commit: true,
-						vault: true,
-					}}>
-					<PaymentDue user={user} reload={router.reload} />
-				</PayPalScriptProvider>
+				<PaymentDue
+					key={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"]}
+					clientID={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || ""}
+					user={user}
+					reload={router.reload}
+				/>
 			)}
 		</>
 	);