@revenuecat/purchases-ui-js 4.11.1 → 4.12.1

package/dist/components/paywall/Paywall.svelte

@@ -117,6 +117,10 @@
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
+    appUserId?: string;
+    isSandbox?: boolean;
+    rcSource?: string;
+    onCustomWebCheckout?: (url: string) => void;
     onInputChanged?: (
       fieldId: string,
       value: string,
@@ -181,6 +185,10 @@
     walletButtonRender,
     prepareWalletPurchase,
     onWalletPurchaseClicked,
+    appUserId,
+    isSandbox,
+    rcSource,
+    onCustomWebCheckout,
     onInputChanged,
     onSensitiveInputChanged,
     onReservedAttributeChanged,
@@ -398,6 +406,10 @@
     walletButtonRender,
     prepareWalletPurchase,
     onWalletPurchaseClicked,
+    appUserId,
+    isSandbox,
+    rcSource,
+    onCustomWebCheckout,
     uiConfig,
     hideBackButtons,
   });
@@ -468,18 +480,26 @@
       <Stack
         {...stack}
         class="paywall-content-scroll"
-        padding={sticky_footer
-          ? {
-              ...stack.padding,
-              bottom: (stack.padding?.bottom ?? 0) + footerHeight,
-            }
-          : stack.padding}
         style={mapPaywallContentStackStyle(
           stack.size.height,
           pullContentUnderHeader,
           headerHeight,
         )}
-      />
+      >
+        {#if sticky_footer}
+          <!-- Adds a  real flex item rather than bottom padding to clear
+            a footer because iOS Safari ignores the padding if the content 
+            still fits on screen leaving content stuck behind the footer. -->
+          <div
+            class="footer-scroll-spacer"
+            aria-hidden="true"
+            style="height: {Math.max(
+              0,
+              footerHeight - (stack.spacing ?? 0),
+            )}px;"
+          ></div>
+        {/if}
+      </Stack>
     </div>
     {#if sticky_footer}
       <!-- Overlaps the content so translucent footers show it; sticky rather than
@@ -536,6 +556,11 @@
     flex-shrink: 0;
   }
 
