Update EmbeddedCheckoutProvider prop types (#525)

package.json

@@ -69,7 +69,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@storybook/react": "^6.5.0-beta.8",
-    "@stripe/stripe-js": "^4.0.0",
+    "@stripe/stripe-js": "^4.3.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",

src/components/EmbeddedCheckoutProvider.test.tsx

@@ -382,6 +382,38 @@ describe('EmbeddedCheckoutProvider', () => {
     );
   });
 
+  it('does not allow changes to onShippingDetailsChange option', async () => {
+    const optionsProp1 = {
+      fetchClientSecret,
+      onShippingDetailsChange: () => Promise.resolve({type: 'accept' as const}),
+    };
+    const optionsProp2 = {
+      fetchClientSecret,
+      onShippingDetailsChange: () => Promise.resolve({type: 'reject' as const}),
+    };
+    // Silence console output so test output is less noisy
+    consoleWarn.mockImplementation(() => {});
+
+    const {rerender} = render(
+      <EmbeddedCheckoutProvider
+        stripe={mockStripe}
+        options={optionsProp1}
+      ></EmbeddedCheckoutProvider>
+    );
+    await act(() => mockEmbeddedCheckoutPromise);
+
+    rerender(
+      <EmbeddedCheckoutProvider
+        stripe={mockStripe}
+        options={optionsProp2}
+      ></EmbeddedCheckoutProvider>
+    );
+
+    expect(consoleWarn).toHaveBeenCalledWith(
+      'Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the onShippingDetailsChange option after setting it.'
+    );
+  });
+
   it('destroys Embedded Checkout when the component unmounts', async () => {
     const {rerender} = render(
       <div>

src/components/EmbeddedCheckoutProvider.tsx

@@ -54,6 +54,9 @@ interface EmbeddedCheckoutProviderProps {
     clientSecret?: string | null;
     fetchClientSecret?: (() => Promise<string>) | null;
     onComplete?: () => void;
+    onShippingDetailsChange?: (
+      event: stripeJs.StripeEmbeddedCheckoutShippingDetailsChangeEvent
+    ) => Promise<stripeJs.ResultAction>;
   };
 }
 
@@ -208,6 +211,15 @@ export const EmbeddedCheckoutProvider: FunctionComponent<PropsWithChildren<
         'Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the onComplete option after setting it.'
       );
     }
+
+    if (
+      prevOptions.onShippingDetailsChange != null &&
+      options.onShippingDetailsChange !== prevOptions.onShippingDetailsChange
+    ) {
+      console.warn(
+        'Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the onShippingDetailsChange option after setting it.'
+      );
+    }
   }, [prevOptions, options]);
 
   return (

yarn.lock

@@ -2335,10 +2335,10 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@stripe/stripe-js@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-4.0.0.tgz#57f258cdd595bba0b8a4f5dc94fc58bfa0a324a6"
-  integrity sha512-R5zewuzTVPGn4dXkavbgDk8vSILkT5hRlzga10p6JzngR17qKi1fgc27kl58TmaVvgBZGngTRNH2j9kYdvfPGA==
+"@stripe/stripe-js@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-4.3.0.tgz#5e8fe1e654413698f33cbc7008fef1e86e16b030"
+  integrity sha512-bf8MxzzgD3dybtyIJUQSDMqxjEkJfsmj9IdRqDv609Zw08R41O7eoIy0f8KY41u8MbaFOYsn+XGJZtg1xwR2wQ==
 
 "@testing-library/dom@^8.5.0":
   version "8.13.0"