Add new change event types (#659)

* Add carddetailschange event types * Add spm event types * run prettier
stripe · Oct 8, 2024 · 5965cef · 5965cef
1 parent 906a44c
commit 5965cef
Show file tree

Hide file tree

Showing 3 changed files with 212 additions and 0 deletions.
diff --git a/tests/types/src/invalid.ts b/tests/types/src/invalid.ts
@@ -105,6 +105,21 @@ paymentElement.on('change', (e) => {
   if (e.error) {
   }
 });
+paymentElement.on('carddetailschange', (e) => {
+  // @ts-expect-error: `error` is not present on PaymentElement "carddetailschange" event.
+  if (e.error) {
+  }
+});
+paymentElement.on('savedpaymentmethodupdate', (e) => {
+  // @ts-expect-error: `loading` is not present on PaymentElement "savedpaymentmethodupdate" event.
+  if (e.loading) {
+  }
+});
+paymentElement.on('savedpaymentmethodremove', (e) => {
+  // @ts-expect-error: `loading` is not present on PaymentElement "savedpaymentmethodremove" event.
+  if (e.loading) {
+  }
+});
 
 expressCheckoutElement.update({
   // @ts-expect-error: `paymentMethods` option can't be updated

diff --git a/tests/types/src/valid.ts b/tests/types/src/valid.ts
@@ -52,6 +52,8 @@ import {
   StripeExpressCheckoutElementShippingRateChangeEvent,
   AvailablePaymentMethods,
   StripeElementsOptions,
+  CardBrand,
+  CardFunding,
 } from '../../../types';
 
 const stripePromise: Promise<Stripe | null> = loadStripe('');
@@ -512,6 +514,67 @@ paymentElement
         type: string;
       };
     }) => {}
+  )
+  .on(
+    'carddetailschange',
+    (e: {
+      elementType: 'payment';
+      loading: boolean;
+      details?: {
+        brands: CardBrand[] | null;
+        funding: CardFunding | null;
+      };
+    }) => {}
+  )
+  .on(
+    'savedpaymentmethodupdate',
+    (e: {
+      elementType: 'payment';
+      success: boolean;
+      error?: string;
+      payment_method: {
+        id: string;
+        type: string;
+        billing_details: {
+          address: {
+            city: null | string;
+            country: null | string;
+            line1: null | string;
+            line2: null | string;
+            postal_code: null | string;
+            state: null | string;
+          };
+          name: null | string;
+          email: null | string;
+          phone: null | string;
+        };
+      };
+    }) => {}
+  )
+  .on(
+    'savedpaymentmethodremove',
+    (e: {
+      elementType: 'payment';
+      success: boolean;
+      error?: string;
+      payment_method: {
+        id: string;
+        type: string;
+        billing_details: {
+          address: {
+            city: null | string;
+            country: null | string;
+            line1: null | string;
+            line2: null | string;
+            postal_code: null | string;
+            state: null | string;
+          };
+          name: null | string;
+          email: null | string;
+          phone: null | string;
+        };
+      };
+    }) => {}
   );
 
 paymentElement.collapse();

diff --git a/types/stripe-js/elements/payment.d.ts b/types/stripe-js/elements/payment.d.ts
@@ -116,6 +116,31 @@ export type StripePaymentElement = StripeElementBase & {
     handler?: (event: {elementType: 'payment'}) => any
   ): StripePaymentElement;
 
+  /**
+   * The change event is triggered when the `Element`'s value changes.
+   * Represents the details of a selected Card payment method.
+   */
+  on(
+    eventType: 'carddetailschange',
+    handler: (event: StripePaymentElementCardDetailsChangeEvent) => any
+  ): StripePaymentElement;
+
+  /**
+   * Triggered when a Saved Payment Method is updated.
+   */
+  on(
+    eventType: 'savedpaymentmethodupdate',
+    handler: (event: StripePaymentElementSavedPaymentMethodUpdateEvent) => any
+  ): StripePaymentElement;
+
+  /**
+   * Triggered when a Saved Payment Method is removed.
+   */
+  on(
+    eventType: 'savedpaymentmethodremove',
+    handler: (event: StripePaymentElementSavedPaymentMethodRemoveEvent) => any
+  ): StripePaymentElement;
+
   /**
    * Updates the options the `PaymentElement` was initialized with.
    * Updates are merged into the existing configuration.
@@ -297,3 +322,112 @@ export interface StripePaymentElementChangeEvent {
     };
   };
 }
+
+type CardBrand =
+  | 'amex'
+  | 'diners'
+  | 'discover'
+  | 'eftpos_au'
+  | 'jcb'
+  | 'mastercard'
+  | 'unionpay'
+  | 'visa'
+  | 'unknown';
+type CardFunding = 'credit' | 'debit' | 'prepaid' | 'unknown';
+
+export interface StripePaymentElementCardDetailsChangeEvent {
+  /**
+   * The type of element that emitted this event.
+   */
+  elementType: 'payment';
+
+  /**
+   * `true` when the card details are loading.
+   */
+  loading: boolean;
+
+  /**
+   * The card details for the selected payment method.
+   * Undefined while loading and for non card payment methods.
+   */
+  details?: {
+    brands: CardBrand[] | null;
+    funding: CardFunding | null;
+  };
+}
+
+export interface StripePaymentElementSavedPaymentMethodUpdateEvent {
+  /**
+   * The type of element that emitted this event.
+   */
+  elementType: 'payment';
+
+  /**
+   * `true` when the saved payment method is successfully updated.
+   */
+  success: boolean;
+
+  /**
+   * Error message if the saved payment method update fails.
+   */
+  error?: string;
+
+  /**
+   * The updated saved payment method.
+   */
+  payment_method: {
+    id: string;
+    type: string;
+    billing_details: {
+      address: {
+        city: null | string;
+        country: null | string;
+        line1: null | string;
+        line2: null | string;
+        postal_code: null | string;
+        state: null | string;
+      };
+      name: null | string;
+      email: null | string;
+      phone: null | string;
+    };
+  };
+}
+
+export interface StripePaymentElementSavedPaymentMethodRemoveEvent {
+  /**
+   * The type of element that emitted this event.
+   */
+  elementType: 'payment';
+
+  /**
+   * `true` when the saved payment method is successfully removed.
+   */
+  success: boolean;
+
+  /**
+   * Error message if the saved payment method removal fails.
+   */
+  error?: string;
+
+  /**
+   * The removed saved payment method.
+   */
+  payment_method: {
+    id: string;
+    type: string;
+    billing_details: {
+      address: {
+        city: null | string;
+        country: null | string;
+        line1: null | string;
+        line2: null | string;
+        postal_code: null | string;
+        state: null | string;
+      };
+      name: null | string;
+      email: null | string;
+      phone: null | string;
+    };
+  };
+}