@glomopay/react-native-sdk 3.1.0 → 4.1.0

package/lib/utils/analytics.js

@@ -38,7 +38,6 @@ exports.trackStandardConnectionError = trackStandardConnectionError;
 exports.trackStandardSdkError = trackStandardSdkError;
 exports.trackStandardBankTransferSubmitted = trackStandardBankTransferSubmitted;
 exports.trackStandardPayViaBankCompleted = trackStandardPayViaBankCompleted;
-exports.trackStandardPayViaBankBankConnectionSuccessful = trackStandardPayViaBankBankConnectionSuccessful;
 exports.trackOrderTypeDetectionStarted = trackOrderTypeDetectionStarted;
 exports.trackOrderTypeDetectionResolved = trackOrderTypeDetectionResolved;
 exports.trackOrderTypeDetectionFailed = trackOrderTypeDetectionFailed;
@@ -703,17 +702,6 @@ function trackStandardPayViaBankCompleted(orderId, publicKey, status, devMode =
         }
     });
 }
-function trackStandardPayViaBankBankConnectionSuccessful(orderId, publicKey, bankIdentifier, devMode = false, mockMode = false, standardUrl) {
-    const properties = {
-        ...buildCommonProperties(orderId, publicKey, devMode, mockMode, standardUrl, "standard"),
-        bankIdentifier,
-    };
-    trackEvent("Standard Pay Via Bank Bank Connection Successful", properties, devMode).catch((error) => {
-        if (devMode) {
-            console.error("[Glomo-RN-SDK] Event tracking error on standard pay via bank connection:", error);
-        }
-    });
-}
 // ---------------------------------------------------------------------------
 // Order Type Detection Trackers (Unified Flow)
 // ---------------------------------------------------------------------------
@@ -1030,7 +1018,6 @@ exports.standardCheckoutTrackers = {
     trackSdkError: trackStandardSdkError,
     trackBankTransferSubmitted: trackStandardBankTransferSubmitted,
     trackPayViaBankCompleted: trackStandardPayViaBankCompleted,
-    trackPayViaBankBankConnectionSuccessful: trackStandardPayViaBankBankConnectionSuccessful,
 };
 /** Subscription checkout tracker map - delegates to trackSubscription* functions, no-ops for bank transfer */
 exports.subscriptionCheckoutTrackers = {
@@ -1057,10 +1044,4 @@ exports.subscriptionCheckoutTrackers = {
             console.warn("[Glomo-RN-SDK] Unexpected pay via bank completed event in subscription flow");
         }
     },
