@stripe/stripe-js 1.20.3 → 1.21.0

package/types/stripe-js/elements/card-number.d.ts

@@ -1,140 +1,143 @@
-///<reference path='./base.d.ts' />
+import {
+  StripeElementBase,
+  StripeElementStyle,
+  StripeElementClasses,
+  StripeElementChangeEvent,
+} from './base';
 
-declare module '@stripe/stripe-js' {
-  type StripeCardNumberElement = StripeElementBase & {
-    /**
-     * The change event is triggered when the `Element`'s value changes.
-     */
-    on(
-      eventType: 'change',
-      handler: (event: StripeCardNumberElementChangeEvent) => any
-    ): StripeCardNumberElement;
-    once(
-      eventType: 'change',
-      handler: (event: StripeCardNumberElementChangeEvent) => any
-    ): StripeCardNumberElement;
-    off(
-      eventType: 'change',
-      handler?: (event: StripeCardNumberElementChangeEvent) => any
-    ): StripeCardNumberElement;
+export type StripeCardNumberElement = StripeElementBase & {
+  /**
+   * The change event is triggered when the `Element`'s value changes.
+   */
+  on(
+    eventType: 'change',
+    handler: (event: StripeCardNumberElementChangeEvent) => any
+  ): StripeCardNumberElement;
+  once(
+    eventType: 'change',
+    handler: (event: StripeCardNumberElementChangeEvent) => any
+  ): StripeCardNumberElement;
+  off(
+    eventType: 'change',
+    handler?: (event: StripeCardNumberElementChangeEvent) => any
+  ): StripeCardNumberElement;
 
-    /**
-     * Triggered when the element is fully rendered and can accept `element.focus` calls.
-     */
-    on(
-      eventType: 'ready',
-      handler: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
-    once(
-      eventType: 'ready',
-      handler: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
-    off(
-      eventType: 'ready',
-      handler?: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
+  /**
+   * Triggered when the element is fully rendered and can accept `element.focus` calls.
+   */
+  on(
+    eventType: 'ready',
+    handler: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
+  once(
+    eventType: 'ready',
+    handler: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
+  off(
+    eventType: 'ready',
+    handler?: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
 
-    /**
-     * Triggered when the element gains focus.
-     */
-    on(
-      eventType: 'focus',
-      handler: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
-    once(
-      eventType: 'focus',
-      handler: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
-    off(
-      eventType: 'focus',
-      handler?: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
+  /**
+   * Triggered when the element gains focus.
+   */
+  on(
+    eventType: 'focus',
+    handler: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
+  once(
+    eventType: 'focus',
+    handler: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
+  off(
+    eventType: 'focus',
+    handler?: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
 
-    /**
-     * Triggered when the element loses focus.
-     */
-    on(
-      eventType: 'blur',
-      handler: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
-    once(
-      eventType: 'blur',
-      handler: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
-    off(
-      eventType: 'blur',
-      handler?: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
+  /**
+   * Triggered when the element loses focus.
+   */
+  on(
+    eventType: 'blur',
+    handler: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
+  once(
+    eventType: 'blur',
+    handler: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
+  off(
+    eventType: 'blur',
+    handler?: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
 
-    /**
-     * Triggered when the escape key is pressed within the element.
-     */
-    on(
-      eventType: 'escape',
-      handler: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
-    once(
-      eventType: 'escape',
-      handler: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
-    off(
-      eventType: 'escape',
-      handler?: (event: {elementType: 'cardNumber'}) => any
-    ): StripeCardNumberElement;
+  /**
+   * Triggered when the escape key is pressed within the element.
+   */
+  on(
+    eventType: 'escape',
+    handler: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
+  once(
+    eventType: 'escape',
+    handler: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
+  off(
+    eventType: 'escape',
+    handler?: (event: {elementType: 'cardNumber'}) => any
+  ): StripeCardNumberElement;
 
-    /**
-     * Updates the options the `CardNumberElement` was initialized with.
-     * Updates are merged into the existing configuration.
-     *
-     * The styles of an `Element` can be dynamically changed using `element.update`.
-     * This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
-     */
-    update(options: Partial<StripeCardNumberElementOptions>): void;
-  };
+  /**
+   * Updates the options the `CardNumberElement` was initialized with.
+   * Updates are merged into the existing configuration.
+   *
+   * The styles of an `Element` can be dynamically changed using `element.update`.
+   * This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
+   */
+  update(options: Partial<StripeCardNumberElementOptions>): void;
+};
 
-  interface StripeCardNumberElementOptions {
-    classes?: StripeElementClasses;
+export interface StripeCardNumberElementOptions {
+  classes?: StripeElementClasses;
 
-    style?: StripeElementStyle;
+  style?: StripeElementStyle;
 
-    placeholder?: string;
+  placeholder?: string;
 
-    /**
-     * Applies a disabled state to the Element such that user input is not accepted.
-     * Default is false.
-     */
-    disabled?: boolean;
+  /**
+   * Applies a disabled state to the Element such that user input is not accepted.
+   * Default is false.
+   */
+  disabled?: boolean;
 
-    /**
-     * Show a card brand icon in the Element.
-     * Default is `false`.
-     */
-    showIcon?: boolean;
+  /**
+   * Show a card brand icon in the Element.
+   * Default is `false`.
+   */
+  showIcon?: boolean;
 
-    /**
-     * Appearance of the brand icon in the Element.
-     */
-    iconStyle?: 'default' | 'solid';
-  }
+  /**
+   * Appearance of the brand icon in the Element.
+   */
+  iconStyle?: 'default' | 'solid';
+}
 
-  interface StripeCardNumberElementChangeEvent
-    extends StripeElementChangeEvent {
-    /**
-     * The type of element that emitted this event.
-     */
-    elementType: 'cardNumber';
+export interface StripeCardNumberElementChangeEvent
+  extends StripeElementChangeEvent {
+  /**
+   * The type of element that emitted this event.
+   */
+  elementType: 'cardNumber';
 
-    /*
-     * The card brand of the card number being entered.
-     */
-    brand:
-      | 'visa'
-      | 'mastercard'
-      | 'amex'
-      | 'discover'
-      | 'diners'
-      | 'jcb'
-      | 'unionpay'
-      | 'unknown';
-  }
+  /*
+   * The card brand of the card number being entered.
+   */
+  brand:
+    | 'visa'
+    | 'mastercard'
+    | 'amex'
+    | 'discover'
+    | 'diners'
+    | 'jcb'
+    | 'unionpay'
+    | 'unknown';
 }

package/types/stripe-js/elements/card.d.ts

@@ -1,155 +1,158 @@
-///<reference path='./base.d.ts' />
-
-declare module '@stripe/stripe-js' {
-  type StripeCardElement = StripeElementBase & {
-    /**
-     * The change event is triggered when the `Element`'s value changes.
-     */
-    on(
-      eventType: 'change',
-      handler: (event: StripeCardElementChangeEvent) => any
-    ): StripeCardElement;
-    once(
-      eventType: 'change',
-      handler: (event: StripeCardElementChangeEvent) => any
-    ): StripeCardElement;
-    off(
-      eventType: 'change',
-      handler?: (event: StripeCardElementChangeEvent) => any
-    ): StripeCardElement;
-
-    /**
-     * Triggered when the element is fully rendered and can accept `element.focus` calls.
-     */
-    on(
-      eventType: 'ready',
-      handler: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-    once(
-      eventType: 'ready',
-      handler: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-    off(
-      eventType: 'ready',
-      handler?: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-
-    /**
-     * Triggered when the element gains focus.
-     */
-    on(
-      eventType: 'focus',
-      handler: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-    once(
-      eventType: 'focus',
-      handler: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-    off(
-      eventType: 'focus',
-      handler?: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-
-    /**
-     * Triggered when the element loses focus.
-     */
-    on(
-      eventType: 'blur',
-      handler: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-    once(
-      eventType: 'blur',
-      handler: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-    off(
-      eventType: 'blur',
-      handler?: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-
-    /**
-     * Triggered when the escape key is pressed within the element.
-     */
-    on(
-      eventType: 'escape',
-      handler: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-    once(
-      eventType: 'escape',
-      handler: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-    off(
-      eventType: 'escape',
-      handler?: (event: {elementType: 'card'}) => any
-    ): StripeCardElement;
-
-    /**
-     * Updates the options the `CardElement` was initialized with.
-     * Updates are merged into the existing configuration.
-     *
-     * The styles of an `CardElement` can be dynamically changed using `element.update`.
-     * This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
-     */
-    update(options: Partial<StripeCardElementOptions>): void;
-  };
-
-  interface StripeCardElementOptions {
-    classes?: StripeElementClasses;
-
-    style?: StripeElementStyle;
-
-    /**
-     * A pre-filled set of values to include in the input (e.g., `{postalCode: '94110'}`).
-     * Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.
-     */
-    value?: {postalCode?: string};
-
-    /**
-     * Hide the postal code field.
-     * Default is `false`.
-     * If you are already collecting a full billing address or postal code elsewhere, set this to `true`.
-     */
-    hidePostalCode?: boolean;
-
-    /**
-     * Appearance of the icon in the Element.
-     */
-    iconStyle?: 'default' | 'solid';
-
-    /**
-     * Hides the icon in the Element.
-     * Default is `false`.
-     */
-    hideIcon?: boolean;
-
-    /**
-     * Applies a disabled state to the Element such that user input is not accepted.
-     * Default is false.
-     */
-    disabled?: boolean;
-  }
-
-  interface StripeCardElementChangeEvent extends StripeElementChangeEvent {
-    /**
-     * The type of element that emitted this event.
-     */
-    elementType: 'card';
-
-    /**
-     * An object containing the currently entered `postalCode`.
-     */
-    value: {postalCode: string};
-
-    /*
-     * The card brand of the card number being entered.
-     */
-    brand:
-      | 'visa'
-      | 'mastercard'
-      | 'amex'
-      | 'discover'
-      | 'diners'
-      | 'jcb'
-      | 'unionpay'
-      | 'unknown';
-  }
+import {
+  StripeElementBase,
+  StripeElementStyle,
+  StripeElementClasses,
+  StripeElementChangeEvent,
+} from './base';
+
+export type StripeCardElement = StripeElementBase & {
+  /**
+   * The change event is triggered when the `Element`'s value changes.
+   */
+  on(
+    eventType: 'change',
+    handler: (event: StripeCardElementChangeEvent) => any
+  ): StripeCardElement;
+  once(
+    eventType: 'change',
+    handler: (event: StripeCardElementChangeEvent) => any
+  ): StripeCardElement;
+  off(
+    eventType: 'change',
+    handler?: (event: StripeCardElementChangeEvent) => any
+  ): StripeCardElement;
+
+  /**
+   * Triggered when the element is fully rendered and can accept `element.focus` calls.
+   */
+  on(
+    eventType: 'ready',
+    handler: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+  once(
+    eventType: 'ready',
+    handler: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+  off(
+    eventType: 'ready',
+    handler?: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+
+  /**
+   * Triggered when the element gains focus.
+   */
+  on(
+    eventType: 'focus',
+    handler: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+  once(
+    eventType: 'focus',
+    handler: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+  off(
+    eventType: 'focus',
+    handler?: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+
+  /**
+   * Triggered when the element loses focus.
+   */
+  on(
+    eventType: 'blur',
+    handler: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+  once(
+    eventType: 'blur',
+    handler: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+  off(
+    eventType: 'blur',
+    handler?: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+
+  /**
+   * Triggered when the escape key is pressed within the element.
+   */
+  on(
+    eventType: 'escape',
+    handler: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+  once(
+    eventType: 'escape',
+    handler: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+  off(
+    eventType: 'escape',
+    handler?: (event: {elementType: 'card'}) => any
+  ): StripeCardElement;
+
+  /**
+   * Updates the options the `CardElement` was initialized with.
+   * Updates are merged into the existing configuration.
+   *
+   * The styles of an `CardElement` can be dynamically changed using `element.update`.
+   * This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
+   */
+  update(options: Partial<StripeCardElementOptions>): void;
+};
+
+export interface StripeCardElementOptions {
+  classes?: StripeElementClasses;
+
+  style?: StripeElementStyle;
+
+  /**
+   * A pre-filled set of values to include in the input (e.g., `{postalCode: '94110'}`).
+   * Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.
+   */
+  value?: {postalCode?: string};
+
+  /**
+   * Hide the postal code field.
+   * Default is `false`.
+   * If you are already collecting a full billing address or postal code elsewhere, set this to `true`.
+   */
+  hidePostalCode?: boolean;
+
+  /**
+   * Appearance of the icon in the Element.
+   */
+  iconStyle?: 'default' | 'solid';
+
+  /**
+   * Hides the icon in the Element.
+   * Default is `false`.
+   */
+  hideIcon?: boolean;
+
+  /**
+   * Applies a disabled state to the Element such that user input is not accepted.
+   * Default is false.
+   */
+  disabled?: boolean;
+}
+
+export interface StripeCardElementChangeEvent extends StripeElementChangeEvent {
+  /**
+   * The type of element that emitted this event.
+   */
+  elementType: 'card';
+
+  /**
+   * An object containing the currently entered `postalCode`.
+   */
+  value: {postalCode: string};
+
+  /*
+   * The card brand of the card number being entered.
+   */
+  brand:
+    | 'visa'
+    | 'mastercard'
+    | 'amex'
+    | 'discover'
+    | 'diners'
+    | 'jcb'
+    | 'unionpay'
+    | 'unknown';
 }