Setup Stripe webhooks

Author: e-wai

backend/typescript/rest/camperRoutes.ts

@@ -23,6 +23,9 @@ const camperRouter: Router = Router();
 
 const camperService: ICamperService = new CamperService();
 
+// TODO: secure stripe keys
+const STRIPE_ENDPOINT_KEY = process.env.STRIPE_ENDPOINT_SECRET || "";
+
 // ROLES: Leaving unprotected as the registration flow probs needs this endpoint to register @dhruv
 /* Create a camper */
 camperRouter.post("/register", createCampersDtoValidator, async (req, res) => {
@@ -115,16 +118,25 @@ camperRouter.get("/:chargeId/:sessionId", async (req, res) => {
 });
 
 // ROLES: unprotected
-/* On successful payment, mark camper as paid */
-camperRouter.post("/confirm-payment/:chargeId", async (req, res) => {
-  const { chargeId } = req.params;
+/* Initiated by Stripe webhook. On successful payment, mark camper as paid. */
+camperRouter.post("/confirm-payment", async (req, res) => {
   try {
-    const camper = await camperService.confirmCamperPayment(
-      (chargeId as unknown) as string,
-    );
-    res.status(200).json(camper);
+    const { body } = req;
+
+    if (body.type === "checkout.session.completed") {
+      const chargeId = body.data.object.id;
+
+      if (body.data.object.payment_status === "paid") {
+        await camperService.confirmCamperPayment(
+          (chargeId as unknown) as string,
+        );
+      }
+    }
+
+    res.status(200).json();
   } catch (error: unknown) {
-    res.status(500).json({ error: getErrorMessage(error) });
+    // Stripe requires that 200 response sent
+    res.status(200).json({ error: getErrorMessage(error) });
   }
 });
 

backend/typescript/services/implementations/camperService.ts

@@ -24,7 +24,6 @@ import EmailService from "./emailService";
 import {
   createStripeCheckoutSession,
   createStripeLineItems,
-  retrieveStripeCheckoutSession,
 } from "../../utilities/stripeUtils";
 import { getEDUnits, getLPUnits } from "../../utilities/CampUtils";
 
@@ -246,13 +245,6 @@ class CamperService implements ICamperService {
         }),
       );
 
-      // Email the parent about all the campers and sessions they have signed up for
-      await emailService.sendParentConfirmationEmail(
-        camp,
-        registeredCampers,
-        sessionsToRegister,
-      );
-
       // Send admin an email for all the sessions that are now full
       // Note: At this point, the sessionsToRegister's campers field has been updated with the registered campers
       const fullSessions = sessionsToRegister.filter(
@@ -495,17 +487,6 @@ class CamperService implements ICamperService {
     session.startTransaction();
 
     try {
-      const checkoutSession = await retrieveStripeCheckoutSession(chargeId);
-      if (!checkoutSession) {
-        throw new Error(`Could not find checkout session with id ${chargeId}`);
-      }
-
-      if (checkoutSession.payment_status !== "paid") {
-        throw new Error(
-          `Checkout session status is ${checkoutSession.payment_status}, expected status to be "paid"`,
-        );
-      }
-
       const campers = await MgCamper.find({ chargeId });
       if (!campers || campers.length === 0) {
         throw new Error(
@@ -518,6 +499,36 @@ class CamperService implements ICamperService {
         { $set: { hasPaid: true } },
         { session, runValidators: true },
       );
+
+      const campSessionIds = Array.from(
+        new Set(campers.map((camper: Camper) => camper.campSession)),
+      );
+
+      const campSessions: Array<CampSession> = await MgCampSession.find({
+        _id: { $in: campSessionIds },
+      });
+
+      if (!campSessions || campSessions.length === 0) {
+        throw new Error(
+          `Could not find camp session(s) associated with objects in checkout session with id ${chargeId}`,
+        );
+      }
+
+      const camp: Camp | null = await MgCamp.findById(campSessions[0].camp);
+
+      if (!camp) {
+        throw new Error(
+          `Could not find camp associated with objects in checkout session with id ${chargeId}`,
+        );
+      }
+
+      // Email the parent about all the campers and sessions they have signed up for
+      await emailService.sendParentConfirmationEmail(
+        camp,
+        campers,
+        campSessions,
+      );
+
       await session.commitTransaction();
     } catch (error: unknown) {
       await session.abortTransaction();

backend/typescript/utilities/stripeUtils.ts

@@ -146,9 +146,3 @@ export async function createStripeCheckoutSession(
 
   return checkoutSession;
 }
-
-export async function retrieveStripeCheckoutSession(
-  chargeId: string,
-): Promise<Stripe.Response<Stripe.Checkout.Session>> {
-  return stripe.checkout.sessions.retrieve(chargeId);
-}

frontend/src/components/pages/RegistrantExperience/RegistrationResult/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Text, Flex, VStack, HStack } from "@chakra-ui/react";
 import { CartItem, EdlpChoice } from "../../../../types/RegistrationTypes";
 
@@ -16,7 +16,6 @@ import {
 } from "./textStyles";
 import { CampResponse, CampSession } from "../../../../types/CampsTypes";
 import { RegistrantExperienceCamper } from "../../../../types/CamperTypes";
-import CamperAPIClient from "../../../../APIClients/CamperAPIClient";
 
 const NoSessionDataFound = (): React.ReactElement => {
   return (
@@ -73,12 +72,6 @@ const RegistrationResult = ({
   edlpChoices,
   chargeId,
 }: RegistrationResultProps): React.ReactElement => {
-  useEffect(() => {
-    if (chargeId) {
-      CamperAPIClient.confirmPayment(chargeId);
-    }
-  }, [chargeId]);
-
   return (
     <Flex
       direction="column"

frontend/src/components/pages/RegistrantExperience/SessionSelection/CampSessionBoard.tsx

@@ -1,9 +1,6 @@
 import React from "react";
 import { Box, Text, Grid, GridItem, VStack } from "@chakra-ui/react";
-import {
-  CampResponse,
-  CampSessionResponse,
-} from "../../../../types/CampsTypes";
+import { CampResponse } from "../../../../types/CampsTypes";
 import {
   SessionCardState,
   SessionSelectionState,
@@ -53,7 +50,7 @@ const CampSessionBoard = ({
             fee={camp.fee}
             startTime={camp.startTime}
             endTime={camp.endTime}
-            campSession={campSession as CampSessionResponse}
+            campSession={campSession}
             handleClick={handleSessionClick}
             state={getCardState(
               campSession.id,
@@ -73,7 +70,7 @@ const CampSessionBoard = ({
             fee={camp.fee}
             startTime={camp.startTime}
             endTime={camp.endTime}
-            campSession={campSession as CampSessionResponse}
+            campSession={campSession}
             handleClick={handleSessionClick}
             state={getCardState(
               campSession.id,

frontend/src/components/pages/RegistrantExperience/SessionSelection/SessionCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text, VStack, Flex, useMediaQuery } from "@chakra-ui/react";
-import { CampSessionResponse } from "../../../../types/CampsTypes";
+import { CampSession } from "../../../../types/CampsTypes";
 import { SessionCardState } from "./SessionSelectionTypes";
 import {
   sessionCardBoldTextStyles,
@@ -17,7 +17,7 @@ type SessionCardDetailsProps = {
   fee: number;
   startTime: string;
   endTime: string;
-  campSession: CampSessionResponse;
+  campSession: CampSession;
 };
 
 const SessionCardDetails = ({
@@ -26,14 +26,25 @@ const SessionCardDetails = ({
   endTime,
   campSession,
 }: SessionCardDetailsProps): React.ReactElement => {
-  const getCampSessionDates = () => {
-    const startDate = new Date(campSession.dates[0]);
-    const endDate = new Date(campSession.dates[campSession.dates.length - 1]);
-    return `${startDate.toLocaleString("default", {
-      month: "short",
-    })} ${startDate.getDay()} - ${endDate.toLocaleString("default", {
-      month: "short",
-    })} ${endDate.getDay()}, ${endDate.getFullYear()}`;
+  const getCampSessionDates = (): string => {
+    if (campSession.dates.length > 1) {
+      const startDate = new Date(campSession.dates[0]);
+      const endDate = new Date(campSession.dates[campSession.dates.length - 1]);
+      return `${startDate.toLocaleDateString("en-us", {
+        month: "short",
+      })} ${startDate.getDate()} - ${endDate.toLocaleDateString("en-us", {
+        month: "short",
+      })} ${endDate.getDate()}, ${endDate.getFullYear()}`;
+    }
+
+    if (campSession.dates.length === 1) {
+      const date = new Date(campSession.dates[0]);
+      return `${date.toLocaleDateString("en-us", {
+        month: "short",
+      })} ${date.getDate()}, ${date.getFullYear()}`;
+    }
+
+    return "";
   };
 
   const formattedTimeString = (start: string, end: string): string => {
@@ -66,7 +77,7 @@ type SessionCardProps = {
   fee: number;
   startTime: string;
   endTime: string;
-  campSession: CampSessionResponse;
+  campSession: CampSession;
   handleClick: (sessionID: string) => void;
   state: SessionCardState;
   sessionIsWaitlisted: boolean;