@hello-pay/react 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -29
- package/package.json +3 -4
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @hello-pay/react
|
|
2
2
|
|
|
3
|
-
HelloPay
|
|
3
|
+
HelloPay 公式の React SDK。React アプリ内に任意のレイアウトでカード決済フォームを組み込める。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
カード情報は HelloPay 配信の iframe に隔離されるため、PCI DSS SAQ A を維持したまま React コンポーネントとして UI を組み立てられる。
|
|
6
6
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
@@ -72,33 +72,9 @@ function PaymentForm() {
|
|
|
72
72
|
}
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
-
## Scripts
|
|
76
|
-
|
|
77
|
-
| Script | 内容 |
|
|
78
|
-
|---|---|
|
|
79
|
-
| `bun run build` | tsup で `dist/` に ESM + CJS + `.d.ts` を出力 |
|
|
80
|
-
| `bun run demo` | ローカル demo サーバー (http://localhost:18901) を起動。先に `just dev` が必要 |
|
|
81
|
-
| `bun run typecheck` | 型チェックのみ（`tsc --noEmit`） |
|
|
82
|
-
| `bun run test` | `bun test` 実行 |
|
|
83
|
-
|
|
84
|
-
## Demo
|
|
85
|
-
|
|
86
|
-
```bash
|
|
87
|
-
# ターミナル1
|
|
88
|
-
just dev # HelloPay サーバー起動（js.lvh.me / api.lvh.me / cde.lvh.me を公開）
|
|
89
|
-
|
|
90
|
-
# ターミナル2
|
|
91
|
-
cd js_sdk/react && bun run demo
|
|
92
|
-
open http://localhost:18901
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
`.dev-ports` からサーバーポートを自動検出するため、worktree を跨いで設定不要で動作する。
|
|
96
|
-
|
|
97
75
|
## Architecture
|
|
98
76
|
|
|
99
|
-
- コア SDK (`hellopay-elements.js`) は HelloPay
|
|
77
|
+
- コア SDK (`hellopay-elements.js`) は HelloPay の公式 CDN (`js.hello-pay.app`) から配信される。npm パッケージは **ローダーと型定義のみ**を提供する（PCI DSS 要件）。
|
|
100
78
|
- 各 Element コンポーネントは 1 つの `<div>` を描画するだけで、カード情報の入力 iframe はコア SDK が差し込む。
|
|
101
|
-
- iframe 間通信は `BroadcastChannel
|
|
102
|
-
- トークン化は iframe 内で直接
|
|
103
|
-
|
|
104
|
-
より詳細な設計は `public_docs/src/content/docs/integration/custom-form.md` を参照。
|
|
79
|
+
- iframe 間通信は `BroadcastChannel`（同一オリジン）で行い、ホストページ側のコードは一切経由しない。
|
|
80
|
+
- トークン化は iframe 内で直接 HelloPay の API に POST する。
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hello-pay/react",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.2.2",
|
|
4
|
+
"description": "React components for accepting payments with HelloPay",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"publishConfig": {
|
|
7
|
-
"access": "public"
|
|
8
|
-
"provenance": true
|
|
7
|
+
"access": "public"
|
|
9
8
|
},
|
|
10
9
|
"repository": {
|
|
11
10
|
"type": "git",
|