-    trackPayViaBankBankConnectionSuccessful: (...args) => {
-        const devMode = args[3];
-        if (devMode) {
-            console.warn("[Glomo-RN-SDK] Unexpected pay via bank connection event in subscription flow");
-        }
-    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@glomopay/react-native-sdk",
-    "version": "3.1.0",
+    "version": "4.1.0",
     "description": "The React Native SDK for GlomoPay",
     "license": "Apache-2.0",
     "main": "lib/index.js",
@@ -23,7 +23,9 @@
         "prettier:format": "prettier --write \"**/*.{js,ts,jsx,tsx,json}\"",
         "lint": "eslint src/",
         "clean": "rm -rf lib",
-        "prepublishOnly": "npm run clean && tsc --noEmit && npm run build"
+        "prepublishOnly": "npm run clean && tsc --noEmit && npm run build",
+        "ci:e2e-android": "cd testing && npm run ci:e2e-android",
+        "ci:e2e-ios": "cd testing && npm run ci:e2e-ios"
     },
     "repository": {
         "type": "git",

package/src/glomo-checkout.tsx

@@ -1,18 +1,22 @@
 /**
- * The unified GlomoPay Checkout Component (v3).
+ * The unified GlomoPay Checkout Component (v4).
  * Detects order type (LRS vs Standard) and delegates rendering to the appropriate inner component.
+ * Enforces error handling via `onSdkError()` as a mandatory prop.
  */
 
 import React, { useImperativeHandle, useRef, useEffect, useMemo, forwardRef } from "react";
 
 import { useGlomoCheckout, type UseGlomoCheckoutInternalReturn } from "./use-glomo-checkout";
-import { type GlomoCheckoutRef, type GlomoCheckoutProps } from "./types/checkout";
+import { type GlomoCheckoutRef, type GlomoCheckoutProps, type GlomoCheckoutInternalProps } from "./types/checkout";
 import { trackUseOfUnsupportedFunctionality } from "./utils/analytics";
 import { GlomoLrsCheckout } from "./glomo-lrs-checkout";
-import { GlomoStandardCheckout } from "./glomo-standard-checkout";
+import { GlomoStandardCheckoutInternal as GlomoStandardCheckout } from "./glomo-standard-checkout";
 import { GlomoSubscriptionsCheckout } from "./glomo-subscriptions-checkout";
 
-function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedRef<GlomoCheckoutRef>) {
+function GlomoCheckoutComponent(
+    props: GlomoCheckoutProps & GlomoCheckoutInternalProps,
+    ref: React.ForwardedRef<GlomoCheckoutRef>
+) {
     // useGlomoCheckout handles order type detection and exposes start/getStatus for the ref
     const {
         orderType,
@@ -38,24 +42,16 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
         [passedProps.publicKey]
     );
 
-    // Extracting stable booleans for the tracking effect to avoid depending on passedProps object
-    const hasBankTransferCallback = !!passedProps.onBankTransferSubmitted;
-    const hasPayViaBankCallback = !!passedProps.onPayViaBankCompleted;
-    const hasBankConnectionCallback = !!passedProps.onPayViaBankBankConnectionSuccessful;
+    // Extracting stable boolean for the tracking effect to avoid depending on passedProps object
+    const hasUserJourneyCallback = !!passedProps.onUserJourneyCompleted;
 
     useEffect(() => {
         if (orderType !== "subscriptions" || hasTrackedUnsupportedRef.current) return;
         hasTrackedUnsupportedRef.current = true;
 
-        const unsupported = [
-            hasBankTransferCallback && "onBankTransferSubmitted",
-            hasPayViaBankCallback && "onPayViaBankCompleted",
-            hasBankConnectionCallback && "onPayViaBankBankConnectionSuccessful",
-        ].filter(Boolean) as string[];
-
-        for (const name of unsupported) {
+        if (hasUserJourneyCallback) {
             trackUseOfUnsupportedFunctionality(
-                name,
+                "onUserJourneyCompleted",
                 passedProps.subscriptionId,
                 passedProps.publicKey,
                 devMode,
@@ -63,16 +59,7 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
                 ""
             );
         }
-    }, [
-        orderType,
-        hasBankTransferCallback,
-        hasPayViaBankCallback,
-        hasBankConnectionCallback,
-        passedProps.subscriptionId,
-        passedProps.publicKey,
-        devMode,
-        mockMode,
-    ]);
+    }, [orderType, hasUserJourneyCallback, passedProps.subscriptionId, passedProps.publicKey, devMode, mockMode]);
 
     // Delegating to the LRS checkout component once order type is resolved as LRS
     if (orderType === "lrs") {
@@ -88,6 +75,9 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
                 onPaymentTerminate={passedProps.onPaymentTerminate}
                 onSdkError={passedProps.onSdkError}
                 devMode={passedProps.devMode}
+                _testInjectionScript={props._testInjectionScript}
+                _testCarouselInjectionScript={props._testCarouselInjectionScript}
+                _onEducationCarouselStateChange={props._onEducationCarouselStateChange}
             />
         );
     }
@@ -105,11 +95,10 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
                 onConnectionError={passedProps.onConnectionError}
                 onPaymentTerminate={passedProps.onPaymentTerminate}
                 onSdkError={passedProps.onSdkError}
-                onBankTransferSubmitted={passedProps.onBankTransferSubmitted}
-                onPayViaBankCompleted={passedProps.onPayViaBankCompleted}
-                onPayViaBankBankConnectionSuccessful={passedProps.onPayViaBankBankConnectionSuccessful}
+                onUserJourneyCompleted={passedProps.onUserJourneyCompleted}
                 onUserRefusedCameraPermissions={passedProps.onUserRefusedCameraPermissions}
                 devMode={passedProps.devMode}
+                _testInjectionScript={props._testInjectionScript}
             />
         );
     }
@@ -127,9 +116,10 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
                 onConnectionError={passedProps.onConnectionError}
                 onPaymentTerminate={passedProps.onPaymentTerminate}
                 onSdkError={passedProps.onSdkError}
