@vittascore/payment-widget-react 0.1.0

package/README.md

@@ -0,0 +1,175 @@
+# @vittascore/payment-widget-react
+
+Official Vittas payment widget for React. Fully typed with TypeScript.
+
+> **Naming convention** — framework-specific packages follow the pattern `@vittascore/payment-widget-{framework}`.
+> Other packages in this family: `@vittascore/payment-widget-vue` (planned), `@vittascore/payment-widget-angular` (planned).
+
+For contributing, local linking, and publishing instructions see [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+---
+
+## How it works
+
+```
+Your Backend  ──POST /api/widget/sessions──►  Vittas API
+              ◄── { clientSecret: "cs_..." } ──
+
+Your Frontend ──clientSecret──► PaymentWidget ──loads widget.js──► Vittas CDN
+```
+
+1. Your backend creates a payment session (amount locked server-side) and receives a `clientSecret`.
+2. Your frontend receives the `clientSecret` and passes it to this package.
+3. The package loads the Vittas CDN `widget.js` script and calls `VittasPay.init({ clientSecret })`.
+4. The widget handles everything — UI, polling, success/failure — then fires your callbacks.
+
+The amount and currency are **locked server-side** and cannot be tampered with by the browser.
+
+---
+
+## Installation
+
+```bash
+npm install @vittascore/payment-widget-react
+# or
+yarn add @vittascore/payment-widget-react
+# or
+pnpm add @vittascore/payment-widget-react
+```
+
+React 17+ and react-dom are peer dependencies — install them alongside the package if you haven't already.
+
+---
+
+## Step 1 — Create a session on your backend
+
+Your server calls the Vittas API with your **secret key** to create a payment session.
+The response includes a `clientSecret` (`cs_...`) that you forward to the frontend.
+
+**Endpoint:** `POST {api_base}/api/widget/sessions`
+**Auth:** `Authorization: Bearer sk_test_…` (your secret key, never exposed to the browser)
+
+```http
+POST https://dev-api.core.vittasinternational.com/api/widget/sessions
+Authorization: Bearer sk_test_xxxxxxxxxxxx
+Content-Type: application/json
+
+{
+  "amount": 500000,
+  "currency": "NGN",
+  "reference": "order_abc123",
+  "payerName": "Ada Lovelace",
+  "payerEmail": "ada@example.com",
+  "payerPhone": "+2348012345678",
+  "metadata": { "orderId": "abc123" }
+}
+```
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `amount` | `number` | ✅ | Amount in kobo (₦1 = 100 kobo) — minimum 100 |
+| `currency` | `string` | ✅ | ISO 4217 code, e.g. `'NGN'` |
+| `reference` | `string` | — | Your idempotency key — auto-generated if omitted |
+| `payerName` | `string` | — | Pre-fills the customer name |
+| `payerEmail` | `string` | — | Pre-fills the customer email |
+| `payerPhone` | `string` | — | Pre-fills the customer phone |
+| `metadata` | `object` | — | Arbitrary data echoed back in webhooks |
+
+The response contains a `clientSecret` (`cs_...`). Pass that to your frontend.
+
+---
+
+## Step 2 — Open the widget on the frontend
+
+Pass the `clientSecret` your backend returned directly to the component or hook.
+
+### Component
+
+```tsx
+import { PaymentWidget } from '@vittascore/payment-widget-react';
+
+// clientSecret comes from your backend — e.g. server-side props, an API route, etc.
+export default function CheckoutPage({ clientSecret }: { clientSecret: string }) {
+  return (
+    <PaymentWidget
+      mode="TEST"
+      clientSecret={clientSecret}
+      onSuccess={(ref) => console.log('paid', ref)}
+      onCancel={() => console.log('cancelled')}
+      onError={(err) => console.error(err.message)}
+    />
+  );
+}
+```
+
+### Hook (programmatic)
+
+```tsx
+import { useVittasPayment } from '@vittascore/payment-widget-react';
+
+export default function CheckoutPage({ clientSecret }: { clientSecret: string }) {
+  const { open, isOpen } = useVittasPayment({
+    mode: 'TEST',
+    clientSecret,
+    onSuccess: (ref) => console.log('paid', ref),
+    onCancel: () => console.log('cancelled'),
+  });
+
+  return (
+    <button onClick={open} disabled={isOpen}>
+      {isOpen ? 'Opening…' : 'Pay Now'}
+    </button>
+  );
+}
+```
+
+### Custom trigger
+
+Pass any element as `children` and it becomes the click target:
+
+```tsx
+<PaymentWidget mode="LIVE" clientSecret={clientSecret}>
+  <img src="/pay-button.svg" alt="Pay with Vittas" />
+</PaymentWidget>
+```
+
+---
+
+## Props / options
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `mode` | `'TEST' \| 'LIVE'` | ✅ | Determines which CDN and API environment to use |
+| `clientSecret` | `string` | ✅ | Session client secret from your backend (`cs_...`) |
+| `onSuccess` | `(ref: PaymentReference) => void \| Promise<void>` | — | Fires when the payment completes |
+| `onError` | `(err: VittasPayError) => void \| Promise<void>` | — | Fires on payment failure |
+| `onCancel` | `() => void` | — | Fires when the user closes the widget |
+| `children` | `ReactNode` | — | Custom trigger element (component only) |
+| `disabled` | `boolean` | — | Disables the trigger (component only) |
+
+---
+
+## Environments
+
+| Mode | CDN | API |
+|------|-----|-----|
+| `TEST` | `https://dev-cdn.core.vittasinternational.com` | `https://dev-api.core.vittasinternational.com` |
+| `LIVE` | `https://cdn.core.vittasinternational.com` | `https://api.core.vittasinternational.com` |
+
+Widget script loaded at runtime: `{cdn}/latest/widget.js`
+
+---
+
+## TypeScript
+
+All types are exported from the package root:
+
+```ts
+import type {
+  WidgetMode,
+  VittasPaymentConfig,
+  PaymentWidgetProps,
+  PaymentReference,
+  VittasPayError,
+} from '@vittascore/payment-widget-react';
+```

package/dist/index.cjs

@@ -0,0 +1,157 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/hooks/useVittasPayment.ts
+
+// src/constants.ts
+var API_BASE_URLS = {
+  TEST: "https://dev-api.core.vittasinternational.com",
+  LIVE: "https://api.core.vittasinternational.com"
+};
+var CDN_BASE_URLS = {
+  TEST: "https://dev-cdn.core.vittasinternational.com",
+  LIVE: "https://cdn.core.vittasinternational.com"
+};
+var CDN_SCRIPT_URLS = {
+  TEST: "https://dev-cdn.core.vittasinternational.com/latest/widget.js",
+  LIVE: "https://cdn.core.vittasinternational.com/latest/widget.js"
+};
+
+// src/utils/loadWidgetScript.ts
+var pending = /* @__PURE__ */ new Map();
+function loadWidgetScript(mode) {
+  const src = CDN_SCRIPT_URLS[mode];
+  if (document.querySelector(`script[src="${src}"]`)) {
+    return Promise.resolve();
+  }
+  const existing = pending.get(src);
+  if (existing !== void 0) return existing;
+  const promise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.onload = () => {
+      pending.delete(src);
+      resolve();
+    };
+    script.onerror = () => {
+      pending.delete(src);
+      script.remove();
+      reject(new Error(`Failed to load Vittas widget script: ${src}`));
+    };
+    document.head.appendChild(script);
+  });
+  pending.set(src, promise);
+  return promise;
+}
+
+// src/hooks/useVittasPayment.ts
+function useVittasPayment(options) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const optionsRef = react.useRef(options);
+  optionsRef.current = options;
+  const open = react.useCallback(() => {
+    const config = optionsRef.current;
+    setIsOpen(true);
+    loadWidgetScript(config.mode).then(() => {
+      var _a;
+      if (typeof ((_a = window.VittasPay) == null ? void 0 : _a.init) !== "function") {
+        throw new Error("window.VittasPay.init is not available after script load.");
+      }
+      window.VittasPay.init({
+        clientSecret: config.clientSecret,
+        onSuccess: (reference) => {
+          var _a2;
+          setIsOpen(false);
+          void ((_a2 = config.onSuccess) == null ? void 0 : _a2.call(config, reference));
+        },
+        onError: (err) => {
+          var _a2;
+          setIsOpen(false);
+          void ((_a2 = config.onError) == null ? void 0 : _a2.call(config, err));
+        },
+        onCancel: () => {
+          var _a2;
+          setIsOpen(false);
+          (_a2 = config.onCancel) == null ? void 0 : _a2.call(config);
+        }
+      });
+    }).catch((err) => {
+      var _a;
+      setIsOpen(false);
+      void ((_a = config.onError) == null ? void 0 : _a.call(config, {
+        message: err instanceof Error ? err.message : "Failed to load payment widget.",
+        status: "failed"
+      }));
+    });
+  }, []);
+  return { open, isOpen };
+}
+function PaymentWidget({
+  mode,
+  clientSecret,
+  onSuccess,
+  onError,
+  onCancel,
+  children,
+  className,
+  style,
+  disabled = false
+}) {
+  const { open } = useVittasPayment({
+    mode,
+    clientSecret,
+    ...onSuccess !== void 0 && { onSuccess },
+    ...onError !== void 0 && { onError },
+    ...onCancel !== void 0 && { onCancel }
+  });
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        onClick: disabled ? void 0 : open,
+        style: { display: "contents", cursor: disabled ? "not-allowed" : "pointer", ...style },
+        className,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: open,
+      disabled,
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px",
+        padding: "12px 24px",
+        background: disabled ? "#94a3b8" : "#1a56db",
+        color: "#ffffff",
+        fontSize: "15px",
+        fontWeight: 600,
+        lineHeight: 1,
+        border: "none",
+        borderRadius: "8px",
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        transition: "background 150ms ease",
+        ...style
+      },
+      children: "Pay Now"
+    }
+  );
+}
+
+exports.API_BASE_URLS = API_BASE_URLS;
+exports.CDN_BASE_URLS = CDN_BASE_URLS;
+exports.CDN_SCRIPT_URLS = CDN_SCRIPT_URLS;
+exports.PaymentWidget = PaymentWidget;
+exports.useVittasPayment = useVittasPayment;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/utils/loadWidgetScript.ts","../src/hooks/useVittasPayment.ts","../src/components/PaymentWidget.tsx"],"names":["useState","useRef","useCallback","_a","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { WidgetMode } from './types.js';\n\n/** REST API base URL — used for payment session requests. */\nexport const API_BASE_URLS: Readonly<Record<WidgetMode, string>> = {\n  TEST: 'https://dev-api.core.vittasinternational.com',\n  LIVE: 'https://api.core.vittasinternational.com',\n} as const;\n\n/** CDN base URL — hosts the widget script and the payment iframe page. */\nexport const CDN_BASE_URLS: Readonly<Record<WidgetMode, string>> = {\n  TEST: 'https://dev-cdn.core.vittasinternational.com',\n  LIVE: 'https://cdn.core.vittasinternational.com',\n} as const;\n\n/** Full URL to the hosted widget loader script. */\nexport const CDN_SCRIPT_URLS: Readonly<Record<WidgetMode, string>> = {\n  TEST: 'https://dev-cdn.core.vittasinternational.com/latest/widget.js',\n  LIVE: 'https://cdn.core.vittasinternational.com/latest/widget.js',\n} as const;\n\n/**\n * Expected postMessage origin when the payment iframe sends results back.\n * Must match the origin of the page loaded in the iframe (CDN-hosted frame).\n */\nexport const WIDGET_ORIGIN: Readonly<Record<WidgetMode, string>> = {\n  TEST: 'https://dev-cdn.core.vittasinternational.com',\n  LIVE: 'https://cdn.core.vittasinternational.com',\n} as const satisfies Readonly<Record<WidgetMode, string>>;\n","import { CDN_SCRIPT_URLS } from '../constants.js';\nimport type { WidgetMode } from '../types.js';\n\nconst pending = new Map<string, Promise<void>>();\n\n/**\n * Dynamically loads the Vittas CDN widget.js script once per mode.\n * Subsequent calls for the same mode return the cached promise.\n */\nexport function loadWidgetScript(mode: WidgetMode): Promise<void> {\n  const src = CDN_SCRIPT_URLS[mode];\n\n  // Already injected into the document\n  if (document.querySelector(`script[src=\"${src}\"]`)) {\n    return Promise.resolve();\n  }\n\n  // In-flight load — reuse the same promise\n  const existing = pending.get(src);\n  if (existing !== undefined) return existing;\n\n  const promise = new Promise<void>((resolve, reject) => {\n    const script = document.createElement('script');\n    script.src = src;\n    script.async = true;\n    script.onload = () => {\n      pending.delete(src);\n      resolve();\n    };\n    script.onerror = () => {\n      pending.delete(src);\n      script.remove();\n      reject(new Error(`Failed to load Vittas widget script: ${src}`));\n    };\n    document.head.appendChild(script);\n  });\n\n  pending.set(src, promise);\n  return promise;\n}\n","import { useCallback, useRef, useState } from 'react';\nimport type { UseVittasPaymentOptions, UseVittasPaymentReturn } from '../types.js';\nimport { loadWidgetScript } from '../utils/loadWidgetScript.js';\n\nexport function useVittasPayment(options: UseVittasPaymentOptions): UseVittasPaymentReturn {\n  const [isOpen, setIsOpen] = useState(false);\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const open = useCallback(() => {\n    const config = optionsRef.current;\n\n    setIsOpen(true);\n\n    loadWidgetScript(config.mode)\n      .then(() => {\n        if (typeof window.VittasPay?.init !== 'function') {\n          throw new Error('window.VittasPay.init is not available after script load.');\n        }\n\n        window.VittasPay.init({\n          clientSecret: config.clientSecret,\n          onSuccess: (reference) => {\n            setIsOpen(false);\n            void config.onSuccess?.(reference);\n          },\n          onError: (err) => {\n            setIsOpen(false);\n            void config.onError?.(err);\n          },\n          onCancel: () => {\n            setIsOpen(false);\n            config.onCancel?.();\n          },\n        });\n      })\n      .catch((err: unknown) => {\n        setIsOpen(false);\n        void config.onError?.({\n          message: err instanceof Error ? err.message : 'Failed to load payment widget.',\n          status: 'failed',\n        });\n      });\n  }, []);\n\n  return { open, isOpen };\n}\n","import type { PaymentWidgetProps } from '../types.js';\nimport { useVittasPayment } from '../hooks/useVittasPayment.js';\n\nexport function PaymentWidget({\n  mode,\n  clientSecret,\n  onSuccess,\n  onError,\n  onCancel,\n  children,\n  className,\n  style,\n  disabled = false,\n}: PaymentWidgetProps) {\n  const { open } = useVittasPayment({\n    mode,\n    clientSecret,\n    ...(onSuccess !== undefined && { onSuccess }),\n    ...(onError !== undefined && { onError }),\n    ...(onCancel !== undefined && { onCancel }),\n  });\n\n  if (children) {\n    return (\n      <span\n        onClick={disabled ? undefined : open}\n        style={{ display: 'contents', cursor: disabled ? 'not-allowed' : 'pointer', ...style }}\n        className={className}\n      >\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={open}\n      disabled={disabled}\n      className={className}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: '8px',\n        padding: '12px 24px',\n        background: disabled ? '#94a3b8' : '#1a56db',\n        color: '#ffffff',\n        fontSize: '15px',\n        fontWeight: 600,\n        lineHeight: 1,\n        border: 'none',\n        borderRadius: '8px',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        userSelect: 'none',\n        transition: 'background 150ms ease',\n        ...style,\n      }}\n    >\n      Pay Now\n    </button>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,75 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+type WidgetMode = 'TEST' | 'LIVE';
+interface PaymentReference {
+    id: string;
+    reference: string;
+    status: string;
+}
+interface VittasPayError {
+    message: string;
+    status: 'failed';
+}
+interface VittasPaymentConfig {
+    /**
+     * 'TEST' loads the widget from the dev CDN; 'LIVE' from production CDN.
+     */
+    mode: WidgetMode;
+    /**
+     * Session client secret obtained from your backend (cs_...).
+     * Never hard-code this — request it from your server right before opening
+     * the widget, then pass it here.
+     */
+    clientSecret: string;
+}
+interface PaymentWidgetProps extends VittasPaymentConfig {
+    /** Fires when the payment completes successfully. */
+    onSuccess?: (reference: PaymentReference) => void | Promise<void>;
+    /** Fires when a payment error occurs. */
+    onError?: (err: VittasPayError) => void | Promise<void>;
+    /** Fires when the user closes the widget before completing. */
+    onCancel?: () => void;
+    /** Pass a custom trigger element. Defaults to a styled "Pay Now" button. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    /** Disables the trigger button. */
+    disabled?: boolean;
+}
+interface UseVittasPaymentOptions extends VittasPaymentConfig {
+    onSuccess?: (reference: PaymentReference) => void | Promise<void>;
+    onError?: (err: VittasPayError) => void | Promise<void>;
+    onCancel?: () => void;
+}
+interface UseVittasPaymentReturn {
+    open: () => void;
+    isOpen: boolean;
+}
+interface VittasWidgetConfig {
+    clientSecret: string;
+    onSuccess?: (reference: PaymentReference) => void | Promise<void>;
+    onError?: (err: VittasPayError) => void | Promise<void>;
+    onCancel?: () => void;
+}
+interface VittasPayGlobal {
+    init: (config: VittasWidgetConfig) => unknown;
+}
+declare global {
+    interface Window {
+        VittasPay?: VittasPayGlobal;
+    }
+}
+
+declare function PaymentWidget({ mode, clientSecret, onSuccess, onError, onCancel, children, className, style, disabled, }: PaymentWidgetProps): react.JSX.Element;
+
+declare function useVittasPayment(options: UseVittasPaymentOptions): UseVittasPaymentReturn;
+
+/** REST API base URL — used for payment session requests. */
+declare const API_BASE_URLS: Readonly<Record<WidgetMode, string>>;
+/** CDN base URL — hosts the widget script and the payment iframe page. */
+declare const CDN_BASE_URLS: Readonly<Record<WidgetMode, string>>;
+/** Full URL to the hosted widget loader script. */
+declare const CDN_SCRIPT_URLS: Readonly<Record<WidgetMode, string>>;
+
+export { API_BASE_URLS, CDN_BASE_URLS, CDN_SCRIPT_URLS, type PaymentReference, PaymentWidget, type PaymentWidgetProps, type UseVittasPaymentOptions, type UseVittasPaymentReturn, type VittasPayError, type VittasPaymentConfig, type WidgetMode, useVittasPayment };

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+type WidgetMode = 'TEST' | 'LIVE';
+interface PaymentReference {
+    id: string;
+    reference: string;
+    status: string;
+}
+interface VittasPayError {
+    message: string;
+    status: 'failed';
+}
+interface VittasPaymentConfig {
+    /**
+     * 'TEST' loads the widget from the dev CDN; 'LIVE' from production CDN.
+     */
+    mode: WidgetMode;
+    /**
+     * Session client secret obtained from your backend (cs_...).
+     * Never hard-code this — request it from your server right before opening
+     * the widget, then pass it here.
+     */
+    clientSecret: string;
+}
+interface PaymentWidgetProps extends VittasPaymentConfig {
+    /** Fires when the payment completes successfully. */
+    onSuccess?: (reference: PaymentReference) => void | Promise<void>;
+    /** Fires when a payment error occurs. */
+    onError?: (err: VittasPayError) => void | Promise<void>;
+    /** Fires when the user closes the widget before completing. */
+    onCancel?: () => void;
+    /** Pass a custom trigger element. Defaults to a styled "Pay Now" button. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    /** Disables the trigger button. */
+    disabled?: boolean;
+}
+interface UseVittasPaymentOptions extends VittasPaymentConfig {
+    onSuccess?: (reference: PaymentReference) => void | Promise<void>;
+    onError?: (err: VittasPayError) => void | Promise<void>;
+    onCancel?: () => void;
+}
+interface UseVittasPaymentReturn {
+    open: () => void;
+    isOpen: boolean;
+}
+interface VittasWidgetConfig {
+    clientSecret: string;
+    onSuccess?: (reference: PaymentReference) => void | Promise<void>;
+    onError?: (err: VittasPayError) => void | Promise<void>;
+    onCancel?: () => void;
+}
+interface VittasPayGlobal {
+    init: (config: VittasWidgetConfig) => unknown;
+}
+declare global {
+    interface Window {
+        VittasPay?: VittasPayGlobal;
+    }
+}
+
+declare function PaymentWidget({ mode, clientSecret, onSuccess, onError, onCancel, children, className, style, disabled, }: PaymentWidgetProps): react.JSX.Element;
+
+declare function useVittasPayment(options: UseVittasPaymentOptions): UseVittasPaymentReturn;
+
+/** REST API base URL — used for payment session requests. */
+declare const API_BASE_URLS: Readonly<Record<WidgetMode, string>>;
+/** CDN base URL — hosts the widget script and the payment iframe page. */
+declare const CDN_BASE_URLS: Readonly<Record<WidgetMode, string>>;
+/** Full URL to the hosted widget loader script. */
+declare const CDN_SCRIPT_URLS: Readonly<Record<WidgetMode, string>>;
+
+export { API_BASE_URLS, CDN_BASE_URLS, CDN_SCRIPT_URLS, type PaymentReference, PaymentWidget, type PaymentWidgetProps, type UseVittasPaymentOptions, type UseVittasPaymentReturn, type VittasPayError, type VittasPaymentConfig, type WidgetMode, useVittasPayment };

package/dist/index.js

@@ -0,0 +1,151 @@
+import { useState, useRef, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/hooks/useVittasPayment.ts
+
+// src/constants.ts
+var API_BASE_URLS = {
+  TEST: "https://dev-api.core.vittasinternational.com",
+  LIVE: "https://api.core.vittasinternational.com"
+};
+var CDN_BASE_URLS = {
+  TEST: "https://dev-cdn.core.vittasinternational.com",
+  LIVE: "https://cdn.core.vittasinternational.com"
+};
+var CDN_SCRIPT_URLS = {
+  TEST: "https://dev-cdn.core.vittasinternational.com/latest/widget.js",
+  LIVE: "https://cdn.core.vittasinternational.com/latest/widget.js"
+};
+
+// src/utils/loadWidgetScript.ts
+var pending = /* @__PURE__ */ new Map();
+function loadWidgetScript(mode) {
+  const src = CDN_SCRIPT_URLS[mode];
+  if (document.querySelector(`script[src="${src}"]`)) {
+    return Promise.resolve();
+  }
+  const existing = pending.get(src);
+  if (existing !== void 0) return existing;
+  const promise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.onload = () => {
+      pending.delete(src);
+      resolve();
+    };
+    script.onerror = () => {
+      pending.delete(src);
+      script.remove();
+      reject(new Error(`Failed to load Vittas widget script: ${src}`));
+    };
+    document.head.appendChild(script);
+  });
+  pending.set(src, promise);
+  return promise;
+}
+
+// src/hooks/useVittasPayment.ts
+function useVittasPayment(options) {
+  const [isOpen, setIsOpen] = useState(false);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const open = useCallback(() => {
+    const config = optionsRef.current;
+    setIsOpen(true);
+    loadWidgetScript(config.mode).then(() => {
+      var _a;
+      if (typeof ((_a = window.VittasPay) == null ? void 0 : _a.init) !== "function") {
+        throw new Error("window.VittasPay.init is not available after script load.");
+      }
+      window.VittasPay.init({
+        clientSecret: config.clientSecret,
+        onSuccess: (reference) => {
+          var _a2;
+          setIsOpen(false);
+          void ((_a2 = config.onSuccess) == null ? void 0 : _a2.call(config, reference));
+        },
+        onError: (err) => {
+          var _a2;
+          setIsOpen(false);
+          void ((_a2 = config.onError) == null ? void 0 : _a2.call(config, err));
+        },
+        onCancel: () => {
+          var _a2;
+          setIsOpen(false);
+          (_a2 = config.onCancel) == null ? void 0 : _a2.call(config);
+        }
+      });
+    }).catch((err) => {
+      var _a;
+      setIsOpen(false);
+      void ((_a = config.onError) == null ? void 0 : _a.call(config, {
+        message: err instanceof Error ? err.message : "Failed to load payment widget.",
+        status: "failed"
+      }));
+    });
+  }, []);
+  return { open, isOpen };
+}
+function PaymentWidget({
+  mode,
+  clientSecret,
+  onSuccess,
+  onError,
+  onCancel,
+  children,
+  className,
+  style,
+  disabled = false
+}) {
+  const { open } = useVittasPayment({
+    mode,
+    clientSecret,
+    ...onSuccess !== void 0 && { onSuccess },
+    ...onError !== void 0 && { onError },
+    ...onCancel !== void 0 && { onCancel }
+  });
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        onClick: disabled ? void 0 : open,
+        style: { display: "contents", cursor: disabled ? "not-allowed" : "pointer", ...style },
+        className,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: open,
+      disabled,
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px",
+        padding: "12px 24px",
+        background: disabled ? "#94a3b8" : "#1a56db",
+        color: "#ffffff",
+        fontSize: "15px",
+        fontWeight: 600,
+        lineHeight: 1,
+        border: "none",
+        borderRadius: "8px",
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        transition: "background 150ms ease",
+        ...style
+      },
+      children: "Pay Now"
+    }
+  );
+}
+
+export { API_BASE_URLS, CDN_BASE_URLS, CDN_SCRIPT_URLS, PaymentWidget, useVittasPayment };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/constants.ts","../src/utils/loadWidgetScript.ts","../src/hooks/useVittasPayment.ts","../src/components/PaymentWidget.tsx"],"names":["_a"],"mappings":"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","file":"index.js","sourcesContent":["import type { WidgetMode } from './types.js';\n\n/** REST API base URL — used for payment session requests. */\nexport const API_BASE_URLS: Readonly<Record<WidgetMode, string>> = {\n  TEST: 'https://dev-api.core.vittasinternational.com',\n  LIVE: 'https://api.core.vittasinternational.com',\n} as const;\n\n/** CDN base URL — hosts the widget script and the payment iframe page. */\nexport const CDN_BASE_URLS: Readonly<Record<WidgetMode, string>> = {\n  TEST: 'https://dev-cdn.core.vittasinternational.com',\n  LIVE: 'https://cdn.core.vittasinternational.com',\n} as const;\n\n/** Full URL to the hosted widget loader script. */\nexport const CDN_SCRIPT_URLS: Readonly<Record<WidgetMode, string>> = {\n  TEST: 'https://dev-cdn.core.vittasinternational.com/latest/widget.js',\n  LIVE: 'https://cdn.core.vittasinternational.com/latest/widget.js',\n} as const;\n\n/**\n * Expected postMessage origin when the payment iframe sends results back.\n * Must match the origin of the page loaded in the iframe (CDN-hosted frame).\n */\nexport const WIDGET_ORIGIN: Readonly<Record<WidgetMode, string>> = {\n  TEST: 'https://dev-cdn.core.vittasinternational.com',\n  LIVE: 'https://cdn.core.vittasinternational.com',\n} as const satisfies Readonly<Record<WidgetMode, string>>;\n","import { CDN_SCRIPT_URLS } from '../constants.js';\nimport type { WidgetMode } from '../types.js';\n\nconst pending = new Map<string, Promise<void>>();\n\n/**\n * Dynamically loads the Vittas CDN widget.js script once per mode.\n * Subsequent calls for the same mode return the cached promise.\n */\nexport function loadWidgetScript(mode: WidgetMode): Promise<void> {\n  const src = CDN_SCRIPT_URLS[mode];\n\n  // Already injected into the document\n  if (document.querySelector(`script[src=\"${src}\"]`)) {\n    return Promise.resolve();\n  }\n\n  // In-flight load — reuse the same promise\n  const existing = pending.get(src);\n  if (existing !== undefined) return existing;\n\n  const promise = new Promise<void>((resolve, reject) => {\n    const script = document.createElement('script');\n    script.src = src;\n    script.async = true;\n    script.onload = () => {\n      pending.delete(src);\n      resolve();\n    };\n    script.onerror = () => {\n      pending.delete(src);\n      script.remove();\n      reject(new Error(`Failed to load Vittas widget script: ${src}`));\n    };\n    document.head.appendChild(script);\n  });\n\n  pending.set(src, promise);\n  return promise;\n}\n","import { useCallback, useRef, useState } from 'react';\nimport type { UseVittasPaymentOptions, UseVittasPaymentReturn } from '../types.js';\nimport { loadWidgetScript } from '../utils/loadWidgetScript.js';\n\nexport function useVittasPayment(options: UseVittasPaymentOptions): UseVittasPaymentReturn {\n  const [isOpen, setIsOpen] = useState(false);\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const open = useCallback(() => {\n    const config = optionsRef.current;\n\n    setIsOpen(true);\n\n    loadWidgetScript(config.mode)\n      .then(() => {\n        if (typeof window.VittasPay?.init !== 'function') {\n          throw new Error('window.VittasPay.init is not available after script load.');\n        }\n\n        window.VittasPay.init({\n          clientSecret: config.clientSecret,\n          onSuccess: (reference) => {\n            setIsOpen(false);\n            void config.onSuccess?.(reference);\n          },\n          onError: (err) => {\n            setIsOpen(false);\n            void config.onError?.(err);\n          },\n          onCancel: () => {\n            setIsOpen(false);\n            config.onCancel?.();\n          },\n        });\n      })\n      .catch((err: unknown) => {\n        setIsOpen(false);\n        void config.onError?.({\n          message: err instanceof Error ? err.message : 'Failed to load payment widget.',\n          status: 'failed',\n        });\n      });\n  }, []);\n\n  return { open, isOpen };\n}\n","import type { PaymentWidgetProps } from '../types.js';\nimport { useVittasPayment } from '../hooks/useVittasPayment.js';\n\nexport function PaymentWidget({\n  mode,\n  clientSecret,\n  onSuccess,\n  onError,\n  onCancel,\n  children,\n  className,\n  style,\n  disabled = false,\n}: PaymentWidgetProps) {\n  const { open } = useVittasPayment({\n    mode,\n    clientSecret,\n    ...(onSuccess !== undefined && { onSuccess }),\n    ...(onError !== undefined && { onError }),\n    ...(onCancel !== undefined && { onCancel }),\n  });\n\n  if (children) {\n    return (\n      <span\n        onClick={disabled ? undefined : open}\n        style={{ display: 'contents', cursor: disabled ? 'not-allowed' : 'pointer', ...style }}\n        className={className}\n      >\n        {children}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={open}\n      disabled={disabled}\n      className={className}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: '8px',\n        padding: '12px 24px',\n        background: disabled ? '#94a3b8' : '#1a56db',\n        color: '#ffffff',\n        fontSize: '15px',\n        fontWeight: 600,\n        lineHeight: 1,\n        border: 'none',\n        borderRadius: '8px',\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        userSelect: 'none',\n        transition: 'background 150ms ease',\n        ...style,\n      }}\n    >\n      Pay Now\n    </button>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@vittascore/payment-widget-react",
+  "version": "0.1.0",
+  "description": "Official Vittas payment widget for React",
+  "keywords": [
+    "vittas",
+    "payment",
+    "widget",
+    "react",
+    "typescript"
+  ],
+  "homepage": "https://github.com/Vittas-Inc/vittas-core-payment-widget-react#readme",
+  "bugs": {
+    "url": "https://github.com/Vittas-Inc/vittas-core-payment-widget-react/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Vittas-Inc/vittas-core-payment-widget-react.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src",
+    "format": "prettier --write src",
+    "prepublishOnly": "npm run type-check && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
+    "prettier": "^3.4.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}