@moonpay/platform-sdk-react-native 1.16.0 → 1.17.0

package/README.md

@@ -23,7 +23,30 @@ Peer dependencies:
 - `react-native` >= 0.73 (Hermes supported)
 - `react-native-webview` >= 13
 
-The SDK's crypto layer is pure JavaScript (`@noble` libraries) — no native modules or polyfills required.
+### Crypto polyfill (required on React Native)
+
+The SDK's crypto layer is pure JavaScript (`@noble` libraries), but key exchange needs a cryptographically-secure `crypto.getRandomValues`. React Native (Hermes) has no Web Crypto API, so you must install a polyfill and register it **before** the SDK runs — at your app entry, or a `polyfills.ts` you import first. Without it, the first `getConnection()` fails with a clear error telling you to add one.
+
+**Expo** — `expo-crypto` provides a Web-Crypto-compatible `getRandomValues` but does not auto-install it on the global (works in Expo Go):
+
+```ts
+// polyfills.ts — imported first, before the MoonPay SDK
+import * as Crypto from 'expo-crypto';
+
+if (typeof globalThis.crypto?.getRandomValues !== 'function') {
+  globalThis.crypto = {
+    ...globalThis.crypto,
+    getRandomValues: (array) => Crypto.getRandomValues(array),
+  };
+}
+```
+
+**Bare React Native** — `react-native-get-random-values` installs the global on import:
+
+```ts
+// index.js — first import, before the app
+import 'react-native-get-random-values';
+```
 
 ## Quick start
 

package/dist/index.cjs

@@ -502,7 +502,13 @@ var import_react = require("react");
 var import_react_native = require("react-native");
 var import_react_native_webview = __toESM(require("react-native-webview"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-function MoonPayFrame({ transport, hidden, style }) {
+var DEFAULT_ORIGIN_WHITELIST = ["https://*", "http://*", "about:srcdoc"];
+function MoonPayFrame({
+  transport,
+  hidden,
+  style,
+  webViewProps
+}) {
   const webViewRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     transport.attachWebView(webViewRef);
@@ -518,13 +524,15 @@ function MoonPayFrame({ transport, hidden, style }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native_webview.default,
     {
-      ref: webViewRef,
-      source: { uri: url },
-      onMessage: handleMessage,
+      originWhitelist: DEFAULT_ORIGIN_WHITELIST,
       allowsInlineMediaPlayback: true,
       javaScriptEnabled: true,
       domStorageEnabled: true,
-      style: { flex: 1 }
+      style: { flex: 1 },
+      ...webViewProps,
+      ref: webViewRef,
+      source: { uri: url },
+      onMessage: handleMessage
     }
   ) });
 }
@@ -590,6 +598,7 @@ var WebViewTransport = class {
 };
 
 // src/frame-engine.ts
+var CRYPTO_UNAVAILABLE_MESSAGE = "MoonPay SDK: crypto.getRandomValues is unavailable. React Native (Hermes) has no Web Crypto. Install and register a Web Crypto getRandomValues polyfill on the global before using the SDK \u2014 Expo: expo-crypto; bare React Native: react-native-get-random-values. See https://dev.moonpay.com/platform/sdk-reference/react-native/overview.";
 var FrameSessionDisposedError = class extends Error {
   constructor() {
     super("Frame session disposed");
@@ -599,7 +608,11 @@ var FrameSessionDisposedError = class extends Error {
 function createFrameSession(spec, ctx, props, overrides = {}) {
   const generated = `${spec.channelPrefix}-${Date.now()}`;
   const channelId = spec.resolveChannelId ? spec.resolveChannelId(props, generated) : generated;
-  const keyPair = spec.needsKeyPair ? (0, import_platform_sdk_core3.generateKeyPair)() : void 0;
+  let keyPair;
+  if (spec.needsKeyPair) {
+    if (!(0, import_platform_sdk_core3.isSecureRandomAvailable)()) throw new Error(CRYPTO_UNAVAILABLE_MESSAGE);
+    keyPair = (0, import_platform_sdk_core3.generateKeyPair)();
+  }
   const builtUrl = spec.buildUrl ? spec.buildUrl(ctx, props, channelId, keyPair?.publicKey) : (0, import_platform_sdk_core3.buildFrameUrl)(
     spec.path,
     { ...spec.buildParams?.(ctx, props, keyPair?.publicKey), channelId },
@@ -1331,7 +1344,8 @@ function MoonPayFrameView({
   props,
   style,
   defaultStyle,
-  onEvent
+  onEvent,
+  webViewProps
 }) {
   const { sessionToken, core, frameBaseUrl, theme } = useMoonPayContext();
   const [transport, setTransport] = (0, import_react4.useState)(null);
@@ -1399,15 +1413,15 @@ function MoonPayFrameView({
     applyReactiveProps(spec, reactiveKeys, propsRef.current, appliedRef.current, handle);
   }, [liveKey]);
   if (spec.hidden) {
-    return transport ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoonPayFrame, { transport, hidden: true }) : null;
+    return transport ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoonPayFrame, { transport, hidden: true, webViewProps }) : null;
   }
   const resolvedStyle = { ...defaultStyle, ...style };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: resolvedStyle, children: transport ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoonPayFrame, { transport }) : null });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: resolvedStyle, children: transport ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoonPayFrame, { transport, webViewProps }) : null });
 }
 
 // src/components/add-card.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function MoonPayAddCard({ onEvent, style }) {
