@maytes/checkout-button 1.1.0 → 1.2.0

package/dist/element.mjs

@@ -0,0 +1,180 @@
+// src/element.ts
+import { Maytes, MaytesError, MaytesErrorCode } from "@maytes/checkout-button";
+var MAYTES_CHECKOUT_BUTTON_TAG = "maytes-checkout-button";
+var OBSERVED_ATTRIBUTES = ["environment", "nonce", "mode", "label", "block", "radius", "height"];
+var INSTANCE_ATTRIBUTES = /* @__PURE__ */ new Set(["environment", "nonce"]);
+var FORWARDED_EVENTS = /* @__PURE__ */ new Map([
+  ["maytes:checkout-opened", "maytes-opened"],
+  ["maytes:checkout-closed", "maytes-closed"],
+  ["maytes:checkout-redirected", "maytes-redirected"],
+  ["maytes:checkout-failed", "maytes-failed"]
+]);
+var LAUNCH_ENDING_EVENTS = /* @__PURE__ */ new Set(["maytes:checkout-closed", "maytes:checkout-redirected", "maytes:checkout-failed"]);
+var BaseElement = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+function numberAttribute(value) {
+  if (value === null || value.trim() === "") return void 0;
+  return Number(value);
+}
+function readButtonOptions(element) {
+  const options = { block: element.hasAttribute("block") };
+  const mode = element.getAttribute("mode");
+  if (mode !== null) options.mode = mode;
+  const label = element.getAttribute("label");
+  if (label !== null) options.label = label;
+  const radius = numberAttribute(element.getAttribute("radius"));
+  if (radius !== void 0) options.radius = radius;
+  const height = numberAttribute(element.getAttribute("height"));
+  if (height !== void 0) options.height = height;
+  return options;
+}
+var MaytesCheckoutButtonElement = class extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.checkoutCallback = null;
+    this.maytes = null;
+    this.removeButton = null;
+    this.launching = false;
+    this.recreatePending = false;
+    this.listening = false;
+    this.forward = (event) => {
+      const maytes = this.maytes;
+      const name = FORWARDED_EVENTS.get(event.type);
+      if (maytes === null || name === void 0) return;
+      const detail = event.detail;
+      if (detail?.instanceId !== maytes.instanceId) return;
+      this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+      if (LAUNCH_ENDING_EVENTS.has(event.type)) this.launchEnded();
+    };
+  }
+  static get observedAttributes() {
+    return OBSERVED_ATTRIBUTES;
+  }
+  get createCheckout() {
+    return this.checkoutCallback;
+  }
+  set createCheckout(callback) {
+    this.checkoutCallback = typeof callback === "function" ? callback : null;
+    this.mount();
+  }
+  get instanceId() {
+    return this.maytes?.instanceId ?? null;
+  }
+  open(options) {
+    if (this.maytes === null) return Promise.resolve({ outcome: "ignored" });
+    return this.maytes.openCheckout(options);
+  }
+  connectedCallback() {
+    this.mount();
+  }
+  disconnectedCallback() {
+    queueMicrotask(() => {
+      if (!this.isConnected) this.unmount();
+    });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (this.maytes === null) {
+      this.mount();
+      return;
+    }
+    if (INSTANCE_ATTRIBUTES.has(name)) {
+      this.recreateWhenIdle();
+      return;
+    }
+    this.renderButton(this.maytes);
+  }
+  mount() {
+    if (!this.isConnected || this.checkoutCallback === null || this.maytes !== null) return;
+    const nonce = this.getAttribute("nonce");
+    let maytes;
+    try {
+      maytes = Maytes(
+        {
+          createCheckout: () => this.startCheckout(),
+          environment: this.getAttribute("environment")
+        },
+        nonce === null ? void 0 : { cspNonce: nonce }
+      );
+    } catch (error) {
+      this.reportConfigError(error);
+      return;
+    }
+    this.maytes = maytes;
+    this.listen();
+    this.renderButton(maytes);
+  }
+  renderButton(maytes) {
+    let removeButton;
+    try {
+      removeButton = maytes.renderButton(this, readButtonOptions(this));
+    } catch (error) {
+      this.reportConfigError(error);
+      return;
+    }
+    this.removeButton?.();
+    this.removeButton = removeButton;
+  }
+  recreateWhenIdle() {
+    if (this.launching) {
+      this.recreatePending = true;
+      return;
+    }
+    this.unmount();
+    this.mount();
+  }
+  launchEnded() {
+    this.launching = false;
+    if (!this.recreatePending) return;
+    this.recreatePending = false;
+    queueMicrotask(() => this.recreateWhenIdle());
+  }
+  listen() {
+    if (this.listening) return;
+    this.listening = true;
+    for (const type of FORWARDED_EVENTS.keys()) document.addEventListener(type, this.forward);
+  }
+  unlisten() {
+    if (!this.listening) return;
+    this.listening = false;
+    for (const type of FORWARDED_EVENTS.keys()) document.removeEventListener(type, this.forward);
+  }
+  reportConfigError(error) {
+    if (!(error instanceof MaytesError)) throw error;
+    console.error("[maytes/checkout-button] <maytes-checkout-button> configuration error:", error);
+    const detail = { reason: "config", cause: error };
+    this.dispatchEvent(new CustomEvent("maytes-failed", { detail, bubbles: true, composed: true }));
+  }
+  startCheckout() {
+    const callback = this.checkoutCallback;
+    if (callback === null) {
+      return Promise.reject(new MaytesError(MaytesErrorCode.Config, "<maytes-checkout-button> has no createCheckout"));
+    }
+    this.launching = true;
+    return callback();
+  }
+  unmount() {
+    this.unlisten();
+    this.removeButton?.();
+    this.removeButton = null;
+    this.maytes?.destroy();
+    this.maytes = null;
+    this.launching = false;
+    this.recreatePending = false;
+  }
+};
+function defineMaytesCheckoutButton() {
+  if (typeof customElements === "undefined") return false;
+  if (customElements.get(MAYTES_CHECKOUT_BUTTON_TAG) === void 0) {
+    customElements.define(MAYTES_CHECKOUT_BUTTON_TAG, MaytesCheckoutButtonElement);
+  }
+  return true;
+}
+defineMaytesCheckoutButton();
+export {
+  MAYTES_CHECKOUT_BUTTON_TAG,
+  MaytesCheckoutButtonElement,
+  defineMaytesCheckoutButton,
+  readButtonOptions
+};
+//# sourceMappingURL=element.mjs.map

