@moonpay/platform-sdk-react-native 1.8.0 → 1.10.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

@@ -70,7 +70,8 @@ var applePaySpec = {
   hidden: false,
   buildParams: (ctx, props) => ({
     clientToken: ctx.core.context.clientToken,
-    signature: props.quote
+    signature: props.quote,
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
   }),
   createCommands: createQuoteCommands,
   reactiveProps: {
@@ -80,6 +81,8 @@ var applePaySpec = {
     switch (msg.kind) {
       case "ready":
         return { kind: "ready" };
+      case "buttonPressed":
+        return { kind: "buttonPressed" };
       case "complete":
         return { kind: "complete", payload: msg.payload };
       case "challenge":
@@ -121,6 +124,8 @@ var googlePaySpec = {
     switch (msg.kind) {
       case "ready":
         return { kind: "ready" };
+      case "buttonPressed":
+        return { kind: "buttonPressed" };
       case "complete":
         return { kind: "complete", payload: msg.payload };
       case "challenge":
@@ -151,7 +156,8 @@ var buyButtonSpec = {
   hidden: false,
   buildParams: (ctx, props) => ({
     clientToken: ctx.core.context.clientToken,
-    signature: props.quote
+    signature: props.quote,
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
   }),
   createCommands: createQuoteCommands,
   reactiveProps: {
@@ -161,6 +167,8 @@ var buyButtonSpec = {
     switch (msg.kind) {
       case "ready":
         return { kind: "ready" };
+      case "buttonPressed":
+        return { kind: "buttonPressed" };
       case "complete":
         return { kind: "complete", payload: msg.payload };
       case "challenge":
@@ -190,6 +198,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,
@@ -197,7 +213,7 @@ var connectionCheckSpec = {
   needsKeyPair: true,
   handshakeTimeout: 1e4,
   buildParams: (ctx, props, publicKey) => ({
-    sessionToken: ctx.sessionToken,
+    sessionToken: requireSessionToken(ctx),
     publicKey,
     ...props.skipKyc && { skipKyc: true }
   }),
@@ -219,7 +235,7 @@ var connectSpec = {
   hidden: false,
   needsKeyPair: true,
   buildParams: (ctx, props, publicKey) => ({
-    sessionToken: ctx.sessionToken,
+    sessionToken: requireSessionToken(ctx),
     publicKey,
     // Per-call override; `applyThemeParam` in the engine fills the client
     // default for connect (and every other visible frame) when this is absent.
@@ -287,7 +303,8 @@ var widgetSpec = {
   buildParams: (ctx, props) => ({
     flow: "buy",
     clientToken: ctx.core.context.clientToken,
-    quoteSignature: props.quote
+    quoteSignature: props.quote,
+    ...props.externalTransactionId && { externalTransactionId: props.externalTransactionId }
   }),
   mapMessage: (msg) => {
     switch (msg.kind) {
@@ -432,7 +449,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") {
@@ -666,7 +683,10 @@ async function setupAddCard(deps, opts) {
 var import_result2 = require("@moonpay/platform-protocol/result");
 async function setupApplePay(deps, opts) {
   try {
-    const { handle, dispose } = await deps.mountSession(applePaySpec, { quote: opts.quote });
+    const { handle, dispose } = await deps.mountSession(applePaySpec, {
+      quote: opts.quote,
+      externalTransactionId: opts.externalTransactionId
+    });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result2.ok)({ setQuote: handle.commands.setQuote, dispose });
   } catch (e) {
@@ -738,7 +758,10 @@ async function setupBuy(deps, opts) {
 var import_result5 = require("@moonpay/platform-protocol/result");
 async function setupBuyButton(deps, opts) {
   try {
-    const { handle, dispose } = await deps.mountSession(buyButtonSpec, { quote: opts.quote });
+    const { handle, dispose } = await deps.mountSession(buyButtonSpec, {
+      quote: opts.quote,
+      externalTransactionId: opts.externalTransactionId
+    });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result5.ok)({ setQuote: handle.commands.setQuote, dispose });
   } catch (e) {
@@ -885,7 +908,10 @@ async function setupGooglePay(deps, opts) {
 var import_result12 = require("@moonpay/platform-protocol/result");
 async function setupWidget(deps, opts) {
   try {
-    const { handle, dispose } = await deps.mountSession(widgetSpec, { quote: opts.quote });
+    const { handle, dispose } = await deps.mountSession(widgetSpec, {
+      quote: opts.quote,
+      externalTransactionId: opts.externalTransactionId
+    });
     handle.onEvent((event) => opts.onEvent?.(event));
     return (0, import_result12.ok)({ dispose });
   } catch (e) {
@@ -1166,13 +1192,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]);
   }, []);
@@ -1188,6 +1216,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({
@@ -1195,21 +1231,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);
@@ -1219,7 +1262,8 @@ function useMoonPayContext() {
   return ctx;
 }
 function useMoonPay() {
-  return useMoonPayContext();
+  const { client, initialize, isInitialized } = useMoonPayContext();
+  return { client, initialize, isInitialized };
 }
 
 // src/frame-view.tsx
@@ -1331,6 +1375,7 @@ function MoonPayAddCard({ onEvent, style }) {
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function MoonPayApplePayButton({
   quote,
+  externalTransactionId,
   onEvent,
   style
 }) {
@@ -1338,7 +1383,7 @@ function MoonPayApplePayButton({
     MoonPayFrameView,
     {
       spec: applePaySpec,
-      props: { quote },
+      props: { quote, externalTransactionId },
       style,
       defaultStyle: { height: 48 },
       onEvent
@@ -1363,12 +1408,17 @@ function MoonPayAuth({ onEvent, style }) {
 
 // src/components/buy-button.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function MoonPayBuyButton({ quote, onEvent, style }) {
+function MoonPayBuyButton({
+  quote,
+  externalTransactionId,
+  onEvent,
+  style
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     MoonPayFrameView,
     {
       spec: buyButtonSpec,
-      props: { quote },
+      props: { quote, externalTransactionId },
       style,
       defaultStyle: { height: 48 },
       onEvent
@@ -1484,12 +1534,17 @@ function MoonPayGooglePayButton({
 
 // src/components/widget.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function MoonPayWidget({ quote, onEvent, style }) {
+function MoonPayWidget({
+  quote,
+  externalTransactionId,
+  onEvent,
+  style
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MoonPayFrameView,
     {
       spec: widgetSpec,
-      props: { quote },
+      props: { quote, externalTransactionId },
       style,
       defaultStyle: { flex: 1 },
       onEvent