@mrrocket/sdk 0.13.0 → 0.14.0

package/dist/react-native/index.d.cts

@@ -414,6 +414,116 @@ interface FlowsController {
     };
 }
 
+/**
+ * Paywalls with several pages (SDK 0.14.0): what MRRocket's config serves under `paywalls` (one per placement, built
+ * in MRRocket › Conversion › Paywalls) and a small controller that walks the person through its pages, page after page,
+ * until the last one hands the chosen plan to the app. No DOM and no React: the web renderer (`mountPaywall` in
+ * flows-ui.ts, loaded only when a paywall opens) and the React Native one (native/flows-view.ts) draw `view()` and
+ * call the actions.
+ *
+ * MRRocket never takes a payment. The last page's button calls the app's `onPurchase(plan)`, which buys through the
+ * app's own store code (StoreKit or Play through RevenueCat or Adapty, or Stripe Checkout on the web); only when it
+ * resolves is the purchase recorded. It throwing keeps the paywall open with an error, resolving `false` (the person
+ * closed the store sheet) keeps it open without one.
+ *
+ * A running test on the paywall (`experiment`) gives each person their variant's pages, by the same stable hash as
+ * every other test (`assign`), and records `$exposure` when the paywall opens. What it records, as normal events under
+ * the SDK's analytics consent:
+ * - `$paywall` `{paywall, placement, variant, page, index, action: "page"}` the first time each page shows in a run,
+ *   so MRRocket shows how many reach page 2 and 3;
+ * - `{action: "purchased", plan}` after `onPurchase` went through (a test's purchase goal counts it), and
+ *   `{action: "closed", index}` when the person closed it.
+ */
+
+/** One page of a paywall. Plans pages list the plans and buy; the others say why and go on. */
+interface PaywallPage {
+    id: string;
+    /** "benefits": a list of what the person gets; "proof": quotes of happy customers; "plans": the plans and the buy button. */
+    kind: "benefits" | "proof" | "plans";
+    title: string;
+    body?: string;
+    /** Benefits: one line each. */
+    items?: string[];
+    /** Proof: what customers said, and who. */
+    quotes?: {
+        text: string;
+        by?: string;
+    }[];
+    /** The button: "Continue" on the way, the buy button on the plans page ("Start free trial"). */
+    button?: string;
+}
+/** A plan the paywall offers. `id` is what the app buys: the store product id or the Stripe price, as set in MRRocket. */
+interface PaywallPlan {
+    id: string;
+    name: string;
+    /** As shown ("€59.99 / year"). The app's own store prices win when it passes `plans`. */
+    price: string;
+    /** A line under it ("€5 a month", "7 days free"). */
+    note?: string;
+}
+/** A published paywall as the config serves it. */
+interface PaywallConfig {
+    id: string;
+    /** The placement's key (`onboarding_end`), what the app opens: `paywall.open("onboarding_end")`. */
+    placement: string;
+    /** The running test on it, a key of `experiments`; each of its variants has pages under `variants`. */
+    experiment?: string;
+    /** Control (the live paywall) first. */
+    variants: {
+        id: VariantId;
+        pages: PaywallPage[];
+    }[];
+    plans: PaywallPlan[];
+    /** The plan picked before the person picks one. */
+    highlight?: string;
+}
+interface PaywallResult {
+    /**
+     * "purchased": `onPurchase` went through; "chosen": the person picked a plan and there is no `onPurchase`, so the app
+     * buys it now (the store's purchase still counts for a test through RevenueCat or Adapty); "closed": the person
+     * closed it (or there was no paywall).
+     */
+    outcome: "purchased" | "chosen" | "closed";
+    plan?: PaywallPlan;
+    paywall?: string;
+    variant?: VariantId;
+    /** The page the person was on, from 0. */
+    index: number;
+}
+interface PaywallOptions {
+    /**
+     * Buy the plan in your code (RevenueCat `purchasePackage`, Adapty `makePurchase`, Stripe Checkout). Throwing keeps
+     * the paywall open with an error; `false` keeps it open without one (the person cancelled the store sheet).
+     */
+    onPurchase?: (plan: PaywallPlan) => unknown;
+    /** Your store's plans with their local prices, by the same ids; they replace what MRRocket has for them. */
+    plans?: PaywallPlan[];
+    onClose?: (result: PaywallResult) => void;
+}
+interface PaywallView {
+    paywall: PaywallConfig;
+    variant: VariantId;
+    page: PaywallPage;
+    index: number;
+    total: number;
+    last: boolean;
+    plans: PaywallPlan[];
+    /** The picked plan's id. */
+    plan?: string;
+    busy: boolean;
+    error?: string;
+}
+interface PaywallHost {
+    /** Opens the paywall of a placement; resolves when it is bought or closed (at once with "closed" when there is none). */
+    open(placement: string, options?: PaywallOptions): Promise<PaywallResult>;
+    view(): PaywallView | null;
+    subscribe(listener: () => void): () => void;
+    next(): void;
+    back(): void;
+    pick(planId: string): void;
+    close(): void;
+}
+
 /**
  * The part of the SDK that runs anywhere: experiment config, variant assignment, preview links and event shapes.
  * No React, no browser APIs, so the server helper, the proxy helper and the client share it.
@@ -421,7 +531,7 @@ interface FlowsController {
 
 type VariantId = string;
 /** This build of the SDK. Sent with the config request so MRRocket knows what the site runs (error tracking, flags). */
