@glomopay/react-native-sdk 4.0.0 → 5.0.0

package/src/bridge/message-router.ts

@@ -0,0 +1,92 @@
+/** Shared WebView message routing for every GlomoPay checkout flow */
+
+import { type WebViewMessageEvent } from "react-native-webview";
+
+/**
+ * A parsed bridge message.
+ *
+ * Deliberately loose: the page and our own injection scripts both post here, and the
+ * shapes differ per type. Handlers narrow what they need.
+ */
+export interface WebViewMessage {
+    type?: string;
+    [key: string]: unknown;
+}
+
+/** Handles one message type. Registered by the flow that cares about it. */
+export type WebViewMessageHandler = (message: WebViewMessage) => void;
+
+/** The options for createMessageRouter */
+export interface CreateMessageRouterOptions {
+    /** Log prefix of the calling flow, e.g. "[Glomo-RN-SDK LRS]" */
+    logPrefix: string;
+
+    /** Which WebView this router serves. Appears in logs only. */
+    source: string;
+
+    /**
+     * Called when the event carries no usable string payload, before the router gives up.
+     * The caller reports it, because the tracker needs flow-level context the router has no
+     * business knowing.
+     */
+    onInvalidMessage?: (data: unknown) => void;
+
+    /**
+     * Message type to handler. A type with no handler is ignored silently, which is what
+     * the open-coded switches did by falling through. Inherited keys are not handlers.
+     */
+    handlers: Record<string, WebViewMessageHandler>;
+
+    devMode?: boolean;
+}
+
+/**
+ * Builds the onMessage handler for a WebView.
+ *
+ * Exists because all four message handlers opened with the same twenty-five lines - guard the
+ * payload, parse it, log it, then dispatch on `message.type`. Only the dispatch differed. New
+ * message types now register in one place per flow instead of being added to each switch, which
+ * is what let `file.input` telemetry and the education carousel's invalid-message tracking go
+ * missing on some WebViews and not others.
+ */
+export function createMessageRouter({
+    logPrefix,
+    source,
+    onInvalidMessage,
+    handlers,
+    devMode = false,
+}: CreateMessageRouterOptions) {
+    return (event: WebViewMessageEvent): void => {
+        try {
+            const data = event.nativeEvent?.data;
+            if (!data || typeof data !== "string") {
+                if (devMode) {
+                    console.warn(`${logPrefix} Invalid message data from ${source}`);
+                }
+                onInvalidMessage?.(data);
+                return;
+            }
+
+            const message: WebViewMessage = JSON.parse(data);
+            if (devMode) {
+                console.log(`${logPrefix} ${source} Message received:`, message.type, message);
+            }
+
+            /**
+             * Own-property lookup, not a bare index. `message.type` is page-controlled, and this is
+             * now the single dispatch point for every flow - a bare index resolves `__proto__` to
+             * `Object.prototype` and throws into the catch below, and `constructor`/`toString` to
+             * real functions that then get called. The switches this replaced had neither case.
+             */
+            const type = message.type;
+            const handler = type && Object.prototype.hasOwnProperty.call(handlers, type) ? handlers[type] : undefined;
+            if (typeof handler === "function") {
+                handler(message);
+            }
+        } catch (error) {
+            if (devMode) {
+                console.error(`${logPrefix} Error parsing ${source} message:`, error);
+            }
+        }
+    };
+}

package/src/bridge/payment-payload.ts

@@ -0,0 +1,31 @@
+/** What the SDK says about a payment payload it could not use */
+
+import { type SdkError } from "../utils/analytics";
+
+/**
+ * The key names on a bridge payload, for telemetry.
+ *
+ * Names only. The values are payment identifiers and a signature, which is why the dropped-payload
+ * event reports the shape of what arrived rather than what it contained.
+ */
+export function payloadKeysOf(payload: unknown): string[] {
+    if (!payload || typeof payload !== "object") {
+        return [];
+    }
+    return Object.keys(payload as Record<string, unknown>);
+}
+
+/**
+ * The host-facing form of a payment payload the SDK could not route.
+ *
+ * Surfaced rather than swallowed: the page reported a terminal outcome and the merchant would
+ * otherwise never learn that one happened. `generatedCheckoutUrl` is the nearest existing `field`
+ * value - this is a fault in what the checkout page sent, not in anything the merchant configured.
+ */
+export function droppedPayloadSdkError(event: string): SdkError {
+    return {
+        type: "validation_error",
+        message: `Received a ${event} event with a payload the SDK could not route. The payment outcome was not reported.`,
+        field: "generatedCheckoutUrl",
+    };
+}

