@glomopay/react-native-sdk 4.1.0 → 5.0.0

package/src/glomo-standard-checkout.tsx

@@ -6,8 +6,9 @@ import { WebView, type WebViewMessageEvent, type WebViewProps } from "react-nati
 
 import { useStandardCheckout } from "./use-standard-checkout";
 import { type GlomoStandardCheckoutRef, type GlomoStandardCheckoutProps } from "./types/standard-checkout";
-import { type CheckoutAnalyticsTrackers } from "./utils/analytics";
-import { isValidUrl } from "./utils/validation";
+import { type CheckoutAnalyticsTrackers, type FlowType } from "./utils/analytics";
+import { isValidUrl, isMockModeKey } from "./utils/validation";
+import { buildCapabilityProps } from "./webview/capability-props";
 
 /**
  * Internal-only props for GlomoStandardCheckout.
@@ -16,6 +17,9 @@ import { isValidUrl } from "./utils/validation";
  */
 export interface GlomoStandardCheckoutInternalProps extends GlomoStandardCheckoutProps {
     _analyticsTrackers?: CheckoutAnalyticsTrackers;
+
+    /** Names the flow for telemetry the tracker map does not cover - see UseStandardCheckoutInternalOptions */
+    _flowType?: FlowType;
     _skipOrderIdValidation?: boolean;
     _testInjectionScript?: string;
 }
@@ -29,7 +33,9 @@ export interface GlomoStandardCheckoutInternalProps extends GlomoStandardCheckou
  *
  * @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 webpage (back button or close button) or mobile component (user dismissing the modal on iOS or user pressing the back button on Android)
+ * @param onUserJourneyCompleted - Optional callback for asynchronous payment journeys - bank transfers and pay via bank. Carries the journey type and the transfer details the page reported, not a confirmed payment. LRS/Cards flows will never trigger this.
+ * @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
@@ -48,9 +54,10 @@ function GlomoStandardCheckoutComponent(
         onPaymentTerminate,
         onSdkError,
         onUserJourneyCompleted,
-        onUserRefusedCameraPermissions,
+        onUserRefusedDevicePermissions,
         devMode = false,
         _analyticsTrackers,
+        _flowType,
         _skipOrderIdValidation,
         _testInjectionScript,
     }: GlomoStandardCheckoutInternalProps,
@@ -58,7 +65,7 @@ function GlomoStandardCheckoutComponent(
 ) {
     // 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 Standard] ${resolvedMockMode ? "Using" : "Not using"} Mock mode for publicKey: ${publicKey}`
@@ -97,11 +104,11 @@ function GlomoStandardCheckoutComponent(
             onPaymentTerminate,
             onSdkError,
             onUserJourneyCompleted,
-            onUserRefusedCameraPermissions,
+            onUserRefusedDevicePermissions,
             devMode,
         },
         mockMode,
-        { analyticsTrackers: _analyticsTrackers, _skipOrderIdValidation, _testInjectionScript }
+        { analyticsTrackers: _analyticsTrackers, flowType: _flowType, _skipOrderIdValidation, _testInjectionScript }
     );
 
     // Exposing the start() and getStatus() methods via the ref
@@ -110,6 +117,12 @@ function GlomoStandardCheckoutComponent(
         getStatus: () => status,
     }));
 
+    // 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(
         (
@@ -153,10 +166,8 @@ function GlomoStandardCheckoutComponent(
 
             return (
                 <WebView
+                    {...capabilityProps}
                     ref={ref}
-                    webviewDebuggingEnabled={__DEV__ && devMode}
-                    javaScriptEnabled={true}
-                    domStorageEnabled={true}
                     onMessage={messageHandler}
                     onError={handleError}
                     onHttpError={handleHttpError}
@@ -172,36 +183,14 @@ function GlomoStandardCheckoutComponent(
                         }
                     }}
                     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}
-                    mediaCapturePermissionGrantType='prompt'
-                    allowFileAccess={true}
-                    allowUniversalAccessFromFileURLs={true}
-                    allowFileAccessFromFileURLs={true}
-                    androidLayerType='hardware'
-                    // @ts-expect-error onPermissionRequest is an Android-only WebView prop not yet in react-native-webview type definitions
-                    onPermissionRequest={handlePermissionRequest}
                     {...additionalProps}
                 />
             );
         },