+  .footer-scroll-spacer {
+    width: 100%;
+    flex-shrink: 0;
+  }
+
   .paywall-content {
     z-index: 2;
     width: 100%;

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

@@ -47,6 +47,10 @@ interface Props {
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
+    appUserId?: string;
+    isSandbox?: boolean;
+    rcSource?: string;
+    onCustomWebCheckout?: (url: string) => void;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
     /**
      * Called for sensitive inputs (keyboard_type: "password") instead of

package/dist/components/purchase-button/PurchaseButton.svelte

@@ -6,6 +6,7 @@
   import type { PurchaseButtonProps } from "../../types/components/purchase-button";
   import type { PurchaseButtonInteractionData } from "../../types/paywall-component-interaction";
   import { get } from "svelte/store";
+  import { buildCustomWebCheckoutURL } from "./custom-web-checkout-url";
 
   const props: PurchaseButtonProps = $props();
   const { stack } = props;
@@ -13,41 +14,42 @@
   const {
     emitComponentInteraction,
     onPurchase,
+    onCustomWebCheckout,
     selectedPackageId,
     infoPerPackage,
+    appUserId,
+    isSandbox,
+    rcSource,
   } = getPaywallContext();
   const { getLocalizedString } = getLocalizationContext();
 
   // Set when embedded in a package; standalone buttons fall back to the store.
   const enclosingPackageId = getOptionalPackageIdContext();
 
-  const appendQueryParam = (url: string, key: string, value: string) => {
-    const hashIndex = url.indexOf("#");
-    const hash = hashIndex === -1 ? "" : url.slice(hashIndex);
-    const urlWithoutHash = hashIndex === -1 ? url : url.slice(0, hashIndex);
-    const separator = urlWithoutHash.includes("?") ? "&" : "?";
-
-    return `${urlWithoutHash}${separator}${encodeURIComponent(key)}=${encodeURIComponent(value)}${hash}`;
+  const getCustomWebCheckoutURL = (packageId: string) => {
+    if (props.method?.type !== "custom_web_checkout") {
+      return undefined;
+    }
+    const url = getLocalizedString(props.method.custom_url.url_lid);
+    return url
+      ? buildCustomWebCheckoutURL(url, props.method.custom_url, {
+          packageId,
+          appUserId,
+          isSandbox,
+          rcSource,
+        })
+      : undefined;
   };
 
   const getPurchaseButtonInteractionData = (
     packageId: string,
+    customWebCheckoutURL: string | undefined,
   ): PurchaseButtonInteractionData => {
-    let componentURL: string | undefined;
+    let componentURL = customWebCheckoutURL;
     const resolvedMethodType =
       props.method?.type === "unknown" ? undefined : props.method?.type;
     const webCheckoutURL = $infoPerPackage?.[packageId]?.webCheckoutURL;
 
-    if (props.method?.type === "custom_web_checkout") {
-      const url = getLocalizedString(props.method.custom_url.url_lid);
-      if (url) {
-        const packageParam = props.method.custom_url.package_param;
-        componentURL = packageParam
-          ? appendQueryParam(url, packageParam, packageId)
-          : url;
-      }
-    }
-
     if (componentURL === undefined) {
       const interactionValue = resolvedMethodType ?? props.action;
       if (
@@ -75,7 +77,15 @@
     if (packageId !== undefined) {
       // Sync before purchasing so onPurchase reads this package, not a stale one.
       $selectedPackageId = packageId;
-      emitComponentInteraction(getPurchaseButtonInteractionData(packageId));
+      const customWebCheckoutURL = getCustomWebCheckoutURL(packageId);
+      emitComponentInteraction(
+        getPurchaseButtonInteractionData(packageId, customWebCheckoutURL),
+      );
+      // Hosts without the callback keep the purchase flow.
+      if (customWebCheckoutURL !== undefined && onCustomWebCheckout) {
+        onCustomWebCheckout(customWebCheckoutURL);
+        return;
+      }
     }
 
     onPurchase(props.triggers?.on_purchase_press);

package/dist/components/purchase-button/custom-web-checkout-url.d.ts

@@ -0,0 +1,18 @@
+import type { PurchaseButtonMethod } from "../../types/components/purchase-button";
+type CustomURLConfig = Extract<PurchaseButtonMethod, {
+    type: "custom_web_checkout";
+}>["custom_url"];
+type CustomWebCheckoutContext = {
+    packageId: string;
+    appUserId?: string;
+    isSandbox?: boolean;
+    rcSource?: string;
+};
+/**
+ * Mirrors the native SDKs: source, then app user ID, env and package when
+ * configured. The source is the host's own, so it survives a same-tab hop.
+ * Same-named params are replaced; an unparseable URL is returned unchanged.
+ * Script-capable URLs resolve to undefined, so the button purchases instead.
+ */
+export declare const buildCustomWebCheckoutURL: (url: string, config: CustomURLConfig, { packageId, appUserId, isSandbox, rcSource }: CustomWebCheckoutContext) => string | undefined;
+export {};

package/dist/components/purchase-button/custom-web-checkout-url.js

@@ -0,0 +1,33 @@
+const SCRIPT_PROTOCOLS = new Set(["javascript:", "data:", "vbscript:"]);
+/**
+ * Mirrors the native SDKs: source, then app user ID, env and package when
+ * configured. The source is the host's own, so it survives a same-tab hop.
+ * Same-named params are replaced; an unparseable URL is returned unchanged.
+ * Script-capable URLs resolve to undefined, so the button purchases instead.
+ */
+export const buildCustomWebCheckoutURL = (url, config, { packageId, appUserId, isSandbox, rcSource }) => {
+    let parsed;
+    try {
+        parsed = new URL(url);
+    }
+    catch {
+        return url;
+    }
+    if (SCRIPT_PROTOCOLS.has(parsed.protocol)) {
+        return undefined;
+    }
+    const { searchParams } = parsed;
+    if (rcSource !== undefined) {
+        searchParams.set("rc_source", rcSource);
+    }
+    if (config.app_user_id_param && appUserId !== undefined) {
+        searchParams.set(config.app_user_id_param, appUserId);
+    }
+    if (config.env_param && isSandbox !== undefined) {
+        searchParams.set(config.env_param, isSandbox ? "sandbox" : "production");
+    }
+    if (config.package_param) {
+        searchParams.set(config.package_param, packageId);
+    }
+    return parsed.toString();
+};

package/dist/components/workflows/Screen.svelte

@@ -64,6 +64,10 @@
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
+    appUserId?: string;
+    isSandbox?: boolean;
+    rcSource?: string;
+    onCustomWebCheckout?: (url: string) => void;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
     offering?: PaywallOffering | null;
@@ -98,6 +102,10 @@
     walletButtonRender,
     prepareWalletPurchase,
     onWalletPurchaseClicked,
+    appUserId,
+    isSandbox,
+    rcSource,
+    onCustomWebCheckout,
     safeAreaFallbackColor,
     hideBackButtons,
     offering,
@@ -147,6 +155,10 @@
       {walletButtonRender}
       {prepareWalletPurchase}
       {onWalletPurchaseClicked}
+      {appUserId}
+      {isSandbox}
+      {rcSource}
+      {onCustomWebCheckout}
       {safeAreaFallbackColor}
       {hideBackButtons}
       {offering}

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

@@ -38,6 +38,10 @@ interface Props {
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
+    appUserId?: string;
+    isSandbox?: boolean;
+    rcSource?: string;
+    onCustomWebCheckout?: (url: string) => void;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
     offering?: PaywallOffering | null;

package/dist/components/workflows/Workflow.svelte

@@ -57,6 +57,10 @@
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
+    appUserId?: string;
+    isSandbox?: boolean;
+    rcSource?: string;
+    onCustomWebCheckout?: (url: string) => void;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
     onPurchaseClicked?: (
@@ -113,6 +117,10 @@
     walletButtonRender,
     prepareWalletPurchase,
     onWalletPurchaseClicked,
+    appUserId,
+    isSandbox,
+    rcSource,
+    onCustomWebCheckout,
     safeAreaFallbackColor,
     hideBackButtons,
     onPurchaseClicked,
@@ -378,6 +386,10 @@
     {walletButtonRender}
     {prepareWalletPurchase}
     {onWalletPurchaseClicked}
+    {appUserId}
+    {isSandbox}
+    {rcSource}
+    {onCustomWebCheckout}
     {safeAreaFallbackColor}
     {hideBackButtons}
     {onPurchaseClicked}

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

@@ -23,6 +23,10 @@ interface Props {
     walletButtonRender?: WalletButtonRender;
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
+    appUserId?: string;
+    isSandbox?: boolean;
+    rcSource?: string;
+    onCustomWebCheckout?: (url: string) => void;
     safeAreaFallbackColor?: ColorScheme | null;
     hideBackButtons?: boolean;
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;

package/dist/stores/paywall.d.ts

@@ -32,6 +32,8 @@ type PaywallContext = Readonly<{
     typedCustom?: BridgeCustomValues;
     bridgeInputs?: Writable<BridgeInputs>;
     onPurchase: (actionId?: string) => void;
+    /** Opens a custom checkout URL in place of purchasing. */
+    onCustomWebCheckout?: (url: string) => void;
     emitComponentInteraction: (data: ComponentInteractionData) => void;
     onNavigateToUrl?: (url: string) => void;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => void;
@@ -47,6 +49,10 @@ type PaywallContext = Readonly<{
     prepareWalletPurchase?: WalletPurchasePrepare;
     onWalletPurchaseClicked?: WalletPurchaseStart;
     onButtonAction: (action: Action, actionId?: string) => void;
+    /** Forwarded on custom checkout URLs. */
+    appUserId?: string;
+    isSandbox?: boolean;
+    rcSource?: string;
     uiConfig: UIConfig;
     hideBackButtons: boolean;
 }>;

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

@@ -16,7 +16,9 @@ export type PurchaseButtonMethod = {
     type: "custom_web_checkout";
     custom_url: {
         url_lid: string;
-        package_param?: string;
+        package_param?: string | null;
+        app_user_id_param?: string | null;
+        env_param?: string | null;
     };
 } & PurchaseButtonWebMethod) | {
     type: "unknown";

package/package.json

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