Extracted the PayPalScriptProvider

src/components/PayPalPayment.tsx

@@ -11,11 +11,12 @@ interface Props {
 	price: number;
 	duration: number;
 	duration_unit: DurationUnit;
+	loadScript?: boolean;
 	setIsLoading: (isLoading: boolean) => void;
 	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
 }
 
-export default function PayPalPayment({clientID, price, currency, duration, duration_unit, setIsLoading, onSuccess}: Props) {
+export default function PayPalPayment({clientID, price, currency, duration, duration_unit, loadScript, setIsLoading, onSuccess}: Props) {
 	const createOrder = async (data: CreateOrderData, actions: CreateOrderActions): Promise<string> => {
 		setIsLoading(true);
 
@@ -45,7 +46,7 @@ export default function PayPalPayment({clientID, price, currency, duration, dura
 		setIsLoading(false);
 	};
 
-	return (
+	return loadScript ? (
 		<PayPalScriptProvider
 			options={{
 				clientId: clientID,
@@ -60,7 +61,17 @@ export default function PayPalPayment({clientID, price, currency, duration, dura
 				createOrder={createOrder}
 				onApprove={onApprove}
 				onCancel={onCancel}
-				onError={onError}></PayPalButtons>
+				onError={onError}
+			/>
 		</PayPalScriptProvider>
+	) : (
+		<PayPalButtons
+			className="w-full"
+			style={{layout: "vertical"}}
+			createOrder={createOrder}
+			onApprove={onApprove}
+			onCancel={onCancel}
+			onError={onError}
+		/>
 	);
 }