package/dist/element.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/element.ts"],"sourcesContent":["import { Maytes, MaytesError, MaytesErrorCode } from '@maytes/checkout-button';\nimport type {\n  CheckoutClosedDetail,\n  CheckoutFailedDetail,\n  CheckoutOpenedDetail,\n  CheckoutRedirectedDetail,\n  CreateCheckoutFn,\n  MaytesEnvironment,\n  MaytesSDK,\n  OpenCheckoutOptions,\n  OpenCheckoutResult,\n  RenderButtonCleanup,\n  RenderButtonMode,\n  RenderButtonOptions,\n} from '@maytes/checkout-button';\n\nexport const MAYTES_CHECKOUT_BUTTON_TAG = 'maytes-checkout-button';\n\nexport interface ElementConfigFailedDetail {\n  reason: 'config';\n  cause: unknown;\n}\n\nexport type MaytesElementFailedDetail = CheckoutFailedDetail | ElementConfigFailedDetail;\n\nconst OBSERVED_ATTRIBUTES = ['environment', 'nonce', 'mode', 'label', 'block', 'radius', 'height'];\nconst INSTANCE_ATTRIBUTES = new Set(['environment', 'nonce']);\n\nconst FORWARDED_EVENTS = new Map<string, string>([\n  ['maytes:checkout-opened', 'maytes-opened'],\n  ['maytes:checkout-closed', 'maytes-closed'],\n  ['maytes:checkout-redirected', 'maytes-redirected'],\n  ['maytes:checkout-failed', 'maytes-failed'],\n]);\n\nconst LAUNCH_ENDING_EVENTS = new Set(['maytes:checkout-closed', 'maytes:checkout-redirected', 'maytes:checkout-failed']);\n\ntype SdkEventDetail = CheckoutOpenedDetail | CheckoutClosedDetail | CheckoutRedirectedDetail | CheckoutFailedDetail;\n\nconst BaseElement = (typeof HTMLElement === 'undefined' ? class {} : HTMLElement) as typeof HTMLElement;\n\nfunction numberAttribute(value: string | null): number | undefined {\n  if (value === null || value.trim() === '') return undefined;\n  return Number(value);\n}\n\nexport function readButtonOptions(element: Element): RenderButtonOptions {\n  const options: RenderButtonOptions = { block: element.hasAttribute('block') };\n  const mode = element.getAttribute('mode');\n  if (mode !== null) options.mode = mode as RenderButtonMode;\n  const label = element.getAttribute('label');\n  if (label !== null) options.label = label;\n  const radius = numberAttribute(element.getAttribute('radius'));\n  if (radius !== undefined) options.radius = radius;\n  const height = numberAttribute(element.getAttribute('height'));\n  if (height !== undefined) options.height = height;\n  return options;\n}\n\nexport class MaytesCheckoutButtonElement extends BaseElement {\n  private checkoutCallback: CreateCheckoutFn | null = null;\n  private maytes: MaytesSDK | null = null;\n  private removeButton: RenderButtonCleanup | null = null;\n  private launching = false;\n  private recreatePending = false;\n  private listening = false;\n\n  static get observedAttributes(): string[] {\n    return OBSERVED_ATTRIBUTES;\n  }\n\n  get createCheckout(): CreateCheckoutFn | null {\n    return this.checkoutCallback;\n  }\n\n  set createCheckout(callback: CreateCheckoutFn | null) {\n    this.checkoutCallback = typeof callback === 'function' ? callback : null;\n    this.mount();\n  }\n\n  get instanceId(): string | null {\n    return this.maytes?.instanceId ?? null;\n  }\n\n  open(options?: OpenCheckoutOptions): Promise<OpenCheckoutResult> {\n    if (this.maytes === null) return Promise.resolve({ outcome: 'ignored' });\n    return this.maytes.openCheckout(options);\n  }\n\n  connectedCallback(): void {\n    this.mount();\n  }\n\n  disconnectedCallback(): void {\n    queueMicrotask(() => {\n      if (!this.isConnected) this.unmount();\n    });\n  }\n\n  attributeChangedCallback(name: string, previous: string | null, next: string | null): void {\n    if (previous === next) return;\n    if (this.maytes === null) {\n      this.mount();\n      return;\n    }\n    if (INSTANCE_ATTRIBUTES.has(name)) {\n      this.recreateWhenIdle();\n      return;\n    }\n    this.renderButton(this.maytes);\n  }\n\n  private mount(): void {\n    if (!this.isConnected || this.checkoutCallback === null || this.maytes !== null) return;\n    const nonce = this.getAttribute('nonce');\n    let maytes: MaytesSDK;\n    try {\n      maytes = Maytes(\n        {\n          createCheckout: () => this.startCheckout(),\n          environment: this.getAttribute('environment') as MaytesEnvironment,\n        },\n        nonce === null ? undefined : { cspNonce: nonce },\n      );\n    } catch (error) {\n      this.reportConfigError(error);\n      return;\n    }\n    this.maytes = maytes;\n    this.listen();\n    this.renderButton(maytes);\n  }\n\n  private renderButton(maytes: MaytesSDK): void {\n    let removeButton: RenderButtonCleanup;\n    try {\n      removeButton = maytes.renderButton(this, readButtonOptions(this));\n    } catch (error) {\n      this.reportConfigError(error);\n      return;\n    }\n    this.removeButton?.();\n    this.removeButton = removeButton;\n  }\n\n  private recreateWhenIdle(): void {\n    if (this.launching) {\n      this.recreatePending = true;\n      return;\n    }\n    this.unmount();\n    this.mount();\n  }\n\n  private readonly forward = (event: Event): void => {\n    const maytes = this.maytes;\n    const name = FORWARDED_EVENTS.get(event.type);\n    if (maytes === null || name === undefined) return;\n    const detail = (event as CustomEvent<SdkEventDetail | undefined>).detail;\n    if (detail?.instanceId !== maytes.instanceId) return;\n    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));\n    if (LAUNCH_ENDING_EVENTS.has(event.type)) this.launchEnded();\n  };\n\n  private launchEnded(): void {\n    this.launching = false;\n    if (!this.recreatePending) return;\n    this.recreatePending = false;\n    queueMicrotask(() => this.recreateWhenIdle());\n  }\n\n  private listen(): void {\n    if (this.listening) return;\n    this.listening = true;\n    for (const type of FORWARDED_EVENTS.keys()) document.addEventListener(type, this.forward);\n  }\n\n  private unlisten(): void {\n    if (!this.listening) return;\n    this.listening = false;\n    for (const type of FORWARDED_EVENTS.keys()) document.removeEventListener(type, this.forward);\n  }\n\n  private reportConfigError(error: unknown): void {\n    if (!(error instanceof MaytesError)) throw error;\n    console.error('[maytes/checkout-button] <maytes-checkout-button> configuration error:', error);\n    const detail: ElementConfigFailedDetail = { reason: 'config', cause: error };\n    this.dispatchEvent(new CustomEvent('maytes-failed', { detail, bubbles: true, composed: true }));\n  }\n\n  private startCheckout(): ReturnType<CreateCheckoutFn> {\n    const callback = this.checkoutCallback;\n    if (callback === null) {\n      return Promise.reject(new MaytesError(MaytesErrorCode.Config, '<maytes-checkout-button> has no createCheckout'));\n    }\n    this.launching = true;\n    return callback();\n  }\n\n  private unmount(): void {\n    this.unlisten();\n    this.removeButton?.();\n    this.removeButton = null;\n    this.maytes?.destroy();\n    this.maytes = null;\n    this.launching = false;\n    this.recreatePending = false;\n  }\n}\n\nexport function defineMaytesCheckoutButton(): boolean {\n  if (typeof customElements === 'undefined') return false;\n  if (customElements.get(MAYTES_CHECKOUT_BUTTON_TAG) === undefined) {\n    customElements.define(MAYTES_CHECKOUT_BUTTON_TAG, MaytesCheckoutButtonElement);\n  }\n  return true;\n}\n\ndefineMaytesCheckoutButton();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'maytes-checkout-button': MaytesCheckoutButtonElement;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/integrity.json

@@ -1,39 +1,50 @@
 {
-  "version": "1.1.0",
-  "builtAt": "2026-09-18T07:05:32.774Z",
+  "version": "1.2.0",
+  "builtAt": "2026-10-08T20:44:08.691Z",
   "files": {
     "checkout-button.js": {
       "kind": "iife",
-      "hashedName": "checkout-button.811263f9.js",
-      "semverPath": "v1.1.0/checkout-button.js",
-      "semverUrl": "https://js.maytes.co/v1.1.0/checkout-button.js",
-      "hashedUrl": "https://js.maytes.co/checkout-button.811263f9.js",
-      "sri": "sha384-+hQ9khxZbVEUhR685659hqmPyN/3RYfbNEI7itac3SkcyYor/94/0mIwVnVwMa8M",
-      "sha256": "811263f90dd3352bcf8978167d22a26e41009a94205cef629f031e773717ead6",
-      "shortHash": "811263f9",
-      "bytes": 19966
+      "hashedName": "checkout-button.c640180e.js",
+      "semverPath": "v1.2.0/checkout-button.js",
+      "semverUrl": "https://js.maytes.co/v1.2.0/checkout-button.js",
+      "hashedUrl": "https://js.maytes.co/checkout-button.c640180e.js",
+      "sri": "sha384-gIQUOEPPO0H+Stb2Ffa40dFxBxGnB40p1+AHttEYor5oZiVKoM+aKagIL3GuNkG1",
+      "sha256": "c640180ead4d414a04c382dabe4ec426ea3db61b5096b2c664d4ce41ef8b7607",
+      "shortHash": "c640180e",
+      "bytes": 22679
     },
     "checkout-button.mjs": {
       "kind": "esm",
-      "hashedName": "checkout-button.f96c49ee.mjs",
-      "semverPath": "v1.1.0/checkout-button.mjs",
-      "semverUrl": "https://js.maytes.co/v1.1.0/checkout-button.mjs",
-      "hashedUrl": "https://js.maytes.co/checkout-button.f96c49ee.mjs",
-      "sri": "sha384-1areqNcTs9sephTl6S1+sOgACv1/NqIqXBG0Ej11/4OfSDcN92GvQvhhu4K76R5i",
-      "sha256": "f96c49ee91fd10515cbd2fe77bcb21d89886d4159eff56e7b83d1cbb1af7ee09",
-      "shortHash": "f96c49ee",
-      "bytes": 29351
+      "hashedName": "checkout-button.d6e444ee.mjs",
+      "semverPath": "v1.2.0/checkout-button.mjs",
+      "semverUrl": "https://js.maytes.co/v1.2.0/checkout-button.mjs",
+      "hashedUrl": "https://js.maytes.co/checkout-button.d6e444ee.mjs",
+      "sri": "sha384-sKFZzp1oSiijC45OFR04FOjFQfgvxawtUp+u/qXvRu5s5ZF8iMSTHaQo5g+VLJ79",
+      "sha256": "d6e444ee5c08457d63716884ca15d4e982c6e7f93775a90525d208194b5070af",
+      "shortHash": "d6e444ee",
+      "bytes": 34473
     },
     "checkout-button.cjs": {
       "kind": "cjs",
-      "hashedName": "checkout-button.178d8394.cjs",
-      "semverPath": "v1.1.0/checkout-button.cjs",
-      "semverUrl": "https://js.maytes.co/v1.1.0/checkout-button.cjs",
-      "hashedUrl": "https://js.maytes.co/checkout-button.178d8394.cjs",
-      "sri": "sha384-4c1JuweT47cnpvGlQfv+qQw/3CS+7o2/Dg4qQnLiWM1GDChhHQo0dT+z8705Hy50",
-      "sha256": "178d83949b76f28297af08270885b183ce082e49b6f744a7d26bee3562a13b44",
-      "shortHash": "178d8394",
-      "bytes": 30325
+      "hashedName": "checkout-button.d7bc9aea.cjs",
+      "semverPath": "v1.2.0/checkout-button.cjs",
+      "semverUrl": "https://js.maytes.co/v1.2.0/checkout-button.cjs",
+      "hashedUrl": "https://js.maytes.co/checkout-button.d7bc9aea.cjs",
+      "sri": "sha384-fkm1nIhsGYEjDw3uc4cjdxui4K8H4HuPnIQ379GP1Y7vtwFC/Dw3M85KopqvjRl1",
+      "sha256": "d7bc9aeaaf3e0145619e7d362f7b56c97d5c901de5800e46dd93c275e4ec1b48",
+      "shortHash": "d7bc9aea",
+      "bytes": 35447
+    },
+    "checkout-button.element.js": {
+      "kind": "iife-element",
+      "hashedName": "checkout-button.element.6c530c24.js",
+      "semverPath": "v1.2.0/checkout-button.element.js",
+      "semverUrl": "https://js.maytes.co/v1.2.0/checkout-button.element.js",
+      "hashedUrl": "https://js.maytes.co/checkout-button.element.6c530c24.js",
+      "sri": "sha384-Y3aDrAucY25r7DzSkYJpsjoazd67oBy4WSxbTXBgpaWaT6TOuEOW3PidCw0PeVb9",
+      "sha256": "6c530c2483a4bf568d617832155a7bc0f6a30bc527815982b7feae20801e80ed",
+      "shortHash": "6c530c24",
+      "bytes": 26172
     }
   }
 }

package/dist/react.cjs

@@ -0,0 +1,139 @@
+"use client";
+"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);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  MaytesButton: () => MaytesButton,
+  MaytesProvider: () => MaytesProvider,
+  useMaytes: () => useMaytes
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/MaytesProvider.tsx
+var import_react = require("react");
+var import_checkout_button = require("@maytes/checkout-button");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MaytesContext = (0, import_react.createContext)(null);
+function MaytesProvider({ environment, createCheckout, children }) {
+  const createCheckoutRef = (0, import_react.useRef)(createCheckout);
+  const [maytes, setMaytes] = (0, import_react.useState)(null);
+  const [busy, setBusy] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    createCheckoutRef.current = createCheckout;
+  });
+  (0, import_react.useEffect)(() => {
+    const instance = (0, import_checkout_button.Maytes)({ environment, createCheckout: () => createCheckoutRef.current() });
+    const stopWatchingBusy = instance.onBusyChange(setBusy);
+    setMaytes(instance);
+    setBusy(false);
+    return () => {
+      stopWatchingBusy();
+      instance.destroy();
+    };
+  }, [environment]);
+  const value = (0, import_react.useMemo)(() => ({ maytes, busy }), [maytes, busy]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaytesContext.Provider, { value, children });
+}
+var NOT_READY = { outcome: "ignored" };
+function useMaytes() {
+  const context = (0, import_react.useContext)(MaytesContext);
+  if (context === null) throw new Error("useMaytes() must be used inside <MaytesProvider>.");
+  const { maytes, busy } = context;
+  const openCheckout = (0, import_react.useCallback)(
+    (options) => maytes === null ? Promise.resolve(NOT_READY) : maytes.openCheckout(options),
+    [maytes]
+  );
+  return { openCheckout, busy };
+}
+
+// src/react/MaytesButton.tsx
+var import_react2 = require("react");
+
+// src/react/events.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function listenToInstanceEvents(target, instanceId, source, handlers) {
+  const belongs = (event) => {
+    const detail = event.detail;
+    if (!isRecord(detail) || detail.instanceId !== instanceId || detail.source !== source) return null;
+    return detail;
+  };
+  const listeners = [
+    ["maytes:checkout-opened", (event) => {
+      if (belongs(event)) handlers().onOpened?.();
+    }],
+    ["maytes:checkout-closed", (event) => {
+      if (belongs(event)) handlers().onClosed?.();
+    }],
+    ["maytes:checkout-redirected", (event) => {
+      const detail = belongs(event);
+      if (detail) handlers().onRedirected?.(detail);
+    }],
+    ["maytes:checkout-failed", (event) => {
+      const detail = belongs(event);
+      if (detail) handlers().onFailed?.(detail);
+    }]
+  ];
+  for (const [name, listener] of listeners) target.addEventListener(name, listener);
+  return () => {
+    for (const [name, listener] of listeners) target.removeEventListener(name, listener);
+  };
+}
+
+// src/react/MaytesButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function renderOptions({ mode, label, block, radius, height, redirectOverlay }) {
+  const options = {};
+  if (mode !== void 0) options.mode = mode;
+  if (label !== void 0) options.label = label;
+  if (block !== void 0) options.block = block;
+  if (radius !== void 0) options.radius = radius;
+  if (height !== void 0) options.height = height;
+  if (redirectOverlay !== void 0) options.redirectOverlay = redirectOverlay;
+  return options;
+}
+function MaytesButton({ mode, label, block, radius, height, redirectOverlay, className, onOpened, onClosed, onRedirected, onFailed }) {
+  const context = (0, import_react2.useContext)(MaytesContext);
+  if (context === null) throw new Error("<MaytesButton> must be used inside <MaytesProvider>.");
+  const { maytes } = context;
+  const containerRef = (0, import_react2.useRef)(null);
+  const handlersRef = (0, import_react2.useRef)({});
+  (0, import_react2.useEffect)(() => {
+    const handlers = {};
+    if (onOpened !== void 0) handlers.onOpened = onOpened;
+    if (onClosed !== void 0) handlers.onClosed = onClosed;
+    if (onRedirected !== void 0) handlers.onRedirected = onRedirected;
+    if (onFailed !== void 0) handlers.onFailed = onFailed;
+    handlersRef.current = handlers;
+  });
+  (0, import_react2.useEffect)(() => {
+    const container = containerRef.current;
+    if (maytes === null || container === null) return void 0;
+    return maytes.renderButton(container, renderOptions({ mode, label, block, radius, height, redirectOverlay }));
+  }, [maytes, mode, label, block, radius, height, redirectOverlay]);
+  (0, import_react2.useEffect)(() => {
+    if (maytes === null) return void 0;
+    return listenToInstanceEvents(document, maytes.instanceId, "button", () => handlersRef.current);
+  }, [maytes]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: containerRef, className });
+}
+//# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/index.ts","../src/react/MaytesProvider.tsx","../src/react/MaytesButton.tsx","../src/react/events.ts"],"sourcesContent":["export { MaytesProvider, useMaytes } from './MaytesProvider.js';\nexport type { MaytesProviderProps, UseMaytesResult } from './MaytesProvider.js';\nexport { MaytesButton } from './MaytesButton.js';\nexport type { MaytesButtonProps } from './MaytesButton.js';\nexport type { MaytesEventHandlers } from './events.js';\n","import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport { Maytes } from '@maytes/checkout-button';\nimport type {\n  CreateCheckoutFn,\n  MaytesEnvironment,\n  MaytesSDK,\n  OpenCheckoutOptions,\n  OpenCheckoutResult,\n} from '@maytes/checkout-button';\n\nexport interface MaytesProviderProps {\n  environment: MaytesEnvironment;\n  createCheckout: CreateCheckoutFn;\n  children?: ReactNode;\n}\n\nexport interface MaytesContextValue {\n  maytes: MaytesSDK | null;\n  busy: boolean;\n}\n\nexport const MaytesContext = createContext<MaytesContextValue | null>(null);\n\nexport function MaytesProvider({ environment, createCheckout, children }: MaytesProviderProps) {\n  const createCheckoutRef = useRef(createCheckout);\n  const [maytes, setMaytes] = useState<MaytesSDK | null>(null);\n  const [busy, setBusy] = useState(false);\n\n  useEffect(() => {\n    createCheckoutRef.current = createCheckout;\n  });\n\n  useEffect(() => {\n    const instance = Maytes({ environment, createCheckout: () => createCheckoutRef.current() });\n    const stopWatchingBusy = instance.onBusyChange(setBusy);\n    setMaytes(instance);\n    setBusy(false);\n    return () => {\n      stopWatchingBusy();\n      instance.destroy();\n    };\n  }, [environment]);\n\n  const value = useMemo(() => ({ maytes, busy }), [maytes, busy]);\n  return <MaytesContext.Provider value={value}>{children}</MaytesContext.Provider>;\n}\n\nexport interface UseMaytesResult {\n  openCheckout: (options?: OpenCheckoutOptions) => Promise<OpenCheckoutResult>;\n  busy: boolean;\n}\n\nconst NOT_READY: OpenCheckoutResult = { outcome: 'ignored' };\n\nexport function useMaytes(): UseMaytesResult {\n  const context = useContext(MaytesContext);\n  if (context === null) throw new Error('useMaytes() must be used inside <MaytesProvider>.');\n  const { maytes, busy } = context;\n  const openCheckout = useCallback(\n    (options?: OpenCheckoutOptions) => (maytes === null ? Promise.resolve(NOT_READY) : maytes.openCheckout(options)),\n    [maytes],\n  );\n  return { openCheckout, busy };\n}\n","import { useContext, useEffect, useRef } from 'react';\nimport type { RenderButtonOptions } from '@maytes/checkout-button';\nimport { MaytesContext } from './MaytesProvider.js';\nimport { listenToInstanceEvents, type MaytesEventHandlers } from './events.js';\n\ntype ButtonAppearance = Pick<RenderButtonOptions, 'mode' | 'label' | 'block' | 'radius' | 'height' | 'redirectOverlay'>;\n\ntype AppearanceValues = { [K in keyof ButtonAppearance]-?: ButtonAppearance[K] | undefined };\n\nexport type MaytesButtonProps = ButtonAppearance & MaytesEventHandlers & { className?: string };\n\nfunction renderOptions({ mode, label, block, radius, height, redirectOverlay }: AppearanceValues): RenderButtonOptions {\n  const options: RenderButtonOptions = {};\n  if (mode !== undefined) options.mode = mode;\n  if (label !== undefined) options.label = label;\n  if (block !== undefined) options.block = block;\n  if (radius !== undefined) options.radius = radius;\n  if (height !== undefined) options.height = height;\n  if (redirectOverlay !== undefined) options.redirectOverlay = redirectOverlay;\n  return options;\n}\n\nexport function MaytesButton({ mode, label, block, radius, height, redirectOverlay, className, onOpened, onClosed, onRedirected, onFailed }: MaytesButtonProps) {\n  const context = useContext(MaytesContext);\n  if (context === null) throw new Error('<MaytesButton> must be used inside <MaytesProvider>.');\n  const { maytes } = context;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const handlersRef = useRef<MaytesEventHandlers>({});\n\n  useEffect(() => {\n    const handlers: MaytesEventHandlers = {};\n    if (onOpened !== undefined) handlers.onOpened = onOpened;\n    if (onClosed !== undefined) handlers.onClosed = onClosed;\n    if (onRedirected !== undefined) handlers.onRedirected = onRedirected;\n    if (onFailed !== undefined) handlers.onFailed = onFailed;\n    handlersRef.current = handlers;\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (maytes === null || container === null) return undefined;\n    return maytes.renderButton(container, renderOptions({ mode, label, block, radius, height, redirectOverlay }));\n  }, [maytes, mode, label, block, radius, height, redirectOverlay]);\n\n  useEffect(() => {\n    if (maytes === null) return undefined;\n    return listenToInstanceEvents(document, maytes.instanceId, 'button', () => handlersRef.current);\n  }, [maytes]);\n\n  return <div ref={containerRef} className={className} />;\n}\n","import type { CheckoutFailedDetail, CheckoutRedirectedDetail, LaunchSource } from '@maytes/checkout-button';\n\nexport interface MaytesEventHandlers {\n  onOpened?: () => void;\n  onClosed?: () => void;\n  onRedirected?: (detail: CheckoutRedirectedDetail) => void;\n  onFailed?: (detail: CheckoutFailedDetail) => void;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null;\n}\n\nexport function listenToInstanceEvents(\n  target: Document,\n  instanceId: string,\n  source: LaunchSource,\n  handlers: () => MaytesEventHandlers,\n): () => void {\n  const belongs = (event: Event): Record<string, unknown> | null => {\n    const detail: unknown = (event as CustomEvent<unknown>).detail;\n    if (!isRecord(detail) || detail.instanceId !== instanceId || detail.source !== source) return null;\n    return detail;\n  };\n\n  const listeners: Array<[string, (event: Event) => void]> = [\n    ['maytes:checkout-opened', (event) => { if (belongs(event)) handlers().onOpened?.(); }],\n    ['maytes:checkout-closed', (event) => { if (belongs(event)) handlers().onClosed?.(); }],\n    ['maytes:checkout-redirected', (event) => {\n      const detail = belongs(event);\n      if (detail) handlers().onRedirected?.(detail as unknown as CheckoutRedirectedDetail);\n    }],\n    ['maytes:checkout-failed', (event) => {\n      const detail = belongs(event);\n      if (detail) handlers().onFailed?.(detail as unknown as CheckoutFailedDetail);\n    }],\n  ];\n\n  for (const [name, listener] of listeners) target.addEventListener(name, listener);\n  return () => {\n    for (const [name, listener] of listeners) target.removeEventListener(name, listener);\n  };\n}\n"],"mappings":"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","names":["import_react","import_jsx_runtime"]}

package/dist/react.d.cts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { MaytesEnvironment, CreateCheckoutFn, OpenCheckoutOptions, OpenCheckoutResult, CheckoutRedirectedDetail, CheckoutFailedDetail, RenderButtonOptions } from '@maytes/checkout-button';
+
+interface MaytesProviderProps {
+    environment: MaytesEnvironment;
+    createCheckout: CreateCheckoutFn;
+    children?: ReactNode;
+}
+declare function MaytesProvider({ environment, createCheckout, children }: MaytesProviderProps): react.JSX.Element;
+interface UseMaytesResult {
+    openCheckout: (options?: OpenCheckoutOptions) => Promise<OpenCheckoutResult>;
+    busy: boolean;
+}
+declare function useMaytes(): UseMaytesResult;
+
+interface MaytesEventHandlers {
+    onOpened?: () => void;
+    onClosed?: () => void;
+    onRedirected?: (detail: CheckoutRedirectedDetail) => void;
+    onFailed?: (detail: CheckoutFailedDetail) => void;
+}
+
+type ButtonAppearance = Pick<RenderButtonOptions, 'mode' | 'label' | 'block' | 'radius' | 'height' | 'redirectOverlay'>;
+type MaytesButtonProps = ButtonAppearance & MaytesEventHandlers & {
+    className?: string;
+};
+declare function MaytesButton({ mode, label, block, radius, height, redirectOverlay, className, onOpened, onClosed, onRedirected, onFailed }: MaytesButtonProps): react.JSX.Element;
+
+export { MaytesButton, type MaytesButtonProps, type MaytesEventHandlers, MaytesProvider, type MaytesProviderProps, type UseMaytesResult, useMaytes };

package/dist/react.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { MaytesEnvironment, CreateCheckoutFn, OpenCheckoutOptions, OpenCheckoutResult, CheckoutRedirectedDetail, CheckoutFailedDetail, RenderButtonOptions } from '@maytes/checkout-button';
+
+interface MaytesProviderProps {
+    environment: MaytesEnvironment;
+    createCheckout: CreateCheckoutFn;
+    children?: ReactNode;
+}
+declare function MaytesProvider({ environment, createCheckout, children }: MaytesProviderProps): react.JSX.Element;
+interface UseMaytesResult {
+    openCheckout: (options?: OpenCheckoutOptions) => Promise<OpenCheckoutResult>;
+    busy: boolean;
+}
+declare function useMaytes(): UseMaytesResult;
+
+interface MaytesEventHandlers {
+    onOpened?: () => void;
+    onClosed?: () => void;
+    onRedirected?: (detail: CheckoutRedirectedDetail) => void;
+    onFailed?: (detail: CheckoutFailedDetail) => void;
+}
+
+type ButtonAppearance = Pick<RenderButtonOptions, 'mode' | 'label' | 'block' | 'radius' | 'height' | 'redirectOverlay'>;
+type MaytesButtonProps = ButtonAppearance & MaytesEventHandlers & {
+    className?: string;
+};
+declare function MaytesButton({ mode, label, block, radius, height, redirectOverlay, className, onOpened, onClosed, onRedirected, onFailed }: MaytesButtonProps): react.JSX.Element;
+
+export { MaytesButton, type MaytesButtonProps, type MaytesEventHandlers, MaytesProvider, type MaytesProviderProps, type UseMaytesResult, useMaytes };

package/dist/react.mjs

@@ -0,0 +1,117 @@
+"use client";
+
+// src/react/MaytesProvider.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Maytes } from "@maytes/checkout-button";
+import { jsx } from "react/jsx-runtime";
+var MaytesContext = createContext(null);
+function MaytesProvider({ environment, createCheckout, children }) {
+  const createCheckoutRef = useRef(createCheckout);
+  const [maytes, setMaytes] = useState(null);
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    createCheckoutRef.current = createCheckout;
+  });
+  useEffect(() => {
+    const instance = Maytes({ environment, createCheckout: () => createCheckoutRef.current() });
+    const stopWatchingBusy = instance.onBusyChange(setBusy);
+    setMaytes(instance);
+    setBusy(false);
+    return () => {
+      stopWatchingBusy();
+      instance.destroy();
+    };
+  }, [environment]);
+  const value = useMemo(() => ({ maytes, busy }), [maytes, busy]);
+  return /* @__PURE__ */ jsx(MaytesContext.Provider, { value, children });
+}
+var NOT_READY = { outcome: "ignored" };
+function useMaytes() {
+  const context = useContext(MaytesContext);
+  if (context === null) throw new Error("useMaytes() must be used inside <MaytesProvider>.");
+  const { maytes, busy } = context;
+  const openCheckout = useCallback(
+    (options) => maytes === null ? Promise.resolve(NOT_READY) : maytes.openCheckout(options),
+    [maytes]
+  );
+  return { openCheckout, busy };
+}
+
+// src/react/MaytesButton.tsx
+import { useContext as useContext2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/react/events.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function listenToInstanceEvents(target, instanceId, source, handlers) {
+  const belongs = (event) => {
+    const detail = event.detail;
+    if (!isRecord(detail) || detail.instanceId !== instanceId || detail.source !== source) return null;
+    return detail;
+  };
+  const listeners = [
+    ["maytes:checkout-opened", (event) => {
+      if (belongs(event)) handlers().onOpened?.();
+    }],
+    ["maytes:checkout-closed", (event) => {
+      if (belongs(event)) handlers().onClosed?.();
+    }],
+    ["maytes:checkout-redirected", (event) => {
+      const detail = belongs(event);
+      if (detail) handlers().onRedirected?.(detail);
+    }],
+    ["maytes:checkout-failed", (event) => {
+      const detail = belongs(event);
+      if (detail) handlers().onFailed?.(detail);
+    }]
+  ];
+  for (const [name, listener] of listeners) target.addEventListener(name, listener);
+  return () => {
+    for (const [name, listener] of listeners) target.removeEventListener(name, listener);
+  };
+}
+
+// src/react/MaytesButton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function renderOptions({ mode, label, block, radius, height, redirectOverlay }) {
+  const options = {};
+  if (mode !== void 0) options.mode = mode;
+  if (label !== void 0) options.label = label;
+  if (block !== void 0) options.block = block;
+  if (radius !== void 0) options.radius = radius;
+  if (height !== void 0) options.height = height;
+  if (redirectOverlay !== void 0) options.redirectOverlay = redirectOverlay;
+  return options;
+}
+function MaytesButton({ mode, label, block, radius, height, redirectOverlay, className, onOpened, onClosed, onRedirected, onFailed }) {
+  const context = useContext2(MaytesContext);
+  if (context === null) throw new Error("<MaytesButton> must be used inside <MaytesProvider>.");
+  const { maytes } = context;
+  const containerRef = useRef2(null);
+  const handlersRef = useRef2({});
+  useEffect2(() => {
+    const handlers = {};
+    if (onOpened !== void 0) handlers.onOpened = onOpened;
+    if (onClosed !== void 0) handlers.onClosed = onClosed;
+    if (onRedirected !== void 0) handlers.onRedirected = onRedirected;
+    if (onFailed !== void 0) handlers.onFailed = onFailed;
+    handlersRef.current = handlers;
+  });
+  useEffect2(() => {
+    const container = containerRef.current;
+    if (maytes === null || container === null) return void 0;
+    return maytes.renderButton(container, renderOptions({ mode, label, block, radius, height, redirectOverlay }));
+  }, [maytes, mode, label, block, radius, height, redirectOverlay]);
+  useEffect2(() => {
+    if (maytes === null) return void 0;
+    return listenToInstanceEvents(document, maytes.instanceId, "button", () => handlersRef.current);
+  }, [maytes]);
+  return /* @__PURE__ */ jsx2("div", { ref: containerRef, className });
+}
+export {
+  MaytesButton,
+  MaytesProvider,
+  useMaytes
+};
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/MaytesProvider.tsx","../src/react/MaytesButton.tsx","../src/react/events.ts"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport { Maytes } from '@maytes/checkout-button';\nimport type {\n  CreateCheckoutFn,\n  MaytesEnvironment,\n  MaytesSDK,\n  OpenCheckoutOptions,\n  OpenCheckoutResult,\n} from '@maytes/checkout-button';\n\nexport interface MaytesProviderProps {\n  environment: MaytesEnvironment;\n  createCheckout: CreateCheckoutFn;\n  children?: ReactNode;\n}\n\nexport interface MaytesContextValue {\n  maytes: MaytesSDK | null;\n  busy: boolean;\n}\n\nexport const MaytesContext = createContext<MaytesContextValue | null>(null);\n\nexport function MaytesProvider({ environment, createCheckout, children }: MaytesProviderProps) {\n  const createCheckoutRef = useRef(createCheckout);\n  const [maytes, setMaytes] = useState<MaytesSDK | null>(null);\n  const [busy, setBusy] = useState(false);\n\n  useEffect(() => {\n    createCheckoutRef.current = createCheckout;\n  });\n\n  useEffect(() => {\n    const instance = Maytes({ environment, createCheckout: () => createCheckoutRef.current() });\n    const stopWatchingBusy = instance.onBusyChange(setBusy);\n    setMaytes(instance);\n    setBusy(false);\n    return () => {\n      stopWatchingBusy();\n      instance.destroy();\n    };\n  }, [environment]);\n\n  const value = useMemo(() => ({ maytes, busy }), [maytes, busy]);\n  return <MaytesContext.Provider value={value}>{children}</MaytesContext.Provider>;\n}\n\nexport interface UseMaytesResult {\n  openCheckout: (options?: OpenCheckoutOptions) => Promise<OpenCheckoutResult>;\n  busy: boolean;\n}\n\nconst NOT_READY: OpenCheckoutResult = { outcome: 'ignored' };\n\nexport function useMaytes(): UseMaytesResult {\n  const context = useContext(MaytesContext);\n  if (context === null) throw new Error('useMaytes() must be used inside <MaytesProvider>.');\n  const { maytes, busy } = context;\n  const openCheckout = useCallback(\n    (options?: OpenCheckoutOptions) => (maytes === null ? Promise.resolve(NOT_READY) : maytes.openCheckout(options)),\n    [maytes],\n  );\n  return { openCheckout, busy };\n}\n","import { useContext, useEffect, useRef } from 'react';\nimport type { RenderButtonOptions } from '@maytes/checkout-button';\nimport { MaytesContext } from './MaytesProvider.js';\nimport { listenToInstanceEvents, type MaytesEventHandlers } from './events.js';\n\ntype ButtonAppearance = Pick<RenderButtonOptions, 'mode' | 'label' | 'block' | 'radius' | 'height' | 'redirectOverlay'>;\n\ntype AppearanceValues = { [K in keyof ButtonAppearance]-?: ButtonAppearance[K] | undefined };\n\nexport type MaytesButtonProps = ButtonAppearance & MaytesEventHandlers & { className?: string };\n\nfunction renderOptions({ mode, label, block, radius, height, redirectOverlay }: AppearanceValues): RenderButtonOptions {\n  const options: RenderButtonOptions = {};\n  if (mode !== undefined) options.mode = mode;\n  if (label !== undefined) options.label = label;\n  if (block !== undefined) options.block = block;\n  if (radius !== undefined) options.radius = radius;\n  if (height !== undefined) options.height = height;\n  if (redirectOverlay !== undefined) options.redirectOverlay = redirectOverlay;\n  return options;\n}\n\nexport function MaytesButton({ mode, label, block, radius, height, redirectOverlay, className, onOpened, onClosed, onRedirected, onFailed }: MaytesButtonProps) {\n  const context = useContext(MaytesContext);\n  if (context === null) throw new Error('<MaytesButton> must be used inside <MaytesProvider>.');\n  const { maytes } = context;\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const handlersRef = useRef<MaytesEventHandlers>({});\n\n  useEffect(() => {\n    const handlers: MaytesEventHandlers = {};\n    if (onOpened !== undefined) handlers.onOpened = onOpened;\n    if (onClosed !== undefined) handlers.onClosed = onClosed;\n    if (onRedirected !== undefined) handlers.onRedirected = onRedirected;\n    if (onFailed !== undefined) handlers.onFailed = onFailed;\n    handlersRef.current = handlers;\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (maytes === null || container === null) return undefined;\n    return maytes.renderButton(container, renderOptions({ mode, label, block, radius, height, redirectOverlay }));\n  }, [maytes, mode, label, block, radius, height, redirectOverlay]);\n\n  useEffect(() => {\n    if (maytes === null) return undefined;\n    return listenToInstanceEvents(document, maytes.instanceId, 'button', () => handlersRef.current);\n  }, [maytes]);\n\n  return <div ref={containerRef} className={className} />;\n}\n","import type { CheckoutFailedDetail, CheckoutRedirectedDetail, LaunchSource } from '@maytes/checkout-button';\n\nexport interface MaytesEventHandlers {\n  onOpened?: () => void;\n  onClosed?: () => void;\n  onRedirected?: (detail: CheckoutRedirectedDetail) => void;\n  onFailed?: (detail: CheckoutFailedDetail) => void;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null;\n}\n\nexport function listenToInstanceEvents(\n  target: Document,\n  instanceId: string,\n  source: LaunchSource,\n  handlers: () => MaytesEventHandlers,\n): () => void {\n  const belongs = (event: Event): Record<string, unknown> | null => {\n    const detail: unknown = (event as CustomEvent<unknown>).detail;\n    if (!isRecord(detail) || detail.instanceId !== instanceId || detail.source !== source) return null;\n    return detail;\n  };\n\n  const listeners: Array<[string, (event: Event) => void]> = [\n    ['maytes:checkout-opened', (event) => { if (belongs(event)) handlers().onOpened?.(); }],\n    ['maytes:checkout-closed', (event) => { if (belongs(event)) handlers().onClosed?.(); }],\n    ['maytes:checkout-redirected', (event) => {\n      const detail = belongs(event);\n      if (detail) handlers().onRedirected?.(detail as unknown as CheckoutRedirectedDetail);\n    }],\n    ['maytes:checkout-failed', (event) => {\n      const detail = belongs(event);\n      if (detail) handlers().onFailed?.(detail as unknown as CheckoutFailedDetail);\n    }],\n  ];\n\n  for (const [name, listener] of listeners) target.addEventListener(name, listener);\n  return () => {\n    for (const [name, listener] of listeners) target.removeEventListener(name, listener);\n  };\n}\n"],"mappings":"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","names":["useContext","useEffect","useRef","jsx","useContext","useRef","useEffect"]}