micropaywall-embed-react 0.1.0

package/README.md

@@ -0,0 +1,42 @@
+# micropaywall-embed-react
+
+Lightweight **React iframe embed** for Micropaywall checkout. Keeps Solana/EVM wallet code on the hosted app; your site only renders an iframe.
+
+**Note:** The scoped name `@micropaywall/embed-react` requires an npm org named `micropaywall`. This package uses an unscoped name so you can publish without creating that org. To use a scope, create the org at [npmjs.com/org/create](https://www.npmjs.com/org/create) and change the `name` in `package.json`.
+
+## Install
+
+```bash
+npm install micropaywall-embed-react
+```
+
+## Usage
+
+```tsx
+import { MicropaywallEmbed } from 'micropaywall-embed-react';
+
+export function Checkout() {
+  return (
+    <MicropaywallEmbed
+      merchantId="your-merchant-uuid"
+      slug="your-content-slug"
+      baseUrl="https://micropaywall.app"
+    />
+  );
+}
+```
+
+## Publish
+
+From this directory:
+
+```bash
+npm run build
+npm publish --access public
+```
+
+Unscoped packages are public by default; `--access public` is optional. Add a `repository` field to `package.json` when you have a Git URL (optional for npm).
+
+## Full checkout component
+
+For a drop-in widget with wallets inside **your** app, depend on the main app’s `PaymentWidget` (or copy it) and list `wagmi`, `@solana/wallet-adapter-*`, etc. as peer dependencies—that is a heavier package; this embed is the recommended default for third-party sites.

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties } from 'react';
+export interface MicropaywallEmbedProps {
+    merchantId: string;
+    slug: string;
+    /** Hosted app origin, default production */
+    baseUrl?: string;
+    /** Initial iframe min-height in px */
+    minHeight?: number;
+    className?: string;
+    style?: CSSProperties;
+    title?: string;
+}
+/**
+ * Embeds the hosted Micropaywall content checkout in an iframe.
+ * Listens for `micropaywall:resize` postMessage to adjust height (same protocol as `public/micropaywall-embed.js`).
+ */
+export declare function MicropaywallEmbed({ merchantId, slug, baseUrl, minHeight, className, style, title, }: MicropaywallEmbedProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAErF,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,IAAI,EACJ,OAAoC,EACpC,SAAe,EACf,SAAS,EACT,KAAK,EACL,KAA+B,GAChC,EAAE,sBAAsB,2CAuCxB"}

package/dist/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * Embeds the hosted Micropaywall content checkout in an iframe.
+ * Listens for `micropaywall:resize` postMessage to adjust height (same protocol as `public/micropaywall-embed.js`).
+ */
+export function MicropaywallEmbed({ merchantId, slug, baseUrl = 'https://micropaywall.app', minHeight = 520, className, style, title = 'Micropaywall checkout', }) {
+    const iframeRef = useRef(null);
+    const [height, setHeight] = useState(minHeight);
+    const src = `${baseUrl.replace(/\/$/, '')}/marketplace/content/?merchantId=${encodeURIComponent(merchantId)}&slug=${encodeURIComponent(slug)}`;
+    const onMessage = useCallback((ev) => {
+        const data = ev.data;
+        if (!data || data.type !== 'micropaywall:resize')
+            return;
+        if (typeof data.height === 'number' && data.height > 200) {
+            setHeight(Math.min(data.height + 32, 3200));
+        }
+    }, []);
+    useEffect(() => {
+        window.addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, [onMessage]);
+    return (_jsx("iframe", { ref: iframeRef, src: src, title: title, className: className, style: {
+            width: '100%',
+            border: 0,
+            minHeight,
+            height,
+            ...style,
+        }, loading: "lazy", referrerPolicy: "strict-origin-when-cross-origin" }));
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "micropaywall-embed-react",
+  "version": "0.1.0",
+  "description": "React iframe embed for Micropaywall checkout pages (no wallet deps in your app)",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "typescript": "^5.3.3"
+  },
+  "keywords": [
+    "micropaywall",
+    "paywall",
+    "crypto",
+    "react",
+    "embed"
+  ]
+}