-                onPayViaBankBankConnectionSuccessful={passedProps.onPayViaBankBankConnectionSuccessful}
+                onUserJourneyCompleted={passedProps.onUserJourneyCompleted}
                 onUserRefusedCameraPermissions={passedProps.onUserRefusedCameraPermissions}
                 devMode={passedProps.devMode}
+                _testInjectionScript={props._testInjectionScript}
             />
         );
     }
@@ -142,6 +132,11 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
     return null;
 }
 
-export const GlomoCheckout = forwardRef<GlomoCheckoutRef, GlomoCheckoutProps>(GlomoCheckoutComponent);
+/**
+ * Internal props if provided, should be used for automated testing only
+ */
+export const GlomoCheckout = forwardRef(GlomoCheckoutComponent) as React.ForwardRefExoticComponent<
+    GlomoCheckoutProps & React.RefAttributes<GlomoCheckoutRef>
+>;
 
 GlomoCheckout.displayName = "GlomoCheckout";

package/src/glomo-lrs-checkout.tsx

@@ -10,7 +10,10 @@ import { isValidUrl } from "./utils/validation";
 
 export interface GlomoLrsCheckoutProps extends UseLrsCheckoutOptions {
     visible?: boolean;
-    onSdkError?: (error: Array<SdkError>) => void;
+    onSdkError: (error: Array<SdkError>) => void;
+    _testInjectionScript?: string;
+    _testCarouselInjectionScript?: string;
+    _onEducationCarouselStateChange?: (state: string) => void;
 }
 
 export interface GlomoLrsCheckoutRef {
@@ -49,6 +52,9 @@ function GlomoLrsCheckoutComponent(
         onSdkError,
         devMode = false,
         visible: controlledVisible,
+        _testInjectionScript,
+        _testCarouselInjectionScript,
+        _onEducationCarouselStateChange,
     }: GlomoLrsCheckoutProps,
     ref: React.ForwardedRef<GlomoLrsCheckoutRef>
 ) {
@@ -98,7 +104,8 @@ function GlomoLrsCheckoutComponent(
             onSdkError,
             devMode,
         },
-        mockMode
+        mockMode,
+        { _testInjectionScript, _testCarouselInjectionScript, _onEducationCarouselStateChange }
     );
 
     // Exposing the start() and getStatus() methods via the ref

package/src/glomo-standard-checkout.tsx

@@ -17,6 +17,7 @@ import { isValidUrl } from "./utils/validation";
 export interface GlomoStandardCheckoutInternalProps extends GlomoStandardCheckoutProps {
     _analyticsTrackers?: CheckoutAnalyticsTrackers;
     _skipOrderIdValidation?: boolean;
+    _testInjectionScript?: string;
 }
 
 /**
@@ -46,13 +47,12 @@ function GlomoStandardCheckoutComponent(
         onConnectionError,
         onPaymentTerminate,
         onSdkError,
-        onBankTransferSubmitted,
-        onPayViaBankCompleted,
-        onPayViaBankBankConnectionSuccessful,
+        onUserJourneyCompleted,
         onUserRefusedCameraPermissions,
         devMode = false,
         _analyticsTrackers,
         _skipOrderIdValidation,
+        _testInjectionScript,
     }: GlomoStandardCheckoutInternalProps,
     ref: React.ForwardedRef<GlomoStandardCheckoutRef>
 ) {
@@ -96,14 +96,12 @@ function GlomoStandardCheckoutComponent(
             onConnectionError,
             onPaymentTerminate,
             onSdkError,
-            onBankTransferSubmitted,
-            onPayViaBankCompleted,
-            onPayViaBankBankConnectionSuccessful,
+            onUserJourneyCompleted,
             onUserRefusedCameraPermissions,
             devMode,
         },
         mockMode,
-        { analyticsTrackers: _analyticsTrackers, _skipOrderIdValidation }
+        { analyticsTrackers: _analyticsTrackers, _skipOrderIdValidation, _testInjectionScript }
     );
 
     // Exposing the start() and getStatus() methods via the ref

package/src/index.ts

@@ -1,14 +1,14 @@
-/** The GlomoPay RN SDK v3 exports */
+/** The GlomoPay RN SDK v4 exports */
 
