package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stripe/react-stripe-js",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "React components for Stripe.js and Stripe Elements",
   "main": "dist/react-stripe.js",
   "module": "dist/react-stripe.esm.js",

src/components/EmbeddedCheckout.client.test.tsx

@@ -129,4 +129,29 @@ describe('EmbeddedCheckout on the client', () => {
     );
     expect(mockEmbeddedCheckout.unmount).toBeCalled();
   });
+
+  it('does not throw when the Embedded Checkout instance is already destroyed when unmounting', async () => {
+    const {container, rerender} = render(
+      <EmbeddedCheckoutProvider stripe={mockStripe} options={fakeOptions}>
+        <EmbeddedCheckout />
+      </EmbeddedCheckoutProvider>
+    );
+
+    await act(() => mockEmbeddedCheckoutPromise);
+
+    expect(mockEmbeddedCheckout.mount).toBeCalledWith(container.firstChild);
+
+    mockEmbeddedCheckout.unmount.mockImplementation(() => {
+      throw new Error('instance has been destroyed');
+    });
+
+    expect(() => {
+      rerender(
+        <EmbeddedCheckoutProvider
+          stripe={mockStripe}
+          options={fakeOptions}
+        ></EmbeddedCheckoutProvider>
+      );
+    }).not.toThrow();
+  });
 });

src/components/EmbeddedCheckout.tsx

@@ -32,8 +32,17 @@ const EmbeddedCheckoutClientElement = ({
     // Clean up on unmount
     return () => {
       if (isMounted.current && embeddedCheckout) {
-        embeddedCheckout.unmount();
-        isMounted.current = false;
+        try {
+          embeddedCheckout.unmount();
+          isMounted.current = false;
+        } catch (e) {
+          // Do nothing.
+          // Parent effects are destroyed before child effects, so
+          // in cases where both the EmbeddedCheckoutProvider and
+          // the EmbeddedCheckout component are removed at the same
+          // time, the embeddedCheckout instance will be destroyed,
+          // which causes an error when calling unmount.
+        }
       }
     };
   }, [embeddedCheckout]);