@hello-pay/react 0.3.0 → 0.4.0

package/README.md

@@ -46,17 +46,22 @@ function PaymentForm() {
     if (!hellopay || !elements) return;
 
     const cardNumber = elements.getElement('cardNumber');
-    const { token, card, error } = await hellopay.createToken(cardNumber);
+    const { token, provider, 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）
+    // 以降は token / provider / card が必ず non-null（Discriminated Union）
+    // provider は通常 'hellopay'（HelloPay の決済 API に渡す）。
+    // Mastercard 暫定対応を利用している場合のみ、プロジェクトの設定に応じて
+    // 'stripe' / 'gmo' になる。いずれもトークンは加盟店自身の PSP 契約上に
+    // 発行されるため、決済・3DS・返金は自社の実装で行う。
+    // 'gmo' のトークンは発行から 30 分・1 回限りで、期限は tokenExpiryDate に入る。
     await fetch('/api/charge', {
       method: 'POST',
-      body: JSON.stringify({ token, last4: card.last4 }),
+      body: JSON.stringify({ token, provider, last4: card.last4 }),
     });
   }
 

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ApplePayButton: () => ApplePayButton,
   CardCvcElement: () => CardCvcElement,
   CardExpiryElement: () => CardExpiryElement,
   CardNumberElement: () => CardNumberElement,
@@ -227,8 +228,72 @@ var CardNumberElement = createElementComponent("cardNumber");
 var CardExpiryElement = createElementComponent("cardExpiry");
 var CardCvcElement = createElementComponent("cardCvc");
 var CardholderNameElement = createElementComponent("cardholderName");
+
+// src/ApplePayButton.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ApplePayButton({
+  options,
+  onToken,
+  onError,
+  onCancel,
+  buttonStyle = "black",
+  buttonType = "plain",
+  className,
+  style
+}) {
+  const hellopay = useHelloPay();
+  const buttonRef = (0, import_react4.useRef)(null);
+  const [supported, setSupported] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    setSupported(!!hellopay && hellopay.canMakeApplePayPayments());
+  }, [hellopay]);
+  (0, import_react4.useEffect)(() => {
+    const el = buttonRef.current;
+    if (!el) return;
+    el.style.setProperty("-webkit-appearance", "-apple-pay-button");
+    el.style.setProperty("-apple-pay-button-type", buttonType);
+    el.style.setProperty("-apple-pay-button-style", buttonStyle);
+  }, [supported, buttonType, buttonStyle]);
+  const latest = (0, import_react4.useRef)({ options, onToken, onError, onCancel, hellopay });
+  latest.current = { options, onToken, onError, onCancel, hellopay };
+  if (!supported) return null;
+  const handleClick = () => {
+    const current = latest.current;
+    if (!current.hellopay) return;
+    current.hellopay.applePay(current.options).then((result) => {
+      if (result.error) {
+        if (result.error.type === "cancel") {
+          current.onCancel?.();
+        } else {
+          current.onError?.(result.error);
+        }
+        return;
+      }
+      current.onToken(result.token, result.card);
+    }).catch((err) => {
+      current.onError?.({
+        type: "config_error",
+        code: "apple_pay_error",
+        message: err instanceof Error ? err.message : "Apple Pay error"
+      });
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      ref: buttonRef,
+      type: "button",
+      onClick: handleClick,
+      className,
+      style: { width: "100%", height: "44px", cursor: "pointer", ...style }
+    }
+  );
+}
+ApplePayButton.displayName = "HelloPay(ApplePayButton)";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ApplePayButton,
   CardCvcElement,
   CardExpiryElement,
   CardNumberElement,

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\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"]}
+{"version":3,"sources":["../src/index.ts","../src/loadHelloPay.ts","../src/Elements.tsx","../src/ElementComponents.tsx","../src/hooks.ts","../src/ApplePayButton.tsx"],"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 { ApplePayButton } from './ApplePayButton';\nexport type { ApplePayButtonProps } from './ApplePayButton';\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  TokenProvider,\n  ApplePayCard,\n  ApplePayOptions,\n  ApplePayResult,\n  ApplePayError,\n  ApplePayCancelError,\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","/**\n * Apple Pay ボタン。\n *\n * `useHelloPay()` から SDK を取り、対応端末（Safari + Apple Pay 利用可能）でのみ\n * Apple 公式スタイルのボタンを描画する。非対応端末では何も描画しない。\n *\n * click で `hellopay.applePay()` を同期呼び出しし（`new ApplePaySession` の\n * user gesture 要件のため）、結果を `onToken` / `onError` / `onCancel` に振り分ける。\n * SDK は Apple Pay トークンを返すだけで課金はしないので、加盟店は `onToken` で\n * 受けたトークンを自社バックエンドから決済 API に送って課金する。\n */\n\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\nimport { useHelloPay } from './hooks';\nimport type { ApplePayCard, ApplePayOptions, HelloPayError } from './types';\n\nexport interface ApplePayButtonProps {\n  options: ApplePayOptions;\n  /** トークン取得成功時。トークンを自社バックエンド経由で決済 API に送る。 */\n  onToken: (token: string, card: ApplePayCard) => void;\n  /** validation / network エラー時。 */\n  onError?: (error: HelloPayError) => void;\n  /** ユーザーが Apple Pay シートを閉じた時。 */\n  onCancel?: () => void;\n  /** Apple Pay ボタンの色。既定 `black`。 */\n  buttonStyle?: 'black' | 'white' | 'white-outline';\n  /** Apple Pay ボタンの種別（`plain` / `buy` / `pay` 等）。既定 `plain`。 */\n  buttonType?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function ApplePayButton({\n  options,\n  onToken,\n  onError,\n  onCancel,\n  buttonStyle = 'black',\n  buttonType = 'plain',\n  className,\n  style,\n}: ApplePayButtonProps) {\n  const hellopay = useHelloPay();\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const [supported, setSupported] = useState(false);\n\n  // canMakeApplePayPayments は ApplePaySession 依存で client-only のため effect で判定。\n  useEffect(() => {\n    setSupported(!!hellopay && hellopay.canMakeApplePayPayments());\n  }, [hellopay]);\n\n  // Apple Pay ボタンの見た目はベンダー CSS プロパティで指定する。React の style 型に\n  // 無いため ref 経由で setProperty する。\n  useEffect(() => {\n    const el = buttonRef.current;\n    if (!el) return;\n    el.style.setProperty('-webkit-appearance', '-apple-pay-button');\n    el.style.setProperty('-apple-pay-button-type', buttonType);\n    el.style.setProperty('-apple-pay-button-style', buttonStyle);\n  }, [supported, buttonType, buttonStyle]);\n\n  // 最新のハンドラ / options を ref に保持し、click ハンドラを毎回作り直さない。\n  const latest = useRef({ options, onToken, onError, onCancel, hellopay });\n  latest.current = { options, onToken, onError, onCancel, hellopay };\n\n  if (!supported) return null;\n\n  const handleClick = () => {\n    const current = latest.current;\n    if (!current.hellopay) return;\n    // user gesture 要件のため click ハンドラから同期呼び出しする。\n    current.hellopay\n      .applePay(current.options)\n      .then((result) => {\n        if (result.error) {\n          if (result.error.type === 'cancel') {\n            current.onCancel?.();\n          } else {\n            current.onError?.(result.error);\n          }\n          return;\n        }\n        current.onToken(result.token, result.card);\n      })\n      .catch((err: unknown) => {\n        current.onError?.({\n          type: 'config_error',\n          code: 'apple_pay_error',\n          message: err instanceof Error ? err.message : 'Apple Pay error',\n        });\n      });\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      onClick={handleClick}\n      className={className}\n      style={{ width: '100%', height: '44px', cursor: 'pointer', ...style }}\n    />\n  );\n}\n\nApplePayButton.displayName = 'HelloPay(ApplePayButton)';\n"],"mappings":"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","names":["script","import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -70,28 +70,106 @@ interface HelloPayError {
     code: string;
     message: string;
 }
+/**
+ * トークンの発行経路。`'hellopay'` は従来どおり HelloPay の決済 API に渡す。
+ *
+ * `'stripe'` / `'gmo'` は Mastercard 審査完了までの暫定措置で、どちらを使うかは
+ * プロジェクトの設定で決まる。いずれも加盟店自身の PSP 契約上に発行された
+ * トークンのため、決済・3DS・返金は加盟店自身の実装で行う。
+ *
+ * - `'stripe'`: 加盟店自身の Stripe アカウント上のトークン
+ * - `'gmo'`: 加盟店自身の GMO PGマルチペイメント契約上のトークン。決済は
+ *   `ExecTran` に `Token` と `TokenType=1` を渡す。有効期限は
+ *   {@link CreateTokenResult.tokenExpiryDate} を参照
+ */
+type TokenProvider = 'hellopay' | 'stripe' | 'gmo';
 /**
  * createToken の返り値。Discriminated Union により、success 時は
- * token/card のみ、error 時は error のみが型として存在する。
+ * token/provider/card のみ、error 時は error のみが型として存在する。
  *
  * ```ts
- * const { token, card, error } = await hellopay.createToken(el);
+ * const { token, provider, card, error } = await hellopay.createToken(el);
  * if (error) return showError(error.message);
- * sendToServer(token, card);
+ * sendToServer(token, provider, card);
  * ```
  */
 type CreateTokenResult = {
     token: string;
+    provider: TokenProvider;
     card: TokenCard;
+    /**
+     * トークンの有効期限（RFC3339）。寿命が経路ごとに異なる provider でのみ
+     * 返る。現状は `'gmo'`（発行から 30 分・1 回限り）のみ。
+     */
+    tokenExpiryDate?: string;
     error?: undefined;
 } | {
     token?: undefined;
+    provider?: undefined;
     card?: undefined;
+    tokenExpiryDate?: undefined;
     error: HelloPayError;
 };
+/**
+ * Apple Pay で決済したカードのメタデータ。Apple Pay は client 側で last4 /
+ * 有効期限を確実に取得できないため、カード決済の `TokenCard` とは別形状。
+ */
+interface ApplePayCard {
+    /** カードネットワーク（例: `visa` / `masterCard`）。取得不能時は `unknown`。 */
+    brand: string;
+    /** Wallet 上の表示名（例: `Visa 1234`）。 */
+    displayName: string;
+}
+interface ApplePayOptions {
+    /** 請求金額（JPY・整数）。 */
+    amount: number;
+    /** Apple Pay シートに表示する店舗名。省略時は `HelloPay`。 */
+    label?: string;
+    /** 既定 `JPY`。 */
+    currencyCode?: string;
+    /** 既定 `JP`。 */
+    countryCode?: string;
+    /** 既定 `['visa', 'masterCard', 'amex', 'jcb']`。 */
+    supportedNetworks?: string[];
+    /** 既定 `['supports3DS']`。 */
+    merchantCapabilities?: string[];
+}
+/**
+ * ユーザーが Apple Pay シートを閉じたときのキャンセル。`cancel` は Apple Pay
+ * 固有の結果なので、`createToken` と共有する `HelloPayError` には載せず
+ * Apple Pay 専用の union（`ApplePayError`）でのみ表現する。これにより
+ * `createToken` 利用者の網羅的 `switch` を後方互換に保つ。
+ */
+interface ApplePayCancelError {
+    type: 'cancel';
+    code: 'cancelled';
+    message: string;
+}
+type ApplePayError = HelloPayError | ApplePayCancelError;
+/**
+ * `applePay` の返り値。`createToken` と同型の discriminated union。
+ * 成功時は Apple Pay トークン（`token.paymentData` の JSON 文字列）を返し、
+ * 加盟店はこれを自社バックエンドから決済 API に送って課金する。
+ * キャンセルは `error.type === 'cancel'` として失敗側に載る。
+ */
+type ApplePayResult = {
+    token: string;
+    provider: 'applepay';
+    card: ApplePayCard;
+    error?: undefined;
+} | {
+    token?: undefined;
+    provider?: undefined;
+    card?: undefined;
+    error: ApplePayError;
+};
 interface HelloPay {
     elements(): Elements$1;
     createToken(cardNumberElement: Element): Promise<CreateTokenResult>;
+    /** 対応端末（Safari + Apple Pay 利用可能）でのみ true。 */
+    canMakeApplePayPayments(): boolean;
+    /** Apple Pay シートを開き、都度課金トークンを取得する。 */
+    applePay(options: ApplePayOptions): Promise<ApplePayResult>;
 }
 type HelloPayFactory = (publicKey: string, options?: {
     locale?: string;
@@ -167,6 +245,26 @@ declare const CardholderNameElement: {
     __elementType: ElementType;
 };
 
+interface ApplePayButtonProps {
+    options: ApplePayOptions;
+    /** トークン取得成功時。トークンを自社バックエンド経由で決済 API に送る。 */
+    onToken: (token: string, card: ApplePayCard) => void;
+    /** validation / network エラー時。 */
+    onError?: (error: HelloPayError) => void;
+    /** ユーザーが Apple Pay シートを閉じた時。 */
+    onCancel?: () => void;
+    /** Apple Pay ボタンの色。既定 `black`。 */
+    buttonStyle?: 'black' | 'white' | 'white-outline';
+    /** Apple Pay ボタンの種別（`plain` / `buy` / `pay` 等）。既定 `plain`。 */
+    buttonType?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ApplePayButton({ options, onToken, onError, onCancel, buttonStyle, buttonType, className, style, }: ApplePayButtonProps): react_jsx_runtime.JSX.Element | null;
+declare namespace ApplePayButton {
+    var displayName: string;
+}
+
 /**
  * React hooks.
  *
@@ -178,4 +276,4 @@ declare const CardholderNameElement: {
 declare function useHelloPay(): HelloPay | null;
 declare function useElements(): Elements$1 | null;
 
-export { CardCvcElement, CardExpiryElement, CardNumberElement, CardholderNameElement, 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 };
+export { ApplePayButton, type ApplePayButtonProps, type ApplePayCancelError, type ApplePayCard, type ApplePayError, type ApplePayOptions, type ApplePayResult, CardCvcElement, CardExpiryElement, CardNumberElement, CardholderNameElement, 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 TokenProvider, type Unsubscribe, loadHelloPay, useElements, useHelloPay };

package/dist/index.d.ts

@@ -70,28 +70,106 @@ interface HelloPayError {
     code: string;
     message: string;
 }
+/**
+ * トークンの発行経路。`'hellopay'` は従来どおり HelloPay の決済 API に渡す。
+ *
+ * `'stripe'` / `'gmo'` は Mastercard 審査完了までの暫定措置で、どちらを使うかは
+ * プロジェクトの設定で決まる。いずれも加盟店自身の PSP 契約上に発行された
+ * トークンのため、決済・3DS・返金は加盟店自身の実装で行う。
+ *
+ * - `'stripe'`: 加盟店自身の Stripe アカウント上のトークン
+ * - `'gmo'`: 加盟店自身の GMO PGマルチペイメント契約上のトークン。決済は
+ *   `ExecTran` に `Token` と `TokenType=1` を渡す。有効期限は
+ *   {@link CreateTokenResult.tokenExpiryDate} を参照
+ */
+type TokenProvider = 'hellopay' | 'stripe' | 'gmo';
 /**
  * createToken の返り値。Discriminated Union により、success 時は
- * token/card のみ、error 時は error のみが型として存在する。
+ * token/provider/card のみ、error 時は error のみが型として存在する。
  *
  * ```ts
- * const { token, card, error } = await hellopay.createToken(el);
+ * const { token, provider, card, error } = await hellopay.createToken(el);
  * if (error) return showError(error.message);
- * sendToServer(token, card);
+ * sendToServer(token, provider, card);
  * ```
  */
 type CreateTokenResult = {
     token: string;
+    provider: TokenProvider;
     card: TokenCard;
+    /**
+     * トークンの有効期限（RFC3339）。寿命が経路ごとに異なる provider でのみ
+     * 返る。現状は `'gmo'`（発行から 30 分・1 回限り）のみ。
+     */
+    tokenExpiryDate?: string;
     error?: undefined;
 } | {
     token?: undefined;
+    provider?: undefined;
     card?: undefined;
+    tokenExpiryDate?: undefined;
     error: HelloPayError;
 };
+/**
+ * Apple Pay で決済したカードのメタデータ。Apple Pay は client 側で last4 /
+ * 有効期限を確実に取得できないため、カード決済の `TokenCard` とは別形状。
+ */
+interface ApplePayCard {
+    /** カードネットワーク（例: `visa` / `masterCard`）。取得不能時は `unknown`。 */
+    brand: string;
+    /** Wallet 上の表示名（例: `Visa 1234`）。 */
+    displayName: string;
+}
+interface ApplePayOptions {
+    /** 請求金額（JPY・整数）。 */
+    amount: number;
+    /** Apple Pay シートに表示する店舗名。省略時は `HelloPay`。 */
+    label?: string;
+    /** 既定 `JPY`。 */
+    currencyCode?: string;
+    /** 既定 `JP`。 */
+    countryCode?: string;
+    /** 既定 `['visa', 'masterCard', 'amex', 'jcb']`。 */
+    supportedNetworks?: string[];
+    /** 既定 `['supports3DS']`。 */
+    merchantCapabilities?: string[];
+}
+/**
+ * ユーザーが Apple Pay シートを閉じたときのキャンセル。`cancel` は Apple Pay
+ * 固有の結果なので、`createToken` と共有する `HelloPayError` には載せず
+ * Apple Pay 専用の union（`ApplePayError`）でのみ表現する。これにより
+ * `createToken` 利用者の網羅的 `switch` を後方互換に保つ。
+ */
+interface ApplePayCancelError {
+    type: 'cancel';
+    code: 'cancelled';
+    message: string;
+}
+type ApplePayError = HelloPayError | ApplePayCancelError;
+/**
+ * `applePay` の返り値。`createToken` と同型の discriminated union。
+ * 成功時は Apple Pay トークン（`token.paymentData` の JSON 文字列）を返し、
+ * 加盟店はこれを自社バックエンドから決済 API に送って課金する。
+ * キャンセルは `error.type === 'cancel'` として失敗側に載る。
+ */
+type ApplePayResult = {
+    token: string;
+    provider: 'applepay';
+    card: ApplePayCard;
+    error?: undefined;
+} | {
+    token?: undefined;
+    provider?: undefined;
+    card?: undefined;
+    error: ApplePayError;
+};
 interface HelloPay {
     elements(): Elements$1;
     createToken(cardNumberElement: Element): Promise<CreateTokenResult>;
+    /** 対応端末（Safari + Apple Pay 利用可能）でのみ true。 */
+    canMakeApplePayPayments(): boolean;
+    /** Apple Pay シートを開き、都度課金トークンを取得する。 */
+    applePay(options: ApplePayOptions): Promise<ApplePayResult>;
 }
 type HelloPayFactory = (publicKey: string, options?: {
     locale?: string;
@@ -167,6 +245,26 @@ declare const CardholderNameElement: {
     __elementType: ElementType;
 };
 
+interface ApplePayButtonProps {
+    options: ApplePayOptions;
+    /** トークン取得成功時。トークンを自社バックエンド経由で決済 API に送る。 */
+    onToken: (token: string, card: ApplePayCard) => void;
+    /** validation / network エラー時。 */
+    onError?: (error: HelloPayError) => void;
+    /** ユーザーが Apple Pay シートを閉じた時。 */
+    onCancel?: () => void;
+    /** Apple Pay ボタンの色。既定 `black`。 */
+    buttonStyle?: 'black' | 'white' | 'white-outline';
+    /** Apple Pay ボタンの種別（`plain` / `buy` / `pay` 等）。既定 `plain`。 */
+    buttonType?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ApplePayButton({ options, onToken, onError, onCancel, buttonStyle, buttonType, className, style, }: ApplePayButtonProps): react_jsx_runtime.JSX.Element | null;
+declare namespace ApplePayButton {
+    var displayName: string;
+}
+
 /**
  * React hooks.
  *
@@ -178,4 +276,4 @@ declare const CardholderNameElement: {
 declare function useHelloPay(): HelloPay | null;
 declare function useElements(): Elements$1 | null;
 
-export { CardCvcElement, CardExpiryElement, CardNumberElement, CardholderNameElement, 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 };
+export { ApplePayButton, type ApplePayButtonProps, type ApplePayCancelError, type ApplePayCard, type ApplePayError, type ApplePayOptions, type ApplePayResult, CardCvcElement, CardExpiryElement, CardNumberElement, CardholderNameElement, 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 TokenProvider, type Unsubscribe, loadHelloPay, useElements, useHelloPay };

package/dist/index.js

@@ -194,7 +194,71 @@ var CardNumberElement = createElementComponent("cardNumber");
 var CardExpiryElement = createElementComponent("cardExpiry");
 var CardCvcElement = createElementComponent("cardCvc");
 var CardholderNameElement = createElementComponent("cardholderName");
+
+// src/ApplePayButton.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ApplePayButton({
+  options,
+  onToken,
+  onError,
+  onCancel,
+  buttonStyle = "black",
+  buttonType = "plain",
+  className,
+  style
+}) {
+  const hellopay = useHelloPay();
+  const buttonRef = useRef2(null);
+  const [supported, setSupported] = useState2(false);
+  useEffect3(() => {
+    setSupported(!!hellopay && hellopay.canMakeApplePayPayments());
+  }, [hellopay]);
+  useEffect3(() => {
+    const el = buttonRef.current;
+    if (!el) return;
+    el.style.setProperty("-webkit-appearance", "-apple-pay-button");
+    el.style.setProperty("-apple-pay-button-type", buttonType);
+    el.style.setProperty("-apple-pay-button-style", buttonStyle);
+  }, [supported, buttonType, buttonStyle]);
+  const latest = useRef2({ options, onToken, onError, onCancel, hellopay });
+  latest.current = { options, onToken, onError, onCancel, hellopay };
+  if (!supported) return null;
+  const handleClick = () => {
+    const current = latest.current;
+    if (!current.hellopay) return;
+    current.hellopay.applePay(current.options).then((result) => {
+      if (result.error) {
+        if (result.error.type === "cancel") {
+          current.onCancel?.();
+        } else {
+          current.onError?.(result.error);
+        }
+        return;
+      }
+      current.onToken(result.token, result.card);
+    }).catch((err) => {
+      current.onError?.({
+        type: "config_error",
+        code: "apple_pay_error",
+        message: err instanceof Error ? err.message : "Apple Pay error"
+      });
+    });
+  };
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      ref: buttonRef,
+      type: "button",
+      onClick: handleClick,
+      className,
+      style: { width: "100%", height: "44px", cursor: "pointer", ...style }
+    }
+  );
+}
+ApplePayButton.displayName = "HelloPay(ApplePayButton)";
 export {
+  ApplePayButton,
   CardCvcElement,
   CardExpiryElement,
   CardNumberElement,

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\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"]}
+{"version":3,"sources":["../src/loadHelloPay.ts","../src/Elements.tsx","../src/ElementComponents.tsx","../src/hooks.ts","../src/ApplePayButton.tsx"],"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","/**\n * Apple Pay ボタン。\n *\n * `useHelloPay()` から SDK を取り、対応端末（Safari + Apple Pay 利用可能）でのみ\n * Apple 公式スタイルのボタンを描画する。非対応端末では何も描画しない。\n *\n * click で `hellopay.applePay()` を同期呼び出しし（`new ApplePaySession` の\n * user gesture 要件のため）、結果を `onToken` / `onError` / `onCancel` に振り分ける。\n * SDK は Apple Pay トークンを返すだけで課金はしないので、加盟店は `onToken` で\n * 受けたトークンを自社バックエンドから決済 API に送って課金する。\n */\n\nimport { useEffect, useRef, useState, type CSSProperties } from 'react';\nimport { useHelloPay } from './hooks';\nimport type { ApplePayCard, ApplePayOptions, HelloPayError } from './types';\n\nexport interface ApplePayButtonProps {\n  options: ApplePayOptions;\n  /** トークン取得成功時。トークンを自社バックエンド経由で決済 API に送る。 */\n  onToken: (token: string, card: ApplePayCard) => void;\n  /** validation / network エラー時。 */\n  onError?: (error: HelloPayError) => void;\n  /** ユーザーが Apple Pay シートを閉じた時。 */\n  onCancel?: () => void;\n  /** Apple Pay ボタンの色。既定 `black`。 */\n  buttonStyle?: 'black' | 'white' | 'white-outline';\n  /** Apple Pay ボタンの種別（`plain` / `buy` / `pay` 等）。既定 `plain`。 */\n  buttonType?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function ApplePayButton({\n  options,\n  onToken,\n  onError,\n  onCancel,\n  buttonStyle = 'black',\n  buttonType = 'plain',\n  className,\n  style,\n}: ApplePayButtonProps) {\n  const hellopay = useHelloPay();\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const [supported, setSupported] = useState(false);\n\n  // canMakeApplePayPayments は ApplePaySession 依存で client-only のため effect で判定。\n  useEffect(() => {\n    setSupported(!!hellopay && hellopay.canMakeApplePayPayments());\n  }, [hellopay]);\n\n  // Apple Pay ボタンの見た目はベンダー CSS プロパティで指定する。React の style 型に\n  // 無いため ref 経由で setProperty する。\n  useEffect(() => {\n    const el = buttonRef.current;\n    if (!el) return;\n    el.style.setProperty('-webkit-appearance', '-apple-pay-button');\n    el.style.setProperty('-apple-pay-button-type', buttonType);\n    el.style.setProperty('-apple-pay-button-style', buttonStyle);\n  }, [supported, buttonType, buttonStyle]);\n\n  // 最新のハンドラ / options を ref に保持し、click ハンドラを毎回作り直さない。\n  const latest = useRef({ options, onToken, onError, onCancel, hellopay });\n  latest.current = { options, onToken, onError, onCancel, hellopay };\n\n  if (!supported) return null;\n\n  const handleClick = () => {\n    const current = latest.current;\n    if (!current.hellopay) return;\n    // user gesture 要件のため click ハンドラから同期呼び出しする。\n    current.hellopay\n      .applePay(current.options)\n      .then((result) => {\n        if (result.error) {\n          if (result.error.type === 'cancel') {\n            current.onCancel?.();\n          } else {\n            current.onError?.(result.error);\n          }\n          return;\n        }\n        current.onToken(result.token, result.card);\n      })\n      .catch((err: unknown) => {\n        current.onError?.({\n          type: 'config_error',\n          code: 'apple_pay_error',\n          message: err instanceof Error ? err.message : 'Apple Pay error',\n        });\n      });\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      onClick={handleClick}\n      className={className}\n      style={{ width: '100%', height: '44px', cursor: 'pointer', ...style }}\n    />\n  );\n}\n\nApplePayButton.displayName = 'HelloPay(ApplePayButton)';\n"],"mappings":"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","names":["script","useEffect","jsx","useEffect","useEffect","useRef","useState","jsx","useRef","useState","useEffect"]}

package/package.json

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