@moonpay/platform-sdk-react-native 1.8.0 → 1.10.0

package/dist/index.d.cts

@@ -83,6 +83,8 @@ interface AddCardFrame {
 interface SetupApplePayOptions {
     /** Quote signature from getQuote(). */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. */
+    externalTransactionId?: string;
     /** Callback for Apple Pay lifecycle events. */
     onEvent?: (event: ApplePaySdk.Event) => void;
 }
@@ -117,6 +119,8 @@ interface BuyFrame {
 interface SetupBuyButtonOptions {
     /** Quote signature from getQuote(). */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. */
+    externalTransactionId?: string;
     /** Callback for buy-button frame lifecycle events. */
     onEvent?: (event: BuyButtonSdk.Event) => void;
 }
@@ -180,6 +184,8 @@ interface GooglePayFrame {
 interface SetupWidgetOptions {
     /** Quote signature from getQuote(). */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. */
+    externalTransactionId?: string;
     /** Callback for widget lifecycle events. */
     onEvent?: (event: WidgetSdk.Event) => void;
 }
@@ -297,13 +303,15 @@ declare function MoonPayAddCard({ onEvent, style }: MoonPayAddCardProps): JSX.El
 interface MoonPayApplePayButtonProps {
     /** Quote signature from getQuote(). Reactive — updates are pushed via setQuote without remounting. */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. Mount-time only. */
+    externalTransactionId?: string;
     /** Callback for Apple Pay lifecycle events. */
     onEvent?: (event: ApplePaySdk.Event) => void;
     /** Container style. Defaults to height 48. */
     style?: ViewStyle;
 }
 /** Inline Apple Pay button. Render it wherever it should appear in your layout. */
-declare function MoonPayApplePayButton({ quote, onEvent, style, }: MoonPayApplePayButtonProps): JSX.Element;
+declare function MoonPayApplePayButton({ quote, externalTransactionId, onEvent, style, }: MoonPayApplePayButtonProps): JSX.Element;
 
 interface MoonPayAuthProps {
     /** Callback for auth lifecycle events. */
@@ -321,13 +329,15 @@ declare function MoonPayAuth({ onEvent, style }: MoonPayAuthProps): JSX.Element;
 interface MoonPayBuyButtonProps {
     /** Quote signature from getQuote(). Reactive — updates are pushed via setQuote without remounting. */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. Mount-time only. */
+    externalTransactionId?: string;
     /** Callback for buy button lifecycle events. */
     onEvent?: (event: BuyButtonSdk.Event) => void;
     /** Container style. Defaults to height 48. */
     style?: ViewStyle;
 }
 /** Inline card/buy button. Render it wherever it should appear in your layout. */
-declare function MoonPayBuyButton({ quote, onEvent, style }: MoonPayBuyButtonProps): JSX.Element;
+declare function MoonPayBuyButton({ quote, externalTransactionId, onEvent, style, }: MoonPayBuyButtonProps): JSX.Element;
 
 interface MoonPayBuyFrameProps {
     /** Quote signature from getQuote(). Reactive — updates are pushed via setQuote without remounting. */
@@ -425,13 +435,15 @@ declare function MoonPayGooglePayButton({ quote, externalTransactionId, onEvent,
 interface MoonPayWidgetProps {
     /** Quote signature from getQuote(). Mount-time only — changing it reloads the widget. */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. Mount-time only. */
+    externalTransactionId?: string;
     /** Callback for widget lifecycle events. */
     onEvent?: (event: WidgetSdk.Event) => void;
     /** Container style. Defaults to flex: 1. */
     style?: ViewStyle;
 }
 /** Inline widget frame. Render it wherever it should appear in your layout. */
-declare function MoonPayWidget({ quote, onEvent, style }: MoonPayWidgetProps): JSX.Element;
+declare function MoonPayWidget({ quote, externalTransactionId, onEvent, style, }: MoonPayWidgetProps): JSX.Element;
 
 interface MoonPayFrameProps {
     /** The transport instance managing this frame's communication. */
@@ -448,16 +460,25 @@ interface MoonPayFrameProps {
 declare function MoonPayFrame({ transport, hidden, style }: MoonPayFrameProps): JSX.Element | null;
 
 interface MoonPayProviderProps {
-    sessionToken: string;
+    /**
+     * Session token from your server (via `createSession`). Optional — omit it and
+     * call `initialize(sessionToken)` from `useMoonPay()` once you've fetched it.
+     * When provided, this prop takes precedence over an imperatively-set token.
+     */
+    sessionToken?: string;
     apiBaseUrl?: string;
     frameBaseUrl?: string;
     /** Theme applied to every visible MoonPay frame (connect, widget, Apple/Google Pay, …). */
     theme?: ThemeOptions;
     children: ReactNode;
 }
-declare function MoonPayProvider({ sessionToken, apiBaseUrl, frameBaseUrl, theme, children, }: MoonPayProviderProps): JSX.Element;
+declare function MoonPayProvider({ sessionToken: sessionTokenProp, apiBaseUrl, frameBaseUrl, theme, children, }: MoonPayProviderProps): JSX.Element;
 declare function useMoonPay(): {
     client: RNClient;
+    /** Set or replace the session token after mount. */
+    initialize: (sessionToken: string) => void;
+    /** True once a session token (via prop or `initialize()`) is available. */
+    isInitialized: boolean;
 };
 
 export { type AddCardFrame, type ApplePayFrame, type AuthFrame, type BuyButtonFrame, type BuyFrame, type ChallengeFrame, type ConnectFrame, type ConnectOptions, type ConnectionCheckEvent, type ConnectionResetEvent, type CustomerExportFrame, type GetConnectionOptions, type GooglePayFrame, MoonPayAddCard, type MoonPayAddCardProps, MoonPayApplePayButton, type MoonPayApplePayButtonProps, MoonPayAuth, type MoonPayAuthProps, MoonPayBuyButton, type MoonPayBuyButtonProps, MoonPayBuyFrame, type MoonPayBuyFrameProps, MoonPayChallenge, type MoonPayChallengeProps, MoonPayConnect, type MoonPayConnectProps, MoonPayConnectionCheck, type MoonPayConnectionCheckProps, MoonPayConnectionReset, type MoonPayConnectionResetProps, MoonPayCustomerExport, type MoonPayCustomerExportProps, MoonPayFrame, type MoonPayFrameProps, MoonPayGooglePayButton, type MoonPayGooglePayButtonProps, MoonPayProvider, type MoonPayProviderProps, MoonPayWidget, type MoonPayWidgetProps, type RNClient, type SetupAddCardOptions, type SetupApplePayOptions, type SetupAuthOptions, type SetupBuyButtonOptions, type SetupBuyOptions, type SetupChallengeOptions, type SetupCustomerExportOptions, type SetupGooglePayOptions, type SetupWidgetOptions, WebViewTransport, type WidgetFrame, useMoonPay };

package/dist/index.d.ts

@@ -83,6 +83,8 @@ interface AddCardFrame {
 interface SetupApplePayOptions {
     /** Quote signature from getQuote(). */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. */
+    externalTransactionId?: string;
     /** Callback for Apple Pay lifecycle events. */
     onEvent?: (event: ApplePaySdk.Event) => void;
 }
@@ -117,6 +119,8 @@ interface BuyFrame {
 interface SetupBuyButtonOptions {
     /** Quote signature from getQuote(). */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. */
+    externalTransactionId?: string;
     /** Callback for buy-button frame lifecycle events. */
     onEvent?: (event: BuyButtonSdk.Event) => void;
 }
@@ -180,6 +184,8 @@ interface GooglePayFrame {
 interface SetupWidgetOptions {
     /** Quote signature from getQuote(). */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. */
+    externalTransactionId?: string;
     /** Callback for widget lifecycle events. */
     onEvent?: (event: WidgetSdk.Event) => void;
 }
@@ -297,13 +303,15 @@ declare function MoonPayAddCard({ onEvent, style }: MoonPayAddCardProps): JSX.El
 interface MoonPayApplePayButtonProps {
     /** Quote signature from getQuote(). Reactive — updates are pushed via setQuote without remounting. */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. Mount-time only. */
+    externalTransactionId?: string;
     /** Callback for Apple Pay lifecycle events. */
     onEvent?: (event: ApplePaySdk.Event) => void;
     /** Container style. Defaults to height 48. */
     style?: ViewStyle;
 }
 /** Inline Apple Pay button. Render it wherever it should appear in your layout. */
-declare function MoonPayApplePayButton({ quote, onEvent, style, }: MoonPayApplePayButtonProps): JSX.Element;
+declare function MoonPayApplePayButton({ quote, externalTransactionId, onEvent, style, }: MoonPayApplePayButtonProps): JSX.Element;
 
 interface MoonPayAuthProps {
     /** Callback for auth lifecycle events. */
@@ -321,13 +329,15 @@ declare function MoonPayAuth({ onEvent, style }: MoonPayAuthProps): JSX.Element;
 interface MoonPayBuyButtonProps {
     /** Quote signature from getQuote(). Reactive — updates are pushed via setQuote without remounting. */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. Mount-time only. */
+    externalTransactionId?: string;
     /** Callback for buy button lifecycle events. */
     onEvent?: (event: BuyButtonSdk.Event) => void;
     /** Container style. Defaults to height 48. */
     style?: ViewStyle;
 }
 /** Inline card/buy button. Render it wherever it should appear in your layout. */
-declare function MoonPayBuyButton({ quote, onEvent, style }: MoonPayBuyButtonProps): JSX.Element;
+declare function MoonPayBuyButton({ quote, externalTransactionId, onEvent, style, }: MoonPayBuyButtonProps): JSX.Element;
 
 interface MoonPayBuyFrameProps {
     /** Quote signature from getQuote(). Reactive — updates are pushed via setQuote without remounting. */
@@ -425,13 +435,15 @@ declare function MoonPayGooglePayButton({ quote, externalTransactionId, onEvent,
 interface MoonPayWidgetProps {
     /** Quote signature from getQuote(). Mount-time only — changing it reloads the widget. */
     quote: string;
+    /** Partner-assigned identifier for this transaction attempt. Mount-time only. */
+    externalTransactionId?: string;
     /** Callback for widget lifecycle events. */
     onEvent?: (event: WidgetSdk.Event) => void;
     /** Container style. Defaults to flex: 1. */
     style?: ViewStyle;
 }
 /** Inline widget frame. Render it wherever it should appear in your layout. */
-declare function MoonPayWidget({ quote, onEvent, style }: MoonPayWidgetProps): JSX.Element;
+declare function MoonPayWidget({ quote, externalTransactionId, onEvent, style, }: MoonPayWidgetProps): JSX.Element;
 
 interface MoonPayFrameProps {
     /** The transport instance managing this frame's communication. */
@@ -448,16 +460,25 @@ interface MoonPayFrameProps {
 declare function MoonPayFrame({ transport, hidden, style }: MoonPayFrameProps): JSX.Element | null;
 
 interface MoonPayProviderProps {
-    sessionToken: string;
+    /**
+     * Session token from your server (via `createSession`). Optional — omit it and
+     * call `initialize(sessionToken)` from `useMoonPay()` once you've fetched it.
+     * When provided, this prop takes precedence over an imperatively-set token.
+     */
+    sessionToken?: string;
     apiBaseUrl?: string;
     frameBaseUrl?: string;
     /** Theme applied to every visible MoonPay frame (connect, widget, Apple/Google Pay, …). */
     theme?: ThemeOptions;
     children: ReactNode;
 }
-declare function MoonPayProvider({ sessionToken, apiBaseUrl, frameBaseUrl, theme, children, }: MoonPayProviderProps): JSX.Element;
+declare function MoonPayProvider({ sessionToken: sessionTokenProp, apiBaseUrl, frameBaseUrl, theme, children, }: MoonPayProviderProps): JSX.Element;
 declare function useMoonPay(): {
     client: RNClient;
+    /** Set or replace the session token after mount. */
+    initialize: (sessionToken: string) => void;
+    /** True once a session token (via prop or `initialize()`) is available. */
+    isInitialized: boolean;
 };
 
 export { type AddCardFrame, type ApplePayFrame, type AuthFrame, type BuyButtonFrame, type BuyFrame, type ChallengeFrame, type ConnectFrame, type ConnectOptions, type ConnectionCheckEvent, type ConnectionResetEvent, type CustomerExportFrame, type GetConnectionOptions, type GooglePayFrame, MoonPayAddCard, type MoonPayAddCardProps, MoonPayApplePayButton, type MoonPayApplePayButtonProps, MoonPayAuth, type MoonPayAuthProps, MoonPayBuyButton, type MoonPayBuyButtonProps, MoonPayBuyFrame, type MoonPayBuyFrameProps, MoonPayChallenge, type MoonPayChallengeProps, MoonPayConnect, type MoonPayConnectProps, MoonPayConnectionCheck, type MoonPayConnectionCheckProps, MoonPayConnectionReset, type MoonPayConnectionResetProps, MoonPayCustomerExport, type MoonPayCustomerExportProps, MoonPayFrame, type MoonPayFrameProps, MoonPayGooglePayButton, type MoonPayGooglePayButtonProps, MoonPayProvider, type MoonPayProviderProps, MoonPayWidget, type MoonPayWidgetProps, type RNClient, type SetupAddCardOptions, type SetupApplePayOptions, type SetupAuthOptions, type SetupBuyButtonOptions, type SetupBuyOptions, type SetupChallengeOptions, type SetupCustomerExportOptions, type SetupGooglePayOptions, type SetupWidgetOptions, WebViewTransport, type WidgetFrame, useMoonPay };

package/dist/index.js

@@ -27,7 +27,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: {
@@ -37,6 +38,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":
@@ -78,6 +81,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":
@@ -108,7 +113,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: {
@@ -118,6 +124,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":
@@ -147,6 +155,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: FRAME_PATHS.checkConnection,
@@ -154,7 +170,7 @@ var connectionCheckSpec = {
   needsKeyPair: true,
   handshakeTimeout: 1e4,
   buildParams: (ctx, props, publicKey) => ({
-    sessionToken: ctx.sessionToken,
+    sessionToken: requireSessionToken(ctx),
     publicKey,
     ...props.skipKyc && { skipKyc: true }
   }),
@@ -176,7 +192,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.
@@ -244,7 +260,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) {
@@ -389,7 +406,7 @@ var connectionResetSpec = {
   path: 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") {
@@ -637,7 +654,10 @@ async function setupAddCard(deps, opts) {
 import { err as err2, ok as ok2 } from "@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 ok2({ setQuote: handle.commands.setQuote, dispose });
   } catch (e) {
@@ -709,7 +729,10 @@ async function setupBuy(deps, opts) {
 import { err as err5, ok as ok5 } from "@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 ok5({ setQuote: handle.commands.setQuote, dispose });
   } catch (e) {
@@ -856,7 +879,10 @@ async function setupGooglePay(deps, opts) {
 import { err as err11, ok as ok12 } from "@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 ok12({ dispose });
   } catch (e) {
@@ -1148,13 +1174,15 @@ var styles = StyleSheet.create({
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var MoonPayContext = createContext(null);
 function MoonPayProvider({
-  sessionToken,
+  sessionToken: sessionTokenProp,
   apiBaseUrl,
   frameBaseUrl,
   theme,
   children
 }) {
   const [frameSlots, setFrameSlots] = useState2([]);
+  const [internalToken, setInternalToken] = useState2(void 0);
+  const sessionToken = sessionTokenProp ?? internalToken;
   const addSlot = useCallback2((slot) => {
     setFrameSlots((prev) => [...prev, slot]);
   }, []);
@@ -1170,6 +1198,14 @@ function MoonPayProvider({
     });
   }
   const core = coreRef.current;
+  const initialize = useCallback2(
+    (token) => {
+      core.context.setAccessToken("");
+      core.context.setClientToken("");
+      setInternalToken(token);
+    },
+    [core]
+  );
   const client = useMemo2(() => {
     const specCtx = { sessionToken, core, frameBaseUrl, theme };
     return createRNClient({
@@ -1177,21 +1213,28 @@ function MoonPayProvider({
       core
     });
   }, [sessionToken, frameBaseUrl, core, addSlot, removeSlot, theme?.appearance]);
-  return /* @__PURE__ */ jsxs2(MoonPayContext.Provider, { value: { client, sessionToken, core, frameBaseUrl, theme }, children: [
-    children,
-    frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ jsx3(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
-    frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ jsx3(
-      VisibleFrameSlotSheet,
-      {
-        slot,
-        onClose: () => {
-          slot.dispose();
-          removeSlot(slot.id);
-        }
-      },
-      slot.id
-    ))
-  ] });
+  const isInitialized = sessionToken !== void 0;
+  return /* @__PURE__ */ jsxs2(
+    MoonPayContext.Provider,
+    {
+      value: { client, sessionToken, core, frameBaseUrl, theme, initialize, isInitialized },
+      children: [
+        children,
+        frameSlots.filter((slot) => slot.hidden).map((slot) => /* @__PURE__ */ jsx3(MoonPayFrame, { transport: slot.transport, hidden: true }, slot.id)),
+        frameSlots.filter((slot) => !slot.hidden).map((slot) => /* @__PURE__ */ jsx3(
+          VisibleFrameSlotSheet,
+          {
+            slot,
+            onClose: () => {
+              slot.dispose();
+              removeSlot(slot.id);
+            }
+          },
+          slot.id
+        ))
+      ]
+    }
+  );
 }
 function useMoonPayContext() {
   const ctx = useContext(MoonPayContext);
@@ -1201,7 +1244,8 @@ function useMoonPayContext() {
   return ctx;
 }
 function useMoonPay() {
-  return useMoonPayContext();
+  const { client, initialize, isInitialized } = useMoonPayContext();
+  return { client, initialize, isInitialized };
 }
 
 // src/frame-view.tsx
@@ -1313,6 +1357,7 @@ function MoonPayAddCard({ onEvent, style }) {
 import { jsx as jsx6 } from "react/jsx-runtime";
 function MoonPayApplePayButton({
   quote,
+  externalTransactionId,
   onEvent,
   style
 }) {
@@ -1320,7 +1365,7 @@ function MoonPayApplePayButton({
     MoonPayFrameView,
     {
       spec: applePaySpec,
-      props: { quote },
+      props: { quote, externalTransactionId },
       style,
       defaultStyle: { height: 48 },
       onEvent
@@ -1345,12 +1390,17 @@ function MoonPayAuth({ onEvent, style }) {
 
 // src/components/buy-button.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-function MoonPayBuyButton({ quote, onEvent, style }) {
+function MoonPayBuyButton({
+  quote,
+  externalTransactionId,
+  onEvent,
+  style
+}) {
   return /* @__PURE__ */ jsx8(
     MoonPayFrameView,
     {
       spec: buyButtonSpec,
-      props: { quote },
+      props: { quote, externalTransactionId },
       style,
       defaultStyle: { height: 48 },
       onEvent
@@ -1466,12 +1516,17 @@ function MoonPayGooglePayButton({
 
 // src/components/widget.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-function MoonPayWidget({ quote, onEvent, style }) {
+function MoonPayWidget({
+  quote,
+  externalTransactionId,
+  onEvent,
+  style
+}) {
   return /* @__PURE__ */ jsx16(
     MoonPayFrameView,
     {
       spec: widgetSpec,
-      props: { quote },
+      props: { quote, externalTransactionId },
       style,
       defaultStyle: { flex: 1 },
       onEvent