Added cart types + missing LAE, AE, SAE types

tests/types/src/invalid.ts

@@ -61,6 +61,9 @@ elements.create('issuingCardCopyButton', {
   toCopy: 'non_existent',
 });
 
+// @ts-expect-error: CartElement requires a clientSecret
+elements.create('cart');
+
 stripe
   .confirmPayment({elements, confirmParams: {return_url: ''}})
   .then((res) => {

tests/types/src/valid.ts

@@ -43,6 +43,9 @@ import {
   StripeShippingAddressElement,
   StripeAddressElementChangeEvent,
   StripeAddressElement,
+  StripeCartElementPayloadEvent,
+  StripeCartElementLineItemClickEvent,
+  StripeCartElement,
   StripeElementType,
   CanMakePaymentResult,
   VerificationSession,
@@ -648,6 +651,59 @@ const retrievedShippingAddressElement: StripeShippingAddressElement | null = ele
   'shippingAddress'
 );
 
+let cartElementDefaults: StripeCartElement = elements.create('cart', {
+  clientSecret: '',
+});
+
+const cartElement = elements.create('cart', {
+  clientSecret: '',
+  descriptor: 'cart',
+  header: {
+    text: 'cart',
+  },
+  showOnAdd: 'auto',
+});
+
+cartElement.on('ready', (e: StripeCartElementPayloadEvent) => {
+  console.log(e.lineItems.count);
+});
+
+cartElement.on('lineitemclick', (e: StripeCartElementLineItemClickEvent) => {
+  e.preventDefault();
+  console.log(e.url);
+});
+
+cartElement.on('change', (e: StripeCartElementPayloadEvent) => {
+  console.log(e.lineItems.count);
+});
+
+cartElement.on('checkout', (e: StripeCartElementPayloadEvent) => {
+  console.log(e.lineItems.count);
+});
+
+cartElement.on(
+  'loaderror',
+  (e: {
+    elementType: 'cart';
+    error: {
+      type: string;
+    };
+  }) => {}
+);
+
+cartElement.update({
+  clientSecret: '',
+  descriptor: 'bag',
+  header: {
+    text: 'Your Cart',
+  },
+  showOnAdd: 'never',
+});
+
+const retrievedCartElement: StripeCartElement | null = elements.getElement(
+  'cart'
+);
+
 auBankAccountElement.destroy();
 cardElement.destroy();
 cardNumberElement.destroy();

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

@@ -27,6 +27,8 @@ import {
   StripeCardNumberElementOptions,
   StripeCardElement,
   StripeCardElementOptions,
+  StripeCartElement,
+  StripeCartElementOptions,
   StripeAuBankAccountElement,
   StripeAfterpayClearpayMessageElementOptions,
   StripeAffirmMessageElement,
@@ -229,6 +231,29 @@ export interface StripeElements {
    */
   getElement(elementType: 'cardCvc'): StripeCardCvcElement | null;
 
+  /////////////////////////////
+  /// cart
+  /////////////////////////////
+
+  /**
+   * Requires beta access:
+   * Contact [Stripe support](https://support.stripe.com/) for more information.
+   *
+   * Creates a `CartElement`.
+   */
+  create(
+    elementType: 'cart',
+    options: StripeCartElementOptions
+  ): StripeCartElement;
+
+  /**
+   * Requires beta access:
+   * Contact [Stripe support](https://support.stripe.com/) for more information.
+   *
+   * Looks up a previously created `Element` by its type.
+   */
+  getElement(elementType: 'cart'): StripeCartElement | null;
+
   /////////////////////////////
   /// fpxBank
   /////////////////////////////
@@ -474,6 +499,7 @@ export type StripeElementType =
   | 'cardNumber'
   | 'cardExpiry'
   | 'cardCvc'
+  | 'cart'
   | 'epsBank'
   | 'fpxBank'
   | 'iban'
@@ -491,13 +517,15 @@ export type StripeElementType =
   | 'issuingCardCopyButton';
 
 export type StripeElement =
+  | StripeAddressElement
   | StripeAffirmMessageElement
   | StripeAfterpayClearpayMessageElement
   | StripeAuBankAccountElement
   | StripeCardElement
   | StripeCardNumberElement
   | StripeCardExpiryElement
   | StripeCardCvcElement
+  | StripeCartElement
   | StripeEpsBankElement
   | StripeFpxBankElement
   | StripeIbanElement
@@ -510,7 +538,9 @@ export type StripeElement =
   | StripeIssuingCardCvcDisplayElement
   | StripeIssuingCardExpiryDisplayElement
   | StripeIssuingCardPinDisplayElement
-  | StripeIssuingCardCopyButtonElement;
+  | StripeIssuingCardCopyButtonElement
+  | StripeLinkAuthenticationElement
+  | StripeShippingAddressElement;
 
 export type StripeElementLocale =
   | 'auto'

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

@@ -1,4 +1,4 @@
-import {StripeElementBase, StripeElementChangeEvent} from './base';
+import {StripeElementBase} from './base';
 import {StripeError} from '../stripe';
 
 export type StripeAddressElement = StripeElementBase & {
@@ -208,8 +208,7 @@ export interface StripeAddressElementOptions {
   };
 }
 
-export interface StripeAddressElementChangeEvent
-  extends StripeElementChangeEvent {
+export interface StripeAddressElementChangeEvent {
   /**
    * The type of element that emitted this event.
    */

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

@@ -0,0 +1,157 @@
+import {StripeElementBase} from './base';
+import {StripeError} from '../stripe';
+
+export type StripeCartElement = StripeElementBase & {
+  /**
+   * The change event is triggered when the `Element`'s value changes.
+   */
+  on(
+    eventType: 'change',
+    handler: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+  once(
+    eventType: 'change',
+    handler: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+  off(
+    eventType: 'change',
+    handler?: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+
+  /**
+   * Triggered when the element is fully rendered and can accept `element.focus` calls.
+   */
+  on(
+    eventType: 'ready',
+    handler: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+  once(
+    eventType: 'ready',
+    handler: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+  off(
+    eventType: 'ready',
+    handler?: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+
+  /**
+   * Triggered when the element fails to load.
+   */
+  on(
+    eventType: 'loaderror',
+    handler: (event: {elementType: 'cart'; error: StripeError}) => any
+  ): StripeCartElement;
+  once(
+    eventType: 'loaderror',
+    handler: (event: {elementType: 'cart'; error: StripeError}) => any
+  ): StripeCartElement;
+  off(
+    eventType: 'loaderror',
+    handler?: (event: {elementType: 'cart'; error: StripeError}) => any
+  ): StripeCartElement;
+
+  /**
+   * Triggered when the 'checkout' button in the element is clicked
+   */
+  on(
+    eventType: 'checkout',
+    handler: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+  once(
+    eventType: 'checkout',
+    handler: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+  off(
+    eventType: 'checkout',
+    handler?: (event: StripeCartElementPayloadEvent) => any
+  ): StripeCartElement;
+
+  /**
+   * Triggered when a line item in the element is clicked
+   */
+  on(
+    eventType: 'lineitemclick',
+    handler: (event: StripeCartElementLineItemClickEvent) => any
+  ): StripeCartElement;
+  once(
+    eventType: 'lineitemclick',
+    handler: (event: StripeCartElementLineItemClickEvent) => any
+  ): StripeCartElement;
+  off(
+    eventType: 'lineitemclick',
+    handler?: (event: StripeCartElementLineItemClickEvent) => any
+  ): StripeCartElement;
+
+  /**
+   * Updates the options the `CartElement` was initialized with.
+   * Updates are merged into the existing configuration.
+   */
+  update(options: Partial<StripeCartElementOptions>): StripeCartElement;
+};
+
+export type CartDescriptor = 'cart' | 'bag' | 'basket';
+
+export type CartShowOnAdd = 'never' | 'auto';
+
+export interface StripeCartElementOptions {
+  /**
+   * Identifies the CartSession the Element will display and modify.
+   */
+  clientSecret: string;
+
+  /**
+   * Override the verbiage used within the Element to refer to itself.
+   * By default the Cart Element will use the term 'cart'.
+   */
+  descriptor?: CartDescriptor | null;
+
+  /**
+   * Override the text used in the title of the Element.
+   * By default the Cart Element will use the title 'Your [descriptor]'.
+   */
+  header?: {
+    text?: string;
+  };
+
+  /**
+   * Control whether the Element automatically appears when items are added to the cart.
+   * By default, the Cart Element will use 'auto'.
+   */
+  showOnAdd?: CartShowOnAdd | null;
+}
+
+export interface StripeCartElementPayloadEvent {
+  /**
+   * The type of element that emitted this event.
+   */
+  elementType: 'cart';
+
+  /**
+   * The ID of the CartSession associated with the Element.
+   */
+  id: string;
+
+  /**
+   * The number of line items currently in the cart.
+   */
+  lineItems: {
+    count: number;
+  };
+}
+
+export interface StripeCartElementLineItemClickEvent {
+  /**
+   * The type of element that emitted this event.
+   */
+  elementType: 'cart';
+
+  /**
+   * The ID of the CartSession associated with the Element.
+   */
+  preventDefault: () => void;
+
+  /**
+   * The type of element that emitted this event.
+   */
+  url: string;
+}

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

@@ -8,6 +8,7 @@ export * from './card-cvc';
 export * from './card-expiry';
 export * from './card-number';
 export * from './card';
+export * from './cart';
 export * from './eps-bank';
 export * from './fpx-bank';
 export * from './iban';

types/stripe-js/elements/link-authentication.d.ts

@@ -1,4 +1,4 @@
-import {StripeElementBase, StripeElementChangeEvent} from './base';
+import {StripeElementBase} from './base';
 import {StripeError} from '../stripe';
 
 export type StripeLinkAuthenticationElement = StripeElementBase & {
@@ -133,8 +133,7 @@ export interface StripeLinkAuthenticationElementOptions {
   };
 }
 
-export interface StripeLinkAuthenticationElementChangeEvent
-  extends StripeElementChangeEvent {
+export interface StripeLinkAuthenticationElementChangeEvent {
   /**
    * The type of element that emitted this event.
    */

types/stripe-js/elements/shipping-address.d.ts

@@ -1,4 +1,4 @@
-import {StripeElementBase, StripeElementChangeEvent} from './base';
+import {StripeElementBase} from './base';
 import {StripeError} from '../stripe';
 
 export type StripeShippingAddressElement = StripeElementBase & {
@@ -176,8 +176,7 @@ export interface StripeShippingAddressElementOptions {
   };
 }
 
-export interface StripeShippingAddressElementChangeEvent
-  extends StripeElementChangeEvent {
+export interface StripeShippingAddressElementChangeEvent {
   /**
    * The type of element that emitted this event.
    */