@glomopay/react-native-sdk 2.0.2 → 3.1.0

package/src/glomo-standard-checkout.tsx

@@ -0,0 +1,353 @@
+/** The GlomoPay Standard Checkout Component */
+
+import React, { useImperativeHandle, useMemo, 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 { 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";
+
+/**
+ * Internal-only props for GlomoStandardCheckout.
+ * Used by GlomoSubscriptionsCheckout to inject subscription analytics trackers.
+ * Not exported to merchants via index.ts.
+ */
+export interface GlomoStandardCheckoutInternalProps extends GlomoStandardCheckoutProps {
+    _analyticsTrackers?: CheckoutAnalyticsTrackers;
+    _skipOrderIdValidation?: boolean;
+}
+
+/**
+ * The Main GlomoPay Standard Checkout Component
+ *
+ * @param server - Optional. The SDK server environment. For development builds ONLY.
+ * @param publicKey - The public key for the merchant. If it starts with "test_", mock mode will be enabled automatically. Otherwise, live mode is used.
+ * @param orderId - The order ID. Always starts with "order_"
+ *
+ * @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 onConnectionError - Optional callback for connection/network errors
+ * @param onSdkError - Optional callback for handling SDK validation errors and configuration issues
+ *
+ * @param ref - The ref for the component
+ * @param devMode - Turn on to see all logs, warnings, and errors in the console. Off by default
+ */
+function GlomoStandardCheckoutComponent(
+    {
+        server,
+        publicKey,
+        orderId,
+        onPaymentSuccess,
+        onPaymentFailure,
+        onConnectionError,
+        onPaymentTerminate,
+        onSdkError,
+        onBankTransferSubmitted,
+        onPayViaBankCompleted,
+        onPayViaBankBankConnectionSuccessful,
+        onUserRefusedCameraPermissions,
+        devMode = false,
+        _analyticsTrackers,
+        _skipOrderIdValidation,
+    }: GlomoStandardCheckoutInternalProps,
+    ref: React.ForwardedRef<GlomoStandardCheckoutRef>
+) {
+    // Computing mockMode based on the publicKey prefix
+    const mockMode = useMemo(() => {
+        const resolvedMockMode = publicKey?.toLowerCase().startsWith("test_") ?? false;
+        if (devMode) {
+            console.log(
+                `[Glomo-RN-SDK Standard] ${resolvedMockMode ? "Using" : "Not using"} Mock mode for publicKey: ${publicKey}`
+            );
+        }
+        return resolvedMockMode;
+    }, [publicKey, devMode]);
+
+    const {
+        start,
+        status,
+        showCheckout,
+        flowWebViewUrl,
+        showFlowWebView,
+        checkoutUrl,
+        mainWebViewRef,
+        flowWebViewRef,
+        handleMainWebViewMessage,
+        handleFlowWebViewMessage,
+        handleError,
+        handleHttpError,
+        handleNavigationStateChange,
+        handleModalBackButton,
+        handleFlowBack,
+        handlePermissionRequest,
+        injectedMain,
+        injectedFlow,
+    } = useStandardCheckout(
+        {
+            server,
+            publicKey,
+            orderId,
+            onPaymentSuccess,
+            onPaymentFailure,
+            onConnectionError,
+            onPaymentTerminate,
+            onSdkError,
+            onBankTransferSubmitted,
+            onPayViaBankCompleted,
+            onPayViaBankBankConnectionSuccessful,
+            onUserRefusedCameraPermissions,
+            devMode,
+        },
+        mockMode,
+        { analyticsTrackers: _analyticsTrackers, _skipOrderIdValidation }
+    );
+
+    // Exposing the start() and getStatus() methods via the ref
+    useImperativeHandle(ref, () => ({
+        start,
+        getStatus: () => status,
+    }));
+
+    // Making the WebView component
+    const makeWebView = React.useCallback(
+        (
+            ref: React.RefObject<WebView>,
+            url: string,
+            messageHandler: (event: WebViewMessageEvent) => void,
+            identifier: "main" | "flow",
+            injectedJavaScript?: string,
+            injectedJavaScriptBeforeContentLoaded?: string,
+            additionalProps?: Partial<WebViewProps>
+        ) => {
+            // Preventing a render if no injection script is provided
+            if (!injectedJavaScript) {
+                if (devMode) {
+                    console.warn(
+                        `[Glomo-RN-SDK Standard] JavaScript Injection missing for ${url}. Skipping ${identifier} Render.`
+                    );
+                }
+                return null;
+            }
+
+            // Preventing a render if URL is empty or invalid
+            if (!url || url.trim() === "") {
+                // Redundantly checking for surprise/extreme edge cases
+                if (!isValidUrl(url)) {
+                    if (devMode) {
+                        console.error(
+                            `[Glomo-RN-SDK Standard] Invalid non-empty URL ${url} provided. Skipping ${identifier} Render.`
+                        );
+                    }
+                    return null;
+                }
+
+                if (devMode) {
+                    console.error(
+                        `[Glomo-RN-SDK Standard] Empty or invalid URL provided. Skipping ${identifier} Render.`
+                    );
+                }
+                return null;
+            }
+
+            return (
+                <WebView
+                    ref={ref}
+                    webviewDebuggingEnabled={__DEV__ && devMode}
+                    javaScriptEnabled={true}
+                    domStorageEnabled={true}
+                    onMessage={messageHandler}
+                    onError={handleError}
+                    onHttpError={handleHttpError}
+                    onNavigationStateChange={handleNavigationStateChange}
+                    onLoadStart={() => {
+                        if (devMode) {
+                            console.log(`[Glomo-RN-SDK Standard] [${identifier}] WebView load started for ${url}`);
+                        }
+                    }}
+                    onLoadEnd={() => {
+                        if (devMode) {
+                            console.log(`[Glomo-RN-SDK Standard] [${identifier}] WebView load ended for ${url}`);
+                        }
+                    }}
+                    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]
+    );
+
+    const MainWebViewComponent = useMemo(
+        () => makeWebView(mainWebViewRef, checkoutUrl, handleMainWebViewMessage, "main", injectedMain),
+        [makeWebView, checkoutUrl, handleMainWebViewMessage, injectedMain, mainWebViewRef]
+    );
+
+    const FlowWebViewComponent = useMemo(
+        () =>
+            flowWebViewUrl
+                ? makeWebView(flowWebViewRef, flowWebViewUrl, handleFlowWebViewMessage, "flow", injectedFlow)
+                : null,
+        [makeWebView, flowWebViewUrl, handleFlowWebViewMessage, injectedFlow, flowWebViewRef]
+    );
+
+    const isVisible = showCheckout;
+
+    // Prevent extreme edge cases where validations inside start() do not prevent the flow initialization
+    const shouldShowModal = useMemo(() => {
+        const value = isVisible && (checkoutUrl ?? "").trim().length > 0;
+
+        if (devMode) {
+            console.log(
+                `[Glomo-RN-SDK Standard] computed visibilityHook: ${value} for internal switch ${isVisible}, and checkout=${checkoutUrl};`
+            );
+        }
+        return value;
+    }, [isVisible, checkoutUrl, devMode]);
+
+    // Alias to ensure explicit component reference for React Native
+    const ModalComponent = Modal;
+
+    /**
+     * Deriving render gates from state:
+     * shouldRenderFlowOverlay: flow overlay is mounted only when there is an active flow URL
+     */
+    const shouldRenderFlowOverlay = Boolean(showFlowWebView && flowWebViewUrl && FlowWebViewComponent);
+
+    if (devMode) {
+        console.log(
+            `[Glomo-RN-SDK Standard] Render gates: modal=${shouldShowModal}, flowOverlay=${shouldRenderFlowOverlay}, flowWebViewUrl=${flowWebViewUrl || "<empty>"}`
+        );
+    }
+
+    return (
+        <ModalComponent
+            visible={shouldShowModal}
+            animationType='slide'
+            presentationStyle={Platform.OS === "ios" ? "pageSheet" : "fullScreen"}
+            onRequestClose={handleModalBackButton}
+        >
+            <View style={styles.modalContainer}>
+                <View style={styles.mainWebViewContainer}>{MainWebViewComponent}</View>
+
+                {shouldRenderFlowOverlay && (
+                    <View style={styles.flowWebViewContainer}>
+                        <SafeAreaView style={styles.flowHeader}>
+                            <TouchableOpacity
+                                onPress={handleFlowBack}
+                                style={styles.flowBackButton}
+                            >
+                                <Text style={styles.flowBackChevron}>{"\u2039"}</Text>
+                            </TouchableOpacity>
+                        </SafeAreaView>
+                        <View style={styles.flowWebViewContent}>{FlowWebViewComponent}</View>
+                    </View>
+                )}
+            </View>
+        </ModalComponent>
+    );
+}
+
+/**
+ * Widening the internal type to GlomoStandardCheckoutInternalProps for internal SDK use,
+ * then narrowing the public export to GlomoStandardCheckoutProps so merchants cannot
+ * pass internal-only props like _analyticsTrackers.
+ */
+export const GlomoStandardCheckout = forwardRef(GlomoStandardCheckoutComponent) as React.ForwardRefExoticComponent<
+    GlomoStandardCheckoutProps & React.RefAttributes<GlomoStandardCheckoutRef>
+>;
+
+GlomoStandardCheckout.displayName = "GlomoStandardCheckout";
+
+/**
+ * Internal reference - accepts GlomoStandardCheckoutInternalProps.
+ * Not re-exported from index.ts.
+ */
+export const GlomoStandardCheckoutInternal = forwardRef<GlomoStandardCheckoutRef, GlomoStandardCheckoutInternalProps>(
+    GlomoStandardCheckoutComponent
+);
+
+GlomoStandardCheckoutInternal.displayName = "GlomoStandardCheckoutInternal";
+
+const styles = StyleSheet.create({
+    modalContainer: {
+        flex: 1,
+        backgroundColor: "#fff",
+    },
+    mainWebViewContainer: {
+        flex: 1,
+        position: "relative",
+    },
+    webview: {
+        flex: 1,
+    },
+    flowWebViewContainer: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        flexDirection: "column",
+        backgroundColor: "#fff",
+        zIndex: 99999,
+        elevation: 99999,
+    },
+    flowHeader: {
+        backgroundColor: "#fff",
+        borderBottomWidth: 1,
+        borderBottomColor: "#e0e0e0",
+    },
+    flowBackButton: {
+        paddingVertical: 0,
+        paddingLeft: 20,
+    },
+    flowBackChevron: {
+        fontSize: 42,
+        color: "#333",
+        lineHeight: 42,
+    },
+    flowWebViewContent: {
+        flex: 1,
+    },
+    errorContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 20,
+        backgroundColor: "#fff",
+    },
+    errorText: {
+        color: "#d32f2f",
+        fontSize: 14,
+        textAlign: "center",
+        lineHeight: 20,
+    },
+});

package/src/glomo-subscriptions-checkout.tsx

@@ -0,0 +1,83 @@
+/**
+ * GlomoSubscriptionsCheckout - thin wrapper around GlomoStandardCheckout
+ * that accepts a subscriptionId (sub_*) instead of an orderId (order_*).
+ */
+
+import React, { useRef, useImperativeHandle, forwardRef, useEffect } from "react";
+
+import { GlomoStandardCheckoutInternal } from "./glomo-standard-checkout";
+import { type GlomoStandardCheckoutRef } from "./types/standard-checkout";
+import {
+    type GlomoSubscriptionsCheckoutProps,
+    type GlomoSubscriptionsCheckoutRef,
+} from "./types/subscriptions-checkout";
+import { subscriptionCheckoutTrackers } from "./utils/analytics";
+import { safeCallback } from "./utils/validation";
+
+function GlomoSubscriptionsCheckoutComponent(
+    props: GlomoSubscriptionsCheckoutProps,
+    ref: React.ForwardedRef<GlomoSubscriptionsCheckoutRef>
+) {
+    const { subscriptionId: rawSubscriptionId, onSdkError, devMode = false, ...rest } = props;
+    const innerRef = useRef<GlomoStandardCheckoutRef>(null);
+    const onSdkErrorRef = useRef(onSdkError);
+    onSdkErrorRef.current = onSdkError;
+
+    const subscriptionId = rawSubscriptionId.trim();
+
+    /** Validating subscriptionId - firing onSdkError via useEffect to avoid side effects during render */
+    const validationError = (() => {
+        if (subscriptionId.length === 0) {
+            return "subscriptionId must not be empty";
+        }
+        if (!subscriptionId.startsWith("sub_")) {
+            return "subscriptionId must start with 'sub_'";
+        }
+        return null;
+    })();
+
+    useEffect(() => {
+        if (validationError) {
+            safeCallback(
+                onSdkErrorRef.current,
+                [[{ type: "validation_error", message: validationError }]],
+                "onSdkError",
+                devMode
+            );
+        }
+    }, [validationError, devMode]);
+
+    useImperativeHandle(ref, () => ({
+        start: () => {
+            if (validationError) {
+                return false;
+            }
+            return innerRef.current?.start() ?? false;
+        },
+        getStatus: () => {
+            return innerRef.current?.getStatus() ?? "ready";
+        },
+    }));
+
+    if (validationError) {
+        return null;
+    }
+
+    return (
+        <GlomoStandardCheckoutInternal
+            ref={innerRef}
+            {...rest}
+            orderId={subscriptionId}
+            onSdkError={onSdkError}
+            devMode={devMode}
+            _analyticsTrackers={subscriptionCheckoutTrackers}
+            _skipOrderIdValidation={true}
+        />
+    );
+}
+
+export const GlomoSubscriptionsCheckout = forwardRef<GlomoSubscriptionsCheckoutRef, GlomoSubscriptionsCheckoutProps>(
+    GlomoSubscriptionsCheckoutComponent
+);
+
+GlomoSubscriptionsCheckout.displayName = "GlomoSubscriptionsCheckout";

package/src/index.ts

@@ -1,9 +1,15 @@
-/** The GlomoPay RN SDK exports */
+/** The GlomoPay RN SDK v3 exports */
 
-// Payload, status, and error types from the LRS Checkout flow
-export { type GlomoLrsCheckoutPayload, type LrsCheckoutStatus } from "./use-lrs-checkout";
+// v3 public API - unified checkout
+export { GlomoCheckout } from "./glomo-checkout";
+export {
+    type GlomoCheckoutRef,
+    type GlomoCheckoutProps,
+    type GlomoCheckoutPayload,
+    type CheckoutStatus,
+    type GlomoBankTransferPayload,
+    type GlomoPayViaBankConnectionPayload,
+} from "./types/checkout";
+export { type GlomoServer } from "./config/base";
 export { type SdkError } from "./utils/analytics";
-export { type GlomoLrsServer } from "./config/base";
-
-// Main UI Component for the LRS Checkout flow
-export { GlomoLrsCheckout, type GlomoLrsCheckoutProps, type GlomoLrsCheckoutRef } from "./glomo-lrs-checkout";
+export { useGlomoCheckout, type UseGlomoCheckoutReturn } from "./use-glomo-checkout";

package/src/injections/index.ts

@@ -4,9 +4,11 @@
 import { injectedScript as mainScript } from "./webview-main.injection";
 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";
 
 export const InjectionScripts = {
     main: mainScript,
     flow: flowScript,
     educationCarousel: educationCarouselScript,
+    standard: standardScript,
 };