[pull] master from stripe:master

package.json

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

src/components/createElementComponent.test.tsx

@@ -4,8 +4,10 @@ import {render, act, waitFor} from '@testing-library/react';
 import * as ElementsModule from './Elements';
 import * as CheckoutContextModule from '../checkout/components/CheckoutContext';
 import {CheckoutElementsProvider} from '../checkout/components/CheckoutElementsProvider';
+import {CheckoutFormProvider} from '../checkout/components/CheckoutFormProvider';
 import createElementComponent from './createElementComponent';
 import * as mocks from '../../test/mocks';
+import makeDeferred from '../../test/makeDeferred';
 import {
   CardElementComponent,
   PaymentElementComponent,
@@ -21,7 +23,7 @@ import {
 } from '../types';
 
 const {Elements} = ElementsModule;
-const {useCheckout} = CheckoutContextModule;
+const {useCheckout, useCheckoutForm} = CheckoutContextModule;
 
 describe('createElementComponent', () => {
   let mockStripe: any;
@@ -517,6 +519,65 @@ describe('createElementComponent', () => {
       expect(mockHandler).not.toHaveBeenCalled();
     });
 
+    it('returns the Payment Form Element`s async confirm handler result', async () => {
+      const validation = makeDeferred<void>();
+      const mockActions = mocks.mockCheckoutActions();
+      mockActions.confirm.mockResolvedValue({type: 'success'});
+      mockCheckoutSdk.loadActions.mockResolvedValue({
+        type: 'success',
+        actions: mockActions,
+      });
+      mockStripe.initCheckoutFormSdk.mockReturnValue(mockCheckoutSdk);
+
+      const CheckoutFormWithAsyncConfirm = () => {
+        const checkoutState = useCheckoutForm();
+        const onConfirm = async (event: any) => {
+          if (checkoutState.type !== 'success') {
+            return undefined;
+          }
+
+          await validation.promise;
+          return checkoutState.checkout.confirm({formConfirmEvent: event});
+        };
+
+        return <CheckoutForm onConfirm={onConfirm} />;
+      };
+
+      render(
+        <CheckoutFormProvider
+          stripe={mockStripe}
+          options={{clientSecret: 'cs_123'}}
+        >
+          <CheckoutFormWithAsyncConfirm />
+        </CheckoutFormProvider>
+      );
+
+      await waitFor(() =>
+        expect(mockCheckoutSdk.on).toHaveBeenCalledWith(
+          'change',
+          expect.any(Function)
+        )
+      );
+
+      const confirmHandler = simulateOn.mock.calls.find(
+        ([event]: any[]) => event === 'confirm'
+      )?.[1];
+      expect(confirmHandler).toEqual(expect.any(Function));
+
+      const confirmEventMock = Symbol('confirm');
+      const handlerResult = confirmHandler(confirmEventMock);
+
+      expect(handlerResult).toHaveProperty('then', expect.any(Function));
+      expect(mockActions.confirm).not.toHaveBeenCalled();
+
+      await validation.resolve(undefined);
+      await handlerResult;
+
+      expect(mockActions.confirm).toHaveBeenCalledWith({
+        formConfirmEvent: confirmEventMock,
+      });
+    });
+
     it('propagates the Payment Form Element`s cancel event to the current onCancel prop', () => {
       const mockHandler = jest.fn();
       const mockHandler2 = jest.fn();

src/utils/useAttachEvent.ts

@@ -20,10 +20,11 @@ export const useAttachEvent = <A extends unknown[]>(
       return () => {};
     }
 
-    const decoratedCb = (...args: A): void => {
+    const decoratedCb = (...args: A) => {
       if (cbRef.current) {
-        cbRef.current(...args);
+        return cbRef.current(...args);
       }
+      return undefined;
     };
 
     (element as any).on(event, decoratedCb);