-declare const SDK_VERSION = "0.13.0";
+declare const SDK_VERSION = "0.14.0";
 /** One variant of an experiment. `changes` replaces texts that the page marks with `<Text id>`. */
 interface VariantConfig {
     id: VariantId;
@@ -478,6 +588,8 @@ interface CockpitConfig {
     messages?: boolean;
     /** Page redirects set in MRRocket; the SDK sends visitors on before the page shows (`redirectFor`). SDK 0.7.0+. */
     redirects?: RedirectConfig[];
+    /** Published paywalls with their pages, per placement (MRRocket › Conversion › Paywalls), for `paywall.open()`. SDK 0.14.0+. */
+    paywalls?: PaywallConfig[];
 }
 /** One condition of a flag's audience, on a property of the person (`identify(id, props)`), the id or the page. */
 interface FlagCondition {
@@ -668,6 +780,14 @@ interface MRRocketClient {
     openCancelFlow(options?: CancelFlowOptions): Promise<CancelFlowResult>;
     /** Starts an onboarding flow now (the first live one without an id). False when there is none. */
     startOnboarding(id?: string): boolean;
+    /**
+     * Shows the paywall of a placement built in MRRocket › Paywalls page by page (drawn by `<MRRocketProvider>`). Its
+     * last page hands the chosen plan to `onPurchase`, where your code buys it (RevenueCat, Adapty, StoreKit, Play);
+     * MRRocket never takes a payment. Pass your store's `plans` to show their local prices.
+     */
+    openPaywall(placement: string, options?: PaywallOptions): Promise<PaywallResult>;
+    /** The open paywall for a renderer (the provider's, or your own). */
+    paywall: PaywallHost;
     /**
      * Push notifications from your Lifecycle journeys for the signed-in person (call `identify` first). Asks the
      * permission (unless `ask: false`), gets the Expo push token and sends it to MRRocket. Needs `expo-notifications`.
@@ -720,8 +840,9 @@ interface NativeAppearance {
     theme?: "light" | "dark" | "auto";
     accent?: string;
 }
-declare const MRRocketFlows: ({ flows, appearance }: {
+declare const MRRocketFlows: ({ flows, paywall, appearance }: {
     flows: FlowsController;
+    paywall?: PaywallHost;
     appearance?: NativeAppearance;
 }) => react.FunctionComponentElement<Record<string, unknown>> | null;
 
@@ -891,6 +1012,16 @@ declare const usePush: () => {
     register: MRRocketClient["registerForPush"];
     unregister: MRRocketClient["unregisterForPush"];
 };
+/**
+ * The paywalls built in MRRocket › Paywalls, page by page; the provider draws them. The last page hands the chosen plan
+ * to `onPurchase`, where your code buys it. MRRocket never takes a payment.
+ *
+ *     const paywall = usePaywall();
+ *     paywall.open("onboarding_end", { plans: storePlans, onPurchase: (plan) => Purchases.purchasePackage(packages[plan.id]) });
+ */
+declare const usePaywall: () => {
+    open: MRRocketClient["openPaywall"];
+};
 /** Starts an onboarding flow now (the first live one without an id), whatever its trigger. */
 declare const useOnboarding: () => {
     start: (id?: string) => boolean;
@@ -929,4 +1060,4 @@ declare const useExpoRouterTracking: () => void;
  */
 declare const useNavigationTracking: () => (state: unknown) => void;
 
-export { type AppContext, type CancelFlowConfig, type CancelFlowOptions, type CancelFlowResult, type CancelOffer, type ChatMessage, type ChatThread, type CockpitConfig, type FeedbackPost, type FlagConfig, type FlowView, type InAppMessage, type KeyValueStorage, type MRRocketClient, MRRocketFeedback, MRRocketFlows, MRRocketMask, MRRocketMessenger, type MRRocketOptions, MRRocketProvider, type MRRocketProviderProps, MRRocketSurveys, type NativeAppearance, type NativeConsent, type NativeFeedbackOptions, type NativeMessengerOptions, type NativePushResult, type NativePushStatus, type OnboardingFlow, type OnboardingStep, type RegisterForPushOptions, SDK_VERSION, type SurveyDefinition, type VariantId, activeRouteName, createMRRocket, getMRRocket, useCancelFlow, useExpoRouterTracking, useFeedback, useFlag, useFlagVariant, useMRRocket, useMessenger, useNavigationTracking, useOnboarding, usePush, useText, useVariant };
+export { type AppContext, type CancelFlowConfig, type CancelFlowOptions, type CancelFlowResult, type CancelOffer, type ChatMessage, type ChatThread, type CockpitConfig, type FeedbackPost, type FlagConfig, type FlowView, type InAppMessage, type KeyValueStorage, type MRRocketClient, MRRocketFeedback, MRRocketFlows, MRRocketMask, MRRocketMessenger, type MRRocketOptions, MRRocketProvider, type MRRocketProviderProps, MRRocketSurveys, type NativeAppearance, type NativeConsent, type NativeFeedbackOptions, type NativeMessengerOptions, type NativePushResult, type NativePushStatus, type OnboardingFlow, type OnboardingStep, type PaywallConfig, type PaywallOptions, type PaywallPage, type PaywallPlan, type PaywallResult, type RegisterForPushOptions, SDK_VERSION, type SurveyDefinition, type VariantId, activeRouteName, createMRRocket, getMRRocket, useCancelFlow, useExpoRouterTracking, useFeedback, useFlag, useFlagVariant, useMRRocket, useMessenger, useNavigationTracking, useOnboarding, usePaywall, usePush, useText, useVariant };

package/dist/react-native/index.d.ts

@@ -414,6 +414,116 @@ interface FlowsController {
     };
 }
 
+/**
+ * Paywalls with several pages (SDK 0.14.0): what MRRocket's config serves under `paywalls` (one per placement, built
+ * in MRRocket › Conversion › Paywalls) and a small controller that walks the person through its pages, page after page,
+ * until the last one hands the chosen plan to the app. No DOM and no React: the web renderer (`mountPaywall` in
+ * flows-ui.ts, loaded only when a paywall opens) and the React Native one (native/flows-view.ts) draw `view()` and
+ * call the actions.
+ *
+ * MRRocket never takes a payment. The last page's button calls the app's `onPurchase(plan)`, which buys through the
+ * app's own store code (StoreKit or Play through RevenueCat or Adapty, or Stripe Checkout on the web); only when it
+ * resolves is the purchase recorded. It throwing keeps the paywall open with an error, resolving `false` (the person
+ * closed the store sheet) keeps it open without one.
+ *
+ * A running test on the paywall (`experiment`) gives each person their variant's pages, by the same stable hash as
+ * every other test (`assign`), and records `$exposure` when the paywall opens. What it records, as normal events under
+ * the SDK's analytics consent:
+ * - `$paywall` `{paywall, placement, variant, page, index, action: "page"}` the first time each page shows in a run,
+ *   so MRRocket shows how many reach page 2 and 3;
+ * - `{action: "purchased", plan}` after `onPurchase` went through (a test's purchase goal counts it), and
+ *   `{action: "closed", index}` when the person closed it.
+ */
+
+/** One page of a paywall. Plans pages list the plans and buy; the others say why and go on. */
+interface PaywallPage {
+    id: string;
+    /** "benefits": a list of what the person gets; "proof": quotes of happy customers; "plans": the plans and the buy button. */
+    kind: "benefits" | "proof" | "plans";
+    title: string;
+    body?: string;
+    /** Benefits: one line each. */
+    items?: string[];
+    /** Proof: what customers said, and who. */
+    quotes?: {
+        text: string;
+        by?: string;
+    }[];
+    /** The button: "Continue" on the way, the buy button on the plans page ("Start free trial"). */
+    button?: string;
+}
+/** A plan the paywall offers. `id` is what the app buys: the store product id or the Stripe price, as set in MRRocket. */
+interface PaywallPlan {
+    id: string;
+    name: string;
+    /** As shown ("€59.99 / year"). The app's own store prices win when it passes `plans`. */
+    price: string;
+    /** A line under it ("€5 a month", "7 days free"). */
+    note?: string;
+}
+/** A published paywall as the config serves it. */
+interface PaywallConfig {
+    id: string;
+    /** The placement's key (`onboarding_end`), what the app opens: `paywall.open("onboarding_end")`. */
+    placement: string;
+    /** The running test on it, a key of `experiments`; each of its variants has pages under `variants`. */
+    experiment?: string;
+    /** Control (the live paywall) first. */
+    variants: {
+        id: VariantId;
+        pages: PaywallPage[];
+    }[];
+    plans: PaywallPlan[];
+    /** The plan picked before the person picks one. */
+    highlight?: string;
+}
+interface PaywallResult {
+    /**
+     * "purchased": `onPurchase` went through; "chosen": the person picked a plan and there is no `onPurchase`, so the app
+     * buys it now (the store's purchase still counts for a test through RevenueCat or Adapty); "closed": the person
+     * closed it (or there was no paywall).
+     */
+    outcome: "purchased" | "chosen" | "closed";
+    plan?: PaywallPlan;
+    paywall?: string;
+    variant?: VariantId;
+    /** The page the person was on, from 0. */
+    index: number;
+}
+interface PaywallOptions {
+    /**
+     * Buy the plan in your code (RevenueCat `purchasePackage`, Adapty `makePurchase`, Stripe Checkout). Throwing keeps
+     * the paywall open with an error; `false` keeps it open without one (the person cancelled the store sheet).
+     */
+    onPurchase?: (plan: PaywallPlan) => unknown;
+    /** Your store's plans with their local prices, by the same ids; they replace what MRRocket has for them. */
+    plans?: PaywallPlan[];
+    onClose?: (result: PaywallResult) => void;
+}
+interface PaywallView {
+    paywall: PaywallConfig;
+    variant: VariantId;
+    page: PaywallPage;
+    index: number;
+    total: number;
+    last: boolean;
+    plans: PaywallPlan[];
+    /** The picked plan's id. */
+    plan?: string;
+    busy: boolean;
+    error?: string;
+}
+interface PaywallHost {
+    /** Opens the paywall of a placement; resolves when it is bought or closed (at once with "closed" when there is none). */
+    open(placement: string, options?: PaywallOptions): Promise<PaywallResult>;
+    view(): PaywallView | null;
+    subscribe(listener: () => void): () => void;
+    next(): void;
+    back(): void;
+    pick(planId: string): void;
+    close(): void;
+}
+
 /**
  * The part of the SDK that runs anywhere: experiment config, variant assignment, preview links and event shapes.
  * No React, no browser APIs, so the server helper, the proxy helper and the client share it.
@@ -421,7 +531,7 @@ interface FlowsController {
 
 type VariantId = string;
 /** This build of the SDK. Sent with the config request so MRRocket knows what the site runs (error tracking, flags). */
-declare const SDK_VERSION = "0.13.0";
+declare const SDK_VERSION = "0.14.0";
 /** One variant of an experiment. `changes` replaces texts that the page marks with `<Text id>`. */
 interface VariantConfig {
     id: VariantId;
@@ -478,6 +588,8 @@ interface CockpitConfig {
     messages?: boolean;
     /** Page redirects set in MRRocket; the SDK sends visitors on before the page shows (`redirectFor`). SDK 0.7.0+. */
     redirects?: RedirectConfig[];
+    /** Published paywalls with their pages, per placement (MRRocket › Conversion › Paywalls), for `paywall.open()`. SDK 0.14.0+. */
+    paywalls?: PaywallConfig[];
 }
 /** One condition of a flag's audience, on a property of the person (`identify(id, props)`), the id or the page. */
 interface FlagCondition {
@@ -668,6 +780,14 @@ interface MRRocketClient {
     openCancelFlow(options?: CancelFlowOptions): Promise<CancelFlowResult>;
     /** Starts an onboarding flow now (the first live one without an id). False when there is none. */
     startOnboarding(id?: string): boolean;
+    /**
+     * Shows the paywall of a placement built in MRRocket › Paywalls page by page (drawn by `<MRRocketProvider>`). Its
+     * last page hands the chosen plan to `onPurchase`, where your code buys it (RevenueCat, Adapty, StoreKit, Play);
+     * MRRocket never takes a payment. Pass your store's `plans` to show their local prices.
+     */
+    openPaywall(placement: string, options?: PaywallOptions): Promise<PaywallResult>;
+    /** The open paywall for a renderer (the provider's, or your own). */
+    paywall: PaywallHost;
     /**
      * Push notifications from your Lifecycle journeys for the signed-in person (call `identify` first). Asks the
      * permission (unless `ask: false`), gets the Expo push token and sends it to MRRocket. Needs `expo-notifications`.
@@ -720,8 +840,9 @@ interface NativeAppearance {
     theme?: "light" | "dark" | "auto";
     accent?: string;
 }
-declare const MRRocketFlows: ({ flows, appearance }: {
+declare const MRRocketFlows: ({ flows, paywall, appearance }: {
     flows: FlowsController;
+    paywall?: PaywallHost;
     appearance?: NativeAppearance;
 }) => react.FunctionComponentElement<Record<string, unknown>> | null;
 
@@ -891,6 +1012,16 @@ declare const usePush: () => {
     register: MRRocketClient["registerForPush"];
     unregister: MRRocketClient["unregisterForPush"];
 };
+/**
+ * The paywalls built in MRRocket › Paywalls, page by page; the provider draws them. The last page hands the chosen plan
+ * to `onPurchase`, where your code buys it. MRRocket never takes a payment.
+ *
+ *     const paywall = usePaywall();
+ *     paywall.open("onboarding_end", { plans: storePlans, onPurchase: (plan) => Purchases.purchasePackage(packages[plan.id]) });
+ */
+declare const usePaywall: () => {
+    open: MRRocketClient["openPaywall"];
+};
 /** Starts an onboarding flow now (the first live one without an id), whatever its trigger. */
 declare const useOnboarding: () => {
     start: (id?: string) => boolean;
@@ -929,4 +1060,4 @@ declare const useExpoRouterTracking: () => void;
  */
 declare const useNavigationTracking: () => (state: unknown) => void;
 
-export { type AppContext, type CancelFlowConfig, type CancelFlowOptions, type CancelFlowResult, type CancelOffer, type ChatMessage, type ChatThread, type CockpitConfig, type FeedbackPost, type FlagConfig, type FlowView, type InAppMessage, type KeyValueStorage, type MRRocketClient, MRRocketFeedback, MRRocketFlows, MRRocketMask, MRRocketMessenger, type MRRocketOptions, MRRocketProvider, type MRRocketProviderProps, MRRocketSurveys, type NativeAppearance, type NativeConsent, type NativeFeedbackOptions, type NativeMessengerOptions, type NativePushResult, type NativePushStatus, type OnboardingFlow, type OnboardingStep, type RegisterForPushOptions, SDK_VERSION, type SurveyDefinition, type VariantId, activeRouteName, createMRRocket, getMRRocket, useCancelFlow, useExpoRouterTracking, useFeedback, useFlag, useFlagVariant, useMRRocket, useMessenger, useNavigationTracking, useOnboarding, usePush, useText, useVariant };
+export { type AppContext, type CancelFlowConfig, type CancelFlowOptions, type CancelFlowResult, type CancelOffer, type ChatMessage, type ChatThread, type CockpitConfig, type FeedbackPost, type FlagConfig, type FlowView, type InAppMessage, type KeyValueStorage, type MRRocketClient, MRRocketFeedback, MRRocketFlows, MRRocketMask, MRRocketMessenger, type MRRocketOptions, MRRocketProvider, type MRRocketProviderProps, MRRocketSurveys, type NativeAppearance, type NativeConsent, type NativeFeedbackOptions, type NativeMessengerOptions, type NativePushResult, type NativePushStatus, type OnboardingFlow, type OnboardingStep, type PaywallConfig, type PaywallOptions, type PaywallPage, type PaywallPlan, type PaywallResult, type RegisterForPushOptions, SDK_VERSION, type SurveyDefinition, type VariantId, activeRouteName, createMRRocket, getMRRocket, useCancelFlow, useExpoRouterTracking, useFeedback, useFlag, useFlagVariant, useMRRocket, useMessenger, useNavigationTracking, useOnboarding, usePaywall, usePush, useText, useVariant };

package/dist/react-native/index.js

@@ -41,6 +41,7 @@ __export(native_exports, {
   useMessenger: () => useMessenger,
   useNavigationTracking: () => useNavigationTracking,
   useOnboarding: () => useOnboarding,
+  usePaywall: () => usePaywall,
   usePush: () => usePush,
   useText: () => useText,
   useVariant: () => useVariant
@@ -49,7 +50,7 @@ module.exports = __toCommonJS(native_exports);
 var import_react3 = require("react");
 
 // src/core.ts
-var SDK_VERSION = "0.13.0";
+var SDK_VERSION = "0.14.0";
 var propOf = (person, name) => {
   const want = name.trim().toLowerCase();
   for (const [k, v] of Object.entries(person)) if (k.toLowerCase() === want) return v;
@@ -805,6 +806,131 @@ var createFlows = (env) => {
   return controller;
 };
 
+// src/paywall.ts
+var PAYWALL_EVENT = "$paywall";
+var paywallPages = (config, w, distinctId) => {
+  const e = w.experiment ? config?.experiments.find((x) => x.key === w.experiment) : void 0;
+  const id = e ? assign(e, distinctId) : w.variants[0]?.id;
+  const v = w.variants.find((x) => x.id === id) ?? w.variants[0];
+  return v ? { variant: v.id, pages: v.pages, test: e?.status === "running" && !e.winner ? e.key : void 0 } : null;
+};
+var createPaywallHost = (env) => {
+  let run = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const l of [...listeners]) {
+      try {
+        l();
+      } catch {
+      }
+    }
+  };
+  const base = () => run ? { paywall: run.w.id, placement: run.w.placement, variant: run.variant } : {};
+  const show = () => {
+    if (run && !run.seen.has(run.index)) {
+      run.seen.add(run.index);
+      env.track(PAYWALL_EVENT, { ...base(), page: run.pages[run.index].id, index: run.index, action: "page" });
+    }
+    emit();
+  };
+  const end = (r) => {
+    const c = run;
+    if (!c) return;
+    run = null;
+    if (r.outcome === "closed") c.options.onClose?.(r);
+    c.resolve(r);
+    emit();
+  };
+  const result = (outcome) => ({
+    outcome,
+    index: run?.index ?? 0,
+    ...run ? { paywall: run.w.id, variant: run.variant } : {},
+    ...outcome !== "closed" && run ? { plan: run.plans.find((p) => p.id === run.plan) } : {}
+  });
+  const buy = () => {
+    const c = run;
+    const plan = c?.plans.find((p) => p.id === c.plan);
+    if (!c || !plan || c.busy) return;
+    if (!c.options.onPurchase) return end(result("chosen"));
+    c.busy = true;
+    c.error = void 0;
+    emit();
+    Promise.resolve().then(() => c.options.onPurchase?.(plan)).then(
+      (ok) => {
+        c.busy = false;
+        if (run !== c) return;
+        if (ok === false) return emit();
+        env.track(PAYWALL_EVENT, { ...base(), page: c.pages[c.index].id, index: c.index, plan: plan.id, action: "purchased" });
+        end(result("purchased"));
+      },
+      () => {
+        c.busy = false;
+        c.error = "The purchase did not go through. Please try again.";
+        emit();
+      }
+    );
+  };
+  return {
+    open: (placement, options = {}) => {
+      if (run) return run.promise;
+      const config = env.config();
+      const w = config?.paywalls?.find((x) => x.placement === placement);
+      const picked = w ? paywallPages(config, w, env.distinctId()) : null;
+      if (!w || !picked?.pages.length) return Promise.resolve({ outcome: "closed", index: 0 });
+      const own = new Map((options.plans ?? []).map((p) => [p.id, p]));
+      const plans = w.plans.map((p) => own.get(p.id) ?? p);
+      let resolve = () => {
+      };
+      const promise = new Promise((r) => resolve = r);
+      const plan = plans.some((p) => p.id === w.highlight) ? w.highlight : plans[0]?.id;
+      run = { w, variant: picked.variant, pages: picked.pages, plans, index: 0, plan, busy: false, seen: /* @__PURE__ */ new Set(), options, resolve, promise };
+      if (picked.test) env.track("$exposure", { experiment: picked.test, variant: picked.variant });
+      show();
+      return promise;
+    },
+    view: () => run ? {
+      paywall: run.w,
+      variant: run.variant,
+      page: run.pages[run.index],
+      index: run.index,
+      total: run.pages.length,
+      last: run.index === run.pages.length - 1,
+      plans: run.plans,
+      plan: run.plan,
+      busy: run.busy,
+      error: run.error
+    } : null,
+    subscribe: (l) => {
+      listeners.add(l);
+      return () => listeners.delete(l);
+    },
+    next: () => {
+      if (!run || run.busy) return;
+      if (run.pages[run.index].kind === "plans" || run.index === run.pages.length - 1) return buy();
+      run.index++;
+      run.error = void 0;
+      show();
+    },
+    back: () => {
+      if (!run || run.busy || !run.index) return;
+      run.index--;
+      run.error = void 0;
+      emit();
+    },
+    pick: (id) => {
+      if (!run || run.busy || !run.plans.some((p) => p.id === id)) return;
+      run.plan = id;
+      run.error = void 0;
+      emit();
+    },
+    close: () => {
+      if (!run || run.busy) return;
+      env.track(PAYWALL_EVENT, { ...base(), index: run.index, action: "closed" });
+      end(result("closed"));
+    }
+  };
+};
+
 // src/rage.ts
 var RageDetector = class {
   constructor(windowMs = 1e3, radius = 30, count = 3) {
@@ -1072,6 +1198,7 @@ var createClient = (options, deps) => {
   const errorQueue = [];
   const errorsSeen = /* @__PURE__ */ new Set();
   let errorsSent = 0;
+  const paywall = createPaywallHost({ config: () => config, distinctId: () => distinctId(), track: (event, props) => record(event, props) });
   const flows = createFlows({
     track: (event, props) => record(event, props),
     personId: () => consent !== "off" ? identified : void 0,
@@ -1632,6 +1759,8 @@ var createClient = (options, deps) => {
     },
     openCancelFlow: (o) => flows.openCancelFlow(o),
     startOnboarding: (id) => flows.startOnboarding(id),
+    openPaywall: (placement, o) => paywall.open(placement, o),
+    paywall,
     registerForPush,
     unregisterForPush,
     flows,
@@ -1697,19 +1826,21 @@ var RN = require("react-native");
 var LIGHT = { bg: "#ffffff", fg: "#1c1d20", muted: "#5d6068", soft: "#f4f5f7", line: "#e4e5e8" };
 var DARK = { bg: "#17181b", fg: "#f1f2f4", muted: "#a9acb3", soft: "#232428", line: "#2e2f35" };
 var months = (n) => `${n} ${n === 1 ? "month" : "months"}`;
-var MRRocketFlows = ({ flows, appearance = {} }) => {
+var MRRocketFlows = ({ flows, paywall, appearance = {} }) => {
   const scheme = RN.useColorScheme?.();
   const dark = appearance.theme === "dark" || (appearance.theme ?? "auto") === "auto" && scheme === "dark";
   const p = { ...dark ? DARK : LIGHT, accent: appearance.accent ?? "#3f76ff", danger: "#d92d20" };
   const [, setTick] = (0, import_react.useState)(0);
   (0, import_react.useEffect)(() => flows.subscribe(() => setTick((t) => t + 1)), [flows]);
+  (0, import_react.useEffect)(() => paywall?.subscribe(() => setTick((t) => t + 1)), [paywall]);
+  const pw = paywall?.view() ?? null;
   const v = flows.view();
   const [comment, setComment] = (0, import_react.useState)("");
   const screen = v?.type === "cancel" ? v.screen : null;
   (0, import_react.useEffect)(() => {
     if (!screen) setComment("");
   }, [screen]);
-  if (!v) return null;
+  if (!v && !pw) return null;
   const text2 = (children, style = {}) => (0, import_react.createElement)(RN.Text, { style: { color: p.fg, fontSize: 15, ...style } }, children);
   const muted = (children, style = {}) => text2(children, { color: p.muted, fontSize: 13, ...style });
   const title = (children) => (0, import_react.createElement)(RN.Text, { accessibilityRole: "header", style: { color: p.fg, fontSize: 18, fontWeight: "700" } }, children);
@@ -1778,6 +1909,71 @@ var MRRocketFlows = ({ flows, appearance = {} }) => {
     accessibilityLabel: placeholder,
     style: { minHeight: 72, borderWidth: 1, borderColor: p.line, borderRadius: 10, padding: 10, color: p.fg, textAlignVertical: "top" }
   });
+  const paywallSheet = (w) => {
+    const pg = w.page;
+    const host = paywall;
+    return sheet(
+      [
+        (0, import_react.createElement)(
+          RN.View,
+          { key: "top", style: { flexDirection: "row", alignItems: "center", gap: 4 } },
+          ...w.total > 1 ? Array.from(
+            { length: w.total },
+            (_, i) => (0, import_react.createElement)(RN.View, { key: i, style: { width: 16, height: 4, borderRadius: 4, backgroundColor: i <= w.index ? p.accent : p.line } })
+          ) : [],
+          close("Close", host.close)
+        ),
+        title(pg.title),
+        pg.body ? muted(pg.body, { fontSize: 15 }) : null,
+        ...pg.kind === "benefits" ? (pg.items ?? []).map(
+          (item, i) => (0, import_react.createElement)(
+            RN.View,
+            { key: `b${i}`, style: { flexDirection: "row", gap: 10, alignItems: "flex-start" } },
+            text2("\u2713", { color: p.accent, fontWeight: "700" }),
+            text2(item, { flex: 1 })
+          )
+        ) : [],
+        ...pg.kind === "proof" ? (pg.quotes ?? []).map(
+          (q, i) => (0, import_react.createElement)(RN.View, { key: `q${i}`, style: { backgroundColor: p.soft, borderRadius: 12, padding: 12, gap: 6 } }, text2(q.text), q.by ? muted(q.by) : null)
+        ) : [],
+        pg.kind === "plans" ? (0, import_react.createElement)(
+          RN.View,
+          { key: "plans", accessibilityRole: "radiogroup", style: { gap: 6 } },
+          ...w.plans.map(
+            (plan) => (0, import_react.createElement)(
+              RN.Pressable,
+              {
+                key: plan.id,
+                onPress: () => host.pick(plan.id),
+                accessibilityRole: "radio",
+                accessibilityLabel: `${plan.name}, ${plan.price}`,
+                accessibilityState: { checked: w.plan === plan.id },
+                style: {
+                  minHeight: 52,
+                  paddingHorizontal: 12,
+                  borderRadius: 10,
+                  borderWidth: 1,
+                  borderColor: w.plan === plan.id ? p.accent : p.line,
+                  backgroundColor: w.plan === plan.id ? p.soft : p.bg,
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10
+                }
+              },
+              (0, import_react.createElement)(RN.View, { style: { flex: 1 } }, text2(plan.name, { fontWeight: "600" }), plan.note ? muted(plan.note) : null),
+              text2(plan.price, { fontWeight: "700" })
+            )
+          )
+        ) : null,
+        w.error ? text2(w.error, { color: p.danger, fontSize: 13 }) : null,
+        btn(w.busy ? "One moment\u2026" : pg.button || "Continue", "primary", host.next, w.busy || pg.kind === "plans" && !w.plan),
+        w.index ? btn("Back", "quiet", host.back, w.busy) : null
+      ],
+      host.close
+    );
+  };
+  if (pw) return paywallSheet(pw);
+  if (!v) return null;
   if (v.type === "cancel") {
     const top = (0, import_react.createElement)(
       RN.View,
@@ -3067,7 +3263,7 @@ var MRRocketProvider = ({ client: given, children, consent, flows = true, appear
     Ctx.Provider,
     { value: client },
     heatmaps ? (0, import_react3.createElement)(RN4.View, { style: { flex: 1 }, onTouchStartCapture: (e) => touch(e, false), onTouchEndCapture: (e) => touch(e, true) }, children) : children,
-    flows ? (0, import_react3.createElement)(MRRocketFlows, { flows: client.flows, appearance }) : null,
+    flows ? (0, import_react3.createElement)(MRRocketFlows, { flows: client.flows, paywall: client.paywall, appearance }) : null,
     surveys ? (0, import_react3.createElement)(MRRocketSurveys, { client, appearance }) : null,
     feedback ? (0, import_react3.createElement)(MRRocketFeedback, { client, appearance, options: feedback }) : null,
     messenger ? (0, import_react3.createElement)(MRRocketMessenger, { client, appearance, options: messenger }) : null
@@ -3104,6 +3300,10 @@ var usePush = () => {
   const client = useClient();
   return { register: client.registerForPush, unregister: client.unregisterForPush };
 };
+var usePaywall = () => {
+  const client = useClient();
+  return { open: client.openPaywall };
+};
 var useOnboarding = () => {
   const client = useClient();
   return { start: client.startOnboarding };