Add SPM events/types/tests (#613)

Author: bmathews-stripe

src/components/createElementComponent.test.tsx

@@ -712,6 +712,46 @@ describe('createElementComponent', () => {
       expect(mockHandler).not.toHaveBeenCalled();
     });
 
+    it('propagates the Element`s savedpaymentmethodremove event to the current onSavedPaymentMethodRemove prop', () => {
+      const mockHandler = jest.fn();
+      const mockHandler2 = jest.fn();
+      const {rerender} = render(
+        <Elements stripe={mockStripe}>
+          <PaymentElement onSavedPaymentMethodRemove={mockHandler} />
+        </Elements>
+      );
+      rerender(
+        <Elements stripe={mockStripe}>
+          <PaymentElement onSavedPaymentMethodRemove={mockHandler2} />
+        </Elements>
+      );
+
+      const removeEventMock = Symbol('savedpaymentmethodremove');
+      simulateEvent('savedpaymentmethodremove', removeEventMock);
+      expect(mockHandler2).toHaveBeenCalledWith(removeEventMock);
+      expect(mockHandler).not.toHaveBeenCalled();
+    });
+
+    it('propagates the Element`s savedpaymentmethodupdate event to the current onSavedPaymentMethodUpdate prop', () => {
+      const mockHandler = jest.fn();
+      const mockHandler2 = jest.fn();
+      const {rerender} = render(
+        <Elements stripe={mockStripe}>
+          <PaymentElement onSavedPaymentMethodUpdate={mockHandler} />
+        </Elements>
+      );
+      rerender(
+        <Elements stripe={mockStripe}>
+          <PaymentElement onSavedPaymentMethodUpdate={mockHandler2} />
+        </Elements>
+      );
+
+      const updateEventMock = Symbol('savedpaymentmethodupdate');
+      simulateEvent('savedpaymentmethodupdate', updateEventMock);
+      expect(mockHandler2).toHaveBeenCalledWith(updateEventMock);
+      expect(mockHandler).not.toHaveBeenCalled();
+    });
+
     it('updates the Element when options change', () => {
       const {rerender} = render(
         <Elements stripe={mockStripe}>

src/components/createElementComponent.tsx

@@ -33,6 +33,8 @@ interface PrivateElementProps {
   onCancel?: UnknownCallback;
   onShippingAddressChange?: UnknownCallback;
   onShippingRateChange?: UnknownCallback;
+  onSavedPaymentMethodRemove?: UnknownCallback;
+  onSavedPaymentMethodUpdate?: UnknownCallback;
   options?: UnknownOptions;
 }
 
@@ -61,6 +63,8 @@ const createElementComponent = (
     onCancel,
     onShippingAddressChange,
     onShippingRateChange,
+    onSavedPaymentMethodRemove,
+    onSavedPaymentMethodUpdate,
   }) => {
     const ctx = useElementsOrCheckoutSdkContextWithUseCase(
       `mounts <${displayName}>`
@@ -87,6 +91,16 @@ const createElementComponent = (
     useAttachEvent(element, 'cancel', onCancel);
     useAttachEvent(element, 'shippingaddresschange', onShippingAddressChange);
     useAttachEvent(element, 'shippingratechange', onShippingRateChange);
+    useAttachEvent(
+      element,
+      'savedpaymentmethodremove',
+      onSavedPaymentMethodRemove
+    );
+    useAttachEvent(
+      element,
+      'savedpaymentmethodupdate',
+      onSavedPaymentMethodUpdate
+    );
     useAttachEvent(element, 'change', onChange);
 
     let readyCallback: UnknownCallback | undefined;
@@ -228,6 +242,8 @@ const createElementComponent = (
     onCancel: PropTypes.func,
     onShippingAddressChange: PropTypes.func,
     onShippingRateChange: PropTypes.func,
+    onSavedPaymentMethodRemove: PropTypes.func,
+    onSavedPaymentMethodUpdate: PropTypes.func,
     options: PropTypes.object as any,
   };
 

src/types/index.ts

@@ -388,6 +388,32 @@ export interface PaymentElementProps extends ElementProps {
    * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
    */
   onLoaderStart?: (event: {elementType: 'payment'}) => any;
+
+  /**
+   * Requires beta access:
+   * Contact [Stripe support](https://support.stripe.com/) for more information.
+   *
+   * Triggered when the user removes a saved payment method from the Payment Element.
+   */
+  onSavedPaymentMethodRemove?: (event: {
+    elementType: 'payment';
+    success: boolean;
+    error?: string;
+    payment_method: stripeJs.StripePaymentElementChangeEvent['value']['payment_method'];
+  }) => any;
+
+  /**
+   * Requires beta access:
+   * Contact [Stripe support](https://support.stripe.com/) for more information.
+   *
+   * Triggered when the user updates a saved payment method from the Payment Element.
+   */
+  onSavedPaymentMethodUpdate?: (event: {
+    elementType: 'payment';
+    success: boolean;
+    error?: string;
+    payment_method: stripeJs.StripePaymentElementChangeEvent['value']['payment_method'];
+  }) => any;
 }
 
 export type PaymentElementComponent = FunctionComponent<PaymentElementProps>;