@loofta/pay-sdk 1.0.1

package/README.md

@@ -0,0 +1,113 @@
+# @loofta/pay-sdk
+
+Embeddable **Loofta Pay Button** for React. The button opens **Loofta’s hosted checkout** — your customers pay there, and funds go to the destination wallet, network, and token configured in your organization.
+
+## Requirements
+
+- **Organization ID** — You must have an organization set up with Loofta. Your **destination wallet address**, **network**, and **token** are configured in that organization.
+- **Don’t have an organization ID?** [Contact Loofta](https://t.me/looftaxyz) to get one.
+
+## Install
+
+```bash
+npm install @loofta/pay-sdk
+# or
+yarn add @loofta/pay-sdk
+pnpm add @loofta/pay-sdk
+```
+
+## Usage
+
+### React
+
+```tsx
+import { PayButton } from '@loofta/pay-sdk';
+
+<PayButton
+  organizationId="your-org-id"
+  amount={100}
+  buttonText="Pay $100"
+  onSuccess={(paymentId) => {
+    console.log('Payment completed:', paymentId);
+  }}
+/>
+```
+
+You usually **don’t** need `checkoutBaseUrl`. The button opens Loofta’s checkout; if your app is on a different domain, the default URL is used. Only set `checkoutBaseUrl` if Loofta has given you a specific checkout URL.
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `organizationId` | `string` | **Required.** Your Loofta organization ID. Destination wallet, network, and token are set in your organization. Don’t have one? Contact Loofta. |
+| `amount` | `number \| string` | Optional payment amount (USD). |
+| `checkoutBaseUrl` | `string` | Optional. URL of the Loofta Pay checkout page. Only set if the button is on a different domain and you need to point to a specific Loofta checkout URL; otherwise omit. |
+| `buttonBgColor` | `string` | Optional button background (CSS color). |
+| `pageBgColor` | `string` | Optional checkout page background. |
+| `callbackUrl` | `string` | Optional URL to redirect after payment. |
+| `onSuccess` | `(paymentId: string) => void` | Called when payment completes (popup mode). |
+| `buttonText` | `string` | Button label (default: "Pay with Loofta"). |
+| `successText` | `string` | Text after success (default: "Paid Successfully"). |
+| `openMode` | `'popup' \| 'redirect' \| 'tab'` | How to open checkout (default: `popup`). |
+| `disabled` | `boolean` | Disable the button. |
+| `className` | `string` | Optional CSS class. |
+
+### How it works
+
+1. User clicks the button on your site.
+2. Loofta’s hosted checkout opens (popup, new tab, or redirect).
+3. User pays with the token/network they choose; funds are sent to **your organization’s configured destination wallet, network, and token**.
+4. You get the outcome via `onSuccess` and/or `callbackUrl`.
+
+### Embed code helpers
+
+```tsx
+import { generateEmbedCode, generateScriptEmbed } from '@loofta/pay-sdk';
+
+const reactSnippet = generateEmbedCode({
+  organizationId: 'your-org-id',
+  amount: 100,
+});
+
+const scriptSnippet = generateScriptEmbed({
+  organizationId: 'your-org-id',
+  amount: 100,
+});
+```
+
+## Build
+
+```bash
+cd packages/loofta-pay-sdk
+npm install
+npm run build
+```
+
+Output: `dist/` (ESM, CJS, and types).
+
+## Publish to npm
+
+1. **Build the package**
+   ```bash
+   cd packages/loofta-pay-sdk
+   npm install
+   npm run build
+   ```
+
+2. **Log in to npm** (create an account at [npmjs.com](https://www.npmjs.com) if needed)
+   ```bash
+   npm login
+   ```
+   Enter your npm username, password, and email when prompted.
+
+3. **Publish**
+   ```bash
+   npm publish
+   ```
+   Scoped packages like `@loofta/pay-sdk` use `publishConfig.access: "public"` in package.json, so you don’t need `--access public` each time.
+
+4. **Later releases**: bump `version` in `package.json`, run `npm run build`, then `npm publish` again.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PayButtonProps {
+    /**
+     * Organization ID (required). Must be set up with Loofta — your destination wallet, network, and token are configured in your organization.
+     * If you don't have an organization ID, contact Loofta to get one.
+     */
+    organizationId: string;
+    /** Payment amount in USD (optional) */
+    amount?: number | string;
+    /** Button background color (optional) */
+    buttonBgColor?: string;
+    /** Checkout page background color (optional - falls back to org settings) */
+    pageBgColor?: string;
+    /** @deprecated Use buttonBgColor instead */
+    bgColor?: string;
+    /** Callback URL after payment (optional) */
+    callbackUrl?: string;
+    /** Callback function after payment (optional) */
+    onSuccess?: (paymentId: string) => void;
+    /** Button text (optional) */
+    buttonText?: string;
+    /** Success text shown after payment (optional) */
+    successText?: string;
+    /** Custom className for button styling */
+    className?: string;
+    /** Open checkout in new tab vs popup (default: popup) */
+    openMode?: 'popup' | 'redirect' | 'tab';
+    /** Disable button */
+    disabled?: boolean;
+    /**
+     * Base URL of the Loofta Pay hosted checkout page. Checkout is always Loofta's — this is only needed if the button is embedded on a different domain than the default Loofta Pay app. Usually omit; default is used.
+     */
+    checkoutBaseUrl?: string;
+}
+/**
+ * Loofta Pay Button – opens your Loofta Pay checkout (same API as your app).
+ */
+declare function PayButton({ organizationId, amount, buttonBgColor, pageBgColor, bgColor, callbackUrl, onSuccess, buttonText, successText, className, openMode, disabled, checkoutBaseUrl, }: PayButtonProps): react_jsx_runtime.JSX.Element;
+declare function generateEmbedCode(props: Partial<PayButtonProps>): string;
+declare function generateScriptEmbed(props: Partial<PayButtonProps>): string;
+
+export { PayButton, type PayButtonProps, generateEmbedCode, generateScriptEmbed };

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PayButtonProps {
+    /**
+     * Organization ID (required). Must be set up with Loofta — your destination wallet, network, and token are configured in your organization.
+     * If you don't have an organization ID, contact Loofta to get one.
+     */
+    organizationId: string;
+    /** Payment amount in USD (optional) */
+    amount?: number | string;
+    /** Button background color (optional) */
+    buttonBgColor?: string;
+    /** Checkout page background color (optional - falls back to org settings) */
+    pageBgColor?: string;
+    /** @deprecated Use buttonBgColor instead */
+    bgColor?: string;
+    /** Callback URL after payment (optional) */
+    callbackUrl?: string;
+    /** Callback function after payment (optional) */
+    onSuccess?: (paymentId: string) => void;
+    /** Button text (optional) */
+    buttonText?: string;
+    /** Success text shown after payment (optional) */
+    successText?: string;
+    /** Custom className for button styling */
+    className?: string;
+    /** Open checkout in new tab vs popup (default: popup) */
+    openMode?: 'popup' | 'redirect' | 'tab';
+    /** Disable button */
+    disabled?: boolean;
+    /**
+     * Base URL of the Loofta Pay hosted checkout page. Checkout is always Loofta's — this is only needed if the button is embedded on a different domain than the default Loofta Pay app. Usually omit; default is used.
+     */
+    checkoutBaseUrl?: string;
+}
+/**
+ * Loofta Pay Button – opens your Loofta Pay checkout (same API as your app).
+ */
+declare function PayButton({ organizationId, amount, buttonBgColor, pageBgColor, bgColor, callbackUrl, onSuccess, buttonText, successText, className, openMode, disabled, checkoutBaseUrl, }: PayButtonProps): react_jsx_runtime.JSX.Element;
+declare function generateEmbedCode(props: Partial<PayButtonProps>): string;
+declare function generateScriptEmbed(props: Partial<PayButtonProps>): string;
+
+export { PayButton, type PayButtonProps, generateEmbedCode, generateScriptEmbed };

package/dist/index.js

@@ -0,0 +1,206 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/PayButton.tsx
+var DEFAULT_STYLE = {
+  background: "linear-gradient(to right, #FF0F00, #EAB308)",
+  color: "#ffffff",
+  border: "none",
+  borderRadius: "12px",
+  padding: "12px 24px",
+  fontSize: "16px",
+  fontWeight: 600,
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "8px",
+  minWidth: "160px",
+  transition: "transform 0.2s, box-shadow 0.2s",
+  boxShadow: "0 4px 14px rgba(255, 15, 0, 0.25)"
+};
+var HOVER_STYLE = {
+  transform: "scale(1.02)",
+  boxShadow: "0 6px 20px rgba(255, 15, 0, 0.35)"
+};
+function LoaderIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.25 }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 2a10 10 0 0 1 10 10",
+        style: { transformOrigin: "12px 12px" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: "0 12 12",
+            to: "360 12 12",
+            dur: "0.8s",
+            repeatCount: "indefinite"
+          }
+        )
+      }
+    )
+  ] });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+function PayIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) });
+}
+function PayButton({
+  organizationId,
+  amount,
+  buttonBgColor,
+  pageBgColor,
+  bgColor,
+  callbackUrl,
+  onSuccess,
+  buttonText = "Pay with Loofta",
+  successText = "Paid Successfully",
+  className,
+  openMode = "popup",
+  disabled = false,
+  checkoutBaseUrl
+}) {
+  const [loading, setLoading] = react.useState(false);
+  const [paid, setPaid] = react.useState(false);
+  const [isHovered, setIsHovered] = react.useState(false);
+  const effectiveButtonBgColor = buttonBgColor || bgColor;
+  const getCheckoutUrl = react.useCallback(() => {
+    const defaultBase = "https://pay.loofta.com";
+    const base = checkoutBaseUrl != null && checkoutBaseUrl !== "" ? checkoutBaseUrl.replace(/\/$/, "") : defaultBase;
+    const path = base.endsWith("/checkout") ? base : `${base}/checkout`;
+    const params = new URLSearchParams();
+    params.set("organizationId", organizationId);
+    if (amount) params.set("amount", String(amount));
+    if (pageBgColor) params.set("bgColor", encodeURIComponent(pageBgColor));
+    if (callbackUrl) params.set("callback", encodeURIComponent(callbackUrl));
+    return `${path}?${params.toString()}`;
+  }, [checkoutBaseUrl, organizationId, amount, pageBgColor, callbackUrl]);
+  const handleClick = react.useCallback(() => {
+    if (disabled || loading || paid) return;
+    setLoading(true);
+    const url = getCheckoutUrl();
+    if (openMode === "redirect") {
+      window.location.href = url;
+      return;
+    }
+    if (openMode === "tab") {
+      window.open(url, "_blank", "noopener,noreferrer");
+      setLoading(false);
+      return;
+    }
+    const width = 500;
+    const height = 700;
+    const left = window.screenX + (window.outerWidth - width) / 2;
+    const top = window.screenY + (window.outerHeight - height) / 2;
+    const popup = window.open(
+      url,
+      "loofta-pay-checkout",
+      `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`
+    );
+    const handleMessage = (event) => {
+      if (event.data?.type === "loofta-payment-success") {
+        setLoading(false);
+        setPaid(true);
+        onSuccess?.(event.data.paymentId);
+        popup?.close();
+        window.removeEventListener("message", handleMessage);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    const checkClosed = setInterval(() => {
+      if (popup?.closed) {
+        clearInterval(checkClosed);
+        setLoading(false);
+        window.removeEventListener("message", handleMessage);
+      }
+    }, 500);
+  }, [disabled, loading, paid, getCheckoutUrl, openMode, onSuccess]);
+  const successStyle = {
+    ...DEFAULT_STYLE,
+    background: "linear-gradient(to right, #10B981, #059669)",
+    boxShadow: "0 4px 14px rgba(16, 185, 129, 0.25)",
+    cursor: "default"
+  };
+  const buttonStyle = {
+    ...DEFAULT_STYLE,
+    ...effectiveButtonBgColor ? { background: effectiveButtonBgColor } : {},
+    ...isHovered && !disabled && !paid ? HOVER_STYLE : {},
+    ...disabled ? { opacity: 0.6, cursor: "not-allowed" } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || loading || paid,
+      className,
+      style: className ? void 0 : paid ? successStyle : buttonStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: paid ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}),
+        successText
+      ] }) : loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LoaderIcon, {}),
+        "Processing..."
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PayIcon, {}),
+        buttonText
+      ] })
+    }
+  );
+}
+function generateEmbedCode(props) {
+  const { organizationId, amount, buttonBgColor, pageBgColor, callbackUrl, buttonText, checkoutBaseUrl } = props;
+  const propsStr = [
+    `organizationId="${organizationId || "your-org-id"}"`,
+    amount ? `amount={${amount}}` : null,
+    buttonBgColor ? `buttonBgColor="${buttonBgColor}"` : null,
+    pageBgColor ? `pageBgColor="${pageBgColor}"` : null,
+    callbackUrl ? `callbackUrl="${callbackUrl}"` : null,
+    buttonText ? `buttonText="${buttonText}"` : null,
+    checkoutBaseUrl ? `checkoutBaseUrl="${checkoutBaseUrl}"` : null
+  ].filter(Boolean).join("\n  ");
+  return `import { PayButton } from '@loofta/pay-sdk';
+
+<PayButton
+  ${propsStr}
+  onSuccess={(paymentId) => {
+    console.log('Payment completed:', paymentId);
+  }}
+/>`;
+}
+function generateScriptEmbed(props) {
+  const { organizationId, amount, buttonBgColor, pageBgColor, callbackUrl, buttonText, checkoutBaseUrl } = props;
+  const base = checkoutBaseUrl || "https://pay.loofta.com";
+  return `<!-- Loofta Pay Button -->
+<script src="${base}/sdk/loofta-pay.js"></script>
+<div 
+  id="loofta-pay-button"
+  data-organization-id="${organizationId || "your-org-id"}"
+  data-checkout-base-url="${base}"
+  ${amount ? `data-amount="${amount}"` : ""}
+  ${buttonBgColor ? `data-button-bg-color="${buttonBgColor}"` : ""}
+  ${pageBgColor ? `data-page-bg-color="${pageBgColor}"` : ""}
+  ${buttonText ? `data-button-text="${buttonText}"` : ""}
+  ${callbackUrl ? `data-callback="${callbackUrl}"` : ""}
+></div>
+<script>
+  LooftaPay.mount('#loofta-pay-button');
+</script>`;
+}
+
+exports.PayButton = PayButton;
+exports.generateEmbedCode = generateEmbedCode;
+exports.generateScriptEmbed = generateScriptEmbed;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PayButton.tsx"],"names":["jsxs","jsx","useState","useCallback","Fragment"],"mappings":"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","file":"index.js","sourcesContent":["import { useState, useCallback } from 'react';\n\nexport interface PayButtonProps {\n  /**\n   * Organization ID (required). Must be set up with Loofta — your destination wallet, network, and token are configured in your organization.\n   * If you don't have an organization ID, contact Loofta to get one.\n   */\n  organizationId: string;\n  /** Payment amount in USD (optional) */\n  amount?: number | string;\n  /** Button background color (optional) */\n  buttonBgColor?: string;\n  /** Checkout page background color (optional - falls back to org settings) */\n  pageBgColor?: string;\n  /** @deprecated Use buttonBgColor instead */\n  bgColor?: string;\n  /** Callback URL after payment (optional) */\n  callbackUrl?: string;\n  /** Callback function after payment (optional) */\n  onSuccess?: (paymentId: string) => void;\n  /** Button text (optional) */\n  buttonText?: string;\n  /** Success text shown after payment (optional) */\n  successText?: string;\n  /** Custom className for button styling */\n  className?: string;\n  /** Open checkout in new tab vs popup (default: popup) */\n  openMode?: 'popup' | 'redirect' | 'tab';\n  /** Disable button */\n  disabled?: boolean;\n  /**\n   * Base URL of the Loofta Pay hosted checkout page. Checkout is always Loofta's — this is only needed if the button is embedded on a different domain than the default Loofta Pay app. Usually omit; default is used.\n   */\n  checkoutBaseUrl?: string;\n}\n\nconst DEFAULT_STYLE: React.CSSProperties = {\n  background: 'linear-gradient(to right, #FF0F00, #EAB308)',\n  color: '#ffffff',\n  border: 'none',\n  borderRadius: '12px',\n  padding: '12px 24px',\n  fontSize: '16px',\n  fontWeight: 600,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '8px',\n  minWidth: '160px',\n  transition: 'transform 0.2s, box-shadow 0.2s',\n  boxShadow: '0 4px 14px rgba(255, 15, 0, 0.25)',\n};\n\nconst HOVER_STYLE: React.CSSProperties = {\n  transform: 'scale(1.02)',\n  boxShadow: '0 6px 20px rgba(255, 15, 0, 0.35)',\n};\n\nfunction LoaderIcon() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" strokeOpacity={0.25} />\n      <path\n        d=\"M12 2a10 10 0 0 1 10 10\"\n        style={{ transformOrigin: '12px 12px' }}\n      >\n        <animateTransform\n          attributeName=\"transform\"\n          type=\"rotate\"\n          from=\"0 12 12\"\n          to=\"360 12 12\"\n          dur=\"0.8s\"\n          repeatCount=\"indefinite\"\n        />\n      </path>\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction PayIcon() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n    </svg>\n  );\n}\n\n/**\n * Loofta Pay Button – opens your Loofta Pay checkout (same API as your app).\n */\nexport function PayButton({\n  organizationId,\n  amount,\n  buttonBgColor,\n  pageBgColor,\n  bgColor,\n  callbackUrl,\n  onSuccess,\n  buttonText = 'Pay with Loofta',\n  successText = 'Paid Successfully',\n  className,\n  openMode = 'popup',\n  disabled = false,\n  checkoutBaseUrl,\n}: PayButtonProps) {\n  const [loading, setLoading] = useState(false);\n  const [paid, setPaid] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const effectiveButtonBgColor = buttonBgColor || bgColor;\n\n  const getCheckoutUrl = useCallback(() => {\n    const defaultBase = 'https://pay.loofta.com';\n    const base =\n      checkoutBaseUrl != null && checkoutBaseUrl !== ''\n        ? checkoutBaseUrl.replace(/\\/$/, '')\n        : defaultBase;\n\n    const path = base.endsWith('/checkout') ? base : `${base}/checkout`;\n    const params = new URLSearchParams();\n    params.set('organizationId', organizationId);\n    if (amount) params.set('amount', String(amount));\n    if (pageBgColor) params.set('bgColor', encodeURIComponent(pageBgColor));\n    if (callbackUrl) params.set('callback', encodeURIComponent(callbackUrl));\n\n    return `${path}?${params.toString()}`;\n  }, [checkoutBaseUrl, organizationId, amount, pageBgColor, callbackUrl]);\n\n  const handleClick = useCallback(() => {\n    if (disabled || loading || paid) return;\n\n    setLoading(true);\n    const url = getCheckoutUrl();\n\n    if (openMode === 'redirect') {\n      window.location.href = url;\n      return;\n    }\n\n    if (openMode === 'tab') {\n      window.open(url, '_blank', 'noopener,noreferrer');\n      setLoading(false);\n      return;\n    }\n\n    const width = 500;\n    const height = 700;\n    const left = window.screenX + (window.outerWidth - width) / 2;\n    const top = window.screenY + (window.outerHeight - height) / 2;\n\n    const popup = window.open(\n      url,\n      'loofta-pay-checkout',\n      `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`\n    );\n\n    const handleMessage = (event: MessageEvent) => {\n      if (event.data?.type === 'loofta-payment-success') {\n        setLoading(false);\n        setPaid(true);\n        onSuccess?.(event.data.paymentId);\n        popup?.close();\n        window.removeEventListener('message', handleMessage);\n      }\n    };\n    window.addEventListener('message', handleMessage);\n\n    const checkClosed = setInterval(() => {\n      if (popup?.closed) {\n        clearInterval(checkClosed);\n        setLoading(false);\n        window.removeEventListener('message', handleMessage);\n      }\n    }, 500);\n  }, [disabled, loading, paid, getCheckoutUrl, openMode, onSuccess]);\n\n  const successStyle: React.CSSProperties = {\n    ...DEFAULT_STYLE,\n    background: 'linear-gradient(to right, #10B981, #059669)',\n    boxShadow: '0 4px 14px rgba(16, 185, 129, 0.25)',\n    cursor: 'default',\n  };\n\n  const buttonStyle: React.CSSProperties = {\n    ...DEFAULT_STYLE,\n    ...(effectiveButtonBgColor ? { background: effectiveButtonBgColor } : {}),\n    ...(isHovered && !disabled && !paid ? HOVER_STYLE : {}),\n    ...(disabled ? { opacity: 0.6, cursor: 'not-allowed' as const } : {}),\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled || loading || paid}\n      className={className}\n      style={className ? undefined : paid ? successStyle : buttonStyle}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {paid ? (\n        <>\n          <CheckIcon />\n          {successText}\n        </>\n      ) : loading ? (\n        <>\n          <LoaderIcon />\n          Processing...\n        </>\n      ) : (\n        <>\n          <PayIcon />\n          {buttonText}\n        </>\n      )}\n    </button>\n  );\n}\n\nexport function generateEmbedCode(props: Partial<PayButtonProps>): string {\n  const { organizationId, amount, buttonBgColor, pageBgColor, callbackUrl, buttonText, checkoutBaseUrl } = props;\n\n  const propsStr = [\n    `organizationId=\"${organizationId || 'your-org-id'}\"`,\n    amount ? `amount={${amount}}` : null,\n    buttonBgColor ? `buttonBgColor=\"${buttonBgColor}\"` : null,\n    pageBgColor ? `pageBgColor=\"${pageBgColor}\"` : null,\n    callbackUrl ? `callbackUrl=\"${callbackUrl}\"` : null,\n    buttonText ? `buttonText=\"${buttonText}\"` : null,\n    checkoutBaseUrl ? `checkoutBaseUrl=\"${checkoutBaseUrl}\"` : null,\n  ]\n    .filter(Boolean)\n    .join('\\n  ');\n\n  return `import { PayButton } from '@loofta/pay-sdk';\n\n<PayButton\n  ${propsStr}\n  onSuccess={(paymentId) => {\n    console.log('Payment completed:', paymentId);\n  }}\n/>`;\n}\n\nexport function generateScriptEmbed(props: Partial<PayButtonProps>): string {\n  const { organizationId, amount, buttonBgColor, pageBgColor, callbackUrl, buttonText, checkoutBaseUrl } = props;\n  const base = checkoutBaseUrl || 'https://pay.loofta.com';\n\n  return `<!-- Loofta Pay Button -->\n<script src=\"${base}/sdk/loofta-pay.js\"></script>\n<div \n  id=\"loofta-pay-button\"\n  data-organization-id=\"${organizationId || 'your-org-id'}\"\n  data-checkout-base-url=\"${base}\"\n  ${amount ? `data-amount=\"${amount}\"` : ''}\n  ${buttonBgColor ? `data-button-bg-color=\"${buttonBgColor}\"` : ''}\n  ${pageBgColor ? `data-page-bg-color=\"${pageBgColor}\"` : ''}\n  ${buttonText ? `data-button-text=\"${buttonText}\"` : ''}\n  ${callbackUrl ? `data-callback=\"${callbackUrl}\"` : ''}\n></div>\n<script>\n  LooftaPay.mount('#loofta-pay-button');\n</script>`;\n}\n\nexport default PayButton;\n"]}

