feat: add reCAPTCHA

.env

@@ -30,3 +30,4 @@ ENTERPRISE_PRODUCT_DESCRIPTIONS_AND_TERMS_URL=''
 ENTERPRISE_SALES_TERMS_AND_CONDITIONS_URL=''
 COMPARE_ENTERPRISE_PLANS_URL=''
 CONTACT_SUPPORT_URL=''
+RECAPTCHA_SITE_KEY_WEB=''

.env.development

@@ -31,3 +31,4 @@ ENTERPRISE_PRODUCT_DESCRIPTIONS_AND_TERMS_URL='https://business.edx.org/product-
 ENTERPRISE_SALES_TERMS_AND_CONDITIONS_URL='https://business.edx.org/enterprise-sales-terms/'
 COMPARE_ENTERPRISE_PLANS_URL=''
 CONTACT_SUPPORT_URL=''
+RECAPTCHA_SITE_KEY_WEB=''

.env.development-stage

@@ -21,6 +21,7 @@ USER_INFO_COOKIE_NAME='stage-edx-user-info'
 MFE_CONFIG_API_URL='https://courses.stage.edx.org/api/mfe_config/v1'
 ENABLE_NEW_RELIC='false'
 PARAGON_THEMES_URLS={}
+RECAPTCHA_SITE_KEY_WEB=''
 
 # Enterprise
 ENTERPRISE_ACCESS_BASE_URL='https://enterprise-access.stage.edx.org'
@@ -35,3 +36,4 @@ ENTERPRISE_PRODUCT_DESCRIPTIONS_AND_TERMS_URL='https://business.edx.org/product-
 ENTERPRISE_SALES_TERMS_AND_CONDITIONS_URL='https://business.edx.org/enterprise-sales-terms/'
 COMPARE_ENTERPRISE_PLANS_URL=''
 CONTACT_SUPPORT_URL=''
+

.env.test

@@ -21,3 +21,4 @@ SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 MFE_CONFIG_API_URL=''
 PARAGON_THEMES_URLS={}
+RECAPTCHA_SITE_KEY_WEB=''

package.json

@@ -56,6 +56,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-recaptcha-v3": "^1.11.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.54.2",
     "react-intl": "^6.8.9",

src/components/Stepper/CheckoutStepperContainer.tsx

@@ -1,4 +1,5 @@
 import { Col, Row, Stack, Stepper } from '@openedx/paragon';
+import { ReactElement } from 'react';
 
 import { PurchaseSummary } from '@/components/PurchaseSummary';
 import { StepperTitle } from '@/components/Stepper/StepperTitle';
@@ -9,15 +10,15 @@ import {
 } from '@/components/Stepper/Steps';
 import useCurrentStep from '@/hooks/useCurrentStep';
 