package/src/capabilities/file-save.ts

@@ -0,0 +1,124 @@
+/** Loads the optional dependencies that back document saving, and reports whether they are there */
+
+/**
+ * The picker surface this SDK uses, as a type only.
+ *
+ * `typeof import(...)` is erased at compile time, so this gives full typechecking against the real
+ * package without emitting an import that would make an optional dependency mandatory.
+ */
+type DocumentPickerModule = {
+    saveDocuments: typeof import("@react-native-documents/picker").saveDocuments;
+    errorCodes: typeof import("@react-native-documents/picker").errorCodes;
+    isErrorWithCode: typeof import("@react-native-documents/picker").isErrorWithCode;
+};
+
+type BlobUtilModule = import("react-native-blob-util").ReactNativeBlobUtil;
+
+/** Package names, so a missing one can be named in a warning and in telemetry */
+export const FILE_SAVE_PACKAGES = ["react-native-blob-util", "@react-native-documents/picker"] as const;
+
+/** What the probe found. Shared by the capability list, the start() warning and telemetry. */
+export interface FileSaveAvailability {
+    /** True only when every package loaded */
+    available: boolean;
+
+    /** Packages that could not be loaded, in FILE_SAVE_PACKAGES order */
+    missing: string[];
+}
+
+/**
+ * Metro's interop puts an ES default export on `.default`; the picker uses named exports.
+ *
+ * Widened rather than narrowed because these two packages are loaded through the same seam and
+ * disagree on export style.
+ */
+function unwrap<T>(loaded: unknown): T | null {
+    const module = loaded as ({ default?: T } & T) | null | undefined;
+    return module?.default ?? module ?? null;
+}
+
+/**
+ * Streams a document to disk. Null when the package is absent or its native module is not linked.
+ *
+ * Metro requires a string literal here, and requires the call to sit directly inside a `try` block.
+ *
+ * Both halves are load-bearing and neither is obvious:
+ *
+ * - A `require()` whose argument Metro cannot evaluate statically is rejected at bundle time in
+ *   project code, and compiled to a runtime throw inside `node_modules` - which is where this file
+ *   lives in a merchant app. So a loop over FILE_SAVE_PACKAGES calling `require(name)` would not
+ *   fail loudly; it would report every package missing in every merchant build and silently
+ *   withdraw the capability.
+ * - Metro only tolerates an unresolvable literal when the call is lexically inside a `try` block
+ *   (`collectDependencies.isOptionalDependency`), and only when `allowOptionalDependencies` is on.
+ *   `@react-native/metro-config` sets it, which is what makes the optional-peer-dependency pattern
+ *   work at all - the same mechanism the existing `jail-monkey` require in utils/device-compliance
+ *   already depends on.
+ *
+ * - The require must run while this module is still initialising, which is why it sits in an IIFE
+ *   at module scope rather than inside the exported function. Metro's `guardedLoadModule` reports a
+ *   failed module load through `ErrorUtils.reportFatalError` and then swallows it, but only when it
+ *   is not already loading something (`inGuard`). A lazy first `require` - from a hook, a render, or
+ *   anything after startup - is outside that guard, so an absent package is reported as a *fatal*
+ *   error and raises a full-screen LogBox in every dev build, even though our `catch` here means the
+ *   capability degrades correctly and nothing actually breaks. Resolving at module init keeps the
+ *   throw inside the guard, where it propagates to our `catch` silently.
+ *
+ * The consequence for structure: these two loaders cannot be collapsed into one parameterised
+ * helper, the `try` cannot be hoisted into a caller, and the resolution cannot be made lazy.
+ *
+ * Deliberately treats "not installed" and "installed but will not load" alike. Both packages ship
+ * native modules, so a merchant who installs them without rebuilding the app has them present in
+ * node_modules and still unusable - and either way the SDK cannot save a file. The distinction
+ * matters only to the warning text, which names both causes rather than guessing between them.
+ */
+const blobUtilModule: BlobUtilModule | null = (() => {
+    try {
+        return unwrap<BlobUtilModule>(require("react-native-blob-util"));
+    } catch {
+        return null;
+    }
+})();
+
+export function loadBlobUtil(): BlobUtilModule | null {
+    return blobUtilModule;
+}
+
+/** Presents the system save dialog. Null, and shaped, on the same terms as loadBlobUtil above. */
+const documentPickerModule: DocumentPickerModule | null = (() => {
+    try {
+        return unwrap<DocumentPickerModule>(require("@react-native-documents/picker"));
+    } catch {
+        return null;
+    }
+})();
+
+export function loadDocumentPicker(): DocumentPickerModule | null {
+    return documentPickerModule;
+}
+
+/**
+ * Whether the SDK can put a document on the device.
+ *
+ * Both packages are needed and neither substitutes for the other - blob-util streams the download
+ * to a temp file, the picker presents the system save dialog for the user to choose a destination.
+ * A build missing either one cannot complete a save, so the capability is not advertised and the
+ * checkout page keeps its own download path.
+ *
+ * Reads through the same loaders the saver calls, so the answer here and the behaviour there cannot
+ * disagree. Both resolved once at module init and returned from there - see loadBlobUtil on why that
+ * is required rather than an optimisation. Safe regardless, since a native module cannot appear
+ * mid-session.
+ */
+export function resolveFileSaveAvailability(): FileSaveAvailability {
+    const missing: string[] = [];
+
+    if (!loadBlobUtil()) {
+        missing.push(FILE_SAVE_PACKAGES[0]);
+    }
+    if (!loadDocumentPicker()) {
+        missing.push(FILE_SAVE_PACKAGES[1]);
+    }
+
+    return { available: missing.length === 0, missing };
+}

