Paypal integration improvements

src/components/PayPalPayment.tsx

@@ -70,11 +70,14 @@ export default function PayPalPayment({
       throw new Error("trackingId is not set");
     }
 
-    const request = await axios.post<{ ok: boolean; reason?: string }>(
-      "/api/paypal/approve",
-      { id: data.orderID, duration, duration_unit, trackingId }
-    );
-
+    axios
+      .post<{ ok: boolean; reason?: string }>("/api/paypal/approve", {
+        id: data.orderID,
+        duration,
+        duration_unit,
+        trackingId,
+      })
+      .then((request) => {
         if (request.status !== 200) {
           toast.error("Something went wrong, please try again later");
           return;
@@ -82,6 +85,11 @@ export default function PayPalPayment({
 
         toast.success("Your account has been credited more time!");
         return onSuccess(duration, duration_unit);
+      })
+      .catch((err) => {
+        console.error(err);
+        toast.error("Something went wrong, please try again later");
+      });
   };
 
   const onError = async (data: Record<string, unknown>) => {

src/pages/(status)/PaymentDue.tsx

@@ -15,6 +15,8 @@ import InviteCard from "@/components/Medium/InviteCard";
 import {useRouter} from "next/router";
 import {PayPalScriptProvider} from "@paypal/react-paypal-js";
 import { usePaypalTracking } from "@/hooks/usePaypalTracking";
+import {ToastContainer} from "react-toastify";
+
 
 interface Props {
 	user: User;
@@ -47,6 +49,7 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
 
 	return (
 		<>
+			<ToastContainer />
 			{isLoading && (
 				<div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
 					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-8 text-white">

src/pages/api/paypal/approve.ts

@@ -49,12 +49,13 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
       "PayPal-Client-Metadata-Id": trackingId,
     },
   };
-  const request = await axios.post(url, {}, headers);
-
+  axios
+    .post(url, {}, headers)
+    .then(async (request) => {
       if (request.data.status === "COMPLETED") {
         const user = req.session.user;
         const subscriptionExpirationDate =
-      req.session.user.subscriptionExpirationDate;
+          user!.subscriptionExpirationDate;
         const today = moment(new Date());
         const dateToBeAddedTo = !subscriptionExpirationDate
           ? today
@@ -62,9 +63,12 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
           ? moment(subscriptionExpirationDate)
           : today;
 
-    const updatedExpirationDate = dateToBeAddedTo.add(duration, duration_unit);
+        const updatedExpirationDate = dateToBeAddedTo.add(
+          duration,
+          duration_unit
+        );
         await setDoc(
-      doc(db, "users", req.session.user.id),
+          doc(db, "users", req.session.user!.id),
           {
             subscriptionExpirationDate: updatedExpirationDate.toISOString(),
             status: "active",
@@ -75,10 +79,11 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
         try {
           await setDoc(doc(db, "paypalpayments", v4()), {
             orderId: id,
-        userId: req.session.user.id,
+            userId: req.session.user!.id,
             status: request.data.status,
             createdAt: new Date().toISOString(),
-        value: request.data.purchase_units[0].payments.captures[0].amount.value,
+            value:
+              request.data.purchase_units[0].payments.captures[0].amount.value,
             currency:
               request.data.purchase_units[0].payments.captures[0].amount
                 .currency_code,
@@ -90,14 +95,14 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
           console.error("Failed to insert paypal payment!", err);
         }
 
-    if (user.type === "corporate") {
+        if (user!.type === "corporate") {
           const snapshot = await getDocs(collection(db, "groups"));
           const groups: Group[] = (
             snapshot.docs.map((doc) => ({
               id: doc.id,
               ...doc.data(),
             })) as Group[]
-      ).filter((x) => x.admin === user.id);
+          ).filter((x) => x.admin === user!.id);
 
           await Promise.all(
             groups
@@ -124,4 +129,9 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
         ok: false,
         reason: "Order ID not found or purchase was not approved!",
       });
+    })
+    .catch((err) => {
+      console.error(err.response.status, err.response.data);
+      res.status(err.response.status).json(err.response.data);
+    });
 }

src/pages/api/paypal/index.ts

@@ -32,16 +32,29 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
     return res.status(401).json({ ok: false, reason: "Missing tracking id!" });
 
   const url = `${process.env.PAYPAL_ACCESS_TOKEN_URL}/v2/checkout/orders`;
+  const amount = {
+    currency_code: currencyCode,
+    value: price.toString(),
+  };
 
   const data = {
     purchase_units: [
       {
         invoice_id: `INV-${v4()}`,
         amount: {
-          currency_code: currencyCode,
-          value: price.toString(),
+          ...amount,
+          breakdown: {
+            item_total: amount,
           },
-        reference_id: v4(),
+        },
+        items: [
+          {
+            name: "Encoach Subscription",
+            quantity: "1",
+            category: "DIGITAL_GOODS",
+            unit_amount: amount,
+          },
+        ],
       },
     ],
     payment_source: {
@@ -74,7 +87,13 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
     })
   );
 
-  const request = await axios.post<OrderResponseBody>(url, data, headers);
-
+  axios
+    .post<OrderResponseBody>(url, data, headers)
+    .then((request) => {
       res.status(request.status).json(request.data);
+    })
+    .catch((err) => {
+      console.error(err.response.status, err.response.data);
+      res.status(err.response.status).json(err.response.data);
+    });
 }