+function MoonPayAddCard({ onEvent, style, webViewProps }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     MoonPayFrameView,
     {
@@ -1415,7 +1429,8 @@ function MoonPayAddCard({ onEvent, style }) {
       props: {},
       style,
       defaultStyle: { flex: 1 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
@@ -1426,7 +1441,8 @@ function MoonPayApplePayButton({
   quote,
   externalTransactionId,
   onEvent,
-  style
+  style,
+  webViewProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     MoonPayFrameView,
@@ -1435,14 +1451,15 @@ function MoonPayApplePayButton({
       props: { quote, externalTransactionId },
       style,
       defaultStyle: { height: 48 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
 
 // src/components/auth.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function MoonPayAuth({ onEvent, style }) {
+function MoonPayAuth({ onEvent, style, webViewProps }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     MoonPayFrameView,
     {
@@ -1450,7 +1467,8 @@ function MoonPayAuth({ onEvent, style }) {
       props: {},
       style,
       defaultStyle: { flex: 1 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
@@ -1461,7 +1479,8 @@ function MoonPayBuyButton({
   quote,
   externalTransactionId,
   onEvent,
-  style
+  style,
+  webViewProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     MoonPayFrameView,
@@ -1470,7 +1489,8 @@ function MoonPayBuyButton({
       props: { quote, externalTransactionId },
       style,
       defaultStyle: { height: 48 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
@@ -1480,7 +1500,8 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 function MoonPayBuyFrame({
   quote,
   externalTransactionId,
-  onEvent
+  onEvent,
+  webViewProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     MoonPayFrameView,
@@ -1488,14 +1509,20 @@ function MoonPayBuyFrame({
       spec: buySpec,
       props: { quote, externalTransactionId },
       defaultStyle: {},
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
 
 // src/components/challenge.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function MoonPayChallenge({ url, onEvent, style }) {
+function MoonPayChallenge({
+  url,
+  onEvent,
+  style,
+  webViewProps
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     MoonPayFrameView,
     {
@@ -1503,14 +1530,20 @@ function MoonPayChallenge({ url, onEvent, style }) {
       props: { url },
       style,
       defaultStyle: { flex: 1 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
 
 // src/components/connect.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function MoonPayConnect({ theme, onEvent, style }) {
+function MoonPayConnect({
+  theme,
+  onEvent,
+  style,
+  webViewProps
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     MoonPayFrameView,
     {
@@ -1518,7 +1551,8 @@ function MoonPayConnect({ theme, onEvent, style }) {
       props: { theme },
       style,
       defaultStyle: { flex: 1 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
@@ -1527,7 +1561,8 @@ function MoonPayConnect({ theme, onEvent, style }) {
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function MoonPayConnectionCheck({
   skipKyc,
-  onEvent
+  onEvent,
+  webViewProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     MoonPayFrameView,
@@ -1535,20 +1570,37 @@ function MoonPayConnectionCheck({
       spec: connectionCheckSpec,
       props: { skipKyc },
       defaultStyle: {},
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
 
 // src/components/connection-reset.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function MoonPayConnectionReset({ onEvent }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MoonPayFrameView, { spec: connectionResetSpec, props: {}, defaultStyle: {}, onEvent });
+function MoonPayConnectionReset({
+  onEvent,
+  webViewProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    MoonPayFrameView,
+    {
+      spec: connectionResetSpec,
+      props: {},
+      defaultStyle: {},
+      onEvent,
+      webViewProps
+    }
+  );
 }
 
 // src/components/customer-export.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function MoonPayCustomerExport({ onEvent, style }) {
+function MoonPayCustomerExport({
+  onEvent,
+  style,
+  webViewProps
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     MoonPayFrameView,
     {
@@ -1556,7 +1608,8 @@ function MoonPayCustomerExport({ onEvent, style }) {
       props: {},
       style,
       defaultStyle: { flex: 1 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
@@ -1567,7 +1620,8 @@ function MoonPayGooglePayButton({
   quote,
   externalTransactionId,
   onEvent,
-  style
+  style,
+  webViewProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     MoonPayFrameView,
@@ -1576,7 +1630,8 @@ function MoonPayGooglePayButton({
       props: { quote, externalTransactionId },
       style,
       defaultStyle: { height: 48 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }
@@ -1587,7 +1642,8 @@ function MoonPayWidget({
   quote,
   externalTransactionId,
   onEvent,
-  style
+  style,
+  webViewProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MoonPayFrameView,
@@ -1596,7 +1652,8 @@ function MoonPayWidget({
       props: { quote, externalTransactionId },
       style,
       defaultStyle: { flex: 1 },
-      onEvent
+      onEvent,
+      webViewProps
     }
   );
 }