package/src/capabilities/index.ts

@@ -0,0 +1,34 @@
+/** What this SDK build can do, resolved at runtime */
+
+import { resolveFileSaveAvailability } from "./file-save";
+
+/**
+ * Capability strings the checkout page gates on.
+ *
+ * The page reads these from `window.__glomoSdkCapabilities__` at the moment it needs one, and
+ * falls back to its own behaviour when a string is absent. It deliberately does not infer support
+ * from the bridge existing - every Glomo SDK has a bridge, so a build without the handler would
+ * take delivery of the message into a router that ignores it, and the user's tap would vanish.
+ */
+export const CAPABILITIES = {
+    FILE_SAVE: "file.save",
+} as const;
+
+/**
+ * The capabilities this build can honour.
+ *
+ * Append only, and only when the handler actually exists in this build - removing a string
+ * silently reverts the page to its own path, which is the correct degradation but a confusing
+ * one to debug if it happens by accident.
+ */
+export function resolveCapabilities(): string[] {
+    const capabilities: string[] = [];
+
+    if (resolveFileSaveAvailability().available) {
+        capabilities.push(CAPABILITIES.FILE_SAVE);
+    }
+
+    return capabilities;
+}
+
+export { resolveFileSaveAvailability, FILE_SAVE_PACKAGES, type FileSaveAvailability } from "./file-save";

package/src/capabilities/use-capability-reporting.ts

@@ -0,0 +1,55 @@
+/** Tells the host, once per mount, about capabilities this build cannot offer */
+
+import { useEffect, useRef } from "react";
+
+import { resolveFileSaveAvailability } from "./file-save";
+import { safeCallback } from "../utils/validation";
+import { type SdkError } from "../utils/analytics";
+
+/** The options for useCapabilityReporting */
+export interface UseCapabilityReportingOptions {
+    onSdkError: (errors: Array<SdkError>) => void;
+    devMode?: boolean;
+}
+
+/**
+ * Reports missing optional dependencies to the host on mount.
+ *
+ * Paired with the ungated `console.warn` in `start()`, and deliberately not merged with it: the
+ * warning reaches a developer watching a console, this reaches a merchant's error handling, and a
+ * merchant who has wired up logging should not have to read logs to discover that a feature they
+ * were told exists is inert in their build.
+ *
+ * Not an error the SDK raises about itself - the checkout still works, and the page falls back to
+ * its own download path. `field` is set so it can be filtered apart from a configuration fault on
+ * the same callback.
+ *
+ * Fires once per mounted component rather than once per process, and never on a build where the
+ * dependencies are present.
+ */
+export function useCapabilityReporting({ onSdkError, devMode = false }: UseCapabilityReportingOptions): void {
+    const reportedRef = useRef(false);
+
+    useEffect(() => {
+        if (reportedRef.current) {
+            return;
+        }
+        reportedRef.current = true;
+
+        const fileSave = resolveFileSaveAvailability();
+        if (fileSave.available) {
+            return;
+        }
+
+        const errors: Array<SdkError> = [
+            {
+                type: "validation_error",
+                message:
+                    `Document downloads are unavailable: ${fileSave.missing.join(" and ")} could not be loaded. ` +
+                    "Install the package(s) and rebuild the app to enable them.",
+                field: "file.save",
+            },
+        ];
+        safeCallback(onSdkError, [errors], "onSdkError", devMode);
+    }, [onSdkError, devMode]);
+}

