@hello-pay/react 0.2.2 → 0.3.0

package/dist/index.cjs

@@ -32,11 +32,7 @@ __export(index_exports, {
 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 DEFAULT_SDK_URL = "https://js.hello-pay.app/v1/hellopay-elements.js";
 var scriptPromiseCache = /* @__PURE__ */ new Map();
 var sdkCache = /* @__PURE__ */ new Map();
 function normalizeSdkUrl(url) {
@@ -116,7 +112,7 @@ function loadScript(url) {
   });
 }
 function loadHelloPay(publicKey, options = {}) {
-  const sdkUrl = normalizeSdkUrl(options.sdkUrl ?? resolveDefaultSdkUrl(publicKey));
+  const sdkUrl = normalizeSdkUrl(options.sdkUrl ?? DEFAULT_SDK_URL);
   const locale = normalizeLocale(options.locale);
   const cacheKey = `${publicKey}::${locale}::${sdkUrl}`;
   const cached = sdkCache.get(cacheKey);

package/dist/index.cjs.map

@@ -1 +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  CardholderNameElement,\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');\nexport const CardholderNameElement = createElementComponent('cardholderName');\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","import_react","import_react","import_jsx_runtime"]}
+{"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  CardholderNameElement,\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\n// SDK 本体は test / live どちらの publishable key でも同一ドメイン\n// (js.hello-pay.app) から配信する。test / live mode の切り替えは SDK 内部で\n// publishable key の prefix から解決し、test mode では接続先を test 環境\n// (*.stg.hello-pay.app) に向ける（hellopay.js と同じ方式）。\nconst DEFAULT_SDK_URL = 'https://js.hello-pay.app/v1/hellopay-elements.js';\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 で差し替える用。省略時は js.hello-pay.app から配信し、test/live は SDK 内部で key prefix から解決） */\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 ?? DEFAULT_SDK_URL);\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');\nexport const CardholderNameElement = createElementComponent('cardholderName');\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","import_react","import_react","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -120,7 +120,7 @@ declare global {
  */
 
 interface LoadHelloPayOptions {
-    /** SDK 配信 URL（ローカル開発・E2E で差し替える用。省略時は publicKey に基づいて test/live を自動解決） */
+    /** SDK 配信 URL（ローカル開発・E2E で差し替える用。省略時は js.hello-pay.app から配信し、test/live は SDK 内部で key prefix から解決） */
     sdkUrl?: string;
     locale?: string;
 }

package/dist/index.d.ts

@@ -120,7 +120,7 @@ declare global {
  */
 
 interface LoadHelloPayOptions {
-    /** SDK 配信 URL（ローカル開発・E2E で差し替える用。省略時は publicKey に基づいて test/live を自動解決） */
+    /** SDK 配信 URL（ローカル開発・E2E で差し替える用。省略時は js.hello-pay.app から配信し、test/live は SDK 内部で key prefix から解決） */
     sdkUrl?: string;
     locale?: string;
 }

package/dist/index.js

@@ -1,9 +1,5 @@
 // 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 DEFAULT_SDK_URL = "https://js.hello-pay.app/v1/hellopay-elements.js";
 var scriptPromiseCache = /* @__PURE__ */ new Map();
 var sdkCache = /* @__PURE__ */ new Map();
 function normalizeSdkUrl(url) {
@@ -83,7 +79,7 @@ function loadScript(url) {
   });
 }
 function loadHelloPay(publicKey, options = {}) {
-  const sdkUrl = normalizeSdkUrl(options.sdkUrl ?? resolveDefaultSdkUrl(publicKey));
+  const sdkUrl = normalizeSdkUrl(options.sdkUrl ?? DEFAULT_SDK_URL);
   const locale = normalizeLocale(options.locale);
   const cacheKey = `${publicKey}::${locale}::${sdkUrl}`;
   const cached = sdkCache.get(cacheKey);

package/dist/index.js.map

@@ -1 +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');\nexport const CardholderNameElement = createElementComponent('cardholderName');\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"]}
+{"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\n// SDK 本体は test / live どちらの publishable key でも同一ドメイン\n// (js.hello-pay.app) から配信する。test / live mode の切り替えは SDK 内部で\n// publishable key の prefix から解決し、test mode では接続先を test 環境\n// (*.stg.hello-pay.app) に向ける（hellopay.js と同じ方式）。\nconst DEFAULT_SDK_URL = 'https://js.hello-pay.app/v1/hellopay-elements.js';\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 で差し替える用。省略時は js.hello-pay.app から配信し、test/live は SDK 内部で key prefix から解決） */\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 ?? DEFAULT_SDK_URL);\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');\nexport const CardholderNameElement = createElementComponent('cardholderName');\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

@@ -1,6 +1,6 @@
 {
   "name": "@hello-pay/react",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "React components for accepting payments with HelloPay",
   "license": "UNLICENSED",
   "publishConfig": {