Started implementing the Paymob integration

src/components/PaymobPayment.tsx

@@ -0,0 +1,47 @@
+import {DurationUnit} from "@/interfaces/paypal";
+import {User} from "@/interfaces/user";
+import axios from "axios";
+import {useState} from "react";
+import Button from "./Low/Button";
+
+interface Props {
+	user: User;
+	currency: string;
+	price: number;
+	title: string;
+	description: string;
+	paymentID: string;
+	duration: number;
+	duration_unit: DurationUnit;
+	setIsLoading: (isLoading: boolean) => void;
+	onSuccess: (duration: number, duration_unit: DurationUnit) => void;
+}
+
+export default function PaymobPayment({
+	user,
+	price,
+	currency,
+	title,
+	description,
+	paymentID,
+	duration,
+	duration_unit,
+	setIsLoading,
+	onSuccess,
+}: Props) {
+	const [iframeURL, setIFrameURL] = useState<string>();
+
+	const handleCardPayment = async () => {
+		try {
+		} catch (error) {
+			console.error("Error starting card payment process:", error);
+		}
+	};
+
+	return (
+		<>
+			<Button onClick={handleCardPayment}>Pay</Button>
+			{iframeURL}
+		</>
+	);
+}