npm - @yumi-finance/widget - Versions diffs - 1.0.0 - Mend

@yumi-finance/widget 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +384 -0
package/dist/loader/iframe-manager.d.ts +10 -0
package/dist/loader/index.d.ts +1 -0
package/dist/loader/message-bridge.d.ts +16 -0
package/dist/loader/types.d.ts +57 -0
package/dist/loader/yumi-client.d.ts +16 -0
package/dist/react.js +75 -0
package/dist/shared/types/flow.d.ts +64 -0
package/dist/shared/types/messages.d.ts +60 -0
package/dist/yumi-widget.js +290 -0
package/dist/yumi-widget.min.js +1 -0
package/package.json +97 -0

package/README.md ADDED Viewed

@@ -0,0 +1,384 @@
+# Yumi Widget
+## How to run the project
+```bash
+git clone https://github.com/Yumi-Finance/yumi-widget
+npm install
+cp .env.example .env
+npm run dev
+```
+- **Checkout (iframe):** [http://localhost:3001](http://localhost:3001)
+- **Demo:** [http://localhost:8080/demo/](http://localhost:8080/demo/)
+Edit `.env` if you need different `VITE_PRIVY_APP_ID`, `VITE_CHECKOUT_URL`, or `VITE_YUMI_API_BASE_URL`.
+## Example
+**Script (HTML):**
+```html
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Checkout</title>
+</head>
+<body>
+	<button id="pay">Pay with Yumi</button>
+	<script src="https://cdn.jsdelivr.net/npm/@yumi-finance/widget@1.0.0/dist/yumi-widget.min.js"></script>
+	<script>
+		const yumi = Yumi.init({
+			publicKey: 'pk_live_xxx',
+			getAppSignature: async (payload) => {
+				const res = await fetch('/api/sign', {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify(payload),
+				})
+				const data = await res.json()
+				if (!res.ok || data.error) throw new Error(data.error || 'Sign failed')
+				return data.appSignature
+			},
+		})
+		document.getElementById('pay').onclick = () => {
+			yumi.open({ orderId: 'order_' + Date.now(), amount: 19900 })
+		}
+	</script>
+</body>
+</html>
+```
+**React:**
+```tsx
+import { YumiProvider, useYumi } from '@yumi-finance/widget/react'
+function CheckoutButton() {
+	const { open, isReady, error } = useYumi()
+	return (
+		<>
+			{error && <p>Error: {error.message}</p>}
+			<button
+				disabled={!isReady}
+				onClick={() => open({ orderId: 'order_' + Date.now(), amount: 19900 })}
+			>
+				Pay with Yumi
+			</button>
+		</>
+	)
+}
+export default function App() {
+	return (
+		<YumiProvider
+			config={{
+				publicKey: 'pk_live_xxx',
+				getAppSignature: async (payload) => {
+					const res = await fetch('/api/sign', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify(payload),
+					})
+					const data = await res.json()
+					if (!res.ok || data.error) throw new Error(data.error || 'Sign failed')
+					return data.appSignature
+				},
+			}}
+		>
+			<CheckoutButton />
+		</YumiProvider>
+	)
+}
+```
+---
+# Yumi Widget Integration
+Yumi BNPL integration: client (merchant site), merchant server, and Yumi Server SDK for signing.
+---
+## Overview
+A signature is required to authorize the user in Yumi after login via Privy in the iframe. The widget gives the merchant a payload with `publicKey`, `timestamp`, `nonce`, `privyUserId`; the merchant returns a signature; the SDK sends it to Yumi on login.
+---
+## 1. Client (Frontend)
+### 1.1. Script Integration
+```html
+<script src="https://cdn.jsdelivr.net/npm/@yumi-finance/widget@1.0.0/dist/yumi-widget.min.js"></script>
+```
+Or from your own CDN:
+```html
+<script src="https://cdn.yumi.com/yumi-widget.js"></script>
+```
+### 1.2. React
+Install the package and wrap your app (or the part that needs checkout) with `YumiProvider`. Use the `useYumi()` hook to open checkout.
+```bash
+npm install @yumi-finance/widget
+```
+```tsx
+import { YumiProvider, useYumi } from '@yumi-finance/widget/react'
+function PayButton() {
+	const { open, isReady } = useYumi()
+	return (
+		<button
+			disabled={!isReady}
+			onClick={() => open({ orderId: 'order_123', amount: 19900 })}
+		>
+			Pay with Yumi
+		</button>
+	)
+}
+function App() {
+	return (
+		<YumiProvider
+			config={{
+				publicKey: 'pk_live_xxx',
+				getAppSignature: async (payload) => {
+					const res = await fetch('/your-api/sign', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify(payload),
+					})
+					const data = await res.json()
+					if (!res.ok || data.error) throw new Error(data.error || 'Failed to get signature')
+					return data.appSignature
+				},
+			}}
+		>
+			<PayButton />
+		</YumiProvider>
+	)
+}
+```
+Optional: pass `scriptUrl` to load the loader from a custom URL (default: jsDelivr). `useYumi()` returns `{ open, close, isReady, error }`.
+### 1.3. Initialization and Checkout Opening (script tag only)
+```js
+const yumi = Yumi.init({
+	publicKey: 'pk_live_xxx',
+	getAppSignature: async payload => {
+		const res = await fetch('/your-api/sign', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(payload),
+		})
+		const data = await res.json()
+		if (!res.ok || data.error) {
+			throw new Error(data.error || 'Failed to get signature')
+		}
+		return data.appSignature
+	},
+})
+document.getElementById('payBtn').addEventListener('click', () => {
+	yumi.open({
+		orderId: 'order_123',
+		amount: 19900,
+		currency: 'USD',
+	})
+})
+```
+### 1.4. `Yumi.init()` Parameters
+| Parameter         | Required         | Description                                                                                                                                                    |
+| ----------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `publicKey`       | Yes              | Merchant public key (from Yumi). Used in the payload for signing and to identify the merchant on the backend.                                                  |
+| `getAppSignature` | Yes (production) | Callback `(payload) => Promise<string>`. Widget passes `{ publicKey, timestamp, nonce, privyUserId }`; merchant returns `appSignature` (e.g. from their backend). |
+| `onClose`         | No               | Callback when checkout is closed.                                                                                                                              |
+| `onEvent`         | No               | Callback for checkout events.                                                                                                                                  |
+| `onError`         | No               | Callback for errors.                                                                                                                                           |
+| `meshConfig`      | No               | Optional Mesh Link config (clientId, clientSecret, useSandbox).                                                                                                |
+### 1.5. Payload for Signing
+In `getAppSignature(payload)` you receive:
+```ts
+{
+	publicKey: string // same publicKey passed to init
+	timestamp: number // Unix timestamp (seconds)
+	nonce: string // unique string
+	privyUserId: string // Privy user ID after login in iframe
+}
+```
+The merchant sends this payload to their backend; the backend signs it and returns `appSignature`. On the backend you can use `payload.privyUserId`.
+### 1.6. `yumi.open()` Options
+| Option     | Required | Description                                      |
+| ---------- | -------- | ------------------------------------------------ |
+| `orderId`  | Yes      | Order/intent ID (e.g. `order_123` or intent id). |
+| `amount`   | Yes      | Amount in smallest units (e.g. cents).           |
+| `currency` | No       | Currency code (e.g. `USD`).                      |
+---
+## 2. Merchant Server and Yumi Server SDK
+### 2.1. Yumi Server SDK Purpose
+**Yumi Server SDK** is a library for the merchant backend. It does not start an HTTP server and does not call the Yumi API. The SDK provides **only a signing API**: input is the login payload, output is the `appSignature` string (Ed25519, canonicalize, base64).
+The merchant installs the SDK on the server, stores the secret key (from Yumi), and in their endpoint receives the payload from the frontend, calls the signing method, and returns the signature in the response.
+### 2.2. Installation
+```bash
+npm install @yumi/backend-sdk
+```
+### 2.3. Signing API
+**Method:** sign payload for login.
+**Input (payload):**
+```ts
+{
+	publicKey: string
+	timestamp: number
+	nonce: string
+	privyUserId: string
+}
+```
+**Output:** `appSignature` string (base64 Ed25519 signature of canonicalize(payload) with the merchant secret key).
+**Example (Node.js):**
+```js
+const { signLoginPayload } = require('@yumi/backend-sdk')
+app.post('/your-api/sign', async (req, res) => {
+	try {
+		const payload = req.body
+		const appSignature = signLoginPayload(payload, {
+			secretKeyBase64: process.env.YUMI_SECRET_KEY,
+		})
+		res.json({ appSignature })
+	} catch (err) {
+		res.status(400).json({ error: err.message })
+	}
+})
+```
+**Example with pre-configuration:**
+```js
+const { YumiBackend } = require('@yumi/backend-sdk')
+const yumi = new YumiBackend({
+	secretKeyBase64: process.env.YUMI_SECRET_KEY,
+	publicKeyBase64: process.env.YUMI_PUBLIC_KEY,
+})
+app.post('/your-api/sign', async (req, res) => {
+	try {
+		const payload = req.body
+		const appSignature = yumi.signLoginPayload(payload)
+		res.json({ appSignature })
+	} catch (err) {
+		res.status(400).json({ error: err.message })
+	}
+})
+```
+Package and method names may differ; the SDK provides only signing of the payload and returns `appSignature`.
+### 2.4. Security
+- Store the secret key (`YUMI_SECRET_KEY`) only on the backend (env or secret store).
+- Yumi Server SDK does not make network requests; it only computes the signature.
+- The signing endpoint should be callable only from your frontend (CORS; optionally check origin or token).
+### 2.5. Without Server SDK
+The merchant can implement signing themselves: same algorithm (Ed25519, canonicalize payload, base64). Payload contract and `appSignature` format are as above; details are in Yumi cryptography docs. Using the Server SDK is recommended to avoid reimplementing the logic.
+---
+## 3. Login Sequence
+1. User logs in inside the Yumi iframe with Privy.
+2. SDK in the iframe builds the payload: `publicKey` (from init), `timestamp`, `nonce`, `privyUserId`.
+3. SDK calls `getAppSignature(payload)` — the request is handled by the merchant frontend.
+4. Merchant frontend sends the payload to their backend (e.g. `POST /your-api/sign`).
+5. Backend signs the payload (Yumi Server SDK or custom) and returns `{ appSignature }`.
+6. Frontend returns `appSignature` to the widget callback.
+7. Widget sends the login request to Yumi with `accessToken`, `identityToken`, `payload`, and `appSignature`.
+---
+## 4. Quick Checklist
+**Client:**
+- Include `yumi-widget.js` (CDN or self-hosted).
+- `Yumi.init({ publicKey, getAppSignature, ... })` — in `getAppSignature` call your backend and return `appSignature`.
+- On payment button click: `yumi.open({ orderId, amount, currency? })`.
+**Server:**
+- Install Yumi Server SDK (or implement signing yourself).
+- Endpoint: accept payload, call signing, return `{ appSignature }`.
+- Configure CORS for the frontend domain and, if needed, access checks.
+**Yumi Server SDK:** provides only the signing API (one method for the login payload); it does not provide HTTP and does not call the Yumi API.
+---
+## 5. Development
+```bash
+npm install
+npm run dev
+```
+- Checkout (iframe): [http://localhost:3001](http://localhost:3001)
+- Demo: [http://localhost:8080/demo/](http://localhost:8080/demo/)
+```bash
+npm run build
+```
+Builds loader (`dist/yumi-widget.js`, `dist/yumi-widget.min.js`) and checkout (`dist/checkout/`).
+| Command                | Description                           |
+| ---------------------- | ------------------------------------- |
+| `npm run dev`          | Loader watch + checkout + demo server |
+| `npm run build`        | Production build                      |
+| `npm run dev:loader`   | Loader only (watch)                   |
+| `npm run dev:checkout` | Checkout only (Vite, port 3001)       |
+| `npm run type-check`   | TypeScript check                      |
+| `npm run lint`         | ESLint                                |
+## License
+MIT

package/dist/loader/iframe-manager.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export declare class IframeManager {
+    private iframe;
+    private overlay;
+    create(options: {
+        url: string;
+        sessionId: string;
+    }): HTMLIFrameElement;
+    resize(height: number): void;
+    destroy(): void;
+}

package/dist/loader/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/loader/message-bridge.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { HostMessage } from '../shared/types/messages';
+export declare class MessageBridge {
+    private targetWindow;
+    private allowedOrigin;
+    private onEvent;
+    private messageHandler;
+    constructor(options: {
+        onEvent: (event: any) => void;
+    });
+    connect(targetWindow: Window | null, options: {
+        allowedOrigin: string;
+    }): void;
+    disconnect(): void;
+    send(message: HostMessage): void;
+    private handleMessage;
+}

package/dist/loader/types.d.ts ADDED Viewed

@@ -0,0 +1,57 @@
+import type { SignLoginPayload } from '../shared/types/messages';
+export interface YumiConfig {
+    publicKey: string;
+    apiKey?: string;
+    /** Callback to get app signature for login. Receives payload from iframe; returns signature (e.g. from merchant backend). */
+    getAppSignature: (payload: SignLoginPayload) => Promise<string>;
+    onEvent?: (event: YumiEvent) => void;
+    onClose?: () => void;
+    onError?: (error: any) => void;
+}
+export interface OpenOptions {
+    orderId: string;
+    amount: number;
+}
+export type YumiEvent = {
+    type: 'READY';
+} | {
+    type: 'LOADED';
+} | {
+    type: 'RESIZE';
+    payload: {
+        height: number;
+    };
+} | {
+    type: 'CLOSE';
+} | {
+    type: 'SUCCESS';
+    payload: {
+        intentId: string;
+        status: string;
+    };
+} | {
+    type: 'ERROR';
+    payload: {
+        code: string;
+        message: string;
+    };
+} | {
+    type: 'EVENT';
+    payload: {
+        name: string;
+        data: any;
+    };
+};
+declare global {
+    interface Window {
+        Yumi?: {
+            init: (config: YumiConfig) => YumiClient;
+            version: string;
+        };
+    }
+}
+export interface YumiClient {
+    open: (options: OpenOptions) => Promise<void>;
+    close: () => void;
+    destroy: () => void;
+}

package/dist/loader/yumi-client.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import type { YumiConfig, OpenOptions } from './types';
+export declare class YumiClient {
+    private config;
+    private iframeManager;
+    private bridge;
+    private currentSessionId;
+    private currentOpenOptions;
+    constructor(config: YumiConfig);
+    open(options: OpenOptions): Promise<void>;
+    close(): void;
+    destroy(): void;
+    private handleIframeEvent;
+    private getCheckoutUrl;
+    private getCheckoutOrigin;
+    private generateSessionId;
+}

package/dist/react.js ADDED Viewed

@@ -0,0 +1,75 @@
+import { jsx as h } from "react/jsx-runtime";
+import { createContext as v, useRef as f, useState as m, useEffect as x, useCallback as w, useContext as R } from "react";
+const g = "https://cdn.jsdelivr.net/npm/@yumi/widget@1.0.0/dist/yumi-widget.min.js", p = v(null);
+function C(n) {
+  return new Promise((o, u) => {
+    if (typeof document > "u") {
+      u(new Error("Document is not available"));
+      return;
+    }
+    const t = document.querySelector(`script[src="${n}"]`);
+    if (t) {
+      const c = window;
+      if (c.Yumi) {
+        o();
+        return;
+      }
+      let d = !1;
+      const s = (l) => {
+        d || (d = !0, l ? u(l) : o());
+      };
+      t.addEventListener("load", () => s()), t.addEventListener("error", () => s(new Error("Failed to load Yumi script"))), setTimeout(() => {
+        c.Yumi && s();
+      }, 0);
+      return;
+    }
+    const i = document.createElement("script");
+    i.src = n, i.async = !0, i.onload = () => o(), i.onerror = () => u(new Error("Failed to load Yumi script")), document.head.appendChild(i);
+  });
+}
+function b({ config: n, scriptUrl: o, children: u }) {
+  const t = f(null), [i, c] = m(!1), [d, s] = m(null), l = f(n);
+  l.current = n, x(() => {
+    let r = !1;
+    return C(o ?? g).then(() => {
+      if (r) return;
+      const e = window.Yumi;
+      if (!(e != null && e.init)) {
+        s(new Error("Yumi widget not available"));
+        return;
+      }
+      t.current = e.init(l.current), c(!0);
+    }).catch((e) => {
+      r || s(e instanceof Error ? e : new Error(String(e)));
+    }), () => {
+      var e;
+      r = !0, (e = t.current) == null || e.destroy(), t.current = null, c(!1);
+    };
+  }, [o]);
+  const E = w(async (r) => {
+    const a = t.current;
+    if (!a)
+      throw new Error("Yumi widget is not ready yet");
+    await a.open(r);
+  }, []), y = w(() => {
+    var r;
+    (r = t.current) == null || r.close();
+  }, []), Y = {
+    open: E,
+    close: y,
+    isReady: i,
+    error: d
+  };
+  return /* @__PURE__ */ h(p.Provider, { value: Y, children: u });
+}
+function L() {
+  const n = R(p);
+  if (n === null)
+    throw new Error("useYumi must be used within YumiProvider");
+  return n;
+}
+export {
+  p as YumiContext,
+  b as YumiProvider,
+  L as useYumi
+};

package/dist/shared/types/flow.d.ts ADDED Viewed

@@ -0,0 +1,64 @@
+export type DataSource = 'wallet' | 'cex' | 'bank';
+export type KycProviders = {
+    plaid?: {
+        isPassed: boolean;
+    };
+    mesh?: {
+        isPassed: boolean;
+    };
+    didit?: {
+        isPassed: boolean;
+    };
+};
+export type Step = 'idle' | 'login' | 'selectSource' | 'initialSync' | 'connectingBank' | 'connectingCex' | 'addWallet' | 'verifyDidit' | 'verificationSuccess' | 'underwriting' | 'otimDelegation' | 'underwritingDeclined' | 'syncProviders' | 'checkLimit' | 'limitDeclined' | 'confirmation';
+export type User = {
+    id: string;
+    email?: string;
+    [key: string]: any;
+};
+export type FlowState = {
+    step: Step;
+    user: User | null;
+    dataSource: DataSource | null;
+    kycProviders: KycProviders | null;
+    metadata: Record<string, any>;
+    error: string | null;
+};
+export type FlowAction = {
+    type: 'START';
+    user?: User | null;
+    initialSource?: DataSource;
+} | {
+    type: 'LOGIN_SUCCESS';
+    user: User;
+    kycProviders?: KycProviders | null;
+} | {
+    type: 'SET_STEP';
+    step: Step;
+    data?: any;
+} | {
+    type: 'SELECT_SOURCE';
+    source: DataSource;
+} | {
+    type: 'CONTINUE';
+    data?: any;
+} | {
+    type: 'GO_BACK';
+} | {
+    type: 'RESET';
+} | {
+    type: 'LIMIT_APPROVED';
+} | {
+    type: 'LIMIT_DECLINED';
+} | {
+    type: 'UNDERWRITING_APPROVED';
+} | {
+    type: 'UNDERWRITING_DECLINED';
+} | {
+    type: 'SET_ERROR';
+    error: string;
+} | {
+    type: 'SET_METADATA';
+    key: string;
+    value: any;
+};

package/dist/shared/types/messages.d.ts ADDED Viewed

@@ -0,0 +1,60 @@
+export type InitPayload = {
+    sessionId: string;
+    publicKey: string;
+    privyAppId: string;
+    orderId: string;
+    amount?: number;
+    apiKey?: string;
+};
+/** Payload for signing login (publicKey, timestamp, nonce, privyUserId). */
+export type SignLoginPayload = {
+    publicKey: string;
+    timestamp: number;
+    nonce: string;
+    privyUserId: string;
+};
+export type HostMessage = {
+    type: 'INIT';
+    payload: InitPayload;
+} | {
+    type: 'CLOSE_REQUEST';
+} | {
+    type: 'APP_SIGNATURE_RESPONSE';
+    requestId: string;
+    appSignature?: string;
+    error?: string;
+};
+export type IframeMessage = {
+    type: 'LOADED';
+} | {
+    type: 'READY';
+} | {
+    type: 'RESIZE';
+    payload: {
+        height: number;
+    };
+} | {
+    type: 'CLOSE';
+} | {
+    type: 'SUCCESS';
+    payload: {
+        intentId: string;
+        status: string;
+    };
+} | {
+    type: 'ERROR';
+    payload: {
+        code: string;
+        message: string;
+    };
+} | {
+    type: 'EVENT';
+    payload: {
+        name: string;
+        data: any;
+    };
+} | {
+    type: 'GET_APP_SIGNATURE';
+    payload: SignLoginPayload;
+    requestId: string;
+};

package/dist/yumi-widget.js ADDED Viewed

@@ -0,0 +1,290 @@
+(function () {
+    'use strict';
+    class IframeManager {
+        constructor() {
+            Object.defineProperty(this, "iframe", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: null
+            });
+            Object.defineProperty(this, "overlay", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: null
+            });
+        }
+        create(options) {
+            this.overlay = document.createElement('div');
+            this.overlay.id = 'yumi-checkout-overlay';
+            this.overlay.style.cssText = `
+			position: fixed;
+			inset: 0;
+			z-index: 999999;
+			background: rgba(0, 0, 0, 0.5);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		`;
+            this.iframe = document.createElement('iframe');
+            this.iframe.id = 'yumi-checkout-iframe';
+            this.iframe.src = options.url;
+            this.iframe.style.cssText = `
+			width: 100%;
+			max-width: 500px;
+			height: 90vh;
+			max-height: 800px;
+			border: none;
+			border-radius: 12px;
+			background: white;
+		`;
+            this.iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox');
+            this.iframe.setAttribute('allow', 'payment; clipboard-read; clipboard-write');
+            this.overlay.appendChild(this.iframe);
+            document.body.appendChild(this.overlay);
+            return this.iframe;
+        }
+        resize(height) {
+            if (this.iframe) {
+                this.iframe.style.height = `${Math.min(height, window.innerHeight * 0.9)}px`;
+            }
+        }
+        destroy() {
+            if (this.overlay) {
+                this.overlay.remove();
+                this.overlay = null;
+            }
+            this.iframe = null;
+        }
+    }
+    class MessageBridge {
+        constructor(options) {
+            Object.defineProperty(this, "targetWindow", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: null
+            });
+            Object.defineProperty(this, "allowedOrigin", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: '*'
+            });
+            Object.defineProperty(this, "onEvent", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "messageHandler", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            this.onEvent = options.onEvent;
+            this.messageHandler = this.handleMessage.bind(this);
+        }
+        connect(targetWindow, options) {
+            this.targetWindow = targetWindow;
+            this.allowedOrigin = options.allowedOrigin;
+            window.addEventListener('message', this.messageHandler);
+        }
+        disconnect() {
+            window.removeEventListener('message', this.messageHandler);
+            this.targetWindow = null;
+        }
+        send(message) {
+            if (!this.targetWindow) {
+                console.warn('Bridge not connected, cannot send message');
+                return;
+            }
+            this.targetWindow.postMessage(message, this.allowedOrigin);
+        }
+        handleMessage(event) {
+            if (event.source !== this.targetWindow) {
+                return;
+            }
+            const message = event.data;
+            if (!message || !message.type) {
+                return;
+            }
+            this.onEvent(message);
+        }
+    }
+    const VITE_PRIVY_APP_ID = 'cmhx0hub300mgjl0dfm9pg1e6';
+    const VITE_CHECKOUT_URL = 'https://yumi-sdk-checkout.vercel.app/';
+    class YumiClient {
+        constructor(config) {
+            Object.defineProperty(this, "config", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "iframeManager", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "bridge", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "currentSessionId", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: null
+            });
+            Object.defineProperty(this, "currentOpenOptions", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: null
+            });
+            this.config = config;
+            this.iframeManager = new IframeManager();
+            this.bridge = new MessageBridge({
+                onEvent: this.handleIframeEvent.bind(this),
+            });
+        }
+        async open(options) {
+            if (!options?.orderId) {
+                throw new Error('Yumi.open: orderId is required');
+            }
+            if (options.amount == null || !Number.isFinite(Number(options.amount))) {
+                throw new Error('Yumi.open: amount is required and must be a finite number');
+            }
+            this.currentSessionId = this.generateSessionId();
+            this.currentOpenOptions = options;
+            const iframe = this.iframeManager.create({
+                url: this.getCheckoutUrl(options),
+                sessionId: this.currentSessionId,
+            });
+            this.bridge.connect(iframe.contentWindow, {
+                allowedOrigin: this.getCheckoutOrigin(),
+            });
+        }
+        close() {
+            this.iframeManager.destroy();
+            this.bridge.disconnect();
+            this.currentSessionId = null;
+            this.currentOpenOptions = null;
+        }
+        destroy() {
+            this.close();
+        }
+        handleIframeEvent(event) {
+            switch (event.type) {
+                case 'LOADED':
+                    if (this.currentSessionId && this.currentOpenOptions) {
+                        const payload = {
+                            sessionId: this.currentSessionId,
+                            publicKey: this.config.publicKey,
+                            privyAppId: VITE_PRIVY_APP_ID,
+                            orderId: this.currentOpenOptions.orderId,
+                            amount: this.currentOpenOptions.amount,
+                            apiKey: this.config.apiKey,
+                        };
+                        this.bridge.send({ type: 'INIT', payload });
+                    }
+                    break;
+                case 'READY':
+                    break;
+                case 'RESIZE':
+                    this.iframeManager.resize(event.payload.height);
+                    break;
+                case 'CLOSE':
+                    this.close();
+                    this.config.onClose?.();
+                    break;
+                case 'SUCCESS':
+                    this.config.onEvent?.(event);
+                    break;
+                case 'ERROR':
+                    this.config.onError?.(event.payload);
+                    break;
+                case 'EVENT':
+                    this.config.onEvent?.(event);
+                    break;
+                case 'GET_APP_SIGNATURE': {
+                    const { payload, requestId } = event;
+                    const getAppSignature = this.config.getAppSignature;
+                    if (!getAppSignature) {
+                        this.bridge.send({
+                            type: 'APP_SIGNATURE_RESPONSE',
+                            requestId,
+                            error: 'getAppSignature is not configured',
+                        });
+                        return;
+                    }
+                    getAppSignature(payload)
+                        .then(appSignature => {
+                        this.bridge.send({ type: 'APP_SIGNATURE_RESPONSE', requestId, appSignature });
+                    })
+                        .catch(err => {
+                        this.bridge.send({
+                            type: 'APP_SIGNATURE_RESPONSE',
+                            requestId,
+                            error: err instanceof Error ? err.message : String(err),
+                        });
+                    });
+                    break;
+                }
+            }
+        }
+        getCheckoutUrl(options) {
+            const base = VITE_CHECKOUT_URL;
+            const params = new URLSearchParams({
+                orderId: options.orderId,
+                session: this.currentSessionId,
+            });
+            if (options.amount)
+                params.set('amount', options.amount.toString());
+            return `${base}?${params.toString()}`;
+        }
+        getCheckoutOrigin() {
+            const url = VITE_CHECKOUT_URL;
+            try {
+                return new URL(url).origin;
+            }
+            catch {
+                return '*';
+            }
+        }
+        generateSessionId() {
+            return `sess_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        }
+    }
+    (function () {
+        if (window.Yumi) {
+            console.warn('Yumi widget already loaded');
+            return;
+        }
+        function init(config) {
+            if (!config?.publicKey) {
+                throw new Error('Yumi.init: publicKey is required');
+            }
+            if (typeof config.getAppSignature !== 'function') {
+                throw new Error('Yumi.init: getAppSignature is required');
+            }
+            return new YumiClient(config);
+        }
+        window.Yumi = {
+            init,
+            version: "1.0.0" ,
+        };
+    })();
+})();

package/dist/yumi-widget.min.js ADDED Viewed

@@ -0,0 +1 @@

+ !function(){"use strict";class e{constructor(){Object.defineProperty(this,"iframe",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"overlay",{enumerable:!0,configurable:!0,writable:!0,value:null})}create(e){return this.overlay=document.createElement("div"),this.overlay.id="yumi-checkout-overlay",this.overlay.style.cssText="\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tz-index: 999999;\n\t\t\tbackground: rgba(0, 0, 0, 0.5);\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t",this.iframe=document.createElement("iframe"),this.iframe.id="yumi-checkout-iframe",this.iframe.src=e.url,this.iframe.style.cssText="\n\t\t\twidth: 100%;\n\t\t\tmax-width: 500px;\n\t\t\theight: 90vh;\n\t\t\tmax-height: 800px;\n\t\t\tborder: none;\n\t\t\tborder-radius: 12px;\n\t\t\tbackground: white;\n\t\t",this.iframe.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"),this.iframe.setAttribute("allow","payment; clipboard-read; clipboard-write"),this.overlay.appendChild(this.iframe),document.body.appendChild(this.overlay),this.iframe}resize(e){this.iframe&&(this.iframe.style.height=`${Math.min(e,.9*window.innerHeight)}px`)}destroy(){this.overlay&&(this.overlay.remove(),this.overlay=null),this.iframe=null}}class t{constructor(e){Object.defineProperty(this,"targetWindow",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"allowedOrigin",{enumerable:!0,configurable:!0,writable:!0,value:"*"}),Object.defineProperty(this,"onEvent",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"messageHandler",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.onEvent=e.onEvent,this.messageHandler=this.handleMessage.bind(this)}connect(e,t){this.targetWindow=e,this.allowedOrigin=t.allowedOrigin,window.addEventListener("message",this.messageHandler)}disconnect(){window.removeEventListener("message",this.messageHandler),this.targetWindow=null}send(e){this.targetWindow?this.targetWindow.postMessage(e,this.allowedOrigin):console.warn("Bridge not connected, cannot send message")}handleMessage(e){if(e.source!==this.targetWindow)return;const t=e.data;t&&t.type&&this.onEvent(t)}}const i="https://yumi-sdk-checkout.vercel.app/";class r{constructor(i){Object.defineProperty(this,"config",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"iframeManager",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"bridge",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"currentSessionId",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"currentOpenOptions",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.config=i,this.iframeManager=new e,this.bridge=new t({onEvent:this.handleIframeEvent.bind(this)})}async open(e){if(!e?.orderId)throw new Error("Yumi.open: orderId is required");if(null==e.amount||!Number.isFinite(Number(e.amount)))throw new Error("Yumi.open: amount is required and must be a finite number");this.currentSessionId=this.generateSessionId(),this.currentOpenOptions=e;const t=this.iframeManager.create({url:this.getCheckoutUrl(e),sessionId:this.currentSessionId});this.bridge.connect(t.contentWindow,{allowedOrigin:this.getCheckoutOrigin()})}close(){this.iframeManager.destroy(),this.bridge.disconnect(),this.currentSessionId=null,this.currentOpenOptions=null}destroy(){this.close()}handleIframeEvent(e){switch(e.type){case"LOADED":if(this.currentSessionId&&this.currentOpenOptions){const e={sessionId:this.currentSessionId,publicKey:this.config.publicKey,privyAppId:"cmhx0hub300mgjl0dfm9pg1e6",orderId:this.currentOpenOptions.orderId,amount:this.currentOpenOptions.amount,apiKey:this.config.apiKey};this.bridge.send({type:"INIT",payload:e})}break;case"READY":break;case"RESIZE":this.iframeManager.resize(e.payload.height);break;case"CLOSE":this.close(),this.config.onClose?.();break;case"SUCCESS":case"EVENT":this.config.onEvent?.(e);break;case"ERROR":this.config.onError?.(e.payload);break;case"GET_APP_SIGNATURE":{const{payload:t,requestId:i}=e,r=this.config.getAppSignature;if(!r)return void this.bridge.send({type:"APP_SIGNATURE_RESPONSE",requestId:i,error:"getAppSignature is not configured"});r(t).then(e=>{this.bridge.send({type:"APP_SIGNATURE_RESPONSE",requestId:i,appSignature:e})}).catch(e=>{this.bridge.send({type:"APP_SIGNATURE_RESPONSE",requestId:i,error:e instanceof Error?e.message:String(e)})});break}}}getCheckoutUrl(e){const t=i,r=new URLSearchParams({orderId:e.orderId,session:this.currentSessionId});return e.amount&&r.set("amount",e.amount.toString()),`${t}?${r.toString()}`}getCheckoutOrigin(){const e=i;try{return new URL(e).origin}catch{return"*"}}generateSessionId(){return`sess_${Date.now()}_${Math.random().toString(36).substr(2,9)}`}}window.Yumi?console.warn("Yumi widget already loaded"):window.Yumi={init:function(e){if(!e?.publicKey)throw new Error("Yumi.init: publicKey is required");if("function"!=typeof e.getAppSignature)throw new Error("Yumi.init: getAppSignature is required");return new r(e)},version:"1.0.0"}}();

package/package.json ADDED Viewed

@@ -0,0 +1,97 @@
+{
+	"name": "@yumi-finance/widget",
+	"version": "1.0.0",
+	"description": "Yumi BNPL checkout widget",
+	"type": "module",
+	"main": "dist/yumi-widget.js",
+	"types": "dist/loader/index.d.ts",
+	"scripts": {
+		"build": "npm run build:loader && npm run build:checkout && npm run build:react",
+		"prepublishOnly": "npm run build:loader",
+		"build:loader": "rollup -c && tsc -p tsconfig.declarations.json",
+		"build:checkout": "vite build",
+		"build:react": "vite build --config vite.react.config.ts",
+		"dev:loader": "rollup -c -w",
+		"dev:checkout": "vite",
+		"dev": "npm run build:loader && concurrently -n loader,checkout,demo \"npm run dev:loader\" \"npm run dev:checkout\" \"npx http-server . -p 8080 -c-1\"",
+		"type-check": "tsc --noEmit",
+		"clean": "rm -rf dist",
+		"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
+		"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
+		"lint": "eslint src --ext .ts,.tsx",
+		"lint:fix": "eslint src --ext .ts,.tsx --fix"
+	},
+	"keywords": [
+		"yumi",
+		"bnpl",
+		"payment",
+		"checkout",
+		"widget"
+	],
+	"author": "Yumi Finance",
+	"license": "MIT",
+	"files": [
+		"dist/yumi-widget.js",
+		"dist/yumi-widget.min.js",
+		"dist/react.js",
+		"dist/loader",
+		"dist/shared"
+	],
+	"exports": {
+		".": {
+			"import": "./dist/yumi-widget.min.js",
+			"require": "./dist/yumi-widget.js"
+		},
+		"./react": {
+			"import": "./dist/react.js",
+			"types": "./src/react/index.ts"
+		}
+	},
+	"unpkg": "dist/yumi-widget.min.js",
+	"jsdelivr": "dist/yumi-widget.min.js",
+	"peerDependencies": {
+		"react": ">=17.0.0",
+		"react-dom": ">=17.0.0"
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-replace": "^5.0.5",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-typescript": "^11.1.6",
+		"@types/react": "^18.2.55",
+		"@types/react-dom": "^18.2.19",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
+		"@vitejs/plugin-react": "^4.2.1",
+		"autoprefixer": "^10.4.20",
+		"concurrently": "^9.1.0",
+		"dotenv": "^17.3.1",
+		"eslint": "^8.57.1",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^4.6.2",
+		"http-server": "^14.1.1",
+		"postcss": "^8.4.49",
+		"prettier": "^3.8.1",
+		"rollup": "^4.9.6",
+		"tailwindcss": "^3.4.15",
+		"tslib": "^2.8.1",
+		"typescript": "^5.3.3",
+		"vite": "^5.0.12"
+	},
+	"dependencies": {
+		"@meshconnect/web-link-sdk": "^3.4.1",
+		"@privy-io/react-auth": "^3.4.0",
+		"@privy-io/wagmi": "^4.0.0",
+		"buffer": "^6.0.3",
+		"json-canonicalize": "^1.2.0",
+		"lucide-react": "^0.462.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"tweetnacl": "^1.0.3",
+		"tweetnacl-util": "^0.15.1",
+		"viem": "^2.24.0",
+		"wagmi": "^3.5.0",
+		"@tanstack/react-query": "^5.59.0"
+	}
+}