@moonpay/platform-sdk-react-native 1.9.0 → 1.11.0

package/README.md

@@ -63,6 +63,53 @@ export function App() {
 
 Pass an optional `theme={{ appearance: 'light' | 'dark' }}` to render every MoonPay frame in light or dark mode. Omit it to follow the customer's system preference. The connect flow can override it per call (`client.connect({ theme })` or `<MoonPayConnect theme={...} />`).
 
+#### Providing the session token later
+
+The `sessionToken` prop is optional. If you don't have it when the provider mounts (for example, you fetch it from your server after the customer signs in), mount `MoonPayProvider` without it and call `initialize()` from `useMoonPay()` once the token is available:
+
+```tsx
+import { MoonPayProvider, useMoonPay } from '@moonpay/platform-sdk-react-native';
+
+export function App() {
+  return (
+    <MoonPayProvider>
+      <YourApp />
+    </MoonPayProvider>
+  );
+}
+
+function SignInScreen() {
+  const { initialize, isInitialized } = useMoonPay();
+
+  const onSignedIn = async () => {
+    const sessionToken = await fetchSessionTokenFromYourServer();
+    initialize(sessionToken); // the SDK is now ready
+  };
+
+  // ...
+}
+```
+
+`isInitialized` is `true` once a token is available (via the prop or `initialize()`). Calling a connection method before then resolves to an `err()` Result. You can also call `initialize()` again later to replace the token (for example, after a refresh). Choose one style — the controlled `sessionToken` prop or `initialize()`; if both are used, the prop wins.
+
+Because `initialize()` updates React state, the `client` that carries the new token is available on the **next render** — not synchronously within the same call. Gate your connection flow on `isInitialized` (or read `client` from `useMoonPay()` after the re-render) rather than reusing a `client` captured before `initialize()`:
+
+```tsx
+function BuyScreen() {
+  const { client, isInitialized } = useMoonPay();
+
+  useEffect(() => {
+    if (!isInitialized) return;
+    // `client` here reflects the initialized session token
+    client.getConnection().then((result) => {
+      // ...
+    });
+  }, [isInitialized, client]);
+}
+```
+
+Reusing a `client` reference captured before `initialize()` runs against the pre-initialization client and resolves to an `err()` (no session token).
+
 **3. Check the connection and connect the customer:**
 
 ```tsx

package/dist/index.cjs

@@ -71,7 +71,8 @@ var applePaySpec = {
   buildParams: (ctx, props) => ({
     clientToken: ctx.core.context.clientToken,
     signature: props.quote,
-    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId },
+    ...(0, import_platform_sdk_core.presentationParams)(props.presentation)
   }),
   createCommands: createQuoteCommands,
   reactiveProps: {
@@ -114,7 +115,8 @@ var googlePaySpec = {
   buildParams: (ctx, props) => ({
     clientToken: ctx.core.context.clientToken,
     signature: props.quote,
-    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId },
+    ...(0, import_platform_sdk_core.presentationParams)(props.presentation)
   }),
   createCommands: createQuoteCommands,
   reactiveProps: {
@@ -157,7 +159,8 @@ var buyButtonSpec = {
   buildParams: (ctx, props) => ({
     clientToken: ctx.core.context.clientToken,
     signature: props.quote,
-    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId },
+    ...(0, import_platform_sdk_core.presentationParams)(props.presentation)
   }),
   createCommands: createQuoteCommands,
   reactiveProps: {
@@ -198,6 +201,14 @@ function applyCredentialsOnComplete(msg, ctx) {
   ctx.core.context.setAccessToken(creds.accessToken);
   ctx.core.context.setClientToken(creds.clientToken);
 }
+function requireSessionToken(ctx) {
+  if (!ctx.sessionToken) {
+    throw new Error(
+      "No session token \u2014 pass sessionToken to <MoonPayProvider> or call initialize() from useMoonPay() before starting a connection."
+    );
+  }
+  return ctx.sessionToken;
+}
 var connectionCheckSpec = {
   channelPrefix: "check",
   path: import_platform_sdk_core.FRAME_PATHS.checkConnection,
@@ -205,7 +216,7 @@ var connectionCheckSpec = {
   needsKeyPair: true,
   handshakeTimeout: 1e4,
   buildParams: (ctx, props, publicKey) => ({
-    sessionToken: ctx.sessionToken,
+    sessionToken: requireSessionToken(ctx),
     publicKey,
     ...props.skipKyc && { skipKyc: true }
   }),
@@ -226,13 +237,22 @@ var connectSpec = {
   path: import_platform_sdk_core.FRAME_PATHS.connect,
   hidden: false,
   needsKeyPair: true,
-  buildParams: (ctx, props, publicKey) => ({
-    sessionToken: ctx.sessionToken,
-    publicKey,
-    // Per-call override; `applyThemeParam` in the engine fills the client
-    // default for connect (and every other visible frame) when this is absent.
-    ...(0, import_platform_sdk_core.themeParams)(props.theme)
-  }),
+  buildParams: (ctx, props, publicKey) => {
+    const clientToken = ctx.core.context.clientToken;
+    if (!clientToken) {
+      throw new Error(
+        'No clientToken in context \u2014 call getConnection() first and ensure it resolved with status "connectionRequired".'
+      );
+    }
+    return {
+      clientToken,
+      publicKey,
+      // Per-call override; `applyThemeParam` in the engine fills the client
+      // default for connect (and every other visible frame) when this is absent.
+      ...(0, import_platform_sdk_core.themeParams)(props.theme),
+      ...(0, import_platform_sdk_core.presentationParams)(props.presentation)
+    };
+  },
   onMessageEffect: applyCredentialsOnComplete,
   mapMessage: (msg) => {
     switch (msg.kind) {
@@ -256,14 +276,14 @@ var authSpec = {
   path: import_platform_sdk_core.FRAME_PATHS.auth,
   hidden: false,
   needsKeyPair: true,
-  buildParams: (ctx, _props, publicKey) => {
+  buildParams: (ctx, props, publicKey) => {
     const clientToken = ctx.core.context.clientToken;
     if (!clientToken) {
       throw new Error(
         'No clientToken in context \u2014 call getConnection() first and ensure it resolved with status "connectionRequired".'
       );
     }
-    return { clientToken, publicKey };
+    return { clientToken, publicKey, ...(0, import_platform_sdk_core.presentationParams)(props.presentation) };
   },
   onMessageEffect: applyCredentialsOnComplete,
   mapMessage: (msg) => {
@@ -296,7 +316,8 @@ var widgetSpec = {
     flow: "buy",
     clientToken: ctx.core.context.clientToken,
     quoteSignature: props.quote,
-    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId },
+    ...(0, import_platform_sdk_core.presentationParams)(props.presentation)
   }),
   mapMessage: (msg) => {
     switch (msg.kind) {
@@ -358,7 +379,10 @@ var addCardSpec = {
   channelPrefix: "add-card",
   path: import_platform_sdk_core.FRAME_PATHS.addCard,
   hidden: false,
-  buildParams: (ctx) => ({ clientToken: ctx.core.context.clientToken }),
+  buildParams: (ctx, props) => ({
+    clientToken: ctx.core.context.clientToken,
+    ...(0, import_platform_sdk_core.presentationParams)(props.presentation)
+  }),
   mapMessage: (msg) => {
     switch (msg.kind) {
       case "ready":
@@ -383,7 +407,10 @@ var customerExportSpec = {
   channelPrefix: "customer-export",
   path: import_platform_sdk_core.FRAME_PATHS.customerExport,
   hidden: false,
-  buildParams: (ctx) => ({ clientToken: ctx.core.context.clientToken }),
+  buildParams: (ctx, props) => ({
+    clientToken: ctx.core.context.clientToken,
+    ...(0, import_platform_sdk_core.presentationParams)(props.presentation)
+  }),
   mapMessage: (msg) => {
     switch (msg.kind) {
       case "ready":
@@ -415,7 +442,7 @@ var challengeSpec = {
   buildUrl: (_ctx, props, channelId) => {
     const url = new URL(props.url);
     url.searchParams.set("channelId", channelId);
-    return url.toString();
+    return (0, import_platform_sdk_core.applyPresentationParam)(url.toString(), props.presentation);
   },
   mapMessage: (msg) => {
     switch (msg.kind) {
@@ -441,7 +468,7 @@ var connectionResetSpec = {
   path: import_platform_sdk_core.FRAME_PATHS.reset,
   hidden: true,
   handshakeTimeout: 5e3,
-  buildParams: (ctx) => ({ sessionToken: ctx.sessionToken }),
+  buildParams: (ctx) => ({ sessionToken: requireSessionToken(ctx) }),
   mapMessage: (msg) => {
     if (msg.kind === "complete") return { kind: "complete" };
     if (msg.kind === "error") {
@@ -660,7 +687,9 @@ var import_react3 = require("react");
 var import_result = require("@moonpay/platform-protocol/result");
 async function setupAddCard(deps, opts) {
   try {
-    const { handle, dispose } = await deps.mountSession(addCardSpec, {});
+    const { handle, dispose } = await deps.mountSession(addCardSpec, {
+      presentation: opts.presentation
+    });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result.ok)({ dispose });
   } catch (e) {
@@ -677,7 +706,8 @@ async function setupApplePay(deps, opts) {
   try {
     const { handle, dispose } = await deps.mountSession(applePaySpec, {
       quote: opts.quote,
-      externalTransactionId: opts.externalTransactionId
+      externalTransactionId: opts.externalTransactionId,
+      presentation: opts.presentation
     });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result2.ok)({ setQuote: handle.commands.setQuote, dispose });
@@ -699,7 +729,9 @@ async function setupAuth(deps, opts) {
     });
   }
   try {
-    const { handle, dispose } = await deps.mountSession(authSpec, {});
+    const { handle, dispose } = await deps.mountSession(authSpec, {
+      presentation: opts.presentation
+    });
     return await new Promise((resolve) => {
       handle.onEvent((event) => {
         opts.onEvent?.(event);
@@ -752,7 +784,8 @@ async function setupBuyButton(deps, opts) {
   try {
     const { handle, dispose } = await deps.mountSession(buyButtonSpec, {
       quote: opts.quote,
-      externalTransactionId: opts.externalTransactionId
+      externalTransactionId: opts.externalTransactionId,
+      presentation: opts.presentation
     });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result5.ok)({ setQuote: handle.commands.setQuote, dispose });
@@ -775,7 +808,10 @@ async function setupChallenge(deps, opts) {
     });
   }
   try {
-    const { handle, dispose } = await deps.mountSession(challengeSpec, { url: opts.url });
+    const { handle, dispose } = await deps.mountSession(challengeSpec, {
+      url: opts.url,
+      presentation: opts.presentation
+    });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result6.ok)({ dispose });
   } catch (e) {
@@ -790,7 +826,10 @@ async function setupChallenge(deps, opts) {
 var import_result7 = require("@moonpay/platform-protocol/result");
 async function connect(deps, opts) {
   try {
-    const { handle, dispose } = await deps.mountSession(connectSpec, { theme: opts.theme });
+    const { handle, dispose } = await deps.mountSession(connectSpec, {
+      theme: opts.theme,
+      presentation: opts.presentation
+    });
     return await new Promise((resolve) => {
       handle.onEvent((event) => {
         opts.onEvent?.(event);
@@ -867,7 +906,9 @@ async function resetConnection(deps) {
 var import_result10 = require("@moonpay/platform-protocol/result");
 async function setupCustomerExport(deps, opts) {
   try {
-    const { handle, dispose } = await deps.mountSession(customerExportSpec, {});
+    const { handle, dispose } = await deps.mountSession(customerExportSpec, {
+      presentation: opts.presentation
+    });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result10.ok)({ dispose });
   } catch (e) {
@@ -884,7 +925,8 @@ async function setupGooglePay(deps, opts) {
   try {
     const { handle, dispose } = await deps.mountSession(googlePaySpec, {
       quote: opts.quote,
-      externalTransactionId: opts.externalTransactionId
+      externalTransactionId: opts.externalTransactionId,
+      presentation: opts.presentation
     });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result11.ok)({ setQuote: handle.commands.setQuote, dispose });
@@ -902,7 +944,8 @@ async function setupWidget(deps, opts) {
   try {
     const { handle, dispose } = await deps.mountSession(widgetSpec, {
       quote: opts.quote,
-      externalTransactionId: opts.externalTransactionId
+      externalTransactionId: opts.externalTransactionId,
+      presentation: opts.presentation
     });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result12.ok)({ dispose });
@@ -1184,13 +1227,15 @@ var styles = import_react_native2.StyleSheet.create({
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var MoonPayContext = (0, import_react3.createContext)(null);
 function MoonPayProvider({
-  sessionToken,
+  sessionToken: sessionTokenProp,
   apiBaseUrl,
   frameBaseUrl,
   theme,
   children
 }) {
   const [frameSlots, setFrameSlots] = (0, import_react3.useState)([]);
+  const [internalToken, setInternalToken] = (0, import_react3.useState)(void 0);
+  const sessionToken = sessionTokenProp ?? internalToken;
   const addSlot = (0, import_react3.useCallback)((slot) => {
     setFrameSlots((prev) => [...prev, slot]);
   }, []);
@@ -1206,6 +1251,14 @@ function MoonPayProvider({
     });
   }
   const core = coreRef.current;
+  const initialize = (0, import_react3.useCallback)(
+    (token) => {
+      core.context.setAccessToken("");
+      core.context.setClientToken("");
+      setInternalToken(token);
+    },
+    [core]
+  );
   const client = (0, import_react3.useMemo)(() => {
     const specCtx = { sessionToken, core, frameBaseUrl, theme };
     return createRNClient({
@@ -1213,21 +1266,28 @@ function MoonPayProvider({
       core
     });
   }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot, theme?.appearance]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl, theme }, children: [
-    children,
-    frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
-    frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      VisibleFrameSlotSheet,
-      {
-        slot,
-        onClose: () => {
-          slot.dispose();
-          removeSlot(slot.id);
-        }
-      },
-      slot.id
-    ))
-  ] });
+  const isInitialized = sessionToken !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    MoonPayContext.Provider,
+    {
+      value: { client, sessionToken, core, frameBaseUrl, theme, initialize, isInitialized },
+      children: [
+        children,
+        frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
+        frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          VisibleFrameSlotSheet,
+          {
+            slot,
+            onClose: () => {
+              slot.dispose();
+              removeSlot(slot.id);
+            }
+          },
+          slot.id
+        ))
+      ]
+    }
+  );
 }
 function useMoonPayContext() {
   const ctx = (0, import_react3.useContext)(MoonPayContext);
@@ -1237,7 +1297,8 @@ function useMoonPayContext() {
   return ctx;
 }
 function useMoonPay() {
-  return useMoonPayContext();
+  const { client, initialize, isInitialized } = useMoonPayContext();
+  return { client, initialize, isInitialized };
 }
 
 // src/frame-view.tsx