package/src/config/base.ts

@@ -51,6 +51,19 @@ export const SERVER_CONFIGS: Record<InternalGlomoServer, GlomoServerConfig> = {
     },
 };
 
+/**
+ * Identifies this SDK to the checkout page, which forwards both onto the order it creates.
+ *
+ * Exists because nothing in `payments`, `payment_sessions`, `terminals` or `api_audits` carries a
+ * surface dimension, so an SDK-originated order is indistinguishable from a dashboard one
+ * (KAN-6551). The Flutter SDK sends the analogous pair (`checkout-flutter-sdk` / `flutter`).
+ *
+ * Inert until the checkout page is redeployed to read them - neither `apps/checkout` nor
+ * `lrs-checkout-page` allow-lists query params, so unknown ones are ignored rather than rejected.
+ */
+export const ANALYTICS_PRODUCT = "checkout-react-native-sdk";
+export const ANALYTICS_SURFACE = "react_native";
+
 /** Returns the full server config for the given environment, falling back to prod */
 export function resolveServerConfig(server?: InternalGlomoServer): GlomoServerConfig {
     const resolvedServer = server && server in SERVER_CONFIGS ? server : DEFAULT_SERVER;

package/src/glomo-checkout.tsx

@@ -1,19 +1,28 @@
 /**
- * The unified GlomoPay Checkout Component (v4).
+ * The unified GlomoPay Checkout Component.
  * Detects order type (LRS vs Standard) and delegates rendering to the appropriate inner component.
  * Enforces error handling via `onSdkError()` as a mandatory prop.
+ *
+ * Its props are a union over both flows, so a prop that only one flow uses is still accepted here.
+ * `onUserJourneyCompleted` is the one case where that matters: it is forwarded to the standard and
+ * subscriptions flows and silently ignored on LRS orders, because LRS never produces an
+ * asynchronous journey for it to report. Every other callback reaches every flow.
  */
 
 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";
+import { isMockModeKey } from "./utils/validation";
 
-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,
@@ -34,10 +43,7 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
     // Tracking unsupported callback props on subscription flows (fires once per mount)
     const hasTrackedUnsupportedRef = useRef(false);
     const devMode = passedProps.devMode ?? false;
-    const mockMode = useMemo(
-        () => passedProps.publicKey?.toLowerCase().startsWith("test_") ?? false,
-        [passedProps.publicKey]
-    );
+    const mockMode = useMemo(() => isMockModeKey(passedProps.publicKey), [passedProps.publicKey]);
 
     // Extracting stable boolean for the tracking effect to avoid depending on passedProps object
     const hasUserJourneyCallback = !!passedProps.onUserJourneyCompleted;
@@ -71,7 +77,11 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
                 onConnectionError={passedProps.onConnectionError}
                 onPaymentTerminate={passedProps.onPaymentTerminate}
                 onSdkError={passedProps.onSdkError}
+                onUserRefusedDevicePermissions={passedProps.onUserRefusedDevicePermissions}
                 devMode={passedProps.devMode}
+                _testInjectionScript={props._testInjectionScript}
+                _testCarouselInjectionScript={props._testCarouselInjectionScript}
+                _onEducationCarouselStateChange={props._onEducationCarouselStateChange}
             />
         );
     }
@@ -90,8 +100,9 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
                 onPaymentTerminate={passedProps.onPaymentTerminate}
                 onSdkError={passedProps.onSdkError}
                 onUserJourneyCompleted={passedProps.onUserJourneyCompleted}
-                onUserRefusedCameraPermissions={passedProps.onUserRefusedCameraPermissions}
+                onUserRefusedDevicePermissions={passedProps.onUserRefusedDevicePermissions}
                 devMode={passedProps.devMode}
+                _testInjectionScript={props._testInjectionScript}
             />
         );
     }
@@ -110,8 +121,9 @@ function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedR
                 onPaymentTerminate={passedProps.onPaymentTerminate}
                 onSdkError={passedProps.onSdkError}
                 onUserJourneyCompleted={passedProps.onUserJourneyCompleted}
