PaymentForm / AddressForm に onLoadError を追加

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`: フォーム内の要素からフォーカスが外れたときに発火

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(
         <Widgets
@@ -222,6 +223,7 @@ describe('createFormComponent', () => {
             onReady={onReady}
             onFocus={onFocus}
             onBlur={onBlur}
+            onLoadError={onLoadError}
           />
         </Widgets>
       );
@@ -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(
         <Widgets
@@ -402,6 +406,7 @@ describe('createFormComponent', () => {
             onReady={onReady}
             onFocus={onFocus}
             onBlur={onBlur}
+            onLoadError={onLoadError}
           />
         </Widgets>
       );
@@ -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));
       });
     });
   });

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 <div id={id} className={className} ref={domNodeRef} />;
   };

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;