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;