@revenuecat/purchases-ui-js 4.8.11 → 4.8.13

package/dist/components/web-view/WebView.stories.svelte

@@ -1,7 +1,14 @@
 <script module lang="ts">
   import WebView from "./WebView.svelte";
   import { componentDecorator } from "../../stories/component-decorator";
+  import type { WebViewProps } from "../../types/components/web-view";
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import type { ComponentProps } from "svelte";
+
+  // Cross-origin SVG (jsDelivr allows framing; no opaque page chrome). Parent
+  // checkerboard shows through and proves the host iframe is transparent.
+  const TRANSPARENT_CONTENT_URL =
+    "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/2705.svg";
 
   const { Story } = defineMeta({
     title: "Components/WebView",
@@ -23,12 +30,36 @@
         width: { type: "fill" },
         height: { type: "fixed", value: 400 },
       },
-    },
+    } satisfies WebViewProps,
   });
 </script>
 
+{#snippet transparencyTemplate(props: ComponentProps<typeof WebView>)}
+  <div class="transparency-showcase">
+    <p class="transparency-showcase__caption">
+      Checkerboard behind the iframe — the parent should show through
+      transparent content (and around letterboxed SVG).
+    </p>
+    <div class="transparency-showcase__stage">
+      <WebView {...props} />
+    </div>
+  </div>
+{/snippet}
+
 <Story name="Default" />
 
+<Story
+  name="Transparent background"
+  args={{
+    url: TRANSPARENT_CONTENT_URL,
+    size: {
+      width: { type: "fixed", value: 320 },
+      height: { type: "fixed", value: 320 },
+    },
+  }}
+  template={transparencyTemplate}
+/>
+
 <Story
   name="Fill (full bleed)"
   args={{
@@ -103,3 +134,43 @@
     url: "http://insecure.example.com",
   }}
 />
+
+<style>
+  .transparency-showcase {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    max-width: 640px;
+  }
+
+  .transparency-showcase__caption {
+    margin: 0;
+    font:
+      14px/1.4 ui-sans-serif,
+      system-ui,
+      sans-serif;
+    color: #334155;
+  }
+
+  .transparency-showcase__stage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    /* High-contrast checkerboard so iframe transparency is obvious. */
+    background-color: #cbd5e1;
+    background-image:
+      linear-gradient(45deg, #64748b 25%, transparent 25%),
+      linear-gradient(-45deg, #64748b 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #64748b 75%),
+      linear-gradient(-45deg, transparent 75%, #64748b 75%);
+    background-size: 24px 24px;
+    background-position:
+      0 0,
+      0 12px,
+      12px -12px,
+      -12px 0;
+    border-radius: 8px;
+  }
+</style>

package/dist/components/web-view/WebView.svelte

@@ -175,6 +175,9 @@
   .web-view {
     position: relative;
     overflow: hidden;
+    background: transparent;
+    /* Match content's dual scheme so the UA keeps a transparent iframe canvas. */
+    color-scheme: light dark;
   }
 
   iframe {
@@ -182,5 +185,7 @@
     width: 100%;
     height: 100%;
     border: 0;
+    background: transparent;
+    color-scheme: light dark;
   }
 </style>

package/dist/components/workflows/Screen.svelte

@@ -49,6 +49,7 @@
     onVisitCustomerCenterClicked?: () => void;
     walletButtonRender?: WalletButtonRender;
     safeAreaFallbackColor?: ColorScheme | null;
+    hideBackButtons?: boolean;
   }
   const {
     paywallComponents,
@@ -74,6 +75,7 @@
     onVisitCustomerCenterClicked,
     walletButtonRender,
     safeAreaFallbackColor,
+    hideBackButtons,
   }: Props = $props();
 </script>
 
@@ -110,6 +112,7 @@
       {onReservedAttributeChanged}
       {walletButtonRender}
       {safeAreaFallbackColor}
+      {hideBackButtons}
       onError={(error) => {
         console.error("Paywall error:", error);
       }}

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

@@ -35,6 +35,7 @@ interface Props {
     onVisitCustomerCenterClicked?: () => void;
     walletButtonRender?: WalletButtonRender;
     safeAreaFallbackColor?: ColorScheme | null;
+    hideBackButtons?: boolean;
 }
 declare const Screen: import("svelte").Component<Props, {}, "">;
 type Screen = ReturnType<typeof Screen>;

package/dist/components/workflows/Workflow.svelte

@@ -41,6 +41,7 @@
     containerId?: string;
     walletButtonRender?: WalletButtonRender;
     safeAreaFallbackColor?: ColorScheme | null;
+    hideBackButtons?: boolean;
     onPurchaseClicked?: (
       packageId: string,
       actionId: string,
@@ -88,6 +89,7 @@
     containerId,
     walletButtonRender,
     safeAreaFallbackColor,
+    hideBackButtons,
     onPurchaseClicked,
     onActionTriggered,
     onInputChanged,
@@ -336,6 +338,7 @@
     {containerId}
     {walletButtonRender}
     {safeAreaFallbackColor}
+    {hideBackButtons}
     {onPurchaseClicked}
     onActionTriggered={handleActionTriggered}
     {onInputChanged}

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

@@ -18,6 +18,7 @@ interface Props {
     containerId?: string;
     walletButtonRender?: WalletButtonRender;
     safeAreaFallbackColor?: ColorScheme | null;
+    hideBackButtons?: boolean;
     onPurchaseClicked?: (packageId: string, actionId: string) => void | Promise<void>;
     onActionTriggered?: (actionId: string) => void;
     onInputChanged?: (fieldId: string, value: string, actionId?: string) => 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.8.11",
+  "version": "4.8.13",
   "author": {
     "name": "RevenueCat, Inc."
   },