Update types for Saved Payment Methods (#625)

* Add spm types * Fix comment * Fix lint * Add tests
stripe · Jun 20, 2024 · 8c14042 · 8c14042
1 parent 35cbeab
commit 8c14042
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/tests/types/src/valid.ts b/tests/types/src/valid.ts
@@ -158,6 +158,10 @@ const elementsPMCProvided = stripe.elements({
 
 const elementsNoOptions: StripeElements = stripe.elements();
 
+const elementsCustomerSessionClientSecret = stripe.elements({
+  customerSessionClientSecret: 'test_123',
+});
+
 const MY_STYLE: StripeElementStyle = {
   base: {
     iconColor: '#c4f0ff',
@@ -459,7 +463,26 @@ paymentElement
     'change',
     (e: {
       elementType: 'payment';
-      value: {type: string};
+      value: {
+        type: 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;
+          };
+        };
+      };
       collapsed: boolean;
       complete: boolean;
       empty: boolean;

diff --git a/types/stripe-js/elements-group.d.ts b/types/stripe-js/elements-group.d.ts
@@ -661,6 +661,11 @@ interface BaseStripeElementsOptions {
    * Supported for the `payment`, `shippingAddress`, and `linkAuthentication` Elements.
    */
   customerOptions?: CustomerOptions;
+
+  /**
+   * Display saved PaymentMethods and Customer information.
+   */
+  customerSessionClientSecret?: string;
 }
 
 export interface StripeElementsOptionsClientSecret

diff --git a/types/stripe-js/elements/payment.d.ts b/types/stripe-js/elements/payment.d.ts
@@ -270,6 +270,26 @@ export interface StripePaymentElementChangeEvent {
 
   /**
    * An object containing the currently selected PaymentMethod type (in snake_case, for example "afterpay_clearpay").
+   * If a payment method is selected, it will be included in the object.
    */
-  value: {type: string};
+  value: {
+    type: 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;
+      };
+    };
+  };
 }