Created a webhook to allow the transaction to be completed

src/pages/(status)/PaymentDue.tsx

@@ -107,44 +107,37 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 									To add to your use of EnCoach, please purchase one of the time packages available below:
 								</span>
 								<div className="flex w-full flex-wrap justify-center gap-8">
-									<PayPalScriptProvider
-										options={{
-											clientId: clientID,
-											currency: "USD",
-											intent: "capture",
-											commit: true,
-										}}>
-										{packages.map((p) => (
-											<div key={p.id} className={clsx("flex flex-col items-start gap-6 rounded-xl bg-white p-4")}>
-												<div className="mb-2 flex flex-col items-start">
-													<img src="/logo_title.png" alt="EnCoach's Logo" className="w-32" />
-													<span className="text-xl font-semibold">
-														EnCoach - {p.duration}{" "}
-														{capitalize(
-															p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit,
-														)}
+									{packages.map((p) => (
+										<div key={p.id} className={clsx("flex flex-col items-start gap-6 rounded-xl bg-white p-4")}>
+											<div className="mb-2 flex flex-col items-start">
+												<img src="/logo_title.png" alt="EnCoach's Logo" className="w-32" />
+												<span className="text-xl font-semibold">
+													EnCoach - {p.duration}{" "}
+													{capitalize(
+														p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit,
+													)}
+												</span>
+											</div>
+											<div className="flex w-full flex-col items-start gap-2">
+												{!appliedDiscount && (
+													<span className="text-2xl">
+														{p.price}
+														{getSymbolFromCurrency(p.currency)}
 													</span>
-												</div>
-												<div className="flex w-full flex-col items-start gap-2">
-													{!appliedDiscount && (
-														<span className="text-2xl">
+												)}
+												{appliedDiscount && (
+													<div className="flex items-center gap-2">
+														<span className="text-2xl line-through">
 															{p.price}
 															{getSymbolFromCurrency(p.currency)}
 														</span>
-													)}
-													{appliedDiscount && (
-														<div className="flex items-center gap-2">
-															<span className="text-2xl line-through">
-																{p.price}
-																{getSymbolFromCurrency(p.currency)}
-															</span>
-															<span className="text-2xl text-mti-red-light">
-																{(p.price - p.price * (appliedDiscount / 100)).toFixed(2)}
-																{getSymbolFromCurrency(p.currency)}
-															</span>
-														</div>
-													)}
-													{/* <PayPalPayment
+														<span className="text-2xl text-mti-red-light">
+															{(p.price - p.price * (appliedDiscount / 100)).toFixed(2)}
+															{getSymbolFromCurrency(p.currency)}
+														</span>
+													</div>
+												)}
+												{/* <PayPalPayment
                             key={clientID}
                             clientID={clientID}
                             setIsLoading={setIsLoading}
@@ -162,33 +155,31 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
                               ).toFixed(2)
                             }
                           /> */}
-													<PaymobPayment
-														key={clientID}
-														user={user}
-														description="Description"
-														paymentID="123"
-														title="Title"
-														setIsLoading={setIsLoading}
-														onSuccess={() => {
-															setTimeout(reload, 500);
-														}}
-														currency={p.currency}
-														duration={p.duration}
-														duration_unit={p.duration_unit}
-														price={+(p.price - p.price * (appliedDiscount / 100)).toFixed(2)}
-													/>
-												</div>
-												<div className="flex flex-col items-start gap-1">
-													<span>This includes:</span>
-													<ul className="flex flex-col items-start text-sm">
-														<li>- Train your abilities for the IELTS exam</li>
-														<li>- Gain insights into your weaknesses and strengths</li>
-														<li>- Allow yourself to correctly prepare for the exam</li>
-													</ul>
-												</div>
+												<PaymobPayment
+													key={clientID}
+													user={user}
+													setIsPaymentLoading={setIsLoading}
+													packageID={p.id}
+													onSuccess={() => {
+														setTimeout(reload, 500);
+													}}
+													currency={p.currency}
+													duration={p.duration}
+													duration_unit={p.duration_unit}
+													price={+(p.price - p.price * (appliedDiscount / 100)).toFixed(2)}
+												/>
 											</div>
-										))}
-									</PayPalScriptProvider>
+											<div className="flex flex-col items-start gap-1">
+												<span>This includes:</span>
+												<ul className="flex flex-col items-start text-sm">
+													<li>- Train your abilities for the IELTS exam</li>
+													<li>- Gain insights into your weaknesses and strengths</li>
+													<li>- Allow yourself to correctly prepare for the exam</li>
+												</ul>
+											</div>
+										</div>
+									))}
+									z
 								</div>
 							</div>
 						)}