-const Steps: React.FC = () => (
+const Steps = (): ReactElement => (
   <>
     <PlanDetails />
     <AccountDetails />
     <BillingDetails />
   </>
 );
 
-const CheckoutStepperContainer: React.FC = () => {
+const CheckoutStepperContainer = (): ReactElement => {
   const { currentStepKey } = useCurrentStep();
   return (
     <Stepper activeKey={currentStepKey}>

src/components/Stepper/Steps/PlanDetails.tsx

@@ -1,8 +1,19 @@
+import { getConfig } from '@edx/frontend-platform/config';
+import { ReactElement } from 'react';
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
+
 import PlanDetailsPage from '@/components/plan-details-pages/PlanDetailsPage';
 
-// TODO: unnecessary layer of abstraction, just move component logic into this file.
-const PlanDetails: React.FC = () => (
-  <PlanDetailsPage />
-);
+const PlanDetails = (): ReactElement => {
+  const { RECAPTCHA_SITE_KEY_WEB } = getConfig();
+  return (
+    <GoogleReCaptchaProvider
+      reCaptchaKey={RECAPTCHA_SITE_KEY_WEB}
+      useEnterprise
+    >
+      <PlanDetailsPage />
+    </GoogleReCaptchaProvider>
+  );
+};
 
 export default PlanDetails;

src/components/app/data/hooks/index.ts

@@ -13,3 +13,4 @@ export { default as useCreateCheckoutIntentMutation } from './useCreateCheckoutI
 export { default as useCheckoutSessionClientSecret } from './useCheckoutSessionClientSecret';
 export { default as useRegisterMutation } from './useRegisterMutation';
 export { default as useCountryOptions } from './useCountryOptions';
+export { default as useRecaptchaToken } from './useRecaptchaToken';

src/components/app/data/hooks/tests/useRegisterMutation.test.tsx

@@ -35,7 +35,7 @@ const createWrapper = () => {
 /**
  * Helper to create a mock register request payload
  */
-const createMockRegisterRequest = (overrides = {}): RegistrationCreateRequestSchema => ({
+const createMockRegisterRequest = (overrides = {}): Partial<RegistrationCreateRequestSchema> => ({
   name: 'John Doe',
   username: 'johndoe',
   password: 'Password123!',

src/components/app/data/hooks/useRecaptchaToken.tsx

@@ -0,0 +1,45 @@
+import { getConfig } from '@edx/frontend-platform';
+import { logError, logInfo } from '@edx/frontend-platform/logging';
+import { useCallback } from 'react';
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
+
+const useRecaptchaToken = (actionName = 'submit') => {
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  const { RECAPTCHA_SITE_KEY_WEB } = getConfig();
+
+  const isLoading = !(executeRecaptcha || RECAPTCHA_SITE_KEY_WEB);
+  const isReady = !!executeRecaptcha && RECAPTCHA_SITE_KEY_WEB;
+
+  const executeWithFallback = useCallback(async () => {
+    if (isReady) {
+      const token = await executeRecaptcha(actionName);
+      if (!token) {
+        throw new Error(`Failed to obtain reCAPTCHA verification token for action: ${actionName}. Please try again or contact support if the issue persists.`);
+      }
+      return token;
+    }
+
+    // Fallback: no reCAPTCHA or not ready
+    if (RECAPTCHA_SITE_KEY_WEB) {
+      logInfo(`reCAPTCHA not ready for action: ${actionName}. Proceeding without token.`);
+    }
+    return null;
+  }, [isReady, RECAPTCHA_SITE_KEY_WEB, executeRecaptcha, actionName]);
+
+  const getToken = useCallback(async (): Promise<string | null> => {
+    try {
+      return await executeWithFallback();
+    } catch (err: any) {
+      logError(err?.message || 'Failed to execute reCAPTCHA');
+      return null;
+    }
+  }, [executeWithFallback]);
+
+  return {
+    getToken,
+    isReady,
+    isLoading,
+  };
+};
+
+export default useRecaptchaToken;

src/components/app/data/hooks/useRegisterMutation.ts

@@ -22,7 +22,7 @@ export default function useRegisterMutation({
   return useMutation<
   AxiosResponse<RegistrationCreateSuccessResponseSchema>,
   AxiosError<RegistrationErrorResponseSchema>,
-  RegistrationCreateRequestSchema
+  Partial<RegistrationCreateRequestSchema>
   >({
     mutationFn: (requestData) => registerRequest(requestData),
     onSuccess: (axiosResponse) => onSuccess(axiosResponse.data),

src/components/app/data/services/registration.ts

@@ -62,13 +62,17 @@ declare global {
   /**
    * Account creation (register) request/response schemas.
    */
-  interface RegistrationCreateRequestSchema {
+  interface BaseRegistrationCreateRequestSchema {
     name: string;
     username: string;
     password: string;
     email: string;
     country: string;
-    honorCode?: boolean;
+  }
+
+  interface RegistrationCreateRequestSchema extends BaseRegistrationCreateRequestSchema {
+    honorCode: boolean;
+    recaptchaToken?: string;
   }
 
   interface RegistrationCreateSuccessResponseSchema {
@@ -371,7 +375,7 @@ export async function validateRegistrationFieldsDebounced(
  * @throws {AxiosError<RegistrationErrorResponseSchema>} For HTTP/network/server errors
  */
 export async function registerRequest(
-  requestData: RegistrationCreateRequestSchema,
+  requestData: Partial<RegistrationCreateRequestSchema>,
 ): Promise<AxiosResponse<RegistrationCreateSuccessResponseSchema>> {
   // Ensure honor_code is always sent as true by default
   const requestPayload: RegistrationCreateRequestPayload = snakeCaseObject({
@@ -387,7 +391,6 @@ export async function registerRequest(
   Object.entries(requestPayload as Record<string, unknown>).forEach(([key, value]) => {
     formParams.append(key, String(value));
   });
-
   const response: AxiosResponse<RegistrationCreateSuccessResponseSchema> = (
     await getAuthenticatedHttpClient().post<RegistrationCreateSuccessResponsePayload>(
       `${getConfig().LMS_BASE_URL}/api/user/v2/account/registration/`,

src/components/plan-details-pages/PlanDetailsPage.tsx

@@ -14,7 +14,7 @@ import { useForm } from 'react-hook-form';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
-import { useFormValidationConstraints } from '@/components/app/data';
+import { useFormValidationConstraints, useRecaptchaToken } from '@/components/app/data';
 import {
   useCreateCheckoutIntentMutation,
   useLoginMutation,
@@ -42,6 +42,7 @@ import '../Stepper/Steps/css/PriceAlert.css';
 const PlanDetailsPage = () => {
   const location = useLocation();
   const queryClient = useQueryClient();
+
   const { data: formValidationConstraints } = useFormValidationConstraints();
   const planDetailsFormData = useCheckoutFormStore((state) => state.formData[DataStoreKey.PlanDetails]);
   const setFormData = useCheckoutFormStore((state) => state.setFormData);
@@ -53,6 +54,8 @@ const PlanDetailsPage = () => {
     formSchema,
   } = useCurrentPageDetails();
 
+  const { getToken } = useRecaptchaToken('submit');
+
   const planDetailsSchema = useMemo(() => (
     formSchema(formValidationConstraints, planDetailsFormData.stripePriceId)
   ), [formSchema, formValidationConstraints, planDetailsFormData.stripePriceId]);
@@ -169,14 +172,21 @@ const PlanDetailsPage = () => {
         password: data.password,
       });
     },
-    [SubmitCallbacks.PlanDetailsRegister]: (data: PlanDetailsRegisterPageData) => {
-      registerMutation.mutate({
+    [SubmitCallbacks.PlanDetailsRegister]: async (data: PlanDetailsRegisterPageData) => {
+      const recaptchaToken: string | null = await getToken();
+
+      const registerMutationPayload: Partial<RegistrationCreateRequestSchema> = {
         name: data.fullName,
         email: data.adminEmail,
         username: data.username,
         password: data.password,
         country: data.country,
-      });
+      };
+
+      if (recaptchaToken) {
+        registerMutationPayload.recaptchaToken = recaptchaToken;
+      }
+      registerMutation.mutate(registerMutationPayload);
     },
   };