-        [handleError, handleHttpError, handleNavigationStateChange, handlePermissionRequest, devMode]
+        [handleError, handleHttpError, handleNavigationStateChange, capabilityProps, devMode]
     );
 
     const MainWebViewComponent = useMemo(
@@ -262,6 +251,8 @@ function GlomoStandardCheckoutComponent(
                             <TouchableOpacity
                                 onPress={handleFlowBack}
                                 style={styles.flowBackButton}
+                                accessibilityRole='button'
+                                accessibilityLabel='Go back to checkout'
                             >
                                 <Text style={styles.flowBackChevron}>{"\u2039"}</Text>
                             </TouchableOpacity>
@@ -324,8 +315,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,

package/src/glomo-subscriptions-checkout.tsx

@@ -71,6 +71,7 @@ function GlomoSubscriptionsCheckoutComponent(
             onSdkError={onSdkError}
             devMode={devMode}
             _analyticsTrackers={subscriptionCheckoutTrackers}
+            _flowType='subscriptions'
             _skipOrderIdValidation={true}
         />
     );

package/src/index.ts

@@ -1,6 +1,6 @@
-/** The GlomoPay RN SDK v4 exports */
+/** The GlomoPay RN SDK v5 exports */
 
-// v4 public API - unified checkout
+// v5 public API - unified checkout
 export { GlomoCheckout } from "./glomo-checkout";
 export {
     type GlomoCheckoutRef,
@@ -8,7 +8,9 @@ export {
     type GlomoCheckoutPayload,
     type CheckoutStatus,
     type GlomoUserJourneyCompletedPayload,
+    type GlomoTerminationPayload,
     ASYNC_PAYMENT_EVENTS,
+    TERMINATION_SOURCES,
 } from "./types/checkout";
 export { type GlomoServer } from "./config/base";
 export { type SdkError } from "./utils/analytics";

package/src/injections/index.ts

@@ -6,6 +6,49 @@ import { injectedScript as flowScript } from "./webview-flow.injection";
 import { injectedScript as educationCarouselScript } from "./webview-education-carousel.injection";
 import { injectedScript as standardScript } from "./webview-standard.injection";
 
+/**
+ * Publishes what this SDK build can handle, for the checkout page to gate on.
+ *
+ * Appends rather than assigns, and de-duplicates, because the array is shared with anything else
+ * that writes to it. The page reads it at the moment it needs a capability rather than snapshotting
+ * it at load, so a script that runs after the page has mounted still takes effect.
+ *
+ * Returns an empty string when there is nothing to advertise - the page treats a missing array and
+ * an empty one the same way, so there is no reason to inject the assignment.
+ */
+export function buildCapabilityAdvertisement(capabilities: string[]): string {
+    if (capabilities.length === 0) {
+        return "";
+    }
+
+    return `
+    (function() {
+      window.__glomoSdkCapabilities__ = (window.__glomoSdkCapabilities__ || [])
+        .concat(${JSON.stringify(capabilities)})
+        .filter(function(cap, i, all) { return all.indexOf(cap) === i; });
+    })();
+    true;
+  `;
+}
+
+/**
+ * The scripts injected into each WebView, for a build with the given capabilities.
+ *
+ * Capabilities are advertised on the WebViews that load a checkout or a bank page, and not on the
+ * education carousel - that renders our own content, which has nothing to gate. Advertising a
+ * capability where nothing can exercise it is noise on a contract the page reads.
+ */
+export function buildInjectionScripts(capabilities: string[]) {
+    const advertisement = buildCapabilityAdvertisement(capabilities);
+
+    return {
+        main: mainScript + advertisement,
+        flow: flowScript + advertisement,
+        standard: standardScript + advertisement,
+        educationCarousel: educationCarouselScript,
+    };
+}
+
 export const InjectionScripts = {
     main: mainScript,
     flow: flowScript,

package/src/injections/webview-flow.injection.ts

@@ -203,6 +203,82 @@ export const injectedScript: string = `
         });
       });
 
+
+      /**
+       * File-input click detection.
+       *
+       * Does not open the picker - react-native-webview does that natively through
+       * onShowFileChooser, and the SDK never sees the rest of it. This carries the only record
+       * that an upload was attempted, and on iOS it is the only file signal at all, since
+       * WKWebView runs its own picker and reports nothing back.
+       *
+       * Capture phase, so a page that stops propagation on its own handler cannot silence it.
+       *
+       * Posts the shape of the input and nothing that identifies it. The id and name of a KYC
+       * upload control are third-party identity, and unconsumed page data sitting on the bridge is
+       * how identity ends up spread into a tracker by someone who never read this.
+       */
+      document.addEventListener('click', function(event) {
+        try {
+          const target = event.target;
+          if (!target || target.tagName !== 'INPUT' || target.type !== 'file') {
+            return;
+          }
+          safePostMessage({
+            type: 'file.input',
+            accept: target.getAttribute('accept') || '',
+            hasCapture: target.hasAttribute('capture')
+          });
+        } catch (error) {
+          // Never let this break a bank's own upload handling
+        }
+      }, true);
+
+
+      /**
+       * getUserMedia observation.
+       *
+       * Telemetry only, and it must stay that way. A rejection with NotAllowedError IS the user
+       * denying camera access - an observation, not an inference - and on iOS it is the only one
+       * available, because WKWebView raises its own prompt and never reports the answer back.
+       *
+       * It deliberately does NOT drive onUserRefusedDevicePermissions. Coverage depends on whether
+       * a given bank uses getUserMedia or a capture-enabled file input, which is third-party
+       * markup we do not control and are not told about when it changes. A callback that fires for
+       * some banks would leave a merchant unable to tell "the user did not deny" from "this bank's
+       * flow is not observable". Silence is unambiguous; partial coverage is not.
+       *
+       * Wrapped thinly and never allowed to throw: this runs inside a bank's page, and a fault in
+       * our handler must not be able to break their capture flow.
+       */
+      (function() {
+        try {
+          const media = navigator.mediaDevices;
+          if (!media || typeof media.getUserMedia !== 'function') {
+            return;
+          }
+          const originalGetUserMedia = media.getUserMedia.bind(media);
+          media.getUserMedia = function(constraints) {
+            return originalGetUserMedia(constraints).catch(function(error) {
+              try {
+                if (error && error.name === 'NotAllowedError') {
+                  safePostMessage({
+                    type: 'permission.denied',
+                    resource: (constraints && constraints.video) ? 'camera' : 'microphone',
+                    errorName: error.name
+                  });
+                }
+              } catch (reportingError) {
+                // Reporting must never change what the page sees
+              }
+              throw error;
+            });
+          };
+        } catch (error) {
+          // A page that has frozen navigator.mediaDevices keeps working, unobserved
+        }
+      })();
+
       // Logging that injection is complete
       console.log(LOG_PREFIX + 'GlomoPay WebView JavaScript injection complete');
 

package/src/injections/webview-main.injection.ts

@@ -209,6 +209,37 @@ export const injectedScript: string = `
         });
       });
 
