Fix to accept setup intent (#3334)

* Fix to accept setup intent

* Added definition for 'confirmSetup'

* Added frequency checks for 'StripeCheckout' tests

* minor:react router v6: get params alongside component lazy loading

---------

Co-authored-by: ap-justin <89639563+ap-justin@users.noreply.github.com>

src/components/donation/Steps/Submit/StripeCheckout/Checkout.tsx

@@ -43,12 +43,17 @@ export default function Checkout(props: StripeCheckoutStep) {
  ? `${window.location.origin}${appRoutes.donate_widget}/${donateWidgetRoutes.stripe_payment_status}`
  : `${window.location.origin}${appRoutes.stripe_payment_status}`;
 
- const { error } = await stripe.confirmPayment({
+ const stripeConfirmParams = {
  elements,
  confirmParams: {
  return_url,
  },
- });
+ };
+
+ const { error } =
+ props.details.frequency === "subscription"
+ ? await stripe.confirmSetup(stripeConfirmParams)
+ : await stripe.confirmPayment(stripeConfirmParams);
 
  // This point will only be reached if there is an immediate error when
  // confirming the payment. Otherwise, your customer will be redirected to

src/components/donation/Steps/Submit/StripeCheckout/StripeCheckout.test.tsx

@@ -20,6 +20,7 @@ vi.mock("../../Context", () => ({
 }));
 
 const confirmPaymentMock = vi.hoisted(() => vi.fn());
+const confirmSetupMock = vi.hoisted(() => vi.fn());
 
 vi.mock("@stripe/react-stripe-js", () => ({
  Elements: vi.fn(({ children }) => children),
@@ -35,6 +36,7 @@ vi.mock("@stripe/react-stripe-js", () => ({
  useStripe: vi.fn(() => {
  const stripe: Stripe = {
  confirmPayment: confirmPaymentMock,
+ confirmSetup: confirmSetupMock,
  } as any;
  return stripe;
  }),
@@ -130,7 +132,10 @@ describe("stripe checkout", () => {
  type: "card_error",
  message: "invalid card",
  };
- confirmPaymentMock.mockResolvedValueOnce({ error: err });
+
+ if (state.details.frequency === "one-time")
+ confirmPaymentMock.mockResolvedValueOnce({ error: err });
+ else confirmSetupMock.mockResolvedValueOnce({ error: err });
 
  //user sees modal on card error
  await userEvent.click(donateBtn);
@@ -149,7 +154,10 @@ describe("stripe checkout", () => {
  message: "unhelpful error message that won't be shown",
  };
 
- confirmPaymentMock.mockResolvedValueOnce({ error: err });
+ if (state.details.frequency === "one-time")
+ confirmPaymentMock.mockResolvedValueOnce({ error: err });
+ else confirmSetupMock.mockResolvedValueOnce({ error: err });
+
  await userEvent.click(donateBtn);
 
  const errorModal = screen.getByRole("dialog");

src/pages/StripePaymentStatus.tsx

@@ -1,3 +1,4 @@
+import { skipToken } from "@reduxjs/toolkit/query";
 import type { PaymentIntent } from "@stripe/stripe-js";
 import Icon from "components/Icon";
 import LoadText from "components/LoadText";
@@ -6,19 +7,32 @@ import Seo from "components/Seo";
 import { EMAIL_SUPPORT } from "constants/env";
 import { appRoutes, donateWidgetRoutes } from "constants/routes";
 import { useCallback, useEffect } from "react";
-import { Link, Navigate, useOutletContext } from "react-router-dom";
+import {
+ Link,
+ type LoaderFunction,
+ Navigate,
+ useLoaderData,
+ useOutletContext,
+} from "react-router-dom";
 import { useStripePaymentStatusQuery } from "services/apes";
 import type { GuestDonor } from "types/aws";
 import type { DonateThanksState } from "types/pages";
 
+export const loader: LoaderFunction = ({ request }) => {
+ const url = new URL(request.url);
+ return (
+ url.searchParams.get("payment_intent") ??
+ url.searchParams.get("setup_intent") ??
+ ""
+ );
+};
+
 export function Component() {
  const isInWidget = useOutletContext<true | undefined>();
- const paymentIntentId =
- new URLSearchParams(window.location.search).get("payment_intent") ?? "";
+ const paymentIntentId = useLoaderData() as string;
 
  const queryState = useStripePaymentStatusQuery(
- { paymentIntentId },
- { skip: !paymentIntentId }
+ paymentIntentId ? { paymentIntentId } : skipToken
  );
 
  const { refetch } = queryState;