@stripe/stripe-react-native/lib/module/connect/EmbeddedComponent.js

Stripe SDK for React Native

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.EmbeddedComponent=EmbeddedComponent;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _package=_interopRequireDefault(require("../../../package.json"));var _NativeStripeSdkModule=_interopRequireDefault(require("../specs/NativeStripeSdkModule"));var _ConnectComponentsProvider=require("./ConnectComponentsProvider");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="/Users/tianzhao/stripe/stripe-react-native/src/connect/EmbeddedComponent.tsx";function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}var DEVELOPMENT_MODE=false;var DEVELOPMENT_URL=_reactNative.Platform.OS==='android'?'http://10.0.2.2:3001':'http://localhost:3001';var PRODUCTION_URL='https://connect-js.stripe.com';var BASE_URL=DEVELOPMENT_MODE?DEVELOPMENT_URL:PRODUCTION_URL;var sdkVersion=_package.default.version;if(!/^\d+\.\d+\.\d+$/.test(sdkVersion)){throw new Error(`Invalid SDK version: ${sdkVersion}. Must be in format X.Y.Z`);}var userAgent=['Mobile',`Stripe ReactNative SDK ${_reactNative.Platform.OS}/${_reactNative.Platform.Version}`,`stripe-react_native/${sdkVersion}`].join(' - ');function EmbeddedComponent(props){var _appearance$variables;var _useState=(0,_react.useState)(null),_useState2=(0,_slicedToArray2.default)(_useState,2),dynamicWebview=_useState2[0],setDynamicWebview=_useState2[1];var pendingAuthWebViewPromise=(0,_react.useRef)(null);var loadWebViewComponent=(0,_react.useCallback)((0,_asyncToGenerator2.default)(function*(){if(dynamicWebview)return;setDynamicWebview({WebView:null});try{var mod=yield import('react-native-webview');setDynamicWebview({WebView:mod.WebView});}catch(err){console.error('Failed to import react-native-webview:',err);}}),[dynamicWebview]);(0,_react.useEffect)(function(){loadWebViewComponent();},[loadWebViewComponent]);var appState=(0,_react.useRef)(_reactNative.AppState.currentState);(0,_react.useEffect)(function(){var subscription=_reactNative.AppState.addEventListener('change',function(nextAppState){if(appState.current.match(/inactive|background/)&&nextAppState==='active'){if(pendingAuthWebViewPromise.current){var _pendingAuthWebViewPr=pendingAuthWebViewPromise.current,id=_pendingAuthWebViewPr.id,callback=_pendingAuthWebViewPr.callback;pendingAuthWebViewPromise.current=null;callback(id,null);}}appState.current=nextAppState;});return function(){pendingAuthWebViewPromise.current=null;subscription.remove();};},[]);var _ref2=(0,_ConnectComponentsProvider.useConnectComponents)(),connectInstance=_ref2.connectInstance,appearance=_ref2.appearance,locale=_ref2.locale,overrides=_ref2.overrides;var _connectInstance$init=connectInstance.initParams,fonts=_connectInstance$init.fonts,publishableKey=_connectInstance$init.publishableKey,fetchClientSecret=_connectInstance$init.fetchClientSecret;var component=props.component,componentProps=props.componentProps,onLoadError=props.onLoadError,onLoaderStart=props.onLoaderStart,onPageDidLoad=props.onPageDidLoad,callbacks=props.callbacks,style=props.style;var hashParams={component:component,publicKey:publishableKey,merchantIdOverride:overrides==null?void 0:overrides.merchantId,platformIdOverride:overrides==null?void 0:overrides.platformId,apiKeyOverride:overrides==null?void 0:overrides.apiKey,livemodeOverride:overrides==null?void 0:overrides.livemode};var hash=Object.entries(hashParams).filter(function(_ref3){var _ref4=(0,_slicedToArray2.default)(_ref3,2),_=_ref4[0],value=_ref4[1];return value!=null;}).map(function(_ref5){var _ref6=(0,_slicedToArray2.default)(_ref5,2),key=_ref6[0],value=_ref6[1];return`${encodeURIComponent(key)}=${encodeURIComponent(value)}`;}).join('&');var connectURL=`${BASE_URL}/v1.0/react_native_webview.html#${hash}`;var source=(0,_react.useMemo)(function(){return{uri:connectURL};},[connectURL]);var ref=(0,_react.useRef)(null);var _useState3=(0,_react.useState)(appearance),_useState4=(0,_slicedToArray2.default)(_useState3,2),prevAppearance=_useState4[0],setPrevAppearance=_useState4[1];var _useState5=(0,_react.useState)(locale),_useState6=(0,_slicedToArray2.default)(_useState5,2),prevLocale=_useState6[0],setPrevLocale=_useState6[1];if(prevAppearance!==appearance||prevLocale!==locale){var _ref$current;setPrevAppearance(appearance);setPrevLocale(locale);var patchedAppearance=withDefaultFontFamily(appearance);(_ref$current=ref.current)==null||_ref$current.injectJavaScript(`
      (function() {
        window.updateConnectInstance(${JSON.stringify({appearance:patchedAppearance,locale:locale})});
        true;
      })();
    `);}var _useState7=(0,_react.useState)(componentProps),_useState8=(0,_slicedToArray2.default)(_useState7,2),prevComponentProps=_useState8[0],setPrevComponentProps=_useState8[1];if(prevComponentProps!==componentProps){setPrevComponentProps(componentProps);Object.entries(componentProps||{}).forEach(function(_ref7){var _ref$current2;var _ref8=(0,_slicedToArray2.default)(_ref7,2),key=_ref8[0],value=_ref8[1];(_ref$current2=ref.current)==null||_ref$current2.injectJavaScript(`
        (function() {
          window.callSetterWithSerializableValue(${JSON.stringify({setter:key,value:value})});
          true;
        })();
      `);});}var handleUnexpectedError=(0,_react.useCallback)(function(error){var errorMessage=error instanceof Error?error.message:String(error);console.error(`Unexpected error: ${errorMessage}`);},[]);var WebViewComponent=dynamicWebview==null?void 0:dynamicWebview.WebView;var handleAuthWebViewResult=function handleAuthWebViewResult(id,resultUrl){var _ref$current3;(_ref$current3=ref.current)==null||_ref$current3.injectJavaScript(`
      (function() {
        window.returnedFromAuthenticatedWebView(${JSON.stringify({id:id,url:resultUrl})});
        true;
      })();
    `);};var onMessageCallback=(0,_react.useCallback)(function(){var _ref9=(0,_asyncToGenerator2.default)(function*(event){var message=JSON.parse(event.nativeEvent.data);if(message.type==='fetchClientSecret'){var _ref$current4;var clientSecret=yield fetchClientSecret().catch(function(error){handleUnexpectedError(error);return null;});if(!clientSecret)return;(_ref$current4=ref.current)==null||_ref$current4.injectJavaScript(`
            window.clientSecretDeferred.resolve(${JSON.stringify(clientSecret)});
          `);}else if(message.type==='debug'){console.debug(`[EmbeddedComponent ${component}]: ${message.data}`);}else if(message.type==='pageDidLoad'){onPageDidLoad==null||onPageDidLoad();}else if(message.type==='accountSessionClaimed'){}else if(message.type==='openFinancialConnections'){}else if(message.type==='closeWebView'){callbacks==null||callbacks.onCloseWebView==null||callbacks.onCloseWebView({});}else if(message.type==='callSupplementalFunction'){}else if(message.type==='onSetterFunctionCalled'){var _ref0=message.data,setter=_ref0.setter,value=_ref0.value;if(setter==='setOnLoaderStart'){onLoaderStart==null||onLoaderStart(value);}else if(setter==='setOnLoadError'){onLoadError==null||onLoadError(value);}else{var _callbacks$functionNa;var functionName=setter.charAt(3).toLowerCase()+setter.substring(4);callbacks==null||(_callbacks$functionNa=callbacks[functionName])==null||_callbacks$functionNa.call(callbacks,value);}}else if(message.type==='openAuthenticatedWebView'){var _ref1=message.data,url=_ref1.url,id=_ref1.id;if(!isValidUrl(url)){handleUnexpectedError(new Error(`Invalid URL for authenticated webview: ${url}`));return;}_NativeStripeSdkModule.default.openAuthenticatedWebView(id,url).then(function(result){if(_reactNative.Platform.OS==='ios'){var _result$url;handleAuthWebViewResult(id,(_result$url=result==null?void 0:result.url)!=null?_result$url:null);}else{pendingAuthWebViewPromise.current={id:id,callback:handleAuthWebViewResult};}}).catch(handleUnexpectedError);}else{}});return function(_x){return _ref9.apply(this,arguments);};}(),[callbacks,component,fetchClientSecret,handleUnexpectedError,onLoadError,onLoaderStart,onPageDidLoad]);var backgroundColor=(appearance==null||(_appearance$variables=appearance.variables)==null?void 0:_appearance$variables.colorBackground)||'#FFFFFF';var mergedStyle=(0,_react.useMemo)(function(){return[{backgroundColor:backgroundColor},style];},[backgroundColor,style]);if(!WebViewComponent)return null;return(0,_jsxRuntime.jsx)(WebViewComponent,{ref:ref,style:mergedStyle,webviewDebuggingEnabled:DEVELOPMENT_MODE,source:source,userAgent:userAgent,injectedJavaScriptObject:{initParams:{appearance:withDefaultFontFamily(appearance),locale:locale,fonts:fonts},initComponentProps:componentProps,appInfo:{applicationId:overrides==null?void 0:overrides.applicationId}},injectedJavaScriptBeforeContentLoaded:'(function() {})();',onMessage:onMessageCallback});}var DEFAULT_FONT="-apple-system, 'system-ui', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";function withDefaultFontFamily(appearance){var _appearance$variables2;if(appearance!=null&&(_appearance$variables2=appearance.variables)!=null&&_appearance$variables2.fontFamily){return appearance;}return Object.assign({},appearance,{variables:Object.assign({},appearance==null?void 0:appearance.variables,{fontFamily:DEFAULT_FONT})});}function isValidUrl(url){try{var parsedUrl=new URL(url);return parsedUrl.protocol==='http:'||parsedUrl.protocol==='https:';}catch(_unused){return false;}}
//# sourceMappingURL=EmbeddedComponent.js.map