From 4c4e54d7af561ef424d1a3b9569d629949afa004 Mon Sep 17 00:00:00 2001 From: Yoichi Fujimoto Date: Thu, 15 Oct 2026 15:48:16 +0900 Subject: [PATCH 1/2] =?UTF-8?q?PaymentForm=20/=20AddressForm=20=E3=81=AB?= =?UTF-8?q?=20onLoadError=20=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- README.md | 1 + src/components/__tests__/createFormComponent.test.tsx | 6 ++++++ src/components/createFormComponent.tsx | 1 + types/index.d.ts | 2 ++ 4 files changed, 10 insertions(+) diff --git a/README.md b/README.md index 29d93f1..af5120d 100644 --- a/README.md +++ b/README.md @@ -125,5 +125,6 @@ PaymentForm および AddressForm コンポーネントは、以下のイベン ### 共通イベント - `onReady`: フォームの準備が完了したときに発火 +- `onLoadError`: Widgets のセッションを取得できず、フォームを表示できないときに発火。`event.error` は `{ type: "sdk_error", code: "session_not_loaded" }`。利用者にページの再読み込みを促してください - `onFocus`: フォーム内の要素がフォーカスされたときに発火 - `onBlur`: フォーム内の要素からフォーカスが外れたときに発火 diff --git a/src/components/__tests__/createFormComponent.test.tsx b/src/components/__tests__/createFormComponent.test.tsx index 019c861..b0c9dae 100644 --- a/src/components/__tests__/createFormComponent.test.tsx +++ b/src/components/__tests__/createFormComponent.test.tsx @@ -211,6 +211,7 @@ describe('createFormComponent', () => { const onReady = vi.fn(); const onFocus = vi.fn(); const onBlur = vi.fn(); + const onLoadError = vi.fn(); render( { onReady={onReady} onFocus={onFocus} onBlur={onBlur} + onLoadError={onLoadError} /> ); @@ -231,6 +233,7 @@ describe('createFormComponent', () => { expect(mockForm.on).toHaveBeenCalledWith('ready', expect.any(Function)); expect(mockForm.on).toHaveBeenCalledWith('focus', expect.any(Function)); expect(mockForm.on).toHaveBeenCalledWith('blur', expect.any(Function)); + expect(mockForm.on).toHaveBeenCalledWith('loaderror', expect.any(Function)); }); }); }); @@ -390,6 +393,7 @@ describe('createFormComponent', () => { const onReady = vi.fn(); const onFocus = vi.fn(); const onBlur = vi.fn(); + const onLoadError = vi.fn(); render( { onReady={onReady} onFocus={onFocus} onBlur={onBlur} + onLoadError={onLoadError} /> ); @@ -411,6 +416,7 @@ describe('createFormComponent', () => { expect(mockForm.on).toHaveBeenCalledWith('ready', expect.any(Function)); expect(mockForm.on).toHaveBeenCalledWith('focus', expect.any(Function)); expect(mockForm.on).toHaveBeenCalledWith('blur', expect.any(Function)); + expect(mockForm.on).toHaveBeenCalledWith('loaderror', expect.any(Function)); }); }); }); diff --git a/src/components/createFormComponent.tsx b/src/components/createFormComponent.tsx index c13863b..d186bf7 100644 --- a/src/components/createFormComponent.tsx +++ b/src/components/createFormComponent.tsx @@ -50,6 +50,7 @@ export const createFormComponent = ( useFormEvent(form, "blur", props.onBlur); useFormEvent(form, "focus", props.onFocus); useFormEvent(form, "ready", props.onReady); + useFormEvent(form, "loaderror", props.onLoadError); return
; }; diff --git a/types/index.d.ts b/types/index.d.ts index a81b5ec..3a60205 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -6,6 +6,7 @@ export type PaymentFormProps = { onBlur?: () => void; onFocus?: () => void; onReady?: () => void; + onLoadError?: (event: { error: paymentsJs.PayjpPaymentsError }) => void; onChange?: (event: { elementType: "payment"; empty: boolean; @@ -19,6 +20,7 @@ export type AddressFormProps = { onBlur?: () => void; onFocus?: () => void; onReady?: () => void; + onLoadError?: (event: { error: paymentsJs.PayjpPaymentsError }) => void; onChange?: (event: { elementType: "address"; elementMode: paymentsJs.AddressMode; From c8eb176fa312465559186f89aa3b1d730972ccaf Mon Sep 17 00:00:00 2001 From: Yoichi Fujimoto Date: Thu, 15 Oct 2026 15:59:02 +0900 Subject: [PATCH 2/2] =?UTF-8?q?onLoadError=20=E3=81=AE=E7=99=BA=E7=81=AB?= =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E3=81=A8=E5=AF=BE=E5=87=A6=E3=81=AE=E8=AA=AC?= =?UTF-8?q?=E6=98=8E=E3=82=92=E5=AE=9F=E8=A3=85=E3=81=AB=E5=90=88=E3=82=8F?= =?UTF-8?q?=E3=81=9B=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index af5120d..04b2b1d 100644 --- a/README.md +++ b/README.md @@ -125,6 +125,6 @@ PaymentForm および AddressForm コンポーネントは、以下のイベン ### 共通イベント - `onReady`: フォームの準備が完了したときに発火 -- `onLoadError`: Widgets のセッションを取得できず、フォームを表示できないときに発火。`event.error` は `{ type: "sdk_error", code: "session_not_loaded" }`。利用者にページの再読み込みを促してください +- `onLoadError`: Widgets のセッションを取得できず、フォームを表示できないときに発火。`event.error` は `{ type: "sdk_error", code: "session_not_loaded" }`。再試行しても取得できなかった場合のほか、client_secret が無効な場合にも発火します（フォームの iframe 自体を読み込めなかった場合は発火しません）。利用者にはページの再読み込みを促し、解消しない場合は client_secret を確認してください - `onFocus`: フォーム内の要素がフォーカスされたときに発火 - `onBlur`: フォーム内の要素からフォーカスが外れたときに発火