@hello-pay/react 0.1.0

package/README.md

@@ -0,0 +1,102 @@
+# @hello-pay/react
+
+HelloPay Elements の React バインディング。加盟店ページ上で任意のレイアウトのカード入力フォームを構築できる。
+
+実体のカード情報は HelloPay 管理ドメイン (js.hello-pay.app) から配信される iframe 内に閉じ込められるため、PCI DSS SAQ A を維持したままネイティブ React で UI を組める。
+
+## Install
+
+```bash
+npm install @hello-pay/react
+# or: pnpm add @hello-pay/react / bun add @hello-pay/react
+```
+
+## Usage
+
+```tsx
+import {
+  loadHelloPay,
+  Elements,
+  CardNumberElement,
+  CardExpiryElement,
+  CardCvcElement,
+  useHelloPay,
+  useElements,
+} from '@hello-pay/react';
+
+// SDK のロードは module スコープで 1 回だけ（Stripe と同じ挙動）。
+// SSR / Next.js でも安全に module top-level に置ける。
+const helloPayPromise = loadHelloPay('pk_test_xxx');
+
+export default function Checkout() {
+  return (
+    <Elements hellopay={helloPayPromise}>
+      <PaymentForm />
+    </Elements>
+  );
+}
+
+function PaymentForm() {
+  const hellopay = useHelloPay();
+  const elements = useElements();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!hellopay || !elements) return;
+
+    const cardNumber = elements.getElement('cardNumber');
+    const { token, card, error } = await hellopay.createToken(cardNumber);
+
+    if (error) {
+      // error.type は 'validation_error' | 'api_error' | 'config_error'
+      showError(error.message);
+      return;
+    }
+    // 以降は token / card が必ず non-null（Discriminated Union）
+    await fetch('/api/charge', {
+      method: 'POST',
+      body: JSON.stringify({ token, last4: card.last4 }),
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <CardNumberElement />
+      <CardExpiryElement />
+      <CardCvcElement />
+      <button type="submit">支払う</button>
+    </form>
+  );
+}
+```
+
+## Scripts
+
+| Script | 内容 |
+|---|---|
+| `bun run build` | tsup で `dist/` に ESM + CJS + `.d.ts` を出力 |
+| `bun run demo` | ローカル demo サーバー (http://localhost:18901) を起動。先に `just dev` が必要 |
+| `bun run typecheck` | 型チェックのみ（`tsc --noEmit`） |
+| `bun run test` | `bun test` 実行 |
+
+## Demo
+
+```bash
+# ターミナル1
+just dev   # HelloPay サーバー起動（js.lvh.me / api.lvh.me / cde.lvh.me を公開）
+
+# ターミナル2
+cd js_sdk/react && bun run demo
+open http://localhost:18901
+```
+
+`.dev-ports` からサーバーポートを自動検出するため、worktree を跨いで設定不要で動作する。
+
+## Architecture
+
+- コア SDK (`hellopay-elements.js`) は HelloPay 管理ドメイン (`js.hello-pay.app`) から配信される。npm パッケージは **ローダーと型定義のみ**を提供する（PCI DSS 要件）。
+- 各 Element コンポーネントは 1 つの `<div>` を描画するだけで、カード情報の入力 iframe はコア SDK が差し込む。
+- iframe 間通信は `BroadcastChannel`（同一オリジン）で行い、親ページ（加盟店）は一切経由しない。
+- トークン化は iframe 内で直接 CDE API に POST する。
+
+より詳細な設計は `docs/src/content/docs/integration/custom-form.md` を参照。

package/dist/index.cjs

@@ -0,0 +1,242 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CardCvcElement: () => CardCvcElement,
+  CardExpiryElement: () => CardExpiryElement,
+  CardNumberElement: () => CardNumberElement,
+  Elements: () => Elements,
+  loadHelloPay: () => loadHelloPay,
+  useElements: () => useElements,
+  useHelloPay: () => useHelloPay
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/loadHelloPay.ts
+var DEFAULT_TEST_SDK_URL = "https://js.test.hello-pay.app/v1/hellopay-elements.js";
+var DEFAULT_LIVE_SDK_URL = "https://js.hello-pay.app/v1/hellopay-elements.js";
+function resolveDefaultSdkUrl(publicKey) {
+  return publicKey.startsWith("pk_test_") ? DEFAULT_TEST_SDK_URL : DEFAULT_LIVE_SDK_URL;
+}
+var scriptPromiseCache = /* @__PURE__ */ new Map();
+var sdkCache = /* @__PURE__ */ new Map();
+function normalizeSdkUrl(url) {
+  if (typeof window === "undefined") return url;
+  try {
+    return new URL(url, window.location.href).href;
+  } catch {
+    return url;
+  }
+}
+function normalizeLocale(locale) {
+  return locale || "ja";
+}
+function loadScript(url) {
+  if (typeof window === "undefined") return Promise.resolve(null);
+  const normalizedUrl = normalizeSdkUrl(url);
+  return new Promise((resolve, reject) => {
+    const managedScripts = Array.from(
+      document.querySelectorAll("script[data-hellopay-sdk]")
+    );
+    const existing = managedScripts.find((script2) => {
+      const rawUrl = script2.dataset.hellopayUrl || script2.src;
+      if (!rawUrl) return false;
+      try {
+        return new URL(rawUrl, window.location.href).href === normalizedUrl;
+      } catch {
+        return rawUrl === normalizedUrl;
+      }
+    });
+    if (existing) {
+      const state = existing.dataset.hellopayState;
+      if (state === "loaded") {
+        resolve(window.HelloPay ?? null);
+        return;
+      }
+      if (state === "loading") {
+        existing.addEventListener("load", () => resolve(window.HelloPay ?? null), {
+          once: true
+        });
+        existing.addEventListener(
+          "error",
+          () => reject(new Error("HelloPay SDK failed to load")),
+          { once: true }
+        );
+        return;
+      }
+      existing.remove();
+    }
+    const script = document.createElement("script");
+    script.src = normalizedUrl;
+    script.async = true;
+    script.dataset.hellopaySdk = "true";
+    script.dataset.hellopayUrl = normalizedUrl;
+    script.dataset.hellopayState = "loading";
+    script.addEventListener(
+      "load",
+      () => {
+        if (!window.HelloPay) {
+          script.dataset.hellopayState = "error";
+          reject(new Error("HelloPay SDK loaded but window.HelloPay is missing"));
+          return;
+        }
+        script.dataset.hellopayState = "loaded";
+        resolve(window.HelloPay);
+      },
+      { once: true }
+    );
+    script.addEventListener(
+      "error",
+      () => {
+        script.dataset.hellopayState = "error";
+        reject(new Error("HelloPay SDK failed to load"));
+      },
+      { once: true }
+    );
+    document.head.appendChild(script);
+  });
+}
+function loadHelloPay(publicKey, options = {}) {
+  const sdkUrl = normalizeSdkUrl(options.sdkUrl ?? resolveDefaultSdkUrl(publicKey));
+  const locale = normalizeLocale(options.locale);
+  const cacheKey = `${publicKey}::${locale}::${sdkUrl}`;
+  const cached = sdkCache.get(cacheKey);
+  if (cached) return cached;
+  let scriptPromise = scriptPromiseCache.get(sdkUrl);
+  if (!scriptPromise) {
+    scriptPromise = loadScript(sdkUrl).catch((err) => {
+      scriptPromiseCache.delete(sdkUrl);
+      throw err;
+    });
+    scriptPromiseCache.set(sdkUrl, scriptPromise);
+  }
+  const sdkPromise = scriptPromise.then((factory) => {
+    if (!factory) return null;
+    return factory(publicKey, { locale: options.locale });
+  }).catch((err) => {
+    sdkCache.delete(cacheKey);
+    throw err;
+  });
+  sdkCache.set(cacheKey, sdkPromise);
+  return sdkPromise;
+}
+
+// src/Elements.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EMPTY_CONTEXT = {
+  hellopay: null,
+  elements: null
+};
+var ElementsContext = (0, import_react.createContext)(EMPTY_CONTEXT);
+function Elements({ hellopay: hellopayProp, children }) {
+  const [ctx, setCtx] = (0, import_react.useState)(EMPTY_CONTEXT);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    setCtx(EMPTY_CONTEXT);
+    Promise.resolve(hellopayProp).then((sdk) => {
+      if (cancelled) return;
+      if (!sdk) {
+        setCtx(EMPTY_CONTEXT);
+        return;
+      }
+      setCtx({ hellopay: sdk, elements: sdk.elements() });
+    }).catch(() => {
+      if (cancelled) return;
+      setCtx(EMPTY_CONTEXT);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [hellopayProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ElementsContext.Provider, { value: ctx, children });
+}
+
+// src/ElementComponents.tsx
+var import_react3 = require("react");
+
+// src/hooks.ts
+var import_react2 = require("react");
+function useHelloPay() {
+  return (0, import_react2.useContext)(ElementsContext).hellopay;
+}
+function useElements() {
+  return (0, import_react2.useContext)(ElementsContext).elements;
+}
+
+// src/ElementComponents.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function createElementComponent(type) {
+  function ElementComponent({
+    options,
+    className,
+    style,
+    onReady,
+    onChange,
+    onFocus,
+    onBlur
+  }) {
+    const elements = useElements();
+    const containerRef = (0, import_react3.useRef)(null);
+    const handlersRef = (0, import_react3.useRef)({ onReady, onChange, onFocus, onBlur });
+    handlersRef.current = { onReady, onChange, onFocus, onBlur };
+    (0, import_react3.useEffect)(() => {
+      if (!elements || !containerRef.current) return;
+      const element = elements.create(type, options);
+      element.mount(containerRef.current);
+      const unsubs = [
+        element.on("ready", (e) => handlersRef.current.onReady?.(e)),
+        element.on("change", (e) => handlersRef.current.onChange?.(e)),
+        element.on("focus", (e) => handlersRef.current.onFocus?.(e)),
+        element.on("blur", (e) => handlersRef.current.onBlur?.(e))
+      ];
+      return () => {
+        unsubs.forEach((u) => u());
+        element.unmount();
+      };
+    }, [elements]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        style: { width: "100%", height: "100%", ...style }
+      }
+    );
+  }
+  ElementComponent.displayName = `HelloPay(${type})`;
+  ElementComponent.__elementType = type;
+  return ElementComponent;
+}
+var CardNumberElement = createElementComponent("cardNumber");
+var CardExpiryElement = createElementComponent("cardExpiry");
+var CardCvcElement = createElementComponent("cardCvc");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardCvcElement,
+  CardExpiryElement,
+  CardNumberElement,
+  Elements,
+  loadHelloPay,
+  useElements,
+  useHelloPay
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/loadHelloPay.ts","../src/Elements.tsx","../src/ElementComponents.tsx","../src/hooks.ts"],"sourcesContent":["export { loadHelloPay } from './loadHelloPay';\nexport type { LoadHelloPayOptions } from './loadHelloPay';\n\nexport { Elements } from './Elements';\nexport type { ElementsProps } from './Elements';\n\nexport {\n  CardNumberElement,\n  CardExpiryElement,\n  CardCvcElement,\n} from './ElementComponents';\nexport type { ElementProps } from './ElementComponents';\n\nexport { useHelloPay, useElements } from './hooks';\n\nexport type {\n  HelloPay,\n  Elements as ElementsSession,\n  Element,\n  ElementType,\n  ElementOptions,\n  ElementStyle,\n  ElementChangeEvent,\n  ElementFocusEvent,\n  ElementReadyEvent,\n  TokenCard,\n  HelloPayError,\n  CreateTokenResult,\n  Unsubscribe,\n} from './types';\n","/**\n * HelloPay SDK ローダー。\n *\n * HelloPay 管理下のドメイン（js.hello-pay.app 等）から SDK を動的ロードし、\n * `window.HelloPay` ファクトリを解決する。\n *\n * - 同一 sdkUrl への呼び出しは script tag を 1 回だけ挿入（dedup）\n * - 異なる sdkUrl は独立したロードを維持（E2E / ローカル切り替え対応）\n * - SSR 環境では Promise<null> を解決（加盟店側で null チェック）\n * - 一時的な失敗はキャッシュせず次回呼び出しで再試行可能\n */\n\nimport type { HelloPay, HelloPayFactory } from './types';\n\nconst DEFAULT_TEST_SDK_URL = 'https://js.test.hello-pay.app/v1/hellopay-elements.js';\nconst DEFAULT_LIVE_SDK_URL = 'https://js.hello-pay.app/v1/hellopay-elements.js';\n\n/** publicKey のプレフィックスに基づいてデフォルト SDK URL を解決する。 */\nfunction resolveDefaultSdkUrl(publicKey: string): string {\n  return publicKey.startsWith('pk_test_') ? DEFAULT_TEST_SDK_URL : DEFAULT_LIVE_SDK_URL;\n}\n\n// sdkUrl 単位で script ロード Promise をキャッシュ。\n// loadPromise を単一変数にするとすべての URL で共有されてしまい、\n// 異なる sdkUrl（E2E / ローカル開発）が誤って同一ロードを共有する。\nconst scriptPromiseCache = new Map<string, Promise<HelloPayFactory | null>>();\n\n// publicKey + locale + sdkUrl の組み合わせごとに `HelloPaySDK` インスタンスをキャッシュ。\n// 加盟店が誤って inline で loadHelloPay を呼び出した場合でも同一 SDK インスタンスが\n// 返るようにして、Elements セッションの BroadcastChannel session ID ミスマッチを防ぐ。\nconst sdkCache = new Map<string, Promise<HelloPay | null>>();\n\n/** テスト専用: module-scope のキャッシュをすべて初期状態に戻す。 */\nexport function __resetLoadPromiseForTest(): void {\n  scriptPromiseCache.clear();\n  sdkCache.clear();\n}\n\nfunction normalizeSdkUrl(url: string): string {\n  if (typeof window === 'undefined') return url;\n\n  try {\n    return new URL(url, window.location.href).href;\n  } catch {\n    return url;\n  }\n}\n\nfunction normalizeLocale(locale?: string): string {\n  return locale || 'ja';\n}\n\nfunction loadScript(url: string): Promise<HelloPayFactory | null> {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n\n  // URL を正規化してプロトコル省略形などを統一する。\n  // テスト / SSR 環境では window.location が http URL でない場合があるため try-catch で保護。\n  const normalizedUrl = normalizeSdkUrl(url);\n\n  return new Promise((resolve, reject) => {\n    // script は URL 単位で管理する。異なる URL の script を削除せず共存させることで、\n    // E2E / ローカル開発で異なる sdkUrl が並列で呼ばれても Promise が宙吊りにならない。\n    // 状態は dataset.hellopayState に \"loading\" | \"loaded\" | \"error\" で刻む。\n    const managedScripts = Array.from(\n      document.querySelectorAll<HTMLScriptElement>('script[data-hellopay-sdk]'),\n    );\n\n    const existing = managedScripts.find((script) => {\n      const rawUrl = script.dataset.hellopayUrl || script.src;\n      if (!rawUrl) return false;\n      try {\n        return new URL(rawUrl, window.location.href).href === normalizedUrl;\n      } catch {\n        return rawUrl === normalizedUrl;\n      }\n    });\n\n    if (existing) {\n      const state = existing.dataset.hellopayState;\n      if (state === 'loaded') {\n        resolve(window.HelloPay ?? null);\n        return;\n      }\n      if (state === 'loading') {\n        existing.addEventListener('load', () => resolve(window.HelloPay ?? null), {\n          once: true,\n        });\n        existing.addEventListener(\n          'error',\n          () => reject(new Error('HelloPay SDK failed to load')),\n          { once: true },\n        );\n        return;\n      }\n      // state === \"error\" or undefined: 失敗済み or 未知の状態なので作り直す\n      existing.remove();\n    }\n\n    const script = document.createElement('script');\n    script.src = normalizedUrl;\n    script.async = true;\n    script.dataset.hellopaySdk = 'true';\n    script.dataset.hellopayUrl = normalizedUrl; // URL 比較用\n    script.dataset.hellopayState = 'loading';\n    script.addEventListener(\n      'load',\n      () => {\n        if (!window.HelloPay) {\n          script.dataset.hellopayState = 'error';\n          reject(new Error('HelloPay SDK loaded but window.HelloPay is missing'));\n          return;\n        }\n        script.dataset.hellopayState = 'loaded';\n        resolve(window.HelloPay);\n      },\n      { once: true },\n    );\n    script.addEventListener(\n      'error',\n      () => {\n        script.dataset.hellopayState = 'error';\n        reject(new Error('HelloPay SDK failed to load'));\n      },\n      { once: true },\n    );\n    document.head.appendChild(script);\n  });\n}\n\nexport interface LoadHelloPayOptions {\n  /** SDK 配信 URL（ローカル開発・E2E で差し替える用。省略時は publicKey に基づいて test/live を自動解決） */\n  sdkUrl?: string;\n  locale?: string;\n}\n\n/**\n * HelloPay SDK をロードして初期化する。\n * モジュールスコープで 1 回だけ呼び、返り値の Promise を `<Elements>` に渡す。\n */\nexport function loadHelloPay(\n  publicKey: string,\n  options: LoadHelloPayOptions = {},\n): Promise<HelloPay | null> {\n  const sdkUrl = normalizeSdkUrl(options.sdkUrl ?? resolveDefaultSdkUrl(publicKey));\n  const locale = normalizeLocale(options.locale);\n  const cacheKey = `${publicKey}::${locale}::${sdkUrl}`;\n  const cached = sdkCache.get(cacheKey);\n  if (cached) return cached;\n\n  let scriptPromise = scriptPromiseCache.get(sdkUrl);\n  if (!scriptPromise) {\n    scriptPromise = loadScript(sdkUrl).catch((err) => {\n      // 一時的なロード失敗はキャッシュせず次回呼び出しで再試行可能にする\n      scriptPromiseCache.delete(sdkUrl);\n      throw err;\n    });\n    scriptPromiseCache.set(sdkUrl, scriptPromise);\n  }\n\n  const sdkPromise = scriptPromise\n    .then((factory) => {\n      if (!factory) return null; // SSR\n      return factory(publicKey, { locale: options.locale });\n    })\n    .catch((err) => {\n      // SDK インスタンス生成失敗は sdkCache から退避して次回呼び出しで再試行可能にする\n      sdkCache.delete(cacheKey);\n      throw err;\n    });\n  sdkCache.set(cacheKey, sdkPromise);\n  return sdkPromise;\n}\n","/**\n * <Elements> Provider.\n *\n * loadHelloPay() の Promise を受け取り、SDK インスタンスと Elements セッションを\n * 子孫に Context 経由で供給する。\n */\n\nimport { createContext, useEffect, useState, type ReactNode } from 'react';\nimport type { HelloPay, Elements as ElementsSession } from './types';\n\nexport interface ElementsContextValue {\n  hellopay: HelloPay | null;\n  elements: ElementsSession | null;\n}\n\nconst EMPTY_CONTEXT: ElementsContextValue = {\n  hellopay: null,\n  elements: null,\n};\n\nexport const ElementsContext = createContext<ElementsContextValue>(EMPTY_CONTEXT);\n\nexport interface ElementsProps {\n  /** loadHelloPay() の戻り値。モジュールスコープで 1 回だけ生成すること */\n  hellopay: Promise<HelloPay | null> | HelloPay | null;\n  children: ReactNode;\n}\n\nexport function Elements({ hellopay: hellopayProp, children }: ElementsProps) {\n  const [ctx, setCtx] = useState<ElementsContextValue>(EMPTY_CONTEXT);\n\n  useEffect(() => {\n    let cancelled = false;\n    setCtx(EMPTY_CONTEXT);\n\n    Promise.resolve(hellopayProp)\n      .then((sdk) => {\n        if (cancelled) return;\n        if (!sdk) {\n          setCtx(EMPTY_CONTEXT);\n          return;\n        }\n        setCtx({ hellopay: sdk, elements: sdk.elements() });\n      })\n      .catch(() => {\n        // SDK ロード失敗時は null のまま（unhandled rejection を防ぐ）\n        if (cancelled) return;\n        setCtx(EMPTY_CONTEXT);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [hellopayProp]);\n\n  return <ElementsContext.Provider value={ctx}>{children}</ElementsContext.Provider>;\n}\n","/**\n * Element コンポーネント。\n *\n * 各コンポーネントは 1 つの `<div>` コンテナを描画するだけで、\n * 実体（カード情報が入る iframe）はコア SDK が差し込む。\n *\n * React Strict Mode の二重 mount 対応:\n *   - effect の cleanup で element.unmount() を必ず呼ぶ\n *   - unmount 後は Elements._elements 配列から除外される（コア SDK 側で対応済）\n *   - 結果として Strict Mode で effect が再実行されても古い iframe は残らない\n */\n\nimport { useEffect, useRef, type CSSProperties } from 'react';\nimport { useElements } from './hooks';\nimport type {\n  ElementType,\n  ElementOptions,\n  ElementChangeEvent,\n  ElementFocusEvent,\n  ElementReadyEvent,\n} from './types';\n\nexport interface ElementProps {\n  options?: ElementOptions;\n  className?: string;\n  style?: CSSProperties;\n  onReady?: (e: ElementReadyEvent) => void;\n  onChange?: (e: ElementChangeEvent) => void;\n  onFocus?: (e: ElementFocusEvent) => void;\n  onBlur?: (e: ElementFocusEvent) => void;\n}\n\n/**\n * 指定 type の Element を管理する React コンポーネントを生成する。\n */\nfunction createElementComponent(type: ElementType) {\n  function ElementComponent({\n    options,\n    className,\n    style,\n    onReady,\n    onChange,\n    onFocus,\n    onBlur,\n  }: ElementProps) {\n    const elements = useElements();\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    // 最新のハンドラを ref で保持（effect を毎回 re-run させないため）\n    const handlersRef = useRef({ onReady, onChange, onFocus, onBlur });\n    handlersRef.current = { onReady, onChange, onFocus, onBlur };\n\n    useEffect(() => {\n      if (!elements || !containerRef.current) return;\n\n      const element = elements.create(type, options);\n      element.mount(containerRef.current);\n\n      const unsubs = [\n        element.on('ready', (e) => handlersRef.current.onReady?.(e)),\n        element.on('change', (e) => handlersRef.current.onChange?.(e)),\n        element.on('focus', (e) => handlersRef.current.onFocus?.(e)),\n        element.on('blur', (e) => handlersRef.current.onBlur?.(e)),\n      ];\n\n      return () => {\n        unsubs.forEach((u) => u());\n        element.unmount();\n      };\n      // options はマウント時にしか反映しない方針（Stripe と同じ挙動）。\n      // 動的に style を変えたい場合は後続 PR で element.update() を追加。\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [elements]);\n\n    // 親コンテナ（加盟店が指定した `.element-container` 等）の高さを\n    // iframe に伝播させるため、wrapper は親のサイズを塗りつぶす。\n    // style prop で上書き可能。\n    return (\n      <div\n        ref={containerRef}\n        className={className}\n        style={{ width: '100%', height: '100%', ...style }}\n      />\n    );\n  }\n  ElementComponent.displayName = `HelloPay(${type})`;\n  // getElement(CardNumberElement) のようにコンポーネント自身を型指定子として使えるよう、\n  // 静的プロパティに type を生やしておく\n  ElementComponent.__elementType = type as ElementType;\n  return ElementComponent;\n}\n\nexport const CardNumberElement = createElementComponent('cardNumber');\nexport const CardExpiryElement = createElementComponent('cardExpiry');\nexport const CardCvcElement = createElementComponent('cardCvc');\n\nexport type ElementComponent = typeof CardNumberElement;\n","/**\n * React hooks.\n *\n * useHelloPay / useElements は <Elements> Provider の Context から\n * SDK インスタンスと Elements セッションを取り出す。\n * SDK ロード完了までは null を返すので、ハンドラ内で null チェックする。\n */\n\nimport { useContext } from 'react';\nimport { ElementsContext } from './Elements';\nimport type { HelloPay, Elements } from './types';\n\nexport function useHelloPay(): HelloPay | null {\n  return useContext(ElementsContext).hellopay;\n}\n\nexport function useElements(): Elements | null {\n  return useContext(ElementsContext).elements;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACcA,IAAM,uBAAuB;AAC7B,IAAM,uBAAuB;AAG7B,SAAS,qBAAqB,WAA2B;AACvD,SAAO,UAAU,WAAW,UAAU,IAAI,uBAAuB;AACnE;AAKA,IAAM,qBAAqB,oBAAI,IAA6C;AAK5E,IAAM,WAAW,oBAAI,IAAsC;AAQ3D,SAAS,gBAAgB,KAAqB;AAC5C,MAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,MAAI;AACF,WAAO,IAAI,IAAI,KAAK,OAAO,SAAS,IAAI,EAAE;AAAA,EAC5C,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,gBAAgB,QAAyB;AAChD,SAAO,UAAU;AACnB;AAEA,SAAS,WAAW,KAA8C;AAChE,MAAI,OAAO,WAAW,YAAa,QAAO,QAAQ,QAAQ,IAAI;AAI9D,QAAM,gBAAgB,gBAAgB,GAAG;AAEzC,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AAItC,UAAM,iBAAiB,MAAM;AAAA,MAC3B,SAAS,iBAAoC,2BAA2B;AAAA,IAC1E;AAEA,UAAM,WAAW,eAAe,KAAK,CAACA,YAAW;AAC/C,YAAM,SAASA,QAAO,QAAQ,eAAeA,QAAO;AACpD,UAAI,CAAC,OAAQ,QAAO;AACpB,UAAI;AACF,eAAO,IAAI,IAAI,QAAQ,OAAO,SAAS,IAAI,EAAE,SAAS;AAAA,MACxD,QAAQ;AACN,eAAO,WAAW;AAAA,MACpB;AAAA,IACF,CAAC;AAED,QAAI,UAAU;AACZ,YAAM,QAAQ,SAAS,QAAQ;AAC/B,UAAI,UAAU,UAAU;AACtB,gBAAQ,OAAO,YAAY,IAAI;AAC/B;AAAA,MACF;AACA,UAAI,UAAU,WAAW;AACvB,iBAAS,iBAAiB,QAAQ,MAAM,QAAQ,OAAO,YAAY,IAAI,GAAG;AAAA,UACxE,MAAM;AAAA,QACR,CAAC;AACD,iBAAS;AAAA,UACP;AAAA,UACA,MAAM,OAAO,IAAI,MAAM,6BAA6B,CAAC;AAAA,UACrD,EAAE,MAAM,KAAK;AAAA,QACf;AACA;AAAA,MACF;AAEA,eAAS,OAAO;AAAA,IAClB;AAEA,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,MAAM;AACb,WAAO,QAAQ;AACf,WAAO,QAAQ,cAAc;AAC7B,WAAO,QAAQ,cAAc;AAC7B,WAAO,QAAQ,gBAAgB;AAC/B,WAAO;AAAA,MACL;AAAA,MACA,MAAM;AACJ,YAAI,CAAC,OAAO,UAAU;AACpB,iBAAO,QAAQ,gBAAgB;AAC/B,iBAAO,IAAI,MAAM,oDAAoD,CAAC;AACtE;AAAA,QACF;AACA,eAAO,QAAQ,gBAAgB;AAC/B,gBAAQ,OAAO,QAAQ;AAAA,MACzB;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACf;AACA,WAAO;AAAA,MACL;AAAA,MACA,MAAM;AACJ,eAAO,QAAQ,gBAAgB;AAC/B,eAAO,IAAI,MAAM,6BAA6B,CAAC;AAAA,MACjD;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACf;AACA,aAAS,KAAK,YAAY,MAAM;AAAA,EAClC,CAAC;AACH;AAYO,SAAS,aACd,WACA,UAA+B,CAAC,GACN;AAC1B,QAAM,SAAS,gBAAgB,QAAQ,UAAU,qBAAqB,SAAS,CAAC;AAChF,QAAM,SAAS,gBAAgB,QAAQ,MAAM;AAC7C,QAAM,WAAW,GAAG,SAAS,KAAK,MAAM,KAAK,MAAM;AACnD,QAAM,SAAS,SAAS,IAAI,QAAQ;AACpC,MAAI,OAAQ,QAAO;AAEnB,MAAI,gBAAgB,mBAAmB,IAAI,MAAM;AACjD,MAAI,CAAC,eAAe;AAClB,oBAAgB,WAAW,MAAM,EAAE,MAAM,CAAC,QAAQ;AAEhD,yBAAmB,OAAO,MAAM;AAChC,YAAM;AAAA,IACR,CAAC;AACD,uBAAmB,IAAI,QAAQ,aAAa;AAAA,EAC9C;AAEA,QAAM,aAAa,cAChB,KAAK,CAAC,YAAY;AACjB,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,QAAQ,WAAW,EAAE,QAAQ,QAAQ,OAAO,CAAC;AAAA,EACtD,CAAC,EACA,MAAM,CAAC,QAAQ;AAEd,aAAS,OAAO,QAAQ;AACxB,UAAM;AAAA,EACR,CAAC;AACH,WAAS,IAAI,UAAU,UAAU;AACjC,SAAO;AACT;;;ACpKA,mBAAmE;AAgD1D;AAxCT,IAAM,gBAAsC;AAAA,EAC1C,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,IAAM,sBAAkB,4BAAoC,aAAa;AAQzE,SAAS,SAAS,EAAE,UAAU,cAAc,SAAS,GAAkB;AAC5E,QAAM,CAAC,KAAK,MAAM,QAAI,uBAA+B,aAAa;AAElE,8BAAU,MAAM;AACd,QAAI,YAAY;AAChB,WAAO,aAAa;AAEpB,YAAQ,QAAQ,YAAY,EACzB,KAAK,CAAC,QAAQ;AACb,UAAI,UAAW;AACf,UAAI,CAAC,KAAK;AACR,eAAO,aAAa;AACpB;AAAA,MACF;AACA,aAAO,EAAE,UAAU,KAAK,UAAU,IAAI,SAAS,EAAE,CAAC;AAAA,IACpD,CAAC,EACA,MAAM,MAAM;AAEX,UAAI,UAAW;AACf,aAAO,aAAa;AAAA,IACtB,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO,4CAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAAM,UAAS;AACzD;;;AC5CA,IAAAC,gBAAsD;;;ACJtD,IAAAC,gBAA2B;AAIpB,SAAS,cAA+B;AAC7C,aAAO,0BAAW,eAAe,EAAE;AACrC;AAEO,SAAS,cAA+B;AAC7C,aAAO,0BAAW,eAAe,EAAE;AACrC;;;AD4DM,IAAAC,sBAAA;AA3CN,SAAS,uBAAuB,MAAmB;AACjD,WAAS,iBAAiB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAAiB;AACf,UAAM,WAAW,YAAY;AAC7B,UAAM,mBAAe,sBAA8B,IAAI;AAGvD,UAAM,kBAAc,sBAAO,EAAE,SAAS,UAAU,SAAS,OAAO,CAAC;AACjE,gBAAY,UAAU,EAAE,SAAS,UAAU,SAAS,OAAO;AAE3D,iCAAU,MAAM;AACd,UAAI,CAAC,YAAY,CAAC,aAAa,QAAS;AAExC,YAAM,UAAU,SAAS,OAAO,MAAM,OAAO;AAC7C,cAAQ,MAAM,aAAa,OAAO;AAElC,YAAM,SAAS;AAAA,QACb,QAAQ,GAAG,SAAS,CAAC,MAAM,YAAY,QAAQ,UAAU,CAAC,CAAC;AAAA,QAC3D,QAAQ,GAAG,UAAU,CAAC,MAAM,YAAY,QAAQ,WAAW,CAAC,CAAC;AAAA,QAC7D,QAAQ,GAAG,SAAS,CAAC,MAAM,YAAY,QAAQ,UAAU,CAAC,CAAC;AAAA,QAC3D,QAAQ,GAAG,QAAQ,CAAC,MAAM,YAAY,QAAQ,SAAS,CAAC,CAAC;AAAA,MAC3D;AAEA,aAAO,MAAM;AACX,eAAO,QAAQ,CAAC,MAAM,EAAE,CAAC;AACzB,gBAAQ,QAAQ;AAAA,MAClB;AAAA,IAIF,GAAG,CAAC,QAAQ,CAAC;AAKb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,GAAG,MAAM;AAAA;AAAA,IACnD;AAAA,EAEJ;AACA,mBAAiB,cAAc,YAAY,IAAI;AAG/C,mBAAiB,gBAAgB;AACjC,SAAO;AACT;AAEO,IAAM,oBAAoB,uBAAuB,YAAY;AAC7D,IAAM,oBAAoB,uBAAuB,YAAY;AAC7D,IAAM,iBAAiB,uBAAuB,SAAS;","names":["script","import_react","import_react","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,176 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+
+/**
+ * HelloPay Elements SDK の型定義
+ *
+ * コア SDK (hellopay-elements.js) はグローバル `window.HelloPay` として
+ * 読み込まれる。これは PCI DSS の要件（カード入力関連スクリプトを
+ * HelloPay 管理ドメインから配信）を満たすため。
+ * npm パッケージは型定義とローダーのみを提供する。
+ */
+type ElementType = 'cardNumber' | 'cardExpiry' | 'cardCvc';
+interface ElementStyle {
+    base?: {
+        color?: string;
+        fontSize?: string;
+        fontFamily?: string;
+        fontWeight?: string;
+        fontStyle?: string;
+        letterSpacing?: string;
+        lineHeight?: string;
+        textAlign?: string;
+        textTransform?: string;
+        '::placeholder'?: {
+            color?: string;
+        };
+    };
+}
+interface ElementOptions {
+    style?: ElementStyle;
+}
+interface ElementChangeEvent {
+    elementType: ElementType;
+    empty: boolean;
+    complete: boolean;
+    brand?: string | null;
+}
+interface ElementFocusEvent {
+    elementType: ElementType;
+}
+interface ElementReadyEvent {
+    elementType: ElementType;
+}
+type ElementEventMap = {
+    ready: ElementReadyEvent;
+    change: ElementChangeEvent;
+    focus: ElementFocusEvent;
+    blur: ElementFocusEvent;
+};
+type Unsubscribe = () => void;
+interface Element {
+    type: ElementType;
+    mount(target: string | HTMLElement): void;
+    unmount(): void;
+    on<K extends keyof ElementEventMap>(event: K, handler: (e: ElementEventMap[K]) => void): Unsubscribe;
+    off<K extends keyof ElementEventMap>(event: K, handler: (e: ElementEventMap[K]) => void): void;
+}
+interface Elements$1 {
+    create(type: ElementType, options?: ElementOptions): Element;
+    getElement(type: ElementType): Element | null;
+}
+interface TokenCard {
+    brand: string;
+    last4: string;
+    expMonth: string;
+    expYear: string;
+}
+interface HelloPayError {
+    type: 'validation_error' | 'api_error' | 'config_error';
+    code: string;
+    message: string;
+}
+/**
+ * createToken の返り値。Discriminated Union により、success 時は
+ * token/card のみ、error 時は error のみが型として存在する。
+ *
+ * ```ts
+ * const { token, card, error } = await hellopay.createToken(el);
+ * if (error) return showError(error.message);
+ * sendToServer(token, card);
+ * ```
+ */
+type CreateTokenResult = {
+    token: string;
+    card: TokenCard;
+    error?: undefined;
+} | {
+    token?: undefined;
+    card?: undefined;
+    error: HelloPayError;
+};
+interface HelloPay {
+    elements(): Elements$1;
+    createToken(cardNumberElement: Element): Promise<CreateTokenResult>;
+}
+type HelloPayFactory = (publicKey: string, options?: {
+    locale?: string;
+}) => HelloPay;
+declare global {
+    interface Window {
+        HelloPay?: HelloPayFactory;
+        /**
+         * ローカル開発・E2E 用: SDK 本体の配信 URL を上書きする。
+         * 本番では設定不要（`loadHelloPay(sdkUrl)` のデフォルトが使われる）。
+         */
+        HELLOPAY_ELEMENTS_URL?: string;
+    }
+}
+
+/**
+ * HelloPay SDK ローダー。
+ *
+ * HelloPay 管理下のドメイン（js.hello-pay.app 等）から SDK を動的ロードし、
+ * `window.HelloPay` ファクトリを解決する。
+ *
+ * - 同一 sdkUrl への呼び出しは script tag を 1 回だけ挿入（dedup）
+ * - 異なる sdkUrl は独立したロードを維持（E2E / ローカル切り替え対応）
+ * - SSR 環境では Promise<null> を解決（加盟店側で null チェック）
+ * - 一時的な失敗はキャッシュせず次回呼び出しで再試行可能
+ */
+
+interface LoadHelloPayOptions {
+    /** SDK 配信 URL（ローカル開発・E2E で差し替える用。省略時は publicKey に基づいて test/live を自動解決） */
+    sdkUrl?: string;
+    locale?: string;
+}
+/**
+ * HelloPay SDK をロードして初期化する。
+ * モジュールスコープで 1 回だけ呼び、返り値の Promise を `<Elements>` に渡す。
+ */
+declare function loadHelloPay(publicKey: string, options?: LoadHelloPayOptions): Promise<HelloPay | null>;
+
+interface ElementsProps {
+    /** loadHelloPay() の戻り値。モジュールスコープで 1 回だけ生成すること */
+    hellopay: Promise<HelloPay | null> | HelloPay | null;
+    children: ReactNode;
+}
+declare function Elements({ hellopay: hellopayProp, children }: ElementsProps): react_jsx_runtime.JSX.Element;
+
+interface ElementProps {
+    options?: ElementOptions;
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (e: ElementReadyEvent) => void;
+    onChange?: (e: ElementChangeEvent) => void;
+    onFocus?: (e: ElementFocusEvent) => void;
+    onBlur?: (e: ElementFocusEvent) => void;
+}
+declare const CardNumberElement: {
+    ({ options, className, style, onReady, onChange, onFocus, onBlur, }: ElementProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+    __elementType: ElementType;
+};
+declare const CardExpiryElement: {
+    ({ options, className, style, onReady, onChange, onFocus, onBlur, }: ElementProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+    __elementType: ElementType;
+};
+declare const CardCvcElement: {
+    ({ options, className, style, onReady, onChange, onFocus, onBlur, }: ElementProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+    __elementType: ElementType;
+};
+
+/**
+ * React hooks.
+ *
+ * useHelloPay / useElements は <Elements> Provider の Context から
+ * SDK インスタンスと Elements セッションを取り出す。
+ * SDK ロード完了までは null を返すので、ハンドラ内で null チェックする。
+ */
+
+declare function useHelloPay(): HelloPay | null;
+declare function useElements(): Elements$1 | null;
+
+export { CardCvcElement, CardExpiryElement, CardNumberElement, type CreateTokenResult, type Element, type ElementChangeEvent, type ElementFocusEvent, type ElementOptions, type ElementProps, type ElementReadyEvent, type ElementStyle, type ElementType, Elements, type ElementsProps, type Elements$1 as ElementsSession, type HelloPay, type HelloPayError, type LoadHelloPayOptions, type TokenCard, type Unsubscribe, loadHelloPay, useElements, useHelloPay };

package/dist/index.d.ts

@@ -0,0 +1,176 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, CSSProperties } from 'react';
+
+/**
+ * HelloPay Elements SDK の型定義
+ *
+ * コア SDK (hellopay-elements.js) はグローバル `window.HelloPay` として
+ * 読み込まれる。これは PCI DSS の要件（カード入力関連スクリプトを
+ * HelloPay 管理ドメインから配信）を満たすため。
+ * npm パッケージは型定義とローダーのみを提供する。
+ */
+type ElementType = 'cardNumber' | 'cardExpiry' | 'cardCvc';
+interface ElementStyle {
+    base?: {
+        color?: string;
+        fontSize?: string;
+        fontFamily?: string;
+        fontWeight?: string;
+        fontStyle?: string;
+        letterSpacing?: string;
+        lineHeight?: string;
+        textAlign?: string;
+        textTransform?: string;
+        '::placeholder'?: {
+            color?: string;
+        };
+    };
+}
+interface ElementOptions {
+    style?: ElementStyle;
+}
+interface ElementChangeEvent {
+    elementType: ElementType;
+    empty: boolean;
+    complete: boolean;
+    brand?: string | null;
+}
+interface ElementFocusEvent {
+    elementType: ElementType;
+}
+interface ElementReadyEvent {
+    elementType: ElementType;
+}
+type ElementEventMap = {
+    ready: ElementReadyEvent;
+    change: ElementChangeEvent;
+    focus: ElementFocusEvent;
+    blur: ElementFocusEvent;
+};
+type Unsubscribe = () => void;
+interface Element {
+    type: ElementType;
+    mount(target: string | HTMLElement): void;
+    unmount(): void;
+    on<K extends keyof ElementEventMap>(event: K, handler: (e: ElementEventMap[K]) => void): Unsubscribe;
+    off<K extends keyof ElementEventMap>(event: K, handler: (e: ElementEventMap[K]) => void): void;
+}
+interface Elements$1 {
+    create(type: ElementType, options?: ElementOptions): Element;
+    getElement(type: ElementType): Element | null;
+}
+interface TokenCard {
+    brand: string;
+    last4: string;
+    expMonth: string;
+    expYear: string;
+}
+interface HelloPayError {
+    type: 'validation_error' | 'api_error' | 'config_error';
+    code: string;
+    message: string;
+}
+/**
+ * createToken の返り値。Discriminated Union により、success 時は
+ * token/card のみ、error 時は error のみが型として存在する。
+ *
+ * ```ts
+ * const { token, card, error } = await hellopay.createToken(el);
+ * if (error) return showError(error.message);
+ * sendToServer(token, card);
+ * ```
+ */
+type CreateTokenResult = {
+    token: string;
+    card: TokenCard;
+    error?: undefined;
+} | {
+    token?: undefined;
+    card?: undefined;
+    error: HelloPayError;
+};
+interface HelloPay {
+    elements(): Elements$1;
+    createToken(cardNumberElement: Element): Promise<CreateTokenResult>;
+}
+type HelloPayFactory = (publicKey: string, options?: {
+    locale?: string;
+}) => HelloPay;
+declare global {
+    interface Window {
+        HelloPay?: HelloPayFactory;
+        /**
+         * ローカル開発・E2E 用: SDK 本体の配信 URL を上書きする。
+         * 本番では設定不要（`loadHelloPay(sdkUrl)` のデフォルトが使われる）。
+         */
+        HELLOPAY_ELEMENTS_URL?: string;
+    }
+}
+
+/**
+ * HelloPay SDK ローダー。
+ *
+ * HelloPay 管理下のドメイン（js.hello-pay.app 等）から SDK を動的ロードし、
+ * `window.HelloPay` ファクトリを解決する。
+ *
+ * - 同一 sdkUrl への呼び出しは script tag を 1 回だけ挿入（dedup）
+ * - 異なる sdkUrl は独立したロードを維持（E2E / ローカル切り替え対応）
+ * - SSR 環境では Promise<null> を解決（加盟店側で null チェック）
+ * - 一時的な失敗はキャッシュせず次回呼び出しで再試行可能
+ */
+
+interface LoadHelloPayOptions {
+    /** SDK 配信 URL（ローカル開発・E2E で差し替える用。省略時は publicKey に基づいて test/live を自動解決） */
+    sdkUrl?: string;
+    locale?: string;
+}
+/**
+ * HelloPay SDK をロードして初期化する。
+ * モジュールスコープで 1 回だけ呼び、返り値の Promise を `<Elements>` に渡す。
+ */
+declare function loadHelloPay(publicKey: string, options?: LoadHelloPayOptions): Promise<HelloPay | null>;
+
+interface ElementsProps {
+    /** loadHelloPay() の戻り値。モジュールスコープで 1 回だけ生成すること */
+    hellopay: Promise<HelloPay | null> | HelloPay | null;
+    children: ReactNode;
+}
+declare function Elements({ hellopay: hellopayProp, children }: ElementsProps): react_jsx_runtime.JSX.Element;
+
+interface ElementProps {
+    options?: ElementOptions;
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (e: ElementReadyEvent) => void;
+    onChange?: (e: ElementChangeEvent) => void;
+    onFocus?: (e: ElementFocusEvent) => void;
+    onBlur?: (e: ElementFocusEvent) => void;
+}
+declare const CardNumberElement: {
+    ({ options, className, style, onReady, onChange, onFocus, onBlur, }: ElementProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+    __elementType: ElementType;
+};
+declare const CardExpiryElement: {
+    ({ options, className, style, onReady, onChange, onFocus, onBlur, }: ElementProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+    __elementType: ElementType;
+};
+declare const CardCvcElement: {
+    ({ options, className, style, onReady, onChange, onFocus, onBlur, }: ElementProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+    __elementType: ElementType;
+};
+
+/**
+ * React hooks.
+ *
+ * useHelloPay / useElements は <Elements> Provider の Context から
+ * SDK インスタンスと Elements セッションを取り出す。
+ * SDK ロード完了までは null を返すので、ハンドラ内で null チェックする。
+ */
+
+declare function useHelloPay(): HelloPay | null;
+declare function useElements(): Elements$1 | null;
+
+export { CardCvcElement, CardExpiryElement, CardNumberElement, type CreateTokenResult, type Element, type ElementChangeEvent, type ElementFocusEvent, type ElementOptions, type ElementProps, type ElementReadyEvent, type ElementStyle, type ElementType, Elements, type ElementsProps, type Elements$1 as ElementsSession, type HelloPay, type HelloPayError, type LoadHelloPayOptions, type TokenCard, type Unsubscribe, loadHelloPay, useElements, useHelloPay };

package/dist/index.js

@@ -0,0 +1,209 @@
+// src/loadHelloPay.ts
+var DEFAULT_TEST_SDK_URL = "https://js.test.hello-pay.app/v1/hellopay-elements.js";
+var DEFAULT_LIVE_SDK_URL = "https://js.hello-pay.app/v1/hellopay-elements.js";
+function resolveDefaultSdkUrl(publicKey) {
+  return publicKey.startsWith("pk_test_") ? DEFAULT_TEST_SDK_URL : DEFAULT_LIVE_SDK_URL;
+}
+var scriptPromiseCache = /* @__PURE__ */ new Map();
+var sdkCache = /* @__PURE__ */ new Map();
+function normalizeSdkUrl(url) {
+  if (typeof window === "undefined") return url;
+  try {
+    return new URL(url, window.location.href).href;
+  } catch {
+    return url;
+  }
+}
+function normalizeLocale(locale) {
+  return locale || "ja";
+}
+function loadScript(url) {
+  if (typeof window === "undefined") return Promise.resolve(null);
+  const normalizedUrl = normalizeSdkUrl(url);
+  return new Promise((resolve, reject) => {
+    const managedScripts = Array.from(
+      document.querySelectorAll("script[data-hellopay-sdk]")
+    );
+    const existing = managedScripts.find((script2) => {
+      const rawUrl = script2.dataset.hellopayUrl || script2.src;
+      if (!rawUrl) return false;
+      try {
+        return new URL(rawUrl, window.location.href).href === normalizedUrl;
+      } catch {
+        return rawUrl === normalizedUrl;
+      }
+    });
+    if (existing) {
+      const state = existing.dataset.hellopayState;
+      if (state === "loaded") {
+        resolve(window.HelloPay ?? null);
+        return;
+      }
+      if (state === "loading") {
+        existing.addEventListener("load", () => resolve(window.HelloPay ?? null), {
+          once: true
+        });
+        existing.addEventListener(
+          "error",
+          () => reject(new Error("HelloPay SDK failed to load")),
+          { once: true }
+        );
+        return;
+      }
+      existing.remove();
+    }
+    const script = document.createElement("script");
+    script.src = normalizedUrl;
+    script.async = true;
+    script.dataset.hellopaySdk = "true";
+    script.dataset.hellopayUrl = normalizedUrl;
+    script.dataset.hellopayState = "loading";
+    script.addEventListener(
+      "load",
+      () => {
+        if (!window.HelloPay) {
+          script.dataset.hellopayState = "error";
+          reject(new Error("HelloPay SDK loaded but window.HelloPay is missing"));
+          return;
+        }
+        script.dataset.hellopayState = "loaded";
+        resolve(window.HelloPay);
+      },
+      { once: true }
+    );
+    script.addEventListener(
+      "error",
+      () => {
+        script.dataset.hellopayState = "error";
+        reject(new Error("HelloPay SDK failed to load"));
+      },
+      { once: true }
+    );
+    document.head.appendChild(script);
+  });
+}
+function loadHelloPay(publicKey, options = {}) {
+  const sdkUrl = normalizeSdkUrl(options.sdkUrl ?? resolveDefaultSdkUrl(publicKey));
+  const locale = normalizeLocale(options.locale);
+  const cacheKey = `${publicKey}::${locale}::${sdkUrl}`;
+  const cached = sdkCache.get(cacheKey);
+  if (cached) return cached;
+  let scriptPromise = scriptPromiseCache.get(sdkUrl);
+  if (!scriptPromise) {
+    scriptPromise = loadScript(sdkUrl).catch((err) => {
+      scriptPromiseCache.delete(sdkUrl);
+      throw err;
+    });
+    scriptPromiseCache.set(sdkUrl, scriptPromise);
+  }
+  const sdkPromise = scriptPromise.then((factory) => {
+    if (!factory) return null;
+    return factory(publicKey, { locale: options.locale });
+  }).catch((err) => {
+    sdkCache.delete(cacheKey);
+    throw err;
+  });
+  sdkCache.set(cacheKey, sdkPromise);
+  return sdkPromise;
+}
+
+// src/Elements.tsx
+import { createContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var EMPTY_CONTEXT = {
+  hellopay: null,
+  elements: null
+};
+var ElementsContext = createContext(EMPTY_CONTEXT);
+function Elements({ hellopay: hellopayProp, children }) {
+  const [ctx, setCtx] = useState(EMPTY_CONTEXT);
+  useEffect(() => {
+    let cancelled = false;
+    setCtx(EMPTY_CONTEXT);
+    Promise.resolve(hellopayProp).then((sdk) => {
+      if (cancelled) return;
+      if (!sdk) {
+        setCtx(EMPTY_CONTEXT);
+        return;
+      }
+      setCtx({ hellopay: sdk, elements: sdk.elements() });
+    }).catch(() => {
+      if (cancelled) return;
+      setCtx(EMPTY_CONTEXT);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [hellopayProp]);
+  return /* @__PURE__ */ jsx(ElementsContext.Provider, { value: ctx, children });
+}
+
+// src/ElementComponents.tsx
+import { useEffect as useEffect2, useRef } from "react";
+
+// src/hooks.ts
+import { useContext } from "react";
+function useHelloPay() {
+  return useContext(ElementsContext).hellopay;
+}
+function useElements() {
+  return useContext(ElementsContext).elements;
+}
+
+// src/ElementComponents.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function createElementComponent(type) {
+  function ElementComponent({
+    options,
+    className,
+    style,
+    onReady,
+    onChange,
+    onFocus,
+    onBlur
+  }) {
+    const elements = useElements();
+    const containerRef = useRef(null);
+    const handlersRef = useRef({ onReady, onChange, onFocus, onBlur });
+    handlersRef.current = { onReady, onChange, onFocus, onBlur };
+    useEffect2(() => {
+      if (!elements || !containerRef.current) return;
+      const element = elements.create(type, options);
+      element.mount(containerRef.current);
+      const unsubs = [
+        element.on("ready", (e) => handlersRef.current.onReady?.(e)),
+        element.on("change", (e) => handlersRef.current.onChange?.(e)),
+        element.on("focus", (e) => handlersRef.current.onFocus?.(e)),
+        element.on("blur", (e) => handlersRef.current.onBlur?.(e))
+      ];
+      return () => {
+        unsubs.forEach((u) => u());
+        element.unmount();
+      };
+    }, [elements]);
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        style: { width: "100%", height: "100%", ...style }
+      }
+    );
+  }
+  ElementComponent.displayName = `HelloPay(${type})`;
+  ElementComponent.__elementType = type;
+  return ElementComponent;
+}
+var CardNumberElement = createElementComponent("cardNumber");
+var CardExpiryElement = createElementComponent("cardExpiry");
+var CardCvcElement = createElementComponent("cardCvc");
+export {
+  CardCvcElement,
+  CardExpiryElement,
+  CardNumberElement,
+  Elements,
+  loadHelloPay,
+  useElements,
+  useHelloPay
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/loadHelloPay.ts","../src/Elements.tsx","../src/ElementComponents.tsx","../src/hooks.ts"],"sourcesContent":["/**\n * HelloPay SDK ローダー。\n *\n * HelloPay 管理下のドメイン（js.hello-pay.app 等）から SDK を動的ロードし、\n * `window.HelloPay` ファクトリを解決する。\n *\n * - 同一 sdkUrl への呼び出しは script tag を 1 回だけ挿入（dedup）\n * - 異なる sdkUrl は独立したロードを維持（E2E / ローカル切り替え対応）\n * - SSR 環境では Promise<null> を解決（加盟店側で null チェック）\n * - 一時的な失敗はキャッシュせず次回呼び出しで再試行可能\n */\n\nimport type { HelloPay, HelloPayFactory } from './types';\n\nconst DEFAULT_TEST_SDK_URL = 'https://js.test.hello-pay.app/v1/hellopay-elements.js';\nconst DEFAULT_LIVE_SDK_URL = 'https://js.hello-pay.app/v1/hellopay-elements.js';\n\n/** publicKey のプレフィックスに基づいてデフォルト SDK URL を解決する。 */\nfunction resolveDefaultSdkUrl(publicKey: string): string {\n  return publicKey.startsWith('pk_test_') ? DEFAULT_TEST_SDK_URL : DEFAULT_LIVE_SDK_URL;\n}\n\n// sdkUrl 単位で script ロード Promise をキャッシュ。\n// loadPromise を単一変数にするとすべての URL で共有されてしまい、\n// 異なる sdkUrl（E2E / ローカル開発）が誤って同一ロードを共有する。\nconst scriptPromiseCache = new Map<string, Promise<HelloPayFactory | null>>();\n\n// publicKey + locale + sdkUrl の組み合わせごとに `HelloPaySDK` インスタンスをキャッシュ。\n// 加盟店が誤って inline で loadHelloPay を呼び出した場合でも同一 SDK インスタンスが\n// 返るようにして、Elements セッションの BroadcastChannel session ID ミスマッチを防ぐ。\nconst sdkCache = new Map<string, Promise<HelloPay | null>>();\n\n/** テスト専用: module-scope のキャッシュをすべて初期状態に戻す。 */\nexport function __resetLoadPromiseForTest(): void {\n  scriptPromiseCache.clear();\n  sdkCache.clear();\n}\n\nfunction normalizeSdkUrl(url: string): string {\n  if (typeof window === 'undefined') return url;\n\n  try {\n    return new URL(url, window.location.href).href;\n  } catch {\n    return url;\n  }\n}\n\nfunction normalizeLocale(locale?: string): string {\n  return locale || 'ja';\n}\n\nfunction loadScript(url: string): Promise<HelloPayFactory | null> {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n\n  // URL を正規化してプロトコル省略形などを統一する。\n  // テスト / SSR 環境では window.location が http URL でない場合があるため try-catch で保護。\n  const normalizedUrl = normalizeSdkUrl(url);\n\n  return new Promise((resolve, reject) => {\n    // script は URL 単位で管理する。異なる URL の script を削除せず共存させることで、\n    // E2E / ローカル開発で異なる sdkUrl が並列で呼ばれても Promise が宙吊りにならない。\n    // 状態は dataset.hellopayState に \"loading\" | \"loaded\" | \"error\" で刻む。\n    const managedScripts = Array.from(\n      document.querySelectorAll<HTMLScriptElement>('script[data-hellopay-sdk]'),\n    );\n\n    const existing = managedScripts.find((script) => {\n      const rawUrl = script.dataset.hellopayUrl || script.src;\n      if (!rawUrl) return false;\n      try {\n        return new URL(rawUrl, window.location.href).href === normalizedUrl;\n      } catch {\n        return rawUrl === normalizedUrl;\n      }\n    });\n\n    if (existing) {\n      const state = existing.dataset.hellopayState;\n      if (state === 'loaded') {\n        resolve(window.HelloPay ?? null);\n        return;\n      }\n      if (state === 'loading') {\n        existing.addEventListener('load', () => resolve(window.HelloPay ?? null), {\n          once: true,\n        });\n        existing.addEventListener(\n          'error',\n          () => reject(new Error('HelloPay SDK failed to load')),\n          { once: true },\n        );\n        return;\n      }\n      // state === \"error\" or undefined: 失敗済み or 未知の状態なので作り直す\n      existing.remove();\n    }\n\n    const script = document.createElement('script');\n    script.src = normalizedUrl;\n    script.async = true;\n    script.dataset.hellopaySdk = 'true';\n    script.dataset.hellopayUrl = normalizedUrl; // URL 比較用\n    script.dataset.hellopayState = 'loading';\n    script.addEventListener(\n      'load',\n      () => {\n        if (!window.HelloPay) {\n          script.dataset.hellopayState = 'error';\n          reject(new Error('HelloPay SDK loaded but window.HelloPay is missing'));\n          return;\n        }\n        script.dataset.hellopayState = 'loaded';\n        resolve(window.HelloPay);\n      },\n      { once: true },\n    );\n    script.addEventListener(\n      'error',\n      () => {\n        script.dataset.hellopayState = 'error';\n        reject(new Error('HelloPay SDK failed to load'));\n      },\n      { once: true },\n    );\n    document.head.appendChild(script);\n  });\n}\n\nexport interface LoadHelloPayOptions {\n  /** SDK 配信 URL（ローカル開発・E2E で差し替える用。省略時は publicKey に基づいて test/live を自動解決） */\n  sdkUrl?: string;\n  locale?: string;\n}\n\n/**\n * HelloPay SDK をロードして初期化する。\n * モジュールスコープで 1 回だけ呼び、返り値の Promise を `<Elements>` に渡す。\n */\nexport function loadHelloPay(\n  publicKey: string,\n  options: LoadHelloPayOptions = {},\n): Promise<HelloPay | null> {\n  const sdkUrl = normalizeSdkUrl(options.sdkUrl ?? resolveDefaultSdkUrl(publicKey));\n  const locale = normalizeLocale(options.locale);\n  const cacheKey = `${publicKey}::${locale}::${sdkUrl}`;\n  const cached = sdkCache.get(cacheKey);\n  if (cached) return cached;\n\n  let scriptPromise = scriptPromiseCache.get(sdkUrl);\n  if (!scriptPromise) {\n    scriptPromise = loadScript(sdkUrl).catch((err) => {\n      // 一時的なロード失敗はキャッシュせず次回呼び出しで再試行可能にする\n      scriptPromiseCache.delete(sdkUrl);\n      throw err;\n    });\n    scriptPromiseCache.set(sdkUrl, scriptPromise);\n  }\n\n  const sdkPromise = scriptPromise\n    .then((factory) => {\n      if (!factory) return null; // SSR\n      return factory(publicKey, { locale: options.locale });\n    })\n    .catch((err) => {\n      // SDK インスタンス生成失敗は sdkCache から退避して次回呼び出しで再試行可能にする\n      sdkCache.delete(cacheKey);\n      throw err;\n    });\n  sdkCache.set(cacheKey, sdkPromise);\n  return sdkPromise;\n}\n","/**\n * <Elements> Provider.\n *\n * loadHelloPay() の Promise を受け取り、SDK インスタンスと Elements セッションを\n * 子孫に Context 経由で供給する。\n */\n\nimport { createContext, useEffect, useState, type ReactNode } from 'react';\nimport type { HelloPay, Elements as ElementsSession } from './types';\n\nexport interface ElementsContextValue {\n  hellopay: HelloPay | null;\n  elements: ElementsSession | null;\n}\n\nconst EMPTY_CONTEXT: ElementsContextValue = {\n  hellopay: null,\n  elements: null,\n};\n\nexport const ElementsContext = createContext<ElementsContextValue>(EMPTY_CONTEXT);\n\nexport interface ElementsProps {\n  /** loadHelloPay() の戻り値。モジュールスコープで 1 回だけ生成すること */\n  hellopay: Promise<HelloPay | null> | HelloPay | null;\n  children: ReactNode;\n}\n\nexport function Elements({ hellopay: hellopayProp, children }: ElementsProps) {\n  const [ctx, setCtx] = useState<ElementsContextValue>(EMPTY_CONTEXT);\n\n  useEffect(() => {\n    let cancelled = false;\n    setCtx(EMPTY_CONTEXT);\n\n    Promise.resolve(hellopayProp)\n      .then((sdk) => {\n        if (cancelled) return;\n        if (!sdk) {\n          setCtx(EMPTY_CONTEXT);\n          return;\n        }\n        setCtx({ hellopay: sdk, elements: sdk.elements() });\n      })\n      .catch(() => {\n        // SDK ロード失敗時は null のまま（unhandled rejection を防ぐ）\n        if (cancelled) return;\n        setCtx(EMPTY_CONTEXT);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [hellopayProp]);\n\n  return <ElementsContext.Provider value={ctx}>{children}</ElementsContext.Provider>;\n}\n","/**\n * Element コンポーネント。\n *\n * 各コンポーネントは 1 つの `<div>` コンテナを描画するだけで、\n * 実体（カード情報が入る iframe）はコア SDK が差し込む。\n *\n * React Strict Mode の二重 mount 対応:\n *   - effect の cleanup で element.unmount() を必ず呼ぶ\n *   - unmount 後は Elements._elements 配列から除外される（コア SDK 側で対応済）\n *   - 結果として Strict Mode で effect が再実行されても古い iframe は残らない\n */\n\nimport { useEffect, useRef, type CSSProperties } from 'react';\nimport { useElements } from './hooks';\nimport type {\n  ElementType,\n  ElementOptions,\n  ElementChangeEvent,\n  ElementFocusEvent,\n  ElementReadyEvent,\n} from './types';\n\nexport interface ElementProps {\n  options?: ElementOptions;\n  className?: string;\n  style?: CSSProperties;\n  onReady?: (e: ElementReadyEvent) => void;\n  onChange?: (e: ElementChangeEvent) => void;\n  onFocus?: (e: ElementFocusEvent) => void;\n  onBlur?: (e: ElementFocusEvent) => void;\n}\n\n/**\n * 指定 type の Element を管理する React コンポーネントを生成する。\n */\nfunction createElementComponent(type: ElementType) {\n  function ElementComponent({\n    options,\n    className,\n    style,\n    onReady,\n    onChange,\n    onFocus,\n    onBlur,\n  }: ElementProps) {\n    const elements = useElements();\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    // 最新のハンドラを ref で保持（effect を毎回 re-run させないため）\n    const handlersRef = useRef({ onReady, onChange, onFocus, onBlur });\n    handlersRef.current = { onReady, onChange, onFocus, onBlur };\n\n    useEffect(() => {\n      if (!elements || !containerRef.current) return;\n\n      const element = elements.create(type, options);\n      element.mount(containerRef.current);\n\n      const unsubs = [\n        element.on('ready', (e) => handlersRef.current.onReady?.(e)),\n        element.on('change', (e) => handlersRef.current.onChange?.(e)),\n        element.on('focus', (e) => handlersRef.current.onFocus?.(e)),\n        element.on('blur', (e) => handlersRef.current.onBlur?.(e)),\n      ];\n\n      return () => {\n        unsubs.forEach((u) => u());\n        element.unmount();\n      };\n      // options はマウント時にしか反映しない方針（Stripe と同じ挙動）。\n      // 動的に style を変えたい場合は後続 PR で element.update() を追加。\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [elements]);\n\n    // 親コンテナ（加盟店が指定した `.element-container` 等）の高さを\n    // iframe に伝播させるため、wrapper は親のサイズを塗りつぶす。\n    // style prop で上書き可能。\n    return (\n      <div\n        ref={containerRef}\n        className={className}\n        style={{ width: '100%', height: '100%', ...style }}\n      />\n    );\n  }\n  ElementComponent.displayName = `HelloPay(${type})`;\n  // getElement(CardNumberElement) のようにコンポーネント自身を型指定子として使えるよう、\n  // 静的プロパティに type を生やしておく\n  ElementComponent.__elementType = type as ElementType;\n  return ElementComponent;\n}\n\nexport const CardNumberElement = createElementComponent('cardNumber');\nexport const CardExpiryElement = createElementComponent('cardExpiry');\nexport const CardCvcElement = createElementComponent('cardCvc');\n\nexport type ElementComponent = typeof CardNumberElement;\n","/**\n * React hooks.\n *\n * useHelloPay / useElements は <Elements> Provider の Context から\n * SDK インスタンスと Elements セッションを取り出す。\n * SDK ロード完了までは null を返すので、ハンドラ内で null チェックする。\n */\n\nimport { useContext } from 'react';\nimport { ElementsContext } from './Elements';\nimport type { HelloPay, Elements } from './types';\n\nexport function useHelloPay(): HelloPay | null {\n  return useContext(ElementsContext).hellopay;\n}\n\nexport function useElements(): Elements | null {\n  return useContext(ElementsContext).elements;\n}\n"],"mappings":"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","names":["script","useEffect","jsx","useEffect"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@hello-pay/react",
+  "version": "0.1.0",
+  "description": "HelloPay Elements React bindings (custom card form for merchants)",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hello-ai/hello_pay.git",
+    "directory": "js_sdk/react"
+  },
+  "homepage": "https://github.com/hello-ai/hello_pay/tree/master/js_sdk/react",
+  "bugs": {
+    "url": "https://github.com/hello-ai/hello_pay/issues"
+  },
+  "keywords": [
+    "hellopay",
+    "payments",
+    "elements",
+    "react",
+    "card",
+    "tokenization"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "demo": "bun ./demo-server.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.8.9",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "bun-types": "^1.3.12",
+    "happy-dom": "^20.8.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.5.0"
+  }
+}