-// v3 public API - unified checkout
+// v4 public API - unified checkout
 export { GlomoCheckout } from "./glomo-checkout";
 export {
     type GlomoCheckoutRef,
     type GlomoCheckoutProps,
     type GlomoCheckoutPayload,
     type CheckoutStatus,
-    type GlomoBankTransferPayload,
-    type GlomoPayViaBankConnectionPayload,
+    type GlomoUserJourneyCompletedPayload,
+    ASYNC_PAYMENT_EVENTS,
 } from "./types/checkout";
 export { type GlomoServer } from "./config/base";
 export { type SdkError } from "./utils/analytics";

package/src/types/checkout.ts

@@ -1,4 +1,4 @@
-/** Unified v3 type definitions for GlomoCheckout */
+/** Unified v4 type definitions for GlomoCheckout */
 
 import { type GlomoServer } from "../config/base";
 import { type SdkError } from "../utils/analytics";
@@ -10,20 +10,23 @@ export interface GlomoCheckoutPayload {
     signature: string;
 }
 
-/** The payload for a bank transfer submission */
-export interface GlomoBankTransferPayload {
-    orderId: string;
-    senderAccountNumber: string;
-    transactionReference: string;
+/**
+ * Enum of asynchronous payment events that trigger the
+ * onUserJourneyCompleted callback. New events will be added
+ * here as additional flows are supported.
+ */
+export enum ASYNC_PAYMENT_EVENTS {
+    BANK_TRANSFER_SUBMITTED = "bank_transfer_submitted",
+    PAY_VIA_BANK_COMPLETED = "pay_via_bank_completed",
 }
 
-/** The payload for a pay via bank - bank connection successful event */
-export interface GlomoPayViaBankConnectionPayload {
-    bankIdentifier: string;
-    cooldownPeriodInMinutes: number;
-    bankName: string;
-    bankImageSrc: string;
-    bankImageAlt: string;
+/** The payload for the onUserJourneyCompleted callback */
+export interface GlomoUserJourneyCompletedPayload {
+    journeyType: ASYNC_PAYMENT_EVENTS;
+    orderId?: string;
+    status?: string;
+    senderAccountNumber?: string;
+    transactionReference?: string;
 }
 
 /** Unified checkout statuses - superset of LRS + standard statuses */
@@ -47,6 +50,16 @@ export interface GlomoCheckoutRef {
     getStatus: () => CheckoutStatus;
 }
 
+/**
+ * Internal-only props for automated testing
+ */
+export interface GlomoCheckoutInternalProps {
+    _testInjectionScript?: string;
+    _testCarouselInjectionScript?: string;
+    _forceOrderType?: "standard" | "lrs";
+    _onEducationCarouselStateChange?: (state: string) => void;
+}
+
 /** Shared callback and configuration props for the unified checkout component */
 interface GlomoCheckoutBaseProps {
     server?: GlomoServer;
@@ -55,10 +68,8 @@ interface GlomoCheckoutBaseProps {
     onPaymentFailure: (payload: GlomoCheckoutPayload) => void;
     onConnectionError?: (error: unknown) => void;
     onPaymentTerminate?: () => void;
-    onSdkError?: (error: Array<SdkError>) => void;
-    onBankTransferSubmitted?: (payload: GlomoBankTransferPayload | null | undefined) => void;
-    onPayViaBankCompleted?: (payload: { status: string }) => void;
-    onPayViaBankBankConnectionSuccessful?: (payload: GlomoPayViaBankConnectionPayload | null | undefined) => void;
+    onSdkError: (error: Array<SdkError>) => void;
+    onUserJourneyCompleted?: (payload: GlomoUserJourneyCompletedPayload) => void;
     onUserRefusedCameraPermissions?: () => void;
     devMode?: boolean;
 }

package/src/types/standard-checkout.ts

@@ -2,7 +2,7 @@
 
 import { type GlomoServer } from "../config/base";
 import { type SdkError } from "../utils/analytics";
-import { type GlomoBankTransferPayload, type GlomoPayViaBankConnectionPayload } from "./checkout";
+import { type GlomoUserJourneyCompletedPayload } from "./checkout";
 
 /** Standard checkout statuses */
 export type StandardCheckoutStatus =
@@ -40,10 +40,8 @@ export interface GlomoStandardCheckoutProps {
     onPaymentFailure: (payload: GlomoStandardCheckoutPayload) => void;
     onConnectionError?: (error: unknown) => void;
     onPaymentTerminate?: () => void;
-    onSdkError?: (error: Array<SdkError>) => void;
-    onBankTransferSubmitted?: (payload: GlomoBankTransferPayload | null | undefined) => void;
-    onPayViaBankCompleted?: (payload: { status: string }) => void;
-    onPayViaBankBankConnectionSuccessful?: (payload: GlomoPayViaBankConnectionPayload | null | undefined) => void;
+    onSdkError: (error: Array<SdkError>) => void;
+    onUserJourneyCompleted?: (payload: GlomoUserJourneyCompletedPayload) => void;
     onUserRefusedCameraPermissions?: () => void;
     devMode?: boolean;
 }

package/src/types/subscriptions-checkout.ts

@@ -2,7 +2,7 @@
 
 import { type GlomoServer } from "../config/base";
 import { type SdkError } from "../utils/analytics";
-import { type GlomoCheckoutPayload, type GlomoPayViaBankConnectionPayload } from "./checkout";
+import { type GlomoCheckoutPayload, type GlomoUserJourneyCompletedPayload } from "./checkout";
 import { type StandardCheckoutStatus } from "./standard-checkout";
 
 /** Props for the subscriptions checkout component */
@@ -14,10 +14,12 @@ export interface GlomoSubscriptionsCheckoutProps {
     onPaymentFailure: (payload: GlomoCheckoutPayload) => void;
     onConnectionError?: (error: unknown) => void;
     onPaymentTerminate?: () => void;
-    onSdkError?: (error: Array<SdkError>) => void;
-    onPayViaBankBankConnectionSuccessful?: (payload: GlomoPayViaBankConnectionPayload | null | undefined) => void;
+    onSdkError: (error: Array<SdkError>) => void;
+    onUserJourneyCompleted?: (payload: GlomoUserJourneyCompletedPayload) => void;
     onUserRefusedCameraPermissions?: () => void;
     devMode?: boolean;
+    /** Internal prop for automated tests - forwarded to GlomoStandardCheckoutInternal via rest spread */
+    _testInjectionScript?: string;
 }
 
 /**

package/src/use-glomo-checkout.tsx

@@ -5,7 +5,7 @@
 
 import { useState, useRef, useCallback, useEffect } from "react";
 
-import { type GlomoCheckoutProps, type CheckoutStatus } from "./types/checkout";
+import { type GlomoCheckoutProps, type GlomoCheckoutInternalProps, type CheckoutStatus } from "./types/checkout";
 import { type GlomoLrsCheckoutRef } from "./glomo-lrs-checkout";
 import { type GlomoStandardCheckoutRef } from "./types/standard-checkout";
 import { type GlomoSubscriptionsCheckoutRef } from "./types/subscriptions-checkout";
@@ -63,14 +63,14 @@ export interface UseGlomoCheckoutInternalReturn {
  */
 export function useGlomoCheckout(props: GlomoCheckoutProps): UseGlomoCheckoutReturn;
 export function useGlomoCheckout(
-    props: GlomoCheckoutProps,
+    props: GlomoCheckoutProps & GlomoCheckoutInternalProps,
     internalOptions: { _suppressDeprecationWarning: true }
 ): UseGlomoCheckoutInternalReturn;
 export function useGlomoCheckout(
-    props: GlomoCheckoutProps,
+    props: GlomoCheckoutProps & GlomoCheckoutInternalProps,
     internalOptions?: { _suppressDeprecationWarning?: boolean }
 ): UseGlomoCheckoutInternalReturn {
-    const { server, publicKey, orderId, subscriptionId, onSdkError, devMode = false } = props;
+    const { server, publicKey, orderId, subscriptionId, onSdkError, devMode = false, _forceOrderType } = props;
 
     // Order type resolved from the API - null until detection completes
     const [orderType, setOrderType] = useState<ExtendedOrderType | null>(null);
@@ -248,6 +248,31 @@ export function useGlomoCheckout(
             return false;
         }
 
+        /**
+         * Bypassing the fetchOrderType API call
+         * and using the provided order type directly,
+         * if _forceOrderType is set.
+         *
+         * This is ONLY meant to be used by automated testing harnesses,
+         * to simulate a checkout without actual API calls.
+         *
+         * Only available in __DEV__ builds (debug)
+         */
+        if (__DEV__ && _forceOrderType) {
+            ++fetchGenerationRef.current;
+
+            if (devMode) {
+                console.log(`[Glomo-RN-SDK] Forcing order type: ${_forceOrderType}`);
+            }
+
+            setOrderType(_forceOrderType);
+
+            return new Promise<boolean>((resolve) => {
+                pendingStartResolveRef.current = resolve;
+                pendingStartRef.current = true;
+            });
+        }
+
         // Detecting order type via the API
         setDetecting(true);
         const thisGeneration = ++fetchGenerationRef.current;
@@ -294,7 +319,7 @@ export function useGlomoCheckout(
             pendingStartResolveRef.current = resolve;
             pendingStartRef.current = true;
         });
-    }, [devMode, publicKey, orderId, subscriptionId, server, onSdkError, propsError]);
+    }, [devMode, publicKey, orderId, subscriptionId, server, onSdkError, propsError, _forceOrderType]);
 
     /**
      * Auto-starting the inner component after order type is resolved and the component has rendered.

package/src/use-lrs-checkout.tsx

@@ -74,7 +74,7 @@ export interface UseLrsCheckoutOptions {
     onPaymentFailure: (payload: GlomoLrsCheckoutPayload) => void;
     onConnectionError?: (error: unknown) => void;
     onPaymentTerminate?: () => void;
-    onSdkError?: (error: Array<SdkError>) => void;
+    onSdkError: (error: Array<SdkError>) => void;
     devMode?: boolean;
 }
 
@@ -106,7 +106,16 @@ export interface UseLrsCheckoutReturn {
     injectedEducationCarousel?: string;
 }
 
-/** The main SDK hook for the GlomoPay LRS Checkout flow */
+/**
+ * The main SDK hook for the GlomoPay LRS Checkout flow
+ * Internal options meant to simulate an LRS checkout are for automated tests only.
+ */
+export interface UseLrsCheckoutInternalOptions {
+    _testInjectionScript?: string;
+    _testCarouselInjectionScript?: string;
+    _onEducationCarouselStateChange?: (state: string) => void;
+}
+
 export function useLrsCheckout(
     {
         server,
@@ -119,7 +128,8 @@ export function useLrsCheckout(
         onSdkError,
         devMode = false,
     }: UseLrsCheckoutOptions,
-    mockMode: boolean
+    mockMode: boolean,
+    internalOptions?: UseLrsCheckoutInternalOptions
 ): UseLrsCheckoutReturn {
     // Refs for the WebViews
     const mainWebViewRef = useRef<WebView>(null);
@@ -208,7 +218,18 @@ export function useLrsCheckout(
 
     const [showFlowWebView, setShowFlowWebView] = useState(false);
     const [flowWebViewUrl, setFlowWebViewUrl] = useState<string>("");
-    const [educationCarouselState, setEducationCarouselState] = useState<EducationCarouselState>("pending");
+    const [educationCarouselState, setEducationCarouselStateRaw] = useState<EducationCarouselState>("pending");
+
+    /** Wrapping the raw state setter to also fire the internal test callback */
+    const testCarouselCallbackRef = useRef(internalOptions?._onEducationCarouselStateChange);
+    testCarouselCallbackRef.current = internalOptions?._onEducationCarouselStateChange;
+
+    const setEducationCarouselState = useCallback((nextState: EducationCarouselState) => {
+        setEducationCarouselStateRaw(nextState);
+        if (__DEV__) {
+            testCarouselCallbackRef.current?.(nextState);
+        }
+    }, []);
 
     useEffect(() => {
         if (devMode) {
@@ -990,8 +1011,14 @@ export function useLrsCheckout(
         handleNavigationStateChange,
         handleModalBackButton,
         handleFlowBack,
-        injectedMain: InjectionScripts.main,
+        injectedMain:
+            __DEV__ && internalOptions?._testInjectionScript
+                ? InjectionScripts.main + internalOptions._testInjectionScript
+                : InjectionScripts.main,
         injectedFlow: InjectionScripts.flow,
-        injectedEducationCarousel: InjectionScripts.educationCarousel,
+        injectedEducationCarousel:
+            __DEV__ && internalOptions?._testCarouselInjectionScript
+                ? InjectionScripts.educationCarousel + internalOptions._testCarouselInjectionScript
+                : InjectionScripts.educationCarousel,
     };
 }