+
+      /**
+       * File-input click detection.
+       *
+       * Does not open the picker - react-native-webview does that natively through
+       * onShowFileChooser, and the SDK never sees the rest of it. This carries the only record
+       * that an upload was attempted, and on iOS it is the only file signal at all, since
+       * WKWebView runs its own picker and reports nothing back.
+       *
+       * Capture phase, so a page that stops propagation on its own handler cannot silence it.
+       *
+       * Posts the shape of the input and nothing that identifies it. The id and name of a KYC
+       * upload control are third-party identity, and unconsumed page data sitting on the bridge is
+       * how identity ends up spread into a tracker by someone who never read this.
+       */
+      document.addEventListener('click', function(event) {
+        try {
+          const target = event.target;
+          if (!target || target.tagName !== 'INPUT' || target.type !== 'file') {
+            return;
+          }
+          safePostMessage({
+            type: 'file.input',
+            accept: target.getAttribute('accept') || '',
+            hasCapture: target.hasAttribute('capture')
+          });
+        } catch (error) {
+          // Never let this break a bank's own upload handling
+        }
+      }, true);
+
       // Logging that injection is complete
       console.log(LOG_PREFIX + 'GlomoPay WebView JavaScript injection complete');
 

package/src/injections/webview-standard.injection.ts

@@ -203,6 +203,37 @@ export const injectedScript: string = `
         });
       });
 
+
+      /**
+       * File-input click detection.
+       *
+       * Does not open the picker - react-native-webview does that natively through
+       * onShowFileChooser, and the SDK never sees the rest of it. This carries the only record
+       * that an upload was attempted, and on iOS it is the only file signal at all, since
+       * WKWebView runs its own picker and reports nothing back.
+       *
+       * Capture phase, so a page that stops propagation on its own handler cannot silence it.
+       *
+       * Posts the shape of the input and nothing that identifies it. The id and name of a KYC
+       * upload control are third-party identity, and unconsumed page data sitting on the bridge is
+       * how identity ends up spread into a tracker by someone who never read this.
+       */
+      document.addEventListener('click', function(event) {
+        try {
+          const target = event.target;
+          if (!target || target.tagName !== 'INPUT' || target.type !== 'file') {
+            return;
+          }
+          safePostMessage({
+            type: 'file.input',
+            accept: target.getAttribute('accept') || '',
+            hasCapture: target.hasAttribute('capture')
+          });
+        } catch (error) {
+          // Never let this break a bank's own upload handling
+        }
+      }, true);
+
       // Logging that injection is complete
       console.log(LOG_PREFIX + 'GlomoPay WebView JavaScript injection complete');