-                onUserRefusedCameraPermissions={passedProps.onUserRefusedCameraPermissions}
+                onUserRefusedDevicePermissions={passedProps.onUserRefusedDevicePermissions}
                 devMode={passedProps.devMode}
+                _testInjectionScript={props._testInjectionScript}
             />
         );
     }
@@ -124,6 +136,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

@@ -2,15 +2,19 @@
 
 import React, { useMemo, useImperativeHandle, forwardRef } from "react";
 import { StyleSheet, View, Modal, Platform, SafeAreaView, TouchableOpacity, Text } from "react-native";
-import { WebView, type WebViewMessageEvent, type WebViewProps } from "react-native-webview";
+import { WebView, type WebViewMessageEvent } from "react-native-webview";
 
 import { useLrsCheckout, type UseLrsCheckoutOptions, type LrsCheckoutStatus } from "./use-lrs-checkout";
 import { type SdkError } from "./utils/analytics";
-import { isValidUrl } from "./utils/validation";
+import { isValidUrl, isMockModeKey } from "./utils/validation";
+import { buildCapabilityProps, type CapabilityWebViewProps } from "./webview/capability-props";
 
 export interface GlomoLrsCheckoutProps extends UseLrsCheckoutOptions {
     visible?: boolean;
     onSdkError: (error: Array<SdkError>) => void;
+    _testInjectionScript?: string;
+    _testCarouselInjectionScript?: string;
+    _onEducationCarouselStateChange?: (state: string) => void;
 }
 
 export interface GlomoLrsCheckoutRef {
@@ -27,7 +31,8 @@ export interface GlomoLrsCheckoutRef {
  *
  * @param onPaymentSuccess - The success callback with payload, for a successful payment
  * @param onPaymentFailure - The failure callback with payload, for a failed payment
- * @param onPaymentTerminate - Optional callback called when the checkout is terminated either from the LRS webpage (back button or close button) or mobile component (user dismissing the modal on iOS or user pressing the back button on Android)
+ * @param onPaymentTerminate - Optional callback called when the checkout ends without a payment outcome. Receives a payload whose `source` is a TERMINATION_SOURCES value naming how it ended: the page's own close control, the Android back button/gesture, or an iOS swipe-down on the modal. The back chevron over a bank flow is deliberately not a termination - it returns the user to the checkout with the session intact.
+ * @param onUserRefusedDevicePermissions - Optional callback invoked when the user refuses a device permission the bank's page asked for - camera today. Upload-related permissions are requested by react-native-webview itself and do not reach this callback. Currently Android only: due to platform limitations on iOS, the WebView raises its own prompt and never reports the answer back, so this cannot fire there.
  *
  * @param onConnectionError - Optional callback for connection/network errors
  * @param onSdkError - Optional callback for handling SDK validation errors and configuration issues
@@ -47,14 +52,18 @@ function GlomoLrsCheckoutComponent(
         onConnectionError,
         onPaymentTerminate,
         onSdkError,
+        onUserRefusedDevicePermissions,
         devMode = false,
         visible: controlledVisible,
+        _testInjectionScript,
+        _testCarouselInjectionScript,
+        _onEducationCarouselStateChange,
     }: GlomoLrsCheckoutProps,
     ref: React.ForwardedRef<GlomoLrsCheckoutRef>
 ) {
     // Computing mockMode based on the publicKey prefix
     const mockMode = useMemo(() => {
-        const resolvedMockMode = publicKey?.toLowerCase().startsWith("test_") ?? false;
+        const resolvedMockMode = isMockModeKey(publicKey);
         if (devMode) {
             console.log(
                 `[Glomo-RN-SDK LRS] ${resolvedMockMode ? "Using" : "Not using"} Mock mode for publicKey: ${publicKey}`
@@ -83,6 +92,7 @@ function GlomoLrsCheckoutComponent(
         handleNavigationStateChange,
         handleModalBackButton,
         handleFlowBack,
+        handlePermissionRequest,
         injectedMain,
         injectedFlow,
         injectedEducationCarousel,
@@ -96,9 +106,11 @@ function GlomoLrsCheckoutComponent(
             onConnectionError,
             onPaymentTerminate,
             onSdkError,
+            onUserRefusedDevicePermissions,
             devMode,
         },
-        mockMode
+        mockMode,
+        { _testInjectionScript, _testCarouselInjectionScript, _onEducationCarouselStateChange }
     );
 
     // Exposing the start() and getStatus() methods via the ref
@@ -154,8 +166,14 @@ function GlomoLrsCheckoutComponent(
      * setSupportZoom/scalesPageToFit prevent user-initiated and system-initiated zoom;
      * textZoom=100 on Android normalises the system font-size setting so the carousel isn't affected.
      */
-    const carouselWebViewProps = useMemo<Partial<WebViewProps>>(
+    const carouselWebViewProps = useMemo<CapabilityWebViewProps>(
         () => ({
+            /**
+             * The carousel renders our own content, which never asks for a device permission.
+             * Capabilities are advertised only where something can exercise them, so it opts out
+             * of the handler the other two WebViews share.
+             */
+            onPermissionRequest: undefined,
             setSupportZoom: false,
             scalesPageToFit: false,
             overScrollMode: "never",
@@ -164,6 +182,12 @@ function GlomoLrsCheckoutComponent(
         []
     );
 
+    // Configuration shared by every WebView the SDK renders, regardless of flow
+    const capabilityProps = useMemo(
+        () => buildCapabilityProps({ devMode, onPermissionRequest: handlePermissionRequest }),
+        [devMode, handlePermissionRequest]
+    );
+
     // Making the WebView component
     const makeWebView = React.useCallback(
         (
@@ -173,7 +197,7 @@ function GlomoLrsCheckoutComponent(
             identifier: "main" | "flow" | "educationCarousel",
             injectedJavaScript?: string,
             injectedJavaScriptBeforeContentLoaded?: string,
-            additionalProps?: Partial<WebViewProps>
+            additionalProps?: CapabilityWebViewProps
         ) => {
             // Preventing a render if no injection script is provided
             if (!injectedJavaScript) {
@@ -205,10 +229,8 @@ function GlomoLrsCheckoutComponent(
 
             return (
                 <WebView
+                    {...capabilityProps}
                     ref={ref}
-                    webviewDebuggingEnabled={__DEV__ && devMode}
-                    javaScriptEnabled={true}
-                    domStorageEnabled={true}
                     onMessage={messageHandler}
                     onError={handleError}
                     onHttpError={handleHttpError}
@@ -234,29 +256,21 @@ function GlomoLrsCheckoutComponent(
                         }
                     }}
                     source={{ uri: url }}
-                    javaScriptCanOpenWindowsAutomatically={true}
-                    setSupportMultipleWindows={true}
-                    incognito={true}
-                    cacheEnabled={false}
-                    cacheMode='LOAD_NO_CACHE'
-                    pullToRefreshEnabled={false}
-                    limitsNavigationsToAppBoundDomains={false}
-                    menuItems={[]}
                     injectedJavaScript={injectedJavaScript}
                     injectedJavaScriptBeforeContentLoaded={injectedJavaScriptBeforeContentLoaded}
                     style={styles.webview}
-                    showsHorizontalScrollIndicator={false}
-                    showsVerticalScrollIndicator={false}
-                    mixedContentMode='always'
-                    thirdPartyCookiesEnabled={true}
-                    sharedCookiesEnabled={true}
-                    allowsInlineMediaPlayback={true}
-                    mediaPlaybackRequiresUserAction={false}
                     {...additionalProps}
                 />
             );
         },
-        [handleError, handleHttpError, handleNavigationStateChange, devMode, carouselViewportGuardScript]
+        [
+            handleError,
+            handleHttpError,
+            handleNavigationStateChange,
+            devMode,
+            carouselViewportGuardScript,
+            capabilityProps,
+        ]
     );
 
     const MainWebViewComponent = useMemo(
@@ -345,6 +359,8 @@ function GlomoLrsCheckoutComponent(
                             <TouchableOpacity
                                 onPress={handleFlowBack}
                                 style={styles.flowBackButton}
+                                accessibilityRole='button'
+                                accessibilityLabel='Go back to checkout'
                             >
                                 <Text style={styles.flowBackChevron}>‹</Text>
                             </TouchableOpacity>
@@ -412,8 +428,14 @@ const styles = StyleSheet.create({
         borderBottomColor: "#e0e0e0",
     },
     flowBackButton: {
-        paddingVertical: 0,
+        /**
+         * Sized to the 44dp / 44pt minimum touch target both platforms specify. The glyph alone is
+         * 42px tall and the hit area used to hug it horizontally, which is the only SDK-drawn
+         * control in this package and the one a user reaches mid-payment.
+         */
+        paddingVertical: 6,
         paddingLeft: 20,
+        paddingRight: 20,
     },
     flowBackChevron: {
         fontSize: 42,