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,12 +46,21 @@ export default function PayPalPayment({price, currency, duration, duration_unit,
 	};
 
 	return (
-		<PayPalButtons
-			className="w-full"
-			style={{layout: "vertical"}}
-			createOrder={createOrder}
-			onApprove={onApprove}
-			onCancel={onCancel}
-			onError={onError}></PayPalButtons>
+		<PayPalScriptProvider
+			options={{
+				clientId: clientID,
+				currency,
+				intent: "capture",
+				commit: true,
+				vault: true,
+			}}>
+			<PayPalButtons
+				className="w-full"
+				style={{layout: "vertical"}}
+				createOrder={createOrder}
+				onApprove={onApprove}
+				onCancel={onCancel}
+				onError={onError}></PayPalButtons>
+		</PayPalScriptProvider>
 	);
 }