@glomopay/react-native-sdk 2.0.1 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@glomopay/react-native-sdk",
-    "version": "2.0.1",
+    "version": "3.0.1",
     "description": "The React Native SDK for GlomoPay",
     "license": "Apache-2.0",
     "main": "lib/index.js",
@@ -49,7 +49,7 @@
     },
     "homepage": "https://github.com/glomopay/glomopay-rn-sdk#readme",
     "dependencies": {
-        "axios": "^1.13.2"
+        "axios": "1.13.2"
     },
     "peerDependencies": {
         "react": ">=17.0.0",
@@ -70,6 +70,7 @@
         "lib",
         "src",
         "README.md",
+        "CHANGELOG.md",
         "LICENSE"
     ],
     "engines": {

package/src/config/base.ts

@@ -3,37 +3,56 @@
  * This file contains the default base configuration variables for the GlomoPay RN SDK.
  */
 
-/** The publicly documented server environments for the SDK */
-export type GlomoLrsServer = "prod" | "staging";
+/** The publicly documented server environments for the SDK (v3 alias) */
+export type GlomoServer = "prod" | "staging";
 
-/** Internal extension that adds "local" for development use — not exported */
-type InternalGlomoLrsServer = GlomoLrsServer | "local";
+/** Internal extension that adds "local" for development use - not exported */
+type InternalGlomoServer = GlomoServer | "local";
 
 /** Base URLs for a given server environment */
-export interface GlomoLrsServerConfig {
-    checkoutBaseUrl: string;
-    educationCarouselBaseUrl: string;
+export interface GlomoServerBaseUrls {
+    lrsCheckout: string;
+    standardCheckout: string;
+    lrsEducationCarousel: string;
+    api: string;
 }
 
-export const DEFAULT_SERVER: InternalGlomoLrsServer = "prod";
+/** Server config with nested base URLs */
+export interface GlomoServerConfig {
+    baseUrl: GlomoServerBaseUrls;
+}
+
+export const DEFAULT_SERVER: InternalGlomoServer = "prod";
 
-export const SERVER_CONFIGS: Record<InternalGlomoLrsServer, GlomoLrsServerConfig> = {
+export const SERVER_CONFIGS: Record<InternalGlomoServer, GlomoServerConfig> = {
     prod: {
-        checkoutBaseUrl: "https://lrs-checkout.glomopay.com/",
-        educationCarouselBaseUrl: "https://glomopay-utilities.web.app/lrs-education-carousel/",
+        baseUrl: {
+            lrsCheckout: "https://lrs-checkout.glomopay.com/",
+            standardCheckout: "https://checkout.glomopay.com/",
+            lrsEducationCarousel: "https://glomopay-utilities.web.app/lrs-education-carousel/",
+            api: "https://api.glomopay.com",
+        },
     },
     staging: {
-        checkoutBaseUrl: "https://lrs-checkout-page-staging.web.app/",
-        educationCarouselBaseUrl: "https://glomopay-utilities-staging.web.app/lrs-education-carousel/",
+        baseUrl: {
+            lrsCheckout: "https://lrs-checkout-page-staging.web.app/",
+            standardCheckout: "https://glomopay-checkout-page-staging.web.app/",
+            lrsEducationCarousel: "https://glomopay-utilities-staging.web.app/lrs-education-carousel/",
+            api: "https://staging-api.glomopay.com",
+        },
     },
     local: {
-        checkoutBaseUrl: "http://localhost:6870/",
-        educationCarouselBaseUrl: "http://localhost:6871/lrs-education-carousel/",
+        baseUrl: {
+            lrsCheckout: "http://localhost:6870/",
+            standardCheckout: "http://localhost:4444/",
+            lrsEducationCarousel: "http://localhost:6871/lrs-education-carousel/",
+            api: "http://localhost:3000",
+        },
     },
 };
 
-/** Returns the server config for the given environment, falling back to the default (prod) server */
-export function resolveServerConfig(server?: InternalGlomoLrsServer): GlomoLrsServerConfig {
+/** 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;
 
     return SERVER_CONFIGS[resolvedServer];

package/src/config/segment.ts

@@ -67,7 +67,7 @@ export function initializeSegment(devMode: boolean = false): boolean {
     // Preventing multiple initialization attempts
     if (initializationAttempted) {
         if (devMode) {
-            console.log("[GlomoPay RN SDK] Segment initialization already attempted");
+            console.log("[Glomo-RN-SDK] Segment initialization already attempted");
         }
         return segmentApiClient !== null;
     }
@@ -91,14 +91,14 @@ export function initializeSegment(devMode: boolean = false): boolean {
         });
 
         if (devMode) {
-            console.log("[GlomoPay RN SDK] Segment Analytics initialized successfully");
+            console.log("[Glomo-RN-SDK] Segment Analytics initialized successfully");
         }
 
         return true;
     } catch (error) {
         if (devMode) {
             const errorMessage = error instanceof Error ? error.message : String(error);
-            console.error("[GlomoPay RN SDK] Failed to initialize Segment:", errorMessage);
+            console.error("[Glomo-RN-SDK] Failed to initialize Segment:", errorMessage);
         }
 
         // Resetting the flag to allow retrying if needed

package/src/glomo-checkout.tsx

@@ -0,0 +1,73 @@
+/**
+ * The unified GlomoPay Checkout Component (v3).
+ * Detects order type (LRS vs Standard) and delegates rendering to the appropriate inner component.
+ */
+
+import React, { useImperativeHandle, forwardRef } from "react";
+
+import { useGlomoCheckout } from "./use-glomo-checkout";
+import { type GlomoCheckoutRef, type GlomoCheckoutProps } from "./types/checkout";
+import { GlomoLrsCheckout } from "./glomo-lrs-checkout";
+import { GlomoStandardCheckout } from "./glomo-standard-checkout";
+
+function GlomoCheckoutComponent(props: GlomoCheckoutProps, ref: React.ForwardedRef<GlomoCheckoutRef>) {
+    // useGlomoCheckout handles order type detection and exposes start/getStatus for the ref
+    const { orderType, start, getStatus, innerLrsRef, innerStandardRef, props: passedProps } = useGlomoCheckout(props);
+
+    // Exposing start() and getStatus() via the forwarded ref for the merchant to call
+    useImperativeHandle(ref, () => ({
+        start,
+        getStatus,
+    }));
+
+    // Delegating to the LRS checkout component once order type is resolved as LRS
+    if (orderType === "lrs") {
+        return (
+            <GlomoLrsCheckout
+                ref={innerLrsRef}
+                server={passedProps.server}
+                publicKey={passedProps.publicKey}
+                orderId={passedProps.orderId}
+                onPaymentSuccess={passedProps.onPaymentSuccess}
+                onPaymentFailure={passedProps.onPaymentFailure}
+                onConnectionError={passedProps.onConnectionError}
+                onPaymentTerminate={passedProps.onPaymentTerminate}
+                onSdkError={passedProps.onSdkError}
+                devMode={passedProps.devMode}
+            />
+        );
+    }
+
+    // Delegating to the Standard checkout component once order type is resolved as Standard
+    if (orderType === "standard") {
+        return (
+            <GlomoStandardCheckout
+                ref={innerStandardRef}
+                server={passedProps.server}
+                publicKey={passedProps.publicKey}
+                orderId={passedProps.orderId}
+                onPaymentSuccess={passedProps.onPaymentSuccess}
+                onPaymentFailure={passedProps.onPaymentFailure}
+                onConnectionError={passedProps.onConnectionError}
+                onPaymentTerminate={passedProps.onPaymentTerminate}
+                onSdkError={passedProps.onSdkError}
+                onBankTransferSubmitted={passedProps.onBankTransferSubmitted}
+                onPayViaBankCompleted={passedProps.onPayViaBankCompleted}
+                onPayViaBankBankConnectionSuccessful={passedProps.onPayViaBankBankConnectionSuccessful}
+                onUserRefusedCameraPermissions={passedProps.onUserRefusedCameraPermissions}
+                devMode={passedProps.devMode}
+            />
+        );
+    }
+
+    /**
+     * No modal for detecting state - avoids iOS pageSheet conflict where
+     * dismissing the detecting modal interferes with the checkout modal presentation.
+     * The order type detection is fast enough that a loading indicator is not needed.
+     */
+    return null;
+}
+
+export const GlomoCheckout = forwardRef<GlomoCheckoutRef, GlomoCheckoutProps>(GlomoCheckoutComponent);
+
+GlomoCheckout.displayName = "GlomoCheckout";

package/src/glomo-lrs-checkout.tsx

@@ -57,7 +57,7 @@ function GlomoLrsCheckoutComponent(
         const resolvedMockMode = publicKey?.toLowerCase().startsWith("test_") ?? false;
         if (devMode) {
             console.log(
-                `[GlomoPay RN SDK] ${resolvedMockMode ? "Using" : "Not using"} Mock mode for publicKey: ${publicKey}`
+                `[Glomo-RN-SDK LRS] ${resolvedMockMode ? "Using" : "Not using"} Mock mode for publicKey: ${publicKey}`
             );
         }
         return resolvedMockMode;
@@ -179,7 +179,7 @@ function GlomoLrsCheckoutComponent(
             if (!injectedJavaScript) {
                 if (devMode) {
                     console.warn(
-                        `[GlomoPay RN SDK] JavaScript Injection missing for ${url}. Skipping ${identifier} Render.`
+                        `[Glomo-RN-SDK LRS] JavaScript Injection missing for ${url}. Skipping ${identifier} Render.`
                     );
                 }
                 return null;
@@ -191,14 +191,14 @@ function GlomoLrsCheckoutComponent(
                 if (!isValidUrl(url)) {
                     if (devMode) {
                         console.error(
-                            `[GlomoPay RN SDK] Invalid non-empty URL ${url} provided. Skipping ${identifier} Render.`
+                            `[Glomo-RN-SDK LRS] Invalid non-empty URL ${url} provided. Skipping ${identifier} Render.`
                         );
                     }
                     return null;
                 }
 
                 if (devMode) {
-                    console.error(`[GlomoPay RN SDK] Empty or invalid URL provided. Skipping ${identifier} Render.`);
+                    console.error(`[Glomo-RN-SDK LRS] Empty or invalid URL provided. Skipping ${identifier} Render.`);
                 }
                 return null;
             }
@@ -215,7 +215,7 @@ function GlomoLrsCheckoutComponent(
                     onNavigationStateChange={handleNavigationStateChange}
                     onLoadStart={() => {
                         if (devMode) {
-                            console.log(`[GlomoPay RN SDK] [${identifier}] WebView load started for ${url}`);
+                            console.log(`[Glomo-RN-SDK LRS] [${identifier}] WebView load started for ${url}`);
                         }
                     }}
                     onLoadEnd={() => {
@@ -223,13 +223,13 @@ function GlomoLrsCheckoutComponent(
                             ref.current.injectJavaScript(carouselViewportGuardScript);
                         }
                         if (devMode) {
-                            console.log(`[GlomoPay RN SDK] [${identifier}] WebView load ended for ${url}`);
+                            console.log(`[Glomo-RN-SDK LRS] [${identifier}] WebView load ended for ${url}`);
                         }
                     }}
                     onLoadProgress={({ nativeEvent }) => {
                         if (devMode && identifier === "educationCarousel") {
                             console.log(
-                                `[GlomoPay RN SDK] [educationCarousel] load progress=${nativeEvent.progress} url=${nativeEvent.url}`
+                                `[Glomo-RN-SDK LRS] [educationCarousel] load progress=${nativeEvent.progress} url=${nativeEvent.url}`
                             );
                         }
                     }}
@@ -304,7 +304,7 @@ function GlomoLrsCheckoutComponent(
 
         if (devMode) {
             console.log(
-                `[GlomoPay RN SDK] computed visibilityHook: ${value} for internal switch ${isVisible}, and checkout=${checkoutUrl};`
+                `[Glomo-RN-SDK LRS] computed visibilityHook: ${value} for internal switch ${isVisible}, and checkout=${checkoutUrl};`
             );
         }
         return value;
@@ -325,7 +325,7 @@ function GlomoLrsCheckoutComponent(
 
     if (devMode) {
         console.log(
-            `[GlomoPay RN SDK] Render gates: modal=${shouldShowModal}, flowOverlay=${shouldRenderFlowOverlay}, educationCarouselWebView=${shouldRenderEducationCarousel}, educationCarouselVisible=${showCarousel}, flowWebViewUrl=${flowWebViewUrl || "<empty>"}, educationCarouselUrl=${resolvedEducationCarouselUrl || "<empty>"}`
+            `[Glomo-RN-SDK LRS] Render gates: modal=${shouldShowModal}, flowOverlay=${shouldRenderFlowOverlay}, educationCarouselWebView=${shouldRenderEducationCarousel}, educationCarouselVisible=${showCarousel}, flowWebViewUrl=${flowWebViewUrl || "<empty>"}, educationCarouselUrl=${resolvedEducationCarouselUrl || "<empty>"}`
         );
     }
 
@@ -342,7 +342,10 @@ function GlomoLrsCheckoutComponent(
                 {shouldRenderFlowOverlay && (
                     <View style={styles.flowWebViewContainer}>
                         <SafeAreaView style={styles.flowHeader}>
-                            <TouchableOpacity onPress={handleFlowBack} style={styles.flowBackButton}>
+                            <TouchableOpacity
+                                onPress={handleFlowBack}
+                                style={styles.flowBackButton}
+                            >
                                 <Text style={styles.flowBackChevron}>‹</Text>
                             </TouchableOpacity>
                         </SafeAreaView>

package/src/glomo-standard-checkout.tsx

@@ -0,0 +1,324 @@
+/** 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 { isValidUrl } from "./utils/validation";
+
+/**
+ * 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,
+    }: GlomoStandardCheckoutProps,
+    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
+    );
+
+    // 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>
+    );
+}
+
+export const GlomoStandardCheckout = forwardRef<GlomoStandardCheckoutRef, GlomoStandardCheckoutProps>(
+    GlomoStandardCheckoutComponent
+);
+
+GlomoStandardCheckout.displayName = "GlomoStandardCheckout";
+
+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/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 } 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,
 };