@payotex.com/checkout 1.0.0

package/README.md

@@ -0,0 +1,143 @@
+# @payotex/checkout
+
+Client-side checkout widget for Payotex crypto payments. Provides a React component and vanilla JS function to embed the Payotex payment widget on any website.
+
+## Installation
+
+```bash
+npm install @payotex/checkout
+```
+
+## Quick Start
+
+### React
+
+```tsx
+import { PayotexCheckout } from '@payotex/checkout';
+
+// Session mode (recommended for server-side session creation)
+function CheckoutPage({ sessionId }: { sessionId: string }) {
+  return (
+    <PayotexCheckout
+      sessionId={sessionId}
+      onLoad={() => console.log('Widget loaded')}
+      onError={(err) => console.error('Widget error:', err)}
+    />
+  );
+}
+
+// Publishable key mode (client-side session creation)
+function QuickCheckout() {
+  return (
+    <PayotexCheckout
+      publishableKey="pk_live_your_key_here"
+      amount="49.99"
+      currency="USD"
+      buttonText="Pay with Crypto"
+    />
+  );
+}
+```
+
+### Vanilla JavaScript
+
+```js
+import { loadPayotexCheckout } from '@payotex/checkout';
+
+const container = document.getElementById('checkout-container');
+
+const cleanup = loadPayotexCheckout(container, {
+  sessionId: 'your-session-id',
+  onLoad: () => console.log('Widget loaded'),
+  onError: (err) => console.error('Error:', err),
+});
+
+// Call cleanup() when you want to remove the widget
+```
+
+## Framework Examples
+
+### Next.js
+
+```tsx
+'use client';
+import { PayotexCheckout } from '@payotex/checkout';
+
+export default function CheckoutPage({ params }: { params: { sessionId: string } }) {
+  return (
+    <div>
+      <h1>Complete Your Payment</h1>
+      <PayotexCheckout
+        sessionId={params.sessionId}
+        onError={(err) => console.error(err)}
+      />
+    </div>
+  );
+}
+```
+
+### Plain HTML (via CDN / bundler)
+
+```html
+<div id="payotex-checkout"></div>
+
+<script type="module">
+  import { loadPayotexCheckout } from '@payotex/checkout';
+
+  loadPayotexCheckout(document.getElementById('payotex-checkout'), {
+    publishableKey: 'pk_live_your_key_here',
+    amount: '25.00',
+    currency: 'USD',
+  });
+</script>
+```
+
+## Props / Options Reference
+
+| Option | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `publishableKey` | `string` | Conditional | — | Your publishable key (`pk_live_...`). Required if no `sessionId`. |
+| `sessionId` | `string` | Conditional | — | Pre-created checkout session ID. Required if no `publishableKey`. |
+| `amount` | `string \| number` | Conditional | — | Payment amount. Required when using `publishableKey` without `sessionId`. |
+| `currency` | `string` | No | `"USD"` | Currency code: `USD`, `EUR`, `GBP`. |
+| `buttonText` | `string` | No | `"Pay with Crypto"` | Custom text for the payment button. |
+| `baseUrl` | `string` | No | `"https://payotex.com"` | Base URL for the Payotex API. |
+| `onLoad` | `() => void` | No | — | Called when the widget script has loaded. |
+| `onError` | `(error: Error) => void` | No | — | Called on errors (load failures, validation errors). |
+
+### React-only Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `className` | `string` | Additional CSS class for the container div. |
+| `style` | `React.CSSProperties` | Inline styles for the container div. |
+
+## Security
+
+- **Never use your secret key (`sk_live_...`) in client-side code.** The SDK will throw a `SECURITY ERROR` if a secret key is detected.
+- Use your **publishable key** (`pk_live_...`) for client-side integrations.
+- Secret keys must only be used server-side with the `@payotex/node` SDK.
+- For maximum security, create checkout sessions server-side and pass the `sessionId` to the client.
+
+## TypeScript Support
+
+This package includes full TypeScript type definitions. All types are exported:
+
+```typescript
+import type { PayotexCheckoutOptions, PayotexCheckoutProps } from '@payotex/checkout';
+```
+
+## How It Works
+
+The SDK dynamically injects the Payotex `widget.js` script with the appropriate `data-*` attributes. The widget script handles the entire checkout UI including:
+
+- Chain/asset selection
+- Quote generation
+- QR code display
+- Payment address and memo
+- Real-time transaction tracking
+- Payment confirmation
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,133 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/checkout/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PayotexCheckout: () => PayotexCheckout,
+  loadPayotexCheckout: () => loadPayotexCheckout
+});
+module.exports = __toCommonJS(index_exports);
+
+// packages/checkout/src/react.tsx
+var import_react = require("react");
+
+// packages/checkout/src/loader.ts
+var DEFAULT_BASE_URL = "https://payotex.com";
+function validateOptions(options) {
+  if (options.publishableKey && options.publishableKey.startsWith("sk_live_")) {
+    throw new Error(
+      "SECURITY ERROR: Never use your secret key (sk_live_) in client-side code. Use your publishable key (pk_live_) instead. Secret keys must only be used server-side."
+    );
+  }
+  if (!options.publishableKey && !options.sessionId) {
+    throw new Error("Either publishableKey or sessionId is required");
+  }
+  if (options.publishableKey && !options.publishableKey.startsWith("pk_live_")) {
+    throw new Error("Invalid publishable key format. Must start with pk_live_");
+  }
+  if (options.publishableKey && !options.sessionId) {
+    if (options.amount === void 0 || options.amount === null || options.amount === "") {
+      throw new Error("amount is required when using publishableKey");
+    }
+    const numAmount = typeof options.amount === "number" ? options.amount : parseFloat(String(options.amount));
+    if (isNaN(numAmount) || numAmount <= 0) {
+      throw new Error("amount must be a positive number");
+    }
+  }
+  if (options.sessionId && typeof options.sessionId !== "string") {
+    throw new Error("sessionId must be a string");
+  }
+}
+function loadPayotexCheckout(container, options) {
+  validateOptions(options);
+  const baseUrl = (options.baseUrl || DEFAULT_BASE_URL).replace(/\/+$/, "");
+  const script = document.createElement("script");
+  script.src = `${baseUrl}/widget.js`;
+  if (options.sessionId) {
+    script.setAttribute("data-session-id", options.sessionId);
+  }
+  if (options.publishableKey) {
+    script.setAttribute("data-key", options.publishableKey);
+  }
+  if (options.amount !== void 0) {
+    script.setAttribute("data-amount", String(options.amount));
+  }
+  if (options.currency) {
+    script.setAttribute("data-currency", options.currency);
+  }
+  if (options.buttonText) {
+    script.setAttribute("data-button-text", options.buttonText);
+  }
+  script.onload = () => {
+    var _a;
+    (_a = options.onLoad) == null ? void 0 : _a.call(options);
+  };
+  script.onerror = () => {
+    var _a;
+    const err = new Error("Failed to load Payotex checkout widget");
+    (_a = options.onError) == null ? void 0 : _a.call(options, err);
+  };
+  container.appendChild(script);
+  return () => {
+    script.remove();
+    const widgetContainers = container.querySelectorAll('[id^="payotex-widget-"]');
+    widgetContainers.forEach((el) => el.remove());
+  };
+}
+
+// packages/checkout/src/react.tsx
+function PayotexCheckout(props) {
+  const { className, style, ...options } = props;
+  const containerRef = (0, import_react.useRef)(null);
+  const cleanupRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    const container = containerRef.current;
+    if (!container) return;
+    if (cleanupRef.current) {
+      cleanupRef.current();
+      cleanupRef.current = null;
+    }
+    try {
+      cleanupRef.current = loadPayotexCheckout(container, options);
+    } catch (err) {
+      (_a = options.onError) == null ? void 0 : _a.call(options, err instanceof Error ? err : new Error(String(err)));
+    }
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+    };
+  }, [
+    options.publishableKey,
+    options.sessionId,
+    options.amount,
+    options.currency,
+    options.buttonText,
+    options.baseUrl
+  ]);
+  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, className, style, "data-testid": "payotex-checkout-container" });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PayotexCheckout,
+  loadPayotexCheckout
+});

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+
+interface PayotexCheckoutOptions {
+    /** Your publishable key (pk_live_...). Required if no sessionId. */
+    publishableKey?: string;
+    /** Pre-created checkout session ID. Required if no publishableKey. */
+    sessionId?: string;
+    /** Payment amount (required when using publishableKey). */
+    amount?: string | number;
+    /** Currency code - USD, EUR, GBP (default: "USD"). */
+    currency?: string;
+    /** Custom button text (default: "Pay with Crypto"). */
+    buttonText?: string;
+    /** Base URL for Payotex API (default: "https://payotex.com"). */
+    baseUrl?: string;
+    /** Called when the widget script has loaded. */
+    onLoad?: () => void;
+    /** Called on errors. */
+    onError?: (error: Error) => void;
+}
+
+type PayotexCheckoutProps = PayotexCheckoutOptions & {
+    /** Additional className for the container div */
+    className?: string;
+    /** Additional inline styles for the container div */
+    style?: React.CSSProperties;
+};
+declare function PayotexCheckout(props: PayotexCheckoutProps): react.JSX.Element;
+
+declare function loadPayotexCheckout(container: HTMLElement, options: PayotexCheckoutOptions): () => void;
+
+export { PayotexCheckout, type PayotexCheckoutOptions, type PayotexCheckoutProps, loadPayotexCheckout };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+
+interface PayotexCheckoutOptions {
+    /** Your publishable key (pk_live_...). Required if no sessionId. */
+    publishableKey?: string;
+    /** Pre-created checkout session ID. Required if no publishableKey. */
+    sessionId?: string;
+    /** Payment amount (required when using publishableKey). */
+    amount?: string | number;
+    /** Currency code - USD, EUR, GBP (default: "USD"). */
+    currency?: string;
+    /** Custom button text (default: "Pay with Crypto"). */
+    buttonText?: string;
+    /** Base URL for Payotex API (default: "https://payotex.com"). */
+    baseUrl?: string;
+    /** Called when the widget script has loaded. */
+    onLoad?: () => void;
+    /** Called on errors. */
+    onError?: (error: Error) => void;
+}
+
+type PayotexCheckoutProps = PayotexCheckoutOptions & {
+    /** Additional className for the container div */
+    className?: string;
+    /** Additional inline styles for the container div */
+    style?: React.CSSProperties;
+};
+declare function PayotexCheckout(props: PayotexCheckoutProps): react.JSX.Element;
+
+declare function loadPayotexCheckout(container: HTMLElement, options: PayotexCheckoutOptions): () => void;
+
+export { PayotexCheckout, type PayotexCheckoutOptions, type PayotexCheckoutProps, loadPayotexCheckout };

