diff --git a/README.md b/README.md index 29d93f1..04b2b1d 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" }`。再試行しても取得できなかった場合のほか、client_secret が無効な場合にも発火します(フォームの iframe 自体を読み込めなかった場合は発火しません)。利用者にはページの再読み込みを促し、解消しない場合は client_secret を確認してください - `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;