package/dist/index.mjs

@@ -0,0 +1,202 @@
+import { useState, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/PayButton.tsx
+var DEFAULT_STYLE = {
+  background: "linear-gradient(to right, #FF0F00, #EAB308)",
+  color: "#ffffff",
+  border: "none",
+  borderRadius: "12px",
+  padding: "12px 24px",
+  fontSize: "16px",
+  fontWeight: 600,
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "8px",
+  minWidth: "160px",
+  transition: "transform 0.2s, box-shadow 0.2s",
+  boxShadow: "0 4px 14px rgba(255, 15, 0, 0.25)"
+};
+var HOVER_STYLE = {
+  transform: "scale(1.02)",
+  boxShadow: "0 6px 20px rgba(255, 15, 0, 0.35)"
+};
+function LoaderIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: 0.25 }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 2a10 10 0 0 1 10 10",
+        style: { transformOrigin: "12px 12px" },
+        children: /* @__PURE__ */ jsx(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: "0 12 12",
+            to: "360 12 12",
+            dur: "0.8s",
+            repeatCount: "indefinite"
+          }
+        )
+      }
+    )
+  ] });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+function PayIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) });
+}
+function PayButton({
+  organizationId,
+  amount,
+  buttonBgColor,
+  pageBgColor,
+  bgColor,
+  callbackUrl,
+  onSuccess,
+  buttonText = "Pay with Loofta",
+  successText = "Paid Successfully",
+  className,
+  openMode = "popup",
+  disabled = false,
+  checkoutBaseUrl
+}) {
+  const [loading, setLoading] = useState(false);
+  const [paid, setPaid] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const effectiveButtonBgColor = buttonBgColor || bgColor;
+  const getCheckoutUrl = useCallback(() => {
+    const defaultBase = "https://pay.loofta.com";
+    const base = checkoutBaseUrl != null && checkoutBaseUrl !== "" ? checkoutBaseUrl.replace(/\/$/, "") : defaultBase;
+    const path = base.endsWith("/checkout") ? base : `${base}/checkout`;
+    const params = new URLSearchParams();
+    params.set("organizationId", organizationId);
+    if (amount) params.set("amount", String(amount));
+    if (pageBgColor) params.set("bgColor", encodeURIComponent(pageBgColor));
+    if (callbackUrl) params.set("callback", encodeURIComponent(callbackUrl));
+    return `${path}?${params.toString()}`;
+  }, [checkoutBaseUrl, organizationId, amount, pageBgColor, callbackUrl]);
+  const handleClick = useCallback(() => {
+    if (disabled || loading || paid) return;
+    setLoading(true);
+    const url = getCheckoutUrl();
+    if (openMode === "redirect") {
+      window.location.href = url;
+      return;
+    }
+    if (openMode === "tab") {
+      window.open(url, "_blank", "noopener,noreferrer");
+      setLoading(false);
+      return;
+    }
+    const width = 500;
+    const height = 700;
+    const left = window.screenX + (window.outerWidth - width) / 2;
+    const top = window.screenY + (window.outerHeight - height) / 2;
+    const popup = window.open(
+      url,
+      "loofta-pay-checkout",
+      `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`
+    );
+    const handleMessage = (event) => {
+      if (event.data?.type === "loofta-payment-success") {
+        setLoading(false);
+        setPaid(true);
+        onSuccess?.(event.data.paymentId);
+        popup?.close();
+        window.removeEventListener("message", handleMessage);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    const checkClosed = setInterval(() => {
+      if (popup?.closed) {
+        clearInterval(checkClosed);
+        setLoading(false);
+        window.removeEventListener("message", handleMessage);
+      }
+    }, 500);
+  }, [disabled, loading, paid, getCheckoutUrl, openMode, onSuccess]);
+  const successStyle = {
+    ...DEFAULT_STYLE,
+    background: "linear-gradient(to right, #10B981, #059669)",
+    boxShadow: "0 4px 14px rgba(16, 185, 129, 0.25)",
+    cursor: "default"
+  };
+  const buttonStyle = {
+    ...DEFAULT_STYLE,
+    ...effectiveButtonBgColor ? { background: effectiveButtonBgColor } : {},
+    ...isHovered && !disabled && !paid ? HOVER_STYLE : {},
+    ...disabled ? { opacity: 0.6, cursor: "not-allowed" } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || loading || paid,
+      className,
+      style: className ? void 0 : paid ? successStyle : buttonStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: paid ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CheckIcon, {}),
+        successText
+      ] }) : loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(LoaderIcon, {}),
+        "Processing..."
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PayIcon, {}),
+        buttonText
+      ] })
+    }
+  );
+}
+function generateEmbedCode(props) {
+  const { organizationId, amount, buttonBgColor, pageBgColor, callbackUrl, buttonText, checkoutBaseUrl } = props;
+  const propsStr = [
+    `organizationId="${organizationId || "your-org-id"}"`,
+    amount ? `amount={${amount}}` : null,
+    buttonBgColor ? `buttonBgColor="${buttonBgColor}"` : null,
+    pageBgColor ? `pageBgColor="${pageBgColor}"` : null,
+    callbackUrl ? `callbackUrl="${callbackUrl}"` : null,
+    buttonText ? `buttonText="${buttonText}"` : null,
+    checkoutBaseUrl ? `checkoutBaseUrl="${checkoutBaseUrl}"` : null
+  ].filter(Boolean).join("\n  ");
+  return `import { PayButton } from '@loofta/pay-sdk';
+
+<PayButton
+  ${propsStr}
+  onSuccess={(paymentId) => {
+    console.log('Payment completed:', paymentId);
+  }}
+/>`;
+}
+function generateScriptEmbed(props) {
+  const { organizationId, amount, buttonBgColor, pageBgColor, callbackUrl, buttonText, checkoutBaseUrl } = props;
+  const base = checkoutBaseUrl || "https://pay.loofta.com";
+  return `<!-- Loofta Pay Button -->
+<script src="${base}/sdk/loofta-pay.js"></script>
+<div 
+  id="loofta-pay-button"
+  data-organization-id="${organizationId || "your-org-id"}"
+  data-checkout-base-url="${base}"
+  ${amount ? `data-amount="${amount}"` : ""}
+  ${buttonBgColor ? `data-button-bg-color="${buttonBgColor}"` : ""}
+  ${pageBgColor ? `data-page-bg-color="${pageBgColor}"` : ""}
+  ${buttonText ? `data-button-text="${buttonText}"` : ""}
+  ${callbackUrl ? `data-callback="${callbackUrl}"` : ""}
+></div>
+<script>
+  LooftaPay.mount('#loofta-pay-button');
+</script>`;
+}
+
+export { PayButton, generateEmbedCode, generateScriptEmbed };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PayButton.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { useState, useCallback } from 'react';\n\nexport interface PayButtonProps {\n  /**\n   * Organization ID (required). Must be set up with Loofta — your destination wallet, network, and token are configured in your organization.\n   * If you don't have an organization ID, contact Loofta to get one.\n   */\n  organizationId: string;\n  /** Payment amount in USD (optional) */\n  amount?: number | string;\n  /** Button background color (optional) */\n  buttonBgColor?: string;\n  /** Checkout page background color (optional - falls back to org settings) */\n  pageBgColor?: string;\n  /** @deprecated Use buttonBgColor instead */\n  bgColor?: string;\n  /** Callback URL after payment (optional) */\n  callbackUrl?: string;\n  /** Callback function after payment (optional) */\n  onSuccess?: (paymentId: string) => void;\n  /** Button text (optional) */\n  buttonText?: string;\n  /** Success text shown after payment (optional) */\n  successText?: string;\n  /** Custom className for button styling */\n  className?: string;\n  /** Open checkout in new tab vs popup (default: popup) */\n  openMode?: 'popup' | 'redirect' | 'tab';\n  /** Disable button */\n  disabled?: boolean;\n  /**\n   * Base URL of the Loofta Pay hosted checkout page. Checkout is always Loofta's — this is only needed if the button is embedded on a different domain than the default Loofta Pay app. Usually omit; default is used.\n   */\n  checkoutBaseUrl?: string;\n}\n\nconst DEFAULT_STYLE: React.CSSProperties = {\n  background: 'linear-gradient(to right, #FF0F00, #EAB308)',\n  color: '#ffffff',\n  border: 'none',\n  borderRadius: '12px',\n  padding: '12px 24px',\n  fontSize: '16px',\n  fontWeight: 600,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '8px',\n  minWidth: '160px',\n  transition: 'transform 0.2s, box-shadow 0.2s',\n  boxShadow: '0 4px 14px rgba(255, 15, 0, 0.25)',\n};\n\nconst HOVER_STYLE: React.CSSProperties = {\n  transform: 'scale(1.02)',\n  boxShadow: '0 6px 20px rgba(255, 15, 0, 0.35)',\n};\n\nfunction LoaderIcon() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" strokeOpacity={0.25} />\n      <path\n        d=\"M12 2a10 10 0 0 1 10 10\"\n        style={{ transformOrigin: '12px 12px' }}\n      >\n        <animateTransform\n          attributeName=\"transform\"\n          type=\"rotate\"\n          from=\"0 12 12\"\n          to=\"360 12 12\"\n          dur=\"0.8s\"\n          repeatCount=\"indefinite\"\n        />\n      </path>\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n\nfunction PayIcon() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n    </svg>\n  );\n}\n\n/**\n * Loofta Pay Button – opens your Loofta Pay checkout (same API as your app).\n */\nexport function PayButton({\n  organizationId,\n  amount,\n  buttonBgColor,\n  pageBgColor,\n  bgColor,\n  callbackUrl,\n  onSuccess,\n  buttonText = 'Pay with Loofta',\n  successText = 'Paid Successfully',\n  className,\n  openMode = 'popup',\n  disabled = false,\n  checkoutBaseUrl,\n}: PayButtonProps) {\n  const [loading, setLoading] = useState(false);\n  const [paid, setPaid] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const effectiveButtonBgColor = buttonBgColor || bgColor;\n\n  const getCheckoutUrl = useCallback(() => {\n    const defaultBase = 'https://pay.loofta.com';\n    const base =\n      checkoutBaseUrl != null && checkoutBaseUrl !== ''\n        ? checkoutBaseUrl.replace(/\\/$/, '')\n        : defaultBase;\n\n    const path = base.endsWith('/checkout') ? base : `${base}/checkout`;\n    const params = new URLSearchParams();\n    params.set('organizationId', organizationId);\n    if (amount) params.set('amount', String(amount));\n    if (pageBgColor) params.set('bgColor', encodeURIComponent(pageBgColor));\n    if (callbackUrl) params.set('callback', encodeURIComponent(callbackUrl));\n\n    return `${path}?${params.toString()}`;\n  }, [checkoutBaseUrl, organizationId, amount, pageBgColor, callbackUrl]);\n\n  const handleClick = useCallback(() => {\n    if (disabled || loading || paid) return;\n\n    setLoading(true);\n    const url = getCheckoutUrl();\n\n    if (openMode === 'redirect') {\n      window.location.href = url;\n      return;\n    }\n\n    if (openMode === 'tab') {\n      window.open(url, '_blank', 'noopener,noreferrer');\n      setLoading(false);\n      return;\n    }\n\n    const width = 500;\n    const height = 700;\n    const left = window.screenX + (window.outerWidth - width) / 2;\n    const top = window.screenY + (window.outerHeight - height) / 2;\n\n    const popup = window.open(\n      url,\n      'loofta-pay-checkout',\n      `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`\n    );\n\n    const handleMessage = (event: MessageEvent) => {\n      if (event.data?.type === 'loofta-payment-success') {\n        setLoading(false);\n        setPaid(true);\n        onSuccess?.(event.data.paymentId);\n        popup?.close();\n        window.removeEventListener('message', handleMessage);\n      }\n    };\n    window.addEventListener('message', handleMessage);\n\n    const checkClosed = setInterval(() => {\n      if (popup?.closed) {\n        clearInterval(checkClosed);\n        setLoading(false);\n        window.removeEventListener('message', handleMessage);\n      }\n    }, 500);\n  }, [disabled, loading, paid, getCheckoutUrl, openMode, onSuccess]);\n\n  const successStyle: React.CSSProperties = {\n    ...DEFAULT_STYLE,\n    background: 'linear-gradient(to right, #10B981, #059669)',\n    boxShadow: '0 4px 14px rgba(16, 185, 129, 0.25)',\n    cursor: 'default',\n  };\n\n  const buttonStyle: React.CSSProperties = {\n    ...DEFAULT_STYLE,\n    ...(effectiveButtonBgColor ? { background: effectiveButtonBgColor } : {}),\n    ...(isHovered && !disabled && !paid ? HOVER_STYLE : {}),\n    ...(disabled ? { opacity: 0.6, cursor: 'not-allowed' as const } : {}),\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled || loading || paid}\n      className={className}\n      style={className ? undefined : paid ? successStyle : buttonStyle}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {paid ? (\n        <>\n          <CheckIcon />\n          {successText}\n        </>\n      ) : loading ? (\n        <>\n          <LoaderIcon />\n          Processing...\n        </>\n      ) : (\n        <>\n          <PayIcon />\n          {buttonText}\n        </>\n      )}\n    </button>\n  );\n}\n\nexport function generateEmbedCode(props: Partial<PayButtonProps>): string {\n  const { organizationId, amount, buttonBgColor, pageBgColor, callbackUrl, buttonText, checkoutBaseUrl } = props;\n\n  const propsStr = [\n    `organizationId=\"${organizationId || 'your-org-id'}\"`,\n    amount ? `amount={${amount}}` : null,\n    buttonBgColor ? `buttonBgColor=\"${buttonBgColor}\"` : null,\n    pageBgColor ? `pageBgColor=\"${pageBgColor}\"` : null,\n    callbackUrl ? `callbackUrl=\"${callbackUrl}\"` : null,\n    buttonText ? `buttonText=\"${buttonText}\"` : null,\n    checkoutBaseUrl ? `checkoutBaseUrl=\"${checkoutBaseUrl}\"` : null,\n  ]\n    .filter(Boolean)\n    .join('\\n  ');\n\n  return `import { PayButton } from '@loofta/pay-sdk';\n\n<PayButton\n  ${propsStr}\n  onSuccess={(paymentId) => {\n    console.log('Payment completed:', paymentId);\n  }}\n/>`;\n}\n\nexport function generateScriptEmbed(props: Partial<PayButtonProps>): string {\n  const { organizationId, amount, buttonBgColor, pageBgColor, callbackUrl, buttonText, checkoutBaseUrl } = props;\n  const base = checkoutBaseUrl || 'https://pay.loofta.com';\n\n  return `<!-- Loofta Pay Button -->\n<script src=\"${base}/sdk/loofta-pay.js\"></script>\n<div \n  id=\"loofta-pay-button\"\n  data-organization-id=\"${organizationId || 'your-org-id'}\"\n  data-checkout-base-url=\"${base}\"\n  ${amount ? `data-amount=\"${amount}\"` : ''}\n  ${buttonBgColor ? `data-button-bg-color=\"${buttonBgColor}\"` : ''}\n  ${pageBgColor ? `data-page-bg-color=\"${pageBgColor}\"` : ''}\n  ${buttonText ? `data-button-text=\"${buttonText}\"` : ''}\n  ${callbackUrl ? `data-callback=\"${callbackUrl}\"` : ''}\n></div>\n<script>\n  LooftaPay.mount('#loofta-pay-button');\n</script>`;\n}\n\nexport default PayButton;\n"]}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@loofta/pay-sdk",
+  "version": "1.0.1",
+  "description": "Loofta Pay Button SDK - embeddable payment button that opens Loofta Pay checkout",
+  "author": "Loofta",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/loofta/loofta-swap.git"
+  },
+  "keywords": [
+    "loofta",
+    "pay",
+    "payment",
+    "checkout",
+    "crypto",
+    "multichain"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}