package/dist/index.js

@@ -0,0 +1,105 @@
+// packages/checkout/src/react.tsx
+import { useEffect, useRef } from "react";
+
+// packages/checkout/src/loader.ts
+var DEFAULT_BASE_URL = "https://payotex.com";
+function validateOptions(options) {
+  if (options.publishableKey && options.publishableKey.startsWith("sk_live_")) {
+    throw new Error(
+      "SECURITY ERROR: Never use your secret key (sk_live_) in client-side code. Use your publishable key (pk_live_) instead. Secret keys must only be used server-side."
+    );
+  }
+  if (!options.publishableKey && !options.sessionId) {
+    throw new Error("Either publishableKey or sessionId is required");
+  }
+  if (options.publishableKey && !options.publishableKey.startsWith("pk_live_")) {
+    throw new Error("Invalid publishable key format. Must start with pk_live_");
+  }
+  if (options.publishableKey && !options.sessionId) {
+    if (options.amount === void 0 || options.amount === null || options.amount === "") {
+      throw new Error("amount is required when using publishableKey");
+    }
+    const numAmount = typeof options.amount === "number" ? options.amount : parseFloat(String(options.amount));
+    if (isNaN(numAmount) || numAmount <= 0) {
+      throw new Error("amount must be a positive number");
+    }
+  }
+  if (options.sessionId && typeof options.sessionId !== "string") {
+    throw new Error("sessionId must be a string");
+  }
+}
+function loadPayotexCheckout(container, options) {
+  validateOptions(options);
+  const baseUrl = (options.baseUrl || DEFAULT_BASE_URL).replace(/\/+$/, "");
+  const script = document.createElement("script");
+  script.src = `${baseUrl}/widget.js`;
+  if (options.sessionId) {
+    script.setAttribute("data-session-id", options.sessionId);
+  }
+  if (options.publishableKey) {
+    script.setAttribute("data-key", options.publishableKey);
+  }
+  if (options.amount !== void 0) {
+    script.setAttribute("data-amount", String(options.amount));
+  }
+  if (options.currency) {
+    script.setAttribute("data-currency", options.currency);
+  }
+  if (options.buttonText) {
+    script.setAttribute("data-button-text", options.buttonText);
+  }
+  script.onload = () => {
+    var _a;
+    (_a = options.onLoad) == null ? void 0 : _a.call(options);
+  };
+  script.onerror = () => {
+    var _a;
+    const err = new Error("Failed to load Payotex checkout widget");
+    (_a = options.onError) == null ? void 0 : _a.call(options, err);
+  };
+  container.appendChild(script);
+  return () => {
+    script.remove();
+    const widgetContainers = container.querySelectorAll('[id^="payotex-widget-"]');
+    widgetContainers.forEach((el) => el.remove());
+  };
+}
+
+// packages/checkout/src/react.tsx
+function PayotexCheckout(props) {
+  const { className, style, ...options } = props;
+  const containerRef = useRef(null);
+  const cleanupRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    const container = containerRef.current;
+    if (!container) return;
+    if (cleanupRef.current) {
+      cleanupRef.current();
+      cleanupRef.current = null;
+    }
+    try {
+      cleanupRef.current = loadPayotexCheckout(container, options);
+    } catch (err) {
+      (_a = options.onError) == null ? void 0 : _a.call(options, err instanceof Error ? err : new Error(String(err)));
+    }
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+    };
+  }, [
+    options.publishableKey,
+    options.sessionId,
+    options.amount,
+    options.currency,
+    options.buttonText,
+    options.baseUrl
+  ]);
+  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, className, style, "data-testid": "payotex-checkout-container" });
+}
+export {
+  PayotexCheckout,
+  loadPayotexCheckout
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@payotex.com/checkout",
+  "version": "1.0.0",
+  "description": "Client-side checkout widget for Payotex crypto payments",
+  "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"],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react",
+    "test": "node --experimental-vm-modules ../../node_modules/.bin/vitest run"
+  },
+  "keywords": ["payotex", "crypto", "payments", "checkout", "widget", "react", "cross-chain", "bitcoin", "ethereum"],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0",
+    "react": "^18.0.0",
+    "@types/react": "^18.0.0"
+  }
+}