{"_id":"@hello-pay/react","_rev":"6-8c1786ffd3188cc539e948be33c00b1b","name":"@hello-pay/react","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.0":{"name":"@hello-pay/react","version":"0.1.0","keywords":["hellopay","payments","elements","react","card","tokenization"],"license":"UNLICENSED","_id":"@hello-pay/react@0.1.0","maintainers":[{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"}],"homepage":"https://github.com/hello-ai/hello_pay/tree/master/js_sdk/react","bugs":{"url":"https://github.com/hello-ai/hello_pay/issues"},"dist":{"shasum":"61bae561ea5de68445922338da85dab21ac68250","tarball":"https://registry.npmjs.org/@hello-pay/react/-/react-0.1.0.tgz","fileCount":8,"integrity":"sha512-7pgxJvWMQOzGkp2+omQ+PmXS/TNmngmb9bviybqUl4Yv3ml2WRx/zyKgCvDL5LMWpgY6Qjudp8KazKmZBsg65w==","signatures":[{"sig":"MEUCIEeIrvskvyt6QXBqIiqD8ELHbc8oDolII0rnGJFnHbAcAiEAzSJgc8vT5IQOz8OLSQqIJqnJ66KRPbPjXbDGjTC3nLc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65964},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"1e04b19227819f01a72478dd1c3150290b128c46","scripts":{"demo":"bun ./demo-server.ts","test":"bun test","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"},"repository":{"url":"git+https://github.com/hello-ai/hello_pay.git","type":"git","directory":"js_sdk/react"},"_npmVersion":"10.9.2","description":"HelloPay Elements React bindings (custom card form for merchants)","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.0.0","bun-types":"^1.3.12","happy-dom":"^20.8.9","react-dom":"^19.0.0","typescript":"^5.5.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@happy-dom/global-registrator":"^20.8.9"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.0_1776094467151_0.14333923614800725","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@hello-pay/react","version":"0.2.0","keywords":["hellopay","payments","elements","react","card","tokenization"],"license":"UNLICENSED","_id":"@hello-pay/react@0.2.0","maintainers":[{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"}],"homepage":"https://github.com/hello-ai/hello_pay/tree/master/js_sdk/react","bugs":{"url":"https://github.com/hello-ai/hello_pay/issues"},"dist":{"shasum":"6d91989d03abcd427508b2e7d20b4ac4e40eac37","tarball":"https://registry.npmjs.org/@hello-pay/react/-/react-0.2.0.tgz","fileCount":8,"integrity":"sha512-rirQ/UE87p1D+2yMdpew8w3Xa0hw8FxVXph8+azy3jBBKa5UeTnQHL2r7HA4Y4/yDuUrjE3Ss7rrdF7gl14kuQ==","signatures":[{"sig":"MEUCIQDtrOdIvhKvyZ6BWcUtyhUndqnY6CtwV51+MBHkmQycOQIgdjqPNg0xjGaDLVV7kUVGZcsgAZpDsElJwfjkIB8XFgE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67047},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"demo":"bun ./demo-server.ts","test":"bun test","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"},"repository":{"url":"git+https://github.com/hello-ai/hello_pay.git","type":"git","directory":"js_sdk/react"},"_npmVersion":"10.9.2","description":"HelloPay Elements React bindings (custom card form for merchants)","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.0.0","bun-types":"^1.3.12","happy-dom":"^20.8.9","react-dom":"^19.0.0","typescript":"^5.5.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@happy-dom/global-registrator":"^20.8.9"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.0_1777548236802_0.7010327255835407","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@hello-pay/react","version":"0.2.1","keywords":["hellopay","payments","elements","react","card","tokenization"],"license":"UNLICENSED","_id":"@hello-pay/react@0.2.1","maintainers":[{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"}],"homepage":"https://github.com/hello-ai/hello_pay/tree/master/js_sdk/react","bugs":{"url":"https://github.com/hello-ai/hello_pay/issues"},"dist":{"shasum":"ea160b4621dd8e122a1850a676ccddbb9892fa1a","tarball":"https://registry.npmjs.org/@hello-pay/react/-/react-0.2.1.tgz","fileCount":8,"integrity":"sha512-61qxebTFafnUF9SpBDSRKsWpxJ3suzChiXblgvc6all5muHupYoB7S83EQFi2CP+hGnj0QTu8gkwVbjucv0qYg==","signatures":[{"sig":"MEUCIQDa3q+OYpiESwrcxR8IzcFfsHCI3iFm1JQZQfu69NZN9QIgGsN9ZsW12G3OzlzkWOAknsVHCAcNm7fxeuSKPo38r1s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66204},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"demo":"bun ./demo-server.ts","test":"bun test","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"},"repository":{"url":"git+https://github.com/hello-ai/hello_pay.git","type":"git","directory":"js_sdk/react"},"_npmVersion":"10.9.2","description":"React components for accepting payments with HelloPay","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.0.0","bun-types":"^1.3.12","happy-dom":"^20.8.9","react-dom":"^19.0.0","typescript":"^5.5.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@happy-dom/global-registrator":"^20.8.9"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.1_1777550945971_0.02540152971304699","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@hello-pay/react","version":"0.2.2","keywords":["hellopay","payments","elements","react","card","tokenization"],"license":"UNLICENSED","_id":"@hello-pay/react@0.2.2","maintainers":[{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"}],"homepage":"https://github.com/hello-ai/hello_pay/tree/master/js_sdk/react","bugs":{"url":"https://github.com/hello-ai/hello_pay/issues"},"dist":{"shasum":"664b903b127fdd7f9fe56fa2ff2ceea667ab7f66","tarball":"https://registry.npmjs.org/@hello-pay/react/-/react-0.2.2.tgz","fileCount":8,"integrity":"sha512-yXZCYpRpJcb86Z8fqm67Z62f/9EoXtCbqGz7plgs0UtN+M7HzS/BfkooEX/iClBWz+W8mcnMxp92g5D5UzWUcw==","signatures":[{"sig":"MEQCIH7ws20zr//VqzPEksSLcTmsDcwIgi5RhAziH5R4aypPAiAnsJutEsBMIiIpG405uA7VS+RFd2L386T7gYpVL74L+g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66180},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"19f912f736fc09c7675b55f654a8f84ff6d7f6e1","scripts":{"demo":"bun ./demo-server.ts","test":"bun test","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:92f32b0e-16ee-4aa7-ba1c-360558392f1d"}},"repository":{"url":"git+https://github.com/hello-ai/hello_pay.git","type":"git","directory":"js_sdk/react"},"_npmVersion":"11.11.0","description":"React components for accepting payments with HelloPay","directories":{},"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.0.0","bun-types":"^1.3.12","happy-dom":"^20.8.9","react-dom":"^19.0.0","typescript":"^5.5.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@happy-dom/global-registrator":"^20.8.9"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react_0.2.2_1777551313239_0.8995613906538986","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@hello-pay/react","version":"0.3.0","keywords":["hellopay","payments","elements","react","card","tokenization"],"license":"UNLICENSED","_id":"@hello-pay/react@0.3.0","maintainers":[{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"}],"homepage":"https://github.com/hello-ai/hello_pay/tree/master/js_sdk/react","bugs":{"url":"https://github.com/hello-ai/hello_pay/issues"},"dist":{"shasum":"67b1777273b44efcdabfa9af0b0e9e507f864509","tarball":"https://registry.npmjs.org/@hello-pay/react/-/react-0.3.0.tgz","fileCount":8,"integrity":"sha512-tDrxTYI0R2/hgARTvbpNpoAzP//fasGJ4rDtCrubmBHis8rUE2WoT6cVIxw3c1XTKMqYh0nTclCvA5iNU9TieA==","signatures":[{"sig":"MEUCIBjprCQBt3k+MeCuiAkc06nzv7HtSa1fCtcd9iyoQ/AXAiEAiPaw/Wirhfnn2CQ0LfE/lA1JL8tJDEiohnr6oyNkNnE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65610},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"c8b10fa8b0cfb9239aa928b23ace34cdc1958f50","scripts":{"demo":"bun ./demo-server.ts","test":"bun test","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:92f32b0e-16ee-4aa7-ba1c-360558392f1d"}},"repository":{"url":"git+https://github.com/hello-ai/hello_pay.git","type":"git","directory":"js_sdk/react"},"_npmVersion":"11.13.0","description":"React components for accepting payments with HelloPay","directories":{},"_nodeVersion":"24.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.0.0","bun-types":"^1.3.12","happy-dom":"^20.8.9","react-dom":"^19.0.0","typescript":"^5.5.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@happy-dom/global-registrator":"^20.8.9"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react_0.3.0_1782310854657_0.13387337621078998","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@hello-pay/react","version":"0.4.0","description":"React components for accepting payments with HelloPay","license":"UNLICENSED","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/hello-ai/hello_pay.git","directory":"js_sdk/react"},"homepage":"https://github.com/hello-ai/hello_pay/tree/master/js_sdk/react","bugs":{"url":"https://github.com/hello-ai/hello_pay/issues"},"keywords":["hellopay","payments","elements","react","card","tokenization"],"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsup","demo":"bun ./demo-server.ts","typecheck":"tsc --noEmit","test":"bun test"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@happy-dom/global-registrator":"^20.8.9","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","bun-types":"^1.3.12","happy-dom":"^20.8.9","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.5.0","typescript":"^5.5.0"},"gitHead":"48d5becdffde3bdab02e1865b363cd22553eba98","_id":"@hello-pay/react@0.4.0","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-5ZIUQrPFSWdjzjFGG4MQB8bgfX6yM8ZlKftgEULTIbVVs0C8womZSjhC28xkbLmntZ+1G/7gx22xeToqfsM/rA==","shasum":"0914ed738a574fb8df1b1f290b61ee8653b5b48f","tarball":"https://registry.npmjs.org/@hello-pay/react/-/react-0.4.0.tgz","fileCount":8,"unpackedSize":90176,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCUAnZmTojYJatiiYwu+ZgTz7pS8wqJB8RZt4kEZu7K/AIgD5llpTaViUV6U4KND/is7GThFYfvdtgYhiLpouyutf4="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:92f32b0e-16ee-4aa7-ba1c-360558392f1d"}},"directories":{},"maintainers":[{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.4.0_1785655398142_0.16678528634670586"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-13T15:34:27.043Z","modified":"2026-08-02T07:23:18.440Z","0.1.0":"2026-04-13T15:34:27.311Z","0.2.0":"2026-04-30T11:23:56.999Z","0.2.1":"2026-04-30T12:09:06.120Z","0.2.2":"2026-04-30T12:15:13.399Z","0.3.0":"2026-06-24T14:20:54.792Z","0.4.0":"2026-08-02T07:23:18.288Z"},"bugs":{"url":"https://github.com/hello-ai/hello_pay/issues"},"license":"UNLICENSED","homepage":"https://github.com/hello-ai/hello_pay/tree/master/js_sdk/react","keywords":["hellopay","payments","elements","react","card","tokenization"],"repository":{"type":"git","url":"git+https://github.com/hello-ai/hello_pay.git","directory":"js_sdk/react"},"description":"React components for accepting payments with HelloPay","maintainers":[{"name":"reon.nishimura","email":"reon.nishimura@hello.ai"}],"readme":"# @hello-pay/react\n\nHelloPay 公式の React SDK。React アプリ内に任意のレイアウトでカード決済フォームを組み込める。\n\nカード情報は HelloPay 配信の iframe に隔離されるため、PCI DSS SAQ A を維持したまま React コンポーネントとして UI を組み立てられる。\n\n## Install\n\n```bash\nnpm install @hello-pay/react\n# or: pnpm add @hello-pay/react / bun add @hello-pay/react\n```\n\n## Usage\n\n```tsx\nimport {\n  loadHelloPay,\n  Elements,\n  CardNumberElement,\n  CardExpiryElement,\n  CardCvcElement,\n  CardholderNameElement,\n  useHelloPay,\n  useElements,\n} from '@hello-pay/react';\n\n// SDK のロードは module スコープで 1 回だけ（Stripe と同じ挙動）。\n// SSR / Next.js でも安全に module top-level に置ける。\nconst helloPayPromise = loadHelloPay('pk_test_xxx');\n\nexport default function Checkout() {\n  return (\n    <Elements hellopay={helloPayPromise}>\n      <PaymentForm />\n    </Elements>\n  );\n}\n\nfunction PaymentForm() {\n  const hellopay = useHelloPay();\n  const elements = useElements();\n\n  async function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    if (!hellopay || !elements) return;\n\n    const cardNumber = elements.getElement('cardNumber');\n    const { token, provider, card, error } = await hellopay.createToken(cardNumber);\n\n    if (error) {\n      // error.type は 'validation_error' | 'api_error' | 'config_error'\n      showError(error.message);\n      return;\n    }\n    // 以降は token / provider / card が必ず non-null（Discriminated Union）\n    // provider は通常 'hellopay'（HelloPay の決済 API に渡す）。\n    // Mastercard 暫定対応を利用している場合のみ、プロジェクトの設定に応じて\n    // 'stripe' / 'gmo' になる。いずれもトークンは加盟店自身の PSP 契約上に\n    // 発行されるため、決済・3DS・返金は自社の実装で行う。\n    // 'gmo' のトークンは発行から 30 分・1 回限りで、期限は tokenExpiryDate に入る。\n    await fetch('/api/charge', {\n      method: 'POST',\n      body: JSON.stringify({ token, provider, last4: card.last4 }),\n    });\n  }\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <CardNumberElement />\n      <CardExpiryElement />\n      <CardCvcElement />\n      <CardholderNameElement />\n      <button type=\"submit\">支払う</button>\n    </form>\n  );\n}\n```\n\n## Architecture\n\n- コア SDK (`hellopay-elements.js`) は HelloPay の公式 CDN (`js.hello-pay.app`) から配信される。npm パッケージは **ローダーと型定義のみ**を提供する（PCI DSS 要件）。\n- 各 Element コンポーネントは 1 つの `<div>` を描画するだけで、カード情報の入力 iframe はコア SDK が差し込む。\n- iframe 間通信は `BroadcastChannel`（同一オリジン）で行い、ホストページ側のコードは一切経由しない。\n- トークン化は iframe 内で直接 HelloPay の API に POST する。\n","readmeFilename":"README.md"}