Improved the way the PayPal integration works

src/components/PayPalPayment.tsx

@@ -1,11 +1,12 @@
 import {DurationUnit} from "@/interfaces/paypal";
 import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OnCancelledActions, OrderResponseBody} from "@paypal/paypal-js";
-import {PayPalButtons, usePayPalScriptReducer} from "@paypal/react-paypal-js";
+import {PayPalButtons, PayPalScriptProvider, usePayPalScriptReducer} from "@paypal/react-paypal-js";
 import axios from "axios";
 import {useEffect, useState} from "react";
 import {toast} from "react-toastify";
 
 interface Props {
+	clientID: string;
 	currency: string;
 	price: number;
 	duration: number;
@@ -14,20 +15,7 @@ interface Props {
 	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
 }
 
-export default function PayPalPayment({price, currency, duration, duration_unit, setIsLoading, onSuccess}: Props) {
-	const [{options}, dispatch] = usePayPalScriptReducer();
-
-	useEffect(() => {
-		dispatch({
-			type: "resetOptions",
-			value: {
-				...options,
-				currency,
-			},
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [currency]);
-
+export default function PayPalPayment({clientID, price, currency, duration, duration_unit, setIsLoading, onSuccess}: Props) {
 	const createOrder = async (data: CreateOrderData, actions: CreateOrderActions): Promise<string> => {
 		setIsLoading(true);
 
@@ -58,6 +46,14 @@ export default function PayPalPayment({price, currency, duration, duration_unit,
 	};
 
 	return (
+		<PayPalScriptProvider
+			options={{
+				clientId: clientID,
+				currency,
+				intent: "capture",
+				commit: true,
+				vault: true,
+			}}>
 			<PayPalButtons
 				className="w-full"
 				style={{layout: "vertical"}}
@@ -65,5 +61,6 @@ export default function PayPalPayment({price, currency, duration, duration_unit,
 				onApprove={onApprove}
 				onCancel={onCancel}
 				onError={onError}></PayPalButtons>
+		</PayPalScriptProvider>
 	);
 }

src/pages/(status)/PaymentDue.tsx

@@ -1,25 +1,23 @@
 /* eslint-disable @next/next/no-img-element */
 import Layout from "@/components/High/Layout";
 import PayPalPayment from "@/components/PayPalPayment";
-import ProfileSummary from "@/components/ProfileSummary";
 import useGroups from "@/hooks/useGroups";
 import usePackages from "@/hooks/usePackages";
-import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
-import {Package} from "@/interfaces/paypal";
 import {User} from "@/interfaces/user";
-import {averageScore, groupBySession} from "@/utils/stats";
 import clsx from "clsx";
 import {capitalize} from "lodash";
-import Head from "next/head";
 import {useState} from "react";
-import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
 import getSymbolFromCurrency from "currency-symbol-map";
-import {Divider} from "primereact/divider";
-import Input from "@/components/Low/Input";
-import Button from "@/components/Low/Button";
 
-export default function PaymentDue({user, hasExpired, reload}: {user: User; hasExpired?: boolean; reload: () => void}) {
+interface Props {
+	user: User;
+	hasExpired?: boolean;
+	clientID: string;
+	reload: () => void;
+}
+
+export default function PaymentDue({user, hasExpired = false, clientID, reload}: Props) {
 	const [isLoading, setIsLoading] = useState(false);
 
 	const {packages} = usePackages();
@@ -74,9 +72,11 @@ export default function PaymentDue({user, hasExpired, reload}: {user: User; hasE
 													{getSymbolFromCurrency(p.currency)}
 												</span>
 												<PayPalPayment
+													key={clientID}
 													{...p}
+													clientID={clientID}
 													setIsLoading={setIsLoading}
-													onSuccess={(duration, duration_unit) => {
+													onSuccess={() => {
 														setTimeout(reload, 500);
 													}}
 												/>
@@ -110,12 +110,14 @@ export default function PaymentDue({user, hasExpired, reload}: {user: User; hasE
 											{getSymbolFromCurrency(user.corporateInformation.payment.currency)}
 										</span>
 										<PayPalPayment
+											key={clientID}
+											clientID={clientID}
 											setIsLoading={setIsLoading}
 											currency={user.corporateInformation.payment.currency}
 											price={user.corporateInformation.payment.value}
 											duration={user.corporateInformation.monthlyDuration}
 											duration_unit="months"
-											onSuccess={(duration, duration_unit) => {
+											onSuccess={() => {
 												setIsLoading(false);
 												setTimeout(reload, 500);
 											}}

src/pages/index.tsx

@@ -102,16 +102,13 @@ export default function Home({envVariables}: {envVariables: {[key: string]: stri
 					</Layout>
 				)}
 				{(user.status === "paymentDue" || checkIfUserExpired()) && (
-					<PayPalScriptProvider
-						options={{
-							clientId: envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || "",
-							currency: "EUR",
-							intent: "capture",
-							commit: true,
-							vault: true,
-						}}>
-						<PaymentDue hasExpired user={user} reload={router.reload} />
-					</PayPalScriptProvider>
+					<PaymentDue
+						key={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"]}
+						hasExpired
+						user={user}
+						reload={router.reload}
+						clientID={envVariables["NEXT_PUBLIC_PAYPAL_CLIENT_ID"] || ""}
+					/>
 				)}
 			</>
 		);

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}
+				/>
 			)}
 		</>
 	);