Rs-webshop-embedded-native NPM

Munu integration component

Installation

npm install rs-webshop-embedded-native

Requirements

React native
react-native-web-view

Usage

Sample tsx

Webshop component can be used to open instance in default browser (button option) or using react-native-web-view to embed it in app

import { EmbeddedWebshop } from 'rs-webshop-embedded-native';

<Text>Option1: browser Webshop</Text>
<EmbeddedWebshop
    url={webshopUrl}
    openUsingButton={true}
    openWebshopButtonText="Open Webshop"
/>

<Text>Option2: embedded Webshop</Text>
<EmbeddedWebshop
    url={webshopUrl}
    openUsingButton={false}
    authToken={validAuthToken}
    authMerchant={validAuthMerchant}
    showLoadingIndicator={true}
    onNavigatedCallback={onLoaded}
    onLoadedCallback={onLoaded}
    onWebshopReadyCallback={onWebshopReady}
    fallbackUrlBase={webshopFallbackUrl}
    receivedFallbackUrl={receivedDeepLinkFallback}
    onFallbackUrlHandled={onFallbackHandled}
    onInjectBackNavigationTrigger={onInjectBackNavigationTrigger}
    onGoToMainCallback={onGoToMain}
    entryPoint={entryPoint}
/>

Interface

Following props are exposed by EmbeddedWebshop component (prone to change)

// url used to open the webshop instance
url: string,
// optional JWT token to authenticate user when opening
authToken?: string,
// optional authentication merchant supported by webshop for external authentication 
authMerchant?: string,
// reports errors when occurred within component
onErrorCallback?: (error: string) => void, 
// forces to render webshop inside embedded web view
openUsingButton: false/true,
// open webshop button text (used only when openUsingButton is true)
openWebshopButtonText?: string,
// enables/disables loading indicator on web view
showLoadingIndicator?: boolean,    
// reports current url when web view loaded
onLoadedCallback?: (url?: string) => void,
// reports current url when web view navigated
onNavigatedCallback?: (url: string) => void,
// reports inner webshop was loaded and is ready to work
onWebshopReadyCallback?: () => void,
// sets deeplink fallback base passed to webshop
fallbackUrlBase?: string,
// sets deeplink fallback received by main app and passed to webshop to handle
receivedFallbackUrl?: string,
// reported by webshop when deep link was analyzed and handled (can be cleared out from main app, etc.)
onFallbackUrlHandled?: (isWebshopHandled: boolean) => void
// called from webshop when navigation out of webshop context (back to main app/menu)
onGoToMainCallback?: () => void,
// called from webshop to provide main app with forced "goBack" navigation object in webshop (iOS back nav issue)
onInjectBackNavigationTrigger?: (goBack: () => void) => void
// entry point name to open when webshop loads
entryPoint: EmbeddedWebshopEntryPoints,