Add address element types

tests/types/src/invalid.ts

@@ -41,6 +41,9 @@ paymentElement.on('change', (e) => {
   }
 });
 
+// @ts-expect-error: AddressElement requires a mode
+elements.create('address');
+
 stripe
   .confirmPayment({elements, confirmParams: {return_url: ''}})
   .then((res) => {

tests/types/src/valid.ts

@@ -40,6 +40,8 @@ import {
   StripeLinkAuthenticationElement,
   StripeShippingAddressElementChangeEvent,
   StripeShippingAddressElement,
+  StripeAddressElementChangeEvent,
+  StripeAddressElement,
   StripeElementType,
   CanMakePaymentResult,
   VerificationSession,
@@ -491,6 +493,77 @@ const retrievedLinkAuthenticationElement: StripeLinkAuthenticationElement | null
   'linkAuthentication'
 );
 
+let addressElementDefaults: StripeAddressElement = elements.create('address', {
+  mode: 'shipping',
+});
+
+addressElementDefaults = elements.create('address', {mode: 'billing'});
+
+const addressElement = elements.create('address', {
+  mode: 'shipping',
+  allowedCountries: ['US'],
+  autocomplete: {mode: 'disabled'},
+  contacts: [
+    {
+      name: 'Jane Doe',
+      address: {
+        line1: '513 Townsend St',
+        city: 'San Francisco',
+        state: 'CA',
+        postal_code: '92122',
+        country: 'US',
+      },
+    },
+  ],
+  blockPoBox: true,
+  defaultValues: {
+    name: 'Jane Doe',
+    address: {
+      line1: '513 Townsend St',
+      city: 'San Francisco',
+      state: 'CA',
+      postal_code: '92122',
+      country: 'US',
+    },
+  },
+  fields: {
+    phone: 'always',
+  },
+  validation: {
+    phone: {
+      required: 'never',
+    },
+  },
+});
+
+addressElement
+  .on('ready', (e: {elementType: 'address'}) => {})
+  .on('focus', (e: {elementType: 'address'}) => {})
+  .on('blur', (e: {elementType: 'address'}) => {})
+  .on('change', (e: StripeAddressElementChangeEvent) => {})
+  .on('loaderstart', (e: {elementType: 'address'}) => {})
+  .on(
+    'loaderror',
+    (e: {
+      elementType: 'address';
+      error: {
+        type: string;
+      };
+    }) => {}
+  );
+
+addressElement.update({
+  validation: {
+    phone: {
+      required: 'always',
+    },
+  },
+});
+
+const retrievedAddressElement: StripeAddressElement | null = elements.getElement(
+  'address'
+);
+
 let shippingAddressElementDefaults: StripeShippingAddressElement = elements.create(
   'shippingAddress'
 );

types/stripe-js/elements-group.d.ts

@@ -1,4 +1,6 @@
 import {
+  StripeAddressElement,
+  StripeAddressElementOptions,
   StripeShippingAddressElement,
   StripeShippingAddressElementOptions,
   StripePaymentRequestButtonElement,
@@ -46,6 +48,29 @@ export interface StripeElements {
    */
   fetchUpdates(): Promise<{error?: {message: string; status?: string}}>;
 
+  /////////////////////////////
+  /// address
+  /////////////////////////////
+
+  /**
+   * Requires beta access:
+   * Contact [Stripe support](https://support.stripe.com/) for more information.
+   *
+   * Creates a `AddressElement`.
+   */
+  create(
+    elementType: 'address',
+    options: StripeAddressElementOptions
+  ): StripeAddressElement;
+
+  /**
+   * Requires beta access:
+   * Contact [Stripe support](https://support.stripe.com/) for more information.
+   *
+   * Looks up a previously created `Element` by its type.
+   */
+  getElement(elementType: 'address'): StripeAddressElement | null;
+
   /////////////////////////////
   /// affirmMessage
   /////////////////////////////
@@ -329,9 +354,13 @@ export interface StripeElements {
     elementType: 'paymentRequestButton'
   ): StripePaymentRequestButtonElement | null;
 
+  /////////////////////////////
+  /// shippingAddress
+  /////////////////////////////
+
   /**
-   * Requires beta access:
-   * Contact [Stripe support](https://support.stripe.com/) for more information.
+   * @deprecated
+   * Use `Address` element instead.
    *
    * Creates a `ShippingAddressElement`.
    */
@@ -341,8 +370,8 @@ export interface StripeElements {
   ): StripeShippingAddressElement;
 
   /**
-   * Requires beta access:
-   * Contact [Stripe support](https://support.stripe.com/) for more information.
+   * @deprecated
+   * Use `Address` element instead.
    *
    * Looks up a previously created `Element` by its type.
    */
@@ -352,6 +381,7 @@ export interface StripeElements {
 }
 
 export type StripeElementType =
+  | 'address'
   | 'affirmMessage'
   | 'afterpayClearpayMessage'
   | 'auBankAccount'