@revenuecat/purchases-ui-js 4.10.2 → 4.11.0

package/dist/components/express-purchase-button/ExpressPurchaseButton.stories.svelte

@@ -11,18 +11,45 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { mockDateDecorator } from "storybook-mock-date-decorator";
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
+  import type { StackProps } from "../../types/components/stack";
+  import type {
+    WalletPurchasePrepare,
+    WalletPurchaseStart,
+  } from "../../types/wallet";
 
   const defaultLocale = "en_US";
   const textLidWhenAvailable = "purchase_wallet_available_text";
   const textLidWhenUnavailable = "purchase_wallet_unavailable_text";
+  const textLidCustomWalletButton = "custom_wallet_button_text";
   const loc = {
     en_US: {
       ...localizations["en_US"],
       [textLidWhenAvailable]: "Purchase with Wallet",
       [textLidWhenUnavailable]: "Wallet Unavailable",
+      [textLidCustomWalletButton]: "Pay with Custom Wallet Button",
     },
   };
 
+  const createPrepareWalletPurchase =
+    ({
+      available,
+      delay,
+    }: {
+      available: boolean;
+      delay?: number;
+    }): WalletPurchasePrepare =>
+    (_selectedPackageId: string) =>
+      new Promise((resolve) => {
+        setTimeout(() => resolve(available), delay);
+      });
+
+  const createOnWalletPurchaseClicked =
+    ({ delay = 500 }: { delay?: number } = {}): WalletPurchaseStart =>
+    (_selectedPackageId: string) =>
+      new Promise((resolve) => {
+        setTimeout(() => resolve(), delay);
+      });
+
   const createWalletButtonRender =
     ({ available, delay }: { available: boolean; delay?: number }) =>
     (
@@ -106,6 +133,116 @@
     shadow: null,
   };
 
+  const customWalletButtonProps = {
+    type: "wallet_button",
+    id: "wallet_button_custom",
+    name: "Wallet Button Custom",
+    mode: "custom",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fit" },
+    },
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    stack: {
+      type: "stack",
+      id: "wallet-button-custom-stack",
+      name: "Wallet Button Custom Stack",
+      background_color: {
+        light: {
+          type: "hex",
+          value: "#111111",
+        },
+      },
+      background: {
+        type: "color",
+        value: {
+          light: {
+            type: "hex",
+            value: "#111111",
+          },
+        },
+      },
+      components: [
+        {
+          background_color: null,
+          color: {
+            light: {
+              type: "hex",
+              value: "#ffffff",
+            },
+          },
+          font_name: null,
+          font_size: "heading_m",
+          font_weight: "extra_bold",
+          horizontal_alignment: "center",
+          id: "wallet-button-custom-text",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Text",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fill",
+              value: null,
+            },
+          },
+          text_lid: textLidCustomWalletButton,
+          type: "text",
+        },
+      ],
+      dimension: {
+        type: "vertical",
+        alignment: "center",
+        distribution: "center",
+      },
+      margin: {
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      padding: {
+        bottom: 16,
+        leading: 16,
+        top: 16,
+        trailing: 16,
+      },
+      border: null,
+      shadow: null,
+      shape: {
+        corners: {
+          bottom_leading: 8,
+          bottom_trailing: 8,
+          top_leading: 8,
+          top_trailing: 8,
+        },
+        type: "rectangle",
+      },
+      size: {
+        height: {
+          type: "fit",
+        },
+        width: {
+          type: "fill",
+        },
+      },
+      spacing: 8,
+    },
+  } satisfies WalletButtonProps;
+
   const purchaseButtonWhenAvailableProps = {
     type: "purchase_button",
     id: "purchase-button",
@@ -216,6 +353,39 @@
   purchaseButtonWhenUnavailableProps.stack.components[0].text_lid =
     textLidWhenUnavailable;
 
+  const walletAvailableStackCustom = {
+    type: "stack",
+    id: "wallet-available-stack-custom",
+    name: "Wallet Available Stack (Custom)",
+    components: [customWalletButtonProps, purchaseButtonWhenAvailableProps],
+    size: {
+      width: { type: "fill" },
+      height: { type: "fit" },
+    },
+    dimension: {
+      type: "vertical",
+      alignment: "center",
+      distribution: "center",
+    },
+    spacing: 8,
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    background_color: null,
+    background: null,
+    border: null,
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 8,
+        top_trailing: 8,
+        bottom_leading: 8,
+        bottom_trailing: 8,
+      },
+    },
+    shadow: null,
+    badge: null,
+  } satisfies StackProps;
+
   const { Story } = defineMeta({
     title: "Components/ExpressPurchaseButton",
     component: ExpressPurchaseButton,
@@ -460,3 +630,48 @@
     size: { width: { type: "fixed", value: 500 }, height: { type: "fit" } },
   }}
 />
+
+<Story
+  name="Custom button — available"
+  decorators={[
+    paywallDecorator(
+      undefined,
+      "some-package-id",
+      createPrepareWalletPurchase({ available: true, delay: 200 }),
+      createOnWalletPurchaseClicked(),
+    ),
+  ]}
+  args={{
+    wallet_available_stack: walletAvailableStackCustom,
+  }}
+/>
+
+<Story
+  name="Custom button — unavailable"
+  decorators={[
+    paywallDecorator(
+      undefined,
+      "some-package-id",
+      createPrepareWalletPurchase({ available: false, delay: 200 }),
+      createOnWalletPurchaseClicked(),
+    ),
+  ]}
+  args={{
+    wallet_available_stack: walletAvailableStackCustom,
+  }}
+/>
+
+<Story
+  name="Custom button — slow prepare (skeleton)"
+  decorators={[
+    paywallDecorator(
+      undefined,
+      "some-package-id",
+      createPrepareWalletPurchase({ available: true, delay: 3000 }),
+      createOnWalletPurchaseClicked(),
+    ),
+  ]}
+  args={{
+    wallet_available_stack: walletAvailableStackCustom,
+  }}
+/>

package/dist/components/express-purchase-button/ExpressPurchaseButton.svelte

@@ -3,37 +3,65 @@
   import { getPaywallContext, setPaywallContext } from "../../stores/paywall";
   import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
   import type { StackProps } from "../../types/components/stack";
-  import { hasComponentOfTypeInSubtree } from "./component-subtree-utils";
+  import { untrack } from "svelte";
+  import {
+    findComponentOfTypeInSubtree,
+    hasComponentOfTypeInSubtree,
+  } from "./component-subtree-utils";
 
-  const props: ExpressPurchaseButtonProps = $props();
   const {
     wallet_unknown_stack,
     wallet_available_stack,
     wallet_unavailable_stack,
     type,
     ...partialStackProps
-  } = props;
+  }: ExpressPurchaseButtonProps = $props();
 
-  const { walletButtonRender, ...rest } = getPaywallContext();
+  const {
+    walletButtonRender,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
+    ...rest
+  } = getPaywallContext();
 
-  const availableStackHasWalletButton = hasComponentOfTypeInSubtree(
-    wallet_available_stack,
-    "wallet_button",
+  const availableStackHasWalletButton = untrack(() =>
+    hasComponentOfTypeInSubtree(wallet_available_stack, "wallet_button"),
+  );
+
+  const walletButton = untrack(() =>
+    findComponentOfTypeInSubtree(wallet_available_stack, "wallet_button"),
   );
 
+  // A partial custom integration (prepare without a click handler, or vice versa)
+  // would otherwise show an enabled CTA whose click can never purchase.
+  const hostReady =
+    walletButton?.type === "wallet_button" && walletButton.mode === "custom"
+      ? !!prepareWalletPurchase && !!onWalletPurchaseClicked
+      : !!walletButtonRender;
+
   let walletButtonAvailable = $state<boolean | undefined>(
     availableStackHasWalletButton ? undefined : false,
   );
   let shouldShowWalletSkeleton = $state(
-    !!walletButtonRender && availableStackHasWalletButton,
+    hostReady && availableStackHasWalletButton,
   );
 
   const onWalletButtonReady = (isAvailable?: boolean) => {
-    walletButtonAvailable = isAvailable;
+    // wallet_available_stack (and the WalletButton inside it) always mounts, hidden
+    // via CSS, so its own successful prepare can report ready independently of
+    // hostReady; clamp to unavailable so an incomplete host integration never
+    // reveals a CTA that can't purchase.
+    walletButtonAvailable = hostReady ? isAvailable : false;
     shouldShowWalletSkeleton = false;
   };
 
-  setPaywallContext({ walletButtonRender, ...rest, onWalletButtonReady });
+  setPaywallContext({
+    walletButtonRender,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
+    ...rest,
+    onWalletButtonReady,
+  });
 
   const shouldShowUnavailableStack = $derived(
     !walletButtonAvailable || !wallet_available_stack,
@@ -46,7 +74,7 @@
     ),
   );
 
-  const wrapperStackProps: StackProps = {
+  const wrapperStackProps: StackProps = $derived({
     components: [],
     type: "stack",
     visible: null,
@@ -58,7 +86,7 @@
     background_color: null,
     spacing: 0,
     ...partialStackProps,
-  };
+  });
 </script>
 
 <Stack {...wrapperStackProps}>

package/dist/components/express-purchase-button/ExpressPurchaseButtonTestWrapper.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { setColorModeContext } from "../../stores/color-mode";
+  import { setPaywallContext } from "../../stores/paywall";
+  import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
+  import type { UIConfig } from "../../types/ui-config";
+  import type {
+    WalletButtonRender,
+    WalletPurchasePrepare,
+    WalletPurchaseStart,
+  } from "../../types/wallet";
+  import { readable, writable } from "svelte/store";
+  import { untrack } from "svelte";
+  import ExpressPurchaseButton from "./ExpressPurchaseButton.svelte";
+
+  interface Props extends ExpressPurchaseButtonProps {
+    selectedPackageId?: string;
+    walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
+  }
+
+  const {
+    selectedPackageId = "pkg-1",
+    walletButtonRender,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
+    ...expressPurchaseButtonProps
+  }: Props = $props();
+
+  setColorModeContext();
+
+  const uiConfig: UIConfig = { app: { fonts: {} } };
+
+  setPaywallContext(
+    untrack(() => ({
+      selectedPackageId: writable<string | undefined>(selectedPackageId),
+      variablesPerPackage: readable(undefined),
+      baseVariables: readable(undefined),
+      infoPerPackage: readable(undefined),
+      onPurchase: () => {},
+      emitComponentInteraction: () => {},
+      onButtonAction: () => {},
+      uiConfig,
+      hideBackButtons: false,
+      walletButtonRender,
+      prepareWalletPurchase,
+      onWalletPurchaseClicked,
+    })),
+  );
+</script>
+
+<ExpressPurchaseButton {...expressPurchaseButtonProps} />

package/dist/components/express-purchase-button/ExpressPurchaseButtonTestWrapper.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ExpressPurchaseButtonProps } from "../../types/components/express-purchase-button-props";
+import type { WalletButtonRender, WalletPurchasePrepare, WalletPurchaseStart } from "../../types/wallet";
+interface Props extends ExpressPurchaseButtonProps {
+    selectedPackageId?: string;
+    walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
+}
+declare const ExpressPurchaseButtonTestWrapper: import("svelte").Component<Props, {}, "">;
+type ExpressPurchaseButtonTestWrapper = ReturnType<typeof ExpressPurchaseButtonTestWrapper>;
+export default ExpressPurchaseButtonTestWrapper;

package/dist/components/express-purchase-button/component-subtree-utils.d.ts

@@ -2,4 +2,5 @@ import type { Component } from "../../types/component";
 import type { StackProps } from "../../types/components/stack";
 type ComponentType = Component["type"];
 export declare const hasComponentOfTypeInSubtree: (stack: StackProps, componentType: ComponentType) => boolean;
+export declare const findComponentOfTypeInSubtree: (stack: StackProps, componentType: ComponentType) => Component | undefined;
 export {};

package/dist/components/express-purchase-button/component-subtree-utils.js

@@ -1,31 +1,56 @@
 export const hasComponentOfTypeInSubtree = (stack, componentType) => {
-    return (stack.components.some((component) => componentHasTypeInSubtree(component, componentType)) ||
-        (stack.badge?.stack
-            ? hasComponentOfTypeInSubtree(stack.badge.stack, componentType)
-            : false));
+    return findComponentOfTypeInSubtree(stack, componentType) !== undefined;
 };
-const componentHasTypeInSubtree = (component, componentType) => {
+export const findComponentOfTypeInSubtree = (stack, componentType) => {
+    for (const component of stack.components) {
+        const found = findComponentTypeInComponent(component, componentType);
+        if (found)
+            return found;
+    }
+    return stack.badge?.stack
+        ? findComponentOfTypeInSubtree(stack.badge.stack, componentType)
+        : undefined;
+};
+const findComponentTypeInComponent = (component, componentType) => {
     if (component.type === componentType) {
-        return true;
+        return component;
     }
-    if (component.fallback &&
-        componentHasTypeInSubtree(component.fallback, componentType)) {
-        return true;
+    if (component.fallback) {
+        const found = findComponentTypeInComponent(component.fallback, componentType);
+        if (found)
+            return found;
     }
     switch (component.type) {
         case "carousel":
-            return component.pages.some((page) => hasComponentOfTypeInSubtree(page, componentType));
+            for (const page of component.pages) {
+                const found = findComponentOfTypeInSubtree(page, componentType);
+                if (found)
+                    return found;
+            }
+            return undefined;
         case "package":
         case "purchase_button":
         case "tab":
         case "tab_control_button":
-            return hasComponentOfTypeInSubtree(component.stack, componentType);
+            return findComponentOfTypeInSubtree(component.stack, componentType);
+        case "wallet_button":
+            return component.stack
+                ? findComponentOfTypeInSubtree(component.stack, componentType)
+                : undefined;
         case "stack":
-            return hasComponentOfTypeInSubtree(component, componentType);
-        case "tabs":
-            return (hasComponentOfTypeInSubtree(component.control.stack, componentType) ||
-                component.tabs.some((tab) => hasComponentOfTypeInSubtree(tab.stack, componentType)));
+            return findComponentOfTypeInSubtree(component, componentType);
+        case "tabs": {
+            const foundInControl = findComponentOfTypeInSubtree(component.control.stack, componentType);
+            if (foundInControl)
+                return foundInControl;
+            for (const tab of component.tabs) {
+                const found = findComponentOfTypeInSubtree(tab.stack, componentType);
+                if (found)
+                    return found;
+            }
+            return undefined;
+        }
         default:
-            return false;
+            return undefined;
     }
 };

package/dist/components/paywall/Paywall.svelte

@@ -60,7 +60,11 @@
     type PackageInfoStore,
     setPackageInfoContext,
   } from "../../stores/packageInfo";
-  import type { WalletButtonRender } from "../../types/wallet";
+  import type {
+    WalletButtonRender,
+    WalletPurchasePrepare,
+    WalletPurchaseStart,
+  } from "../../types/wallet";
   import type { ReservedAttribute } from "../../types/components/input-text";
   import type {
     PaywallOffering,
@@ -111,6 +115,8 @@
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
     onInputChanged?: (
       fieldId: string,
       value: string,
@@ -173,6 +179,8 @@
     onError,
     uiConfig,
     walletButtonRender,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
     onInputChanged,
     onSensitiveInputChanged,
     onReservedAttributeChanged,
@@ -388,6 +396,8 @@
     onSensitiveInputChanged,
     onReservedAttributeChanged,
     walletButtonRender,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
     uiConfig,
     hideBackButtons,
   });

package/dist/components/paywall/Paywall.svelte.d.ts

@@ -6,7 +6,7 @@ import type { OnComponentInteraction } from "../../types/paywall-component-inter
 import type { PaywallData } from "../../types/paywall";
 import type { UIConfig } from "../../types/ui-config";
 import { type CustomVariables, type PackageInfo, type VariableDictionary } from "../../types/variables";
-import type { WalletButtonRender } from "../../types/wallet";
+import type { WalletButtonRender, WalletPurchasePrepare, WalletPurchaseStart } from "../../types/wallet";
 import type { ReservedAttribute } from "../../types/components/input-text";
 import type { PaywallOffering, PaywallPackage, PaywallWorkflow } from "@revenuecat/workflow-web-components-sdk";
 import { type BridgeInputs } from "../web-view/build-paywall-context";
@@ -45,6 +45,8 @@ interface Props {
     onError?: (error: unknown) => void;
     hideBackButtons?: boolean;
     walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     /**
      * Called for sensitive inputs (keyboard_type: "password") instead of

package/dist/components/wallet-button/WalletButton.svelte

@@ -1,18 +1,29 @@
 <script lang="ts">
+  import Stack from "../stack/Stack.svelte";
   import { mapDimension } from "../stack/stack-utils";
   import { getColorModeContext } from "../../stores/color-mode";
   import { getPaywallContext } from "../../stores/paywall";
   import type { WalletButtonProps } from "../../types/components/wallet-button";
   import { css, mapSize, mapSpacing, px } from "../../utils/base-utils";
   import { DEFAULT_SPACING } from "../../utils/constants";
+  import { onDestroy } from "svelte";
 
-  const { walletButtonRender, onWalletButtonReady, selectedPackageId } =
-    getPaywallContext();
+  const {
+    walletButtonRender,
+    onWalletButtonReady,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
+    selectedPackageId,
+    emitComponentInteraction,
+  } = getPaywallContext();
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
   const props: WalletButtonProps = $props();
 
+  const mode = $derived(props.mode ?? "store");
+  const onReady = $derived(props.onWalletButtonReady ?? onWalletButtonReady);
+
   const walletButtonTheme = $derived.by(() => {
     const { style } = props;
     if (style == null) {
@@ -65,9 +76,99 @@
   });
 
   const stackStyle = $derived(css(stackLayoutRules));
+
+  let busy = $state(false);
+  let prepared = $state(false);
+  const walletState = $derived(
+    busy ? "busy" : prepared ? "ready" : "preparing",
+  );
+  let prepareRequestId = 0;
+  let destroyed = false;
+  onDestroy(() => {
+    destroyed = true;
+  });
+
+  const runPrepare = (packageId: string) => {
+    const requestId = ++prepareRequestId;
+    if (!prepareWalletPurchase) {
+      onReady?.(false);
+      return;
+    }
+
+    // A host that throws synchronously (rather than rejecting, as documented)
+    // must not skip the .catch below and leave onReady unreported.
+    Promise.resolve()
+      .then(() => prepareWalletPurchase(packageId))
+      .catch(() => false)
+      .then((available) => {
+        if (requestId !== prepareRequestId || destroyed) {
+          return;
+        }
+        prepared = available;
+        onReady?.(available);
+      });
+  };
+
+  const refreshPrepare = () => {
+    if (destroyed || mode !== "custom") {
+      return;
+    }
+    prepared = false;
+    if (!props.stack) {
+      onReady?.(false);
+      return;
+    }
+
+    const packageId = $selectedPackageId;
+    if (!packageId) {
+      // Invalidate any in-flight prepare so its result can't mark this cleared
+      // selection ready.
+      prepareRequestId++;
+      return;
+    }
+
+    runPrepare(packageId);
+  };
+
+  $effect(refreshPrepare);
+
+  const onclick = () => {
+    if (busy || !prepared || !onWalletPurchaseClicked) {
+      return;
+    }
+    const packageId = $selectedPackageId;
+    if (!packageId) {
+      return;
+    }
+    busy = true;
+    prepared = false;
+    // Invoked synchronously (not deferred) to keep Safari's user activation for
+    // the wallet sheet; a synchronous throw here must still restore state below.
+    let purchase: ReturnType<typeof onWalletPurchaseClicked>;
+    try {
+      purchase = onWalletPurchaseClicked(packageId);
+    } catch {
+      busy = false;
+      refreshPrepare();
+      return;
+    }
+    // Attach cleanup before anything else can throw so a failing interaction
+    // handler cannot leave the button locked.
+    purchase
+      .catch(() => {})
+      .finally(() => {
+        busy = false;
+        refreshPrepare();
+      });
+    emitComponentInteraction({
+      componentType: "wallet_button",
+      componentName: props.name,
+      componentValue: "custom_purchase",
+    });
+  };
 </script>
 
-{#if walletButtonRender && $selectedPackageId}
+{#if mode === "store" && walletButtonRender && $selectedPackageId}
   <div style={stackStyle}>
     {#key walletButtonTheme}
       <div
@@ -80,4 +181,26 @@
       ></div>
     {/key}
   </div>
+{:else if mode === "custom" && props.stack}
+  <div
+    class="custom-wallet-button"
+    style={stackStyle}
+    data-wallet-state={walletState}
+    aria-busy={busy}
+    aria-disabled={busy || !prepared}
+  >
+    <Stack {...props.stack} {onclick} testId="wallet-button-custom" />
+  </div>
 {/if}
+
+<style>
+  /* Default look for the not-ready states; hosts restyle via [data-wallet-state]. */
+  .custom-wallet-button:not([data-wallet-state="ready"]) {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .custom-wallet-button:not([data-wallet-state="ready"]) > :global(*) {
+    pointer-events: none;
+  }
+</style>

package/dist/components/wallet-button/WalletButtonTestWrapper.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { setColorModeContext } from "../../stores/color-mode";
+  import { setPaywallContext } from "../../stores/paywall";
+  import type { WalletButtonProps } from "../../types/components/wallet-button";
+  import type { UIConfig } from "../../types/ui-config";
+  import type {
+    WalletButtonRender,
+    WalletPurchasePrepare,
+    WalletPurchaseStart,
+  } from "../../types/wallet";
+  import { readable, writable, type Writable } from "svelte/store";
+  import { untrack } from "svelte";
+  import WalletButton from "./WalletButton.svelte";
+
+  interface Props extends WalletButtonProps {
+    selectedPackageId?: Writable<string | undefined>;
+    walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
+  }
+
+  const {
+    selectedPackageId = writable<string | undefined>("pkg-1"),
+    walletButtonRender,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
+    ...walletButtonProps
+  }: Props = $props();
+
+  setColorModeContext();
+
+  const uiConfig: UIConfig = { app: { fonts: {} } };
+
+  setPaywallContext(
+    untrack(() => ({
+      selectedPackageId,
+      variablesPerPackage: readable(undefined),
+      baseVariables: readable(undefined),
+      infoPerPackage: readable(undefined),
+      onPurchase: () => {},
+      emitComponentInteraction: () => {},
+      onButtonAction: () => {},
+      uiConfig,
+      hideBackButtons: false,
+      walletButtonRender,
+      prepareWalletPurchase,
+      onWalletPurchaseClicked,
+    })),
+  );
+</script>
+
+<WalletButton {...walletButtonProps} />

package/dist/components/wallet-button/WalletButtonTestWrapper.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { WalletButtonProps } from "../../types/components/wallet-button";
+import type { WalletButtonRender, WalletPurchasePrepare, WalletPurchaseStart } from "../../types/wallet";
+import { type Writable } from "svelte/store";
+interface Props extends WalletButtonProps {
+    selectedPackageId?: Writable<string | undefined>;
+    walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
+}
+declare const WalletButtonTestWrapper: import("svelte").Component<Props, {}, "">;
+type WalletButtonTestWrapper = ReturnType<typeof WalletButtonTestWrapper>;
+export default WalletButtonTestWrapper;

package/dist/components/workflows/Screen.svelte

@@ -10,7 +10,11 @@
     VariableDictionary,
     CustomVariables,
   } from "../../types/variables";
-  import type { WalletButtonRender } from "../../types/wallet";
+  import type {
+    WalletButtonRender,
+    WalletPurchasePrepare,
+    WalletPurchaseStart,
+  } from "../../types/wallet";
   import type { UIConfig } from "../../types/ui-config";
   import type { ReservedAttribute } from "../../types/components/input-text";
   import type {
@@ -58,6 +62,8 @@
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
     walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
     offering?: PaywallOffering | null;
@@ -90,6 +96,8 @@
     onRestorePurchasesClicked,
     onVisitCustomerCenterClicked,
     walletButtonRender,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
     safeAreaFallbackColor,
     hideBackButtons,
     offering,
@@ -137,6 +145,8 @@
       {onSensitiveInputChanged}
       {onReservedAttributeChanged}
       {walletButtonRender}
+      {prepareWalletPurchase}
+      {onWalletPurchaseClicked}
       {safeAreaFallbackColor}
       {hideBackButtons}
       {offering}

package/dist/components/workflows/Screen.svelte.d.ts

@@ -4,7 +4,7 @@ import type { InitialInputSelections } from "../../stores/inputValidation";
 import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
 import type { WorkflowScreen } from "../../types/workflow";
 import type { PackageInfo, VariableDictionary, CustomVariables } from "../../types/variables";
-import type { WalletButtonRender } from "../../types/wallet";
+import type { WalletButtonRender, WalletPurchasePrepare, WalletPurchaseStart } from "../../types/wallet";
 import type { UIConfig } from "../../types/ui-config";
 import type { ReservedAttribute } from "../../types/components/input-text";
 import type { PaywallOffering, PaywallPackage, PaywallWorkflow } from "@revenuecat/workflow-web-components-sdk";
@@ -36,6 +36,8 @@ interface Props {
     onRestorePurchasesClicked?: () => void;
     onVisitCustomerCenterClicked?: () => void;
     walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
     offering?: PaywallOffering | null;

package/dist/components/workflows/Workflow.svelte

@@ -10,7 +10,11 @@
     VariableDictionary,
     CustomVariables,
   } from "../../types/variables";
-  import type { WalletButtonRender } from "../../types/wallet";
+  import type {
+    WalletButtonRender,
+    WalletPurchasePrepare,
+    WalletPurchaseStart,
+  } from "../../types/wallet";
   import type { UIConfig } from "../../types/ui-config";
   import type { ReservedAttribute } from "../../types/components/input-text";
   import type {
@@ -51,6 +55,8 @@
     initialInputSelections?: InitialInputSelections;
     containerId?: string;
     walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
     onPurchaseClicked?: (
@@ -105,6 +111,8 @@
     initialInputSelections,
     containerId,
     walletButtonRender,
+    prepareWalletPurchase,
+    onWalletPurchaseClicked,
     safeAreaFallbackColor,
     hideBackButtons,
     onPurchaseClicked,
@@ -368,6 +376,8 @@
     {initialInputSelections}
     {containerId}
     {walletButtonRender}
+    {prepareWalletPurchase}
+    {onWalletPurchaseClicked}
     {safeAreaFallbackColor}
     {hideBackButtons}
     {onPurchaseClicked}

package/dist/components/workflows/Workflow.svelte.d.ts

@@ -3,7 +3,7 @@ import type { ColorScheme } from "../../types/colors";
 import type { InitialInputSelections } from "../../stores/inputValidation";
 import type { OnComponentInteraction } from "../../types/paywall-component-interaction";
 import type { PackageInfo, VariableDictionary, CustomVariables } from "../../types/variables";
-import type { WalletButtonRender } from "../../types/wallet";
+import type { WalletButtonRender, WalletPurchasePrepare, WalletPurchaseStart } from "../../types/wallet";
 import type { UIConfig } from "../../types/ui-config";
 import type { ReservedAttribute } from "../../types/components/input-text";
 import type { WorkflowNavData, WorkflowStepChangeEvent } from "../../types/workflow-nav";
@@ -21,6 +21,8 @@ interface Props {
     initialInputSelections?: InitialInputSelections;
     containerId?: string;
     walletButtonRender?: WalletButtonRender;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export { type WorkflowData, type WorkflowStep } from "./types/workflow";
 export { type InitialInputSelections } from "./stores/inputValidation";
 export { type UIConfig } from "./types/ui-config";
 export type { PaywallContext, PaywallOffering, PaywallPackage, PaywallWorkflow, } from "@revenuecat/workflow-web-components-sdk";
-export { type WalletButtonRender, type WalletButtonTheme, } from "./types/wallet";
+export { type WalletButtonRender, type WalletButtonTheme, type WalletPurchasePrepare, type WalletPurchaseStart, } from "./types/wallet";
 export { type CustomVariables, CustomVariableValue, mergeCustomVariables, type VariableDictionary, type PackageInfo, } from "./types/variables";
 export type { Action, CompleteWorkflowNavigateArgs, CompleteWorkflowUrlQueryParams, } from "./types/components/button";
 export type { LoaderProps } from "./types/components/loader";

package/dist/stores/paywall.d.ts

@@ -3,7 +3,7 @@ import type { ReservedAttribute } from "../types/components/input-text";
 import type { ComponentInteractionData } from "../types/paywall-component-interaction";
 import type { UIConfig } from "../types/ui-config";
 import type { PackageInfo, VariableDictionary } from "../types/variables";
-import type { WalletButtonRender } from "../types/wallet";
+import type { WalletButtonRender, WalletPurchasePrepare, WalletPurchaseStart } from "../types/wallet";
 import type { PaywallOffering, PaywallPackage, PaywallWorkflow } from "@revenuecat/workflow-web-components-sdk";
 import { type Readable, type Writable } from "svelte/store";
 import type { BridgeCustomValues, BridgeInputs } from "../components/web-view/build-paywall-context";
@@ -44,6 +44,8 @@ type PaywallContext = Readonly<{
     onReservedAttributeChanged?: (reservedAttribute: ReservedAttribute, value: string) => void;
     walletButtonRender?: WalletButtonRender;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
+    prepareWalletPurchase?: WalletPurchasePrepare;
+    onWalletPurchaseClicked?: WalletPurchaseStart;
     onButtonAction: (action: Action, actionId?: string) => void;
     uiConfig: UIConfig;
     hideBackButtons: boolean;

package/dist/stories/paywall-decorator.d.ts

@@ -1,3 +1,3 @@
-import type { WalletButtonRender } from "../types/wallet";
+import type { WalletButtonRender, WalletPurchasePrepare, WalletPurchaseStart } from "../types/wallet";
 import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
-export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(walletButtonRender?: WalletButtonRender, selectedPackageId?: string): DecoratorFunction<TRenderer, TArgs>;
+export declare function paywallDecorator<TRenderer extends Renderer, TArgs>(walletButtonRender?: WalletButtonRender, selectedPackageId?: string, prepareWalletPurchase?: WalletPurchasePrepare, onWalletPurchaseClicked?: WalletPurchaseStart): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/paywall-decorator.js

@@ -1,6 +1,6 @@
 import { setPaywallContext } from "../stores/paywall";
 import { readable, writable } from "svelte/store";
-export function paywallDecorator(walletButtonRender, selectedPackageId) {
+export function paywallDecorator(walletButtonRender, selectedPackageId, prepareWalletPurchase, onWalletPurchaseClicked) {
     return (Story) => {
         const selectedPackageIdWritable = writable(selectedPackageId);
         selectedPackageIdWritable.subscribe((packageId) => {
@@ -24,6 +24,8 @@ export function paywallDecorator(walletButtonRender, selectedPackageId) {
             onButtonAction: (action, actionId) => window.alert(`Button clicked: ${JSON.stringify({ action, actionId }, undefined, 2)}`),
             hideBackButtons: false,
             walletButtonRender,
+            prepareWalletPurchase,
+            onWalletPurchaseClicked,
             uiConfig: emptyUiConfig,
         });
         return Story();

package/dist/types/components/wallet-button.d.ts

@@ -2,10 +2,12 @@ import type { BaseComponent } from "../base";
 import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "../..";
 import type { Dimension } from "../alignment";
 import type { WalletButtonTheme } from "../wallet";
+import type { StackProps } from "./stack";
 export interface WalletButtonStyle {
     light: WalletButtonTheme;
     dark?: WalletButtonTheme | null;
 }
+export type WalletButtonMode = "store" | "custom";
 export interface WalletButtonProps extends BaseComponent {
     type: "wallet_button";
     size?: SizeType;
@@ -17,4 +19,6 @@ export interface WalletButtonProps extends BaseComponent {
     style?: WalletButtonStyle | null;
     onWalletButtonReady?: (walletButtonAvailable?: boolean) => void;
     shadow?: ShadowType | null;
+    mode?: WalletButtonMode | null;
+    stack?: StackProps | null;
 }

package/dist/types/paywall-component-interaction.d.ts

@@ -44,7 +44,8 @@ export type PackageSelectionSheetInteractionData = ComponentInteractionBase<"pac
     currentProductId?: string;
     resultingProductId?: string;
 };
-export type ComponentInteractionData = TabInteractionData | SwitchInteractionData | CarouselInteractionData | ButtonInteractionData | TextInteractionData | PackageInteractionData | PurchaseButtonInteractionData | PackageSelectionSheetInteractionData;
+export type WalletButtonInteractionData = ComponentInteractionBase<"wallet_button", "custom_purchase">;
+export type ComponentInteractionData = TabInteractionData | SwitchInteractionData | CarouselInteractionData | ButtonInteractionData | TextInteractionData | PackageInteractionData | PurchaseButtonInteractionData | PackageSelectionSheetInteractionData | WalletButtonInteractionData;
 export type ComponentInteractionType = ComponentInteractionData["componentType"];
 export type OnComponentInteraction = (data: ComponentInteractionData) => void;
 export {};

package/dist/types/wallet.d.ts

@@ -4,6 +4,10 @@
  * @default "black"
  */
 export type WalletButtonTheme = "black" | "white" | "white-outline";
+/** Host checks whether the wallet purchase path is usable for this package. Resolves false on any error. */
+export type WalletPurchasePrepare = (selectedPackageId: string) => Promise<boolean>;
+/** Host starts the wallet purchase. Must be invoked synchronously from the click so Safari keeps the user activation. Resolves when the attempt settles (success, cancel, or error). */
+export type WalletPurchaseStart = (selectedPackageId: string) => Promise<void>;
 export type WalletButtonRender = (node: HTMLElement, params: {
     selectedPackageId: string;
     onReady?: (walletButtonAvailable?: boolean) => void;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@revenuecat/purchases-ui-js",
   "description": "Web components for Paywalls. Powered by RevenueCat",
   "private": false,
-  "version": "4.10.2",
+  "version": "4.11.0",
   "author": {
     "name": "RevenueCat, Inc."
   },