@stripe/connect-js 3.3.30-preview-1 → 3.3.30

package/src/pure.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-import { IStripeConnectInitParams } from "../types";
+import type { IStripeConnectInitParams } from "../types";
 import { SCRIPT_SELECTOR } from "./utils/jestHelpers";
 
 describe("pure module", () => {
@@ -16,7 +16,7 @@ describe("pure module", () => {
       publishableKey: "pk_123",
       fetchClientSecret: async () => {
         return "secret_123";
-      }
+      },
     };
     loadConnectAndInitialize(mockInitParams);
 

package/src/pure.ts

@@ -1,9 +1,6 @@
-import { IStripeConnectInitParams, StripeConnectInstance } from "../types";
-import {
-  loadScript,
-  initStripeConnect,
-  LoadConnectAndInitialize
-} from "./shared";
+import type { IStripeConnectInitParams, StripeConnectInstance } from "../types";
+import type { LoadConnectAndInitialize } from "./shared";
+import { loadScript, initStripeConnect } from "./shared";
 
 export const loadConnectAndInitialize: LoadConnectAndInitialize = (
   initParams: IStripeConnectInitParams

package/src/shared.ts

@@ -1,84 +1,63 @@
-import {
+import type {
   IStripeConnectInitParams,
   StripeConnectInstance,
   ConnectElementTagName,
-  ConnectHTMLElementRecord
+  ConnectHTMLElementRecord,
 } from "../types";
 import {
   ConnectElementCommonMethodConfig,
-  ConnectElementCustomMethodConfig
+  ConnectElementCustomMethodConfig,
 } from "../types/config";
 
 export type LoadConnectAndInitialize = (
   initParams: IStripeConnectInitParams
 ) => StripeConnectInstance;
 
-export type ConnectElementHTMLName =
+type ConnectElementHTMLName =
+  | "stripe-connect-account-onboarding"
+  | "stripe-connect-disputes-list"
   | "stripe-connect-payments"
-  | "stripe-connect-payouts"
   | "stripe-connect-payment-details"
   | "stripe-connect-payment-disputes"
-  | "stripe-connect-account-onboarding"
-  | "stripe-connect-payment-method-settings"
   | "stripe-connect-account-management"
   | "stripe-connect-notification-banner"
-  | "stripe-connect-instant-payouts"
+  | "stripe-connect-instant-payouts-promotion"
   | "stripe-connect-issuing-card"
   | "stripe-connect-issuing-cards-list"
   | "stripe-connect-financial-account"
   | "stripe-connect-financial-account-transactions"
-  | "stripe-connect-recipients"
-  | "stripe-connect-capital-financing"
-  | "stripe-connect-capital-financing-application"
-  | "stripe-connect-capital-financing-promotion"
-  | "stripe-connect-capital-overview"
+  | "stripe-connect-payouts"
+  | "stripe-connect-payouts-list"
+  | "stripe-connect-payout-details"
+  | "stripe-connect-balances"
   | "stripe-connect-documents"
-  | "stripe-connect-product-tax-code-selector"
-  | "stripe-connect-export-tax-transactions"
   | "stripe-connect-tax-registrations"
-  | "stripe-connect-tax-settings"
-  | "stripe-connect-tax-threshold-monitoring"
-  | "stripe-connect-balances"
-  | "stripe-connect-payouts-list"
-  | "stripe-connect-app-install"
-  | "stripe-connect-app-viewport"
-  | "stripe-connect-reporting-chart";
+  | "stripe-connect-tax-settings";
 
 export const componentNameMapping: Record<
   ConnectElementTagName,
   ConnectElementHTMLName
 > = {
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "disputes-list": "stripe-connect-disputes-list",
   payments: "stripe-connect-payments",
-  payouts: "stripe-connect-payouts",
   "payment-details": "stripe-connect-payment-details",
   "payment-disputes": "stripe-connect-payment-disputes",
-  "account-onboarding": "stripe-connect-account-onboarding",
-  "payment-method-settings": "stripe-connect-payment-method-settings",
+  payouts: "stripe-connect-payouts",
+  "payouts-list": "stripe-connect-payouts-list",
+  "payout-details": "stripe-connect-payout-details",
+  balances: "stripe-connect-balances",
   "account-management": "stripe-connect-account-management",
   "notification-banner": "stripe-connect-notification-banner",
-  "instant-payouts": "stripe-connect-instant-payouts",
+  "instant-payouts-promotion": "stripe-connect-instant-payouts-promotion",
   "issuing-card": "stripe-connect-issuing-card",
   "issuing-cards-list": "stripe-connect-issuing-cards-list",
   "financial-account": "stripe-connect-financial-account",
-  recipients: "stripe-connect-recipients",
   "financial-account-transactions":
     "stripe-connect-financial-account-transactions",
-  "capital-financing": "stripe-connect-capital-financing",
-  "capital-financing-application":
-    "stripe-connect-capital-financing-application",
-  "capital-financing-promotion": "stripe-connect-capital-financing-promotion",
-  "capital-overview": "stripe-connect-capital-overview",
   documents: "stripe-connect-documents",
-  "product-tax-code-selector": "stripe-connect-product-tax-code-selector",
-  "export-tax-transactions": "stripe-connect-export-tax-transactions",
   "tax-registrations": "stripe-connect-tax-registrations",
   "tax-settings": "stripe-connect-tax-settings",
-  "tax-threshold-monitoring": "stripe-connect-tax-threshold-monitoring",
-  balances: "stripe-connect-balances",
-  "payouts-list": "stripe-connect-payouts-list",
-  "app-install": "stripe-connect-app-install",
-  "app-viewport": "stripe-connect-app-viewport",
-  "reporting-chart": "stripe-connect-reporting-chart"
 };
 
 type StripeConnectInstanceExtended = StripeConnectInstance & {
@@ -97,10 +76,10 @@ const V1_URL = "https://connect-js.stripe.com/v1.0/connect.js";
 export const findScript = (): HTMLScriptElement | null => {
   return (
     document.querySelectorAll<HTMLScriptElement>(
-      `script[src="${V0_URL}"]`
+      `script[src="${V1_URL}"]`
     )[0] ||
     document.querySelectorAll<HTMLScriptElement>(
-      `script[src="${V1_URL}"]`
+      `script[src="${V0_URL}"]`
     )[0] ||
     null
   );
@@ -125,6 +104,20 @@ const injectScript = (): HTMLScriptElement => {
 
 let stripePromise: Promise<StripeConnectWrapper> | null = null;
 
+export const isWindowStripeConnectDefined = (stripeConnect: unknown) => {
+  // We only consider `StripeConnect` defined if `init` is a function
+  // Why? HTML markup like:
+  // <a id="StripeConnect"><a id="StripeConnect" name="init" href="stripe"></a></a> in the <head> of the page
+  // can end up "contaminating" the window.StripeConnect object and cause issues in connect.js initialization
+  return !!(
+    stripeConnect &&
+    typeof stripeConnect === "object" &&
+    "init" in stripeConnect &&
+    typeof (stripeConnect as { init: unknown } & Record<string, unknown>)
+      .init === "function"
+  );
+};
+
 export const loadScript = (): Promise<StripeConnectWrapper> => {
   // Ensure that we only attempt to load Connect.js at most once
   if (stripePromise !== null) {
@@ -139,11 +132,8 @@ export const loadScript = (): Promise<StripeConnectWrapper> => {
       return;
     }
 
-    if ((window as any).StripeConnect) {
+    if (isWindowStripeConnectDefined((window as any).StripeConnect)) {
       console.warn(EXISTING_SCRIPT_MESSAGE);
-    }
-
-    if ((window as any).StripeConnect) {
       const wrapper = createWrapper((window as any).StripeConnect);
       resolve(wrapper);
       return;
@@ -159,7 +149,7 @@ export const loadScript = (): Promise<StripeConnectWrapper> => {
       }
 
       script.addEventListener("load", () => {
-        if ((window as any).StripeConnect) {
+        if (isWindowStripeConnectDefined((window as any).StripeConnect)) {
           const wrapper = createWrapper((window as any).StripeConnect);
           resolve(wrapper);
         } else {
@@ -196,18 +186,18 @@ export const initStripeConnect = (
     }
   })();
   const metaOptions = (initParams as any).metaOptions ?? {};
-  const stripeConnectInstance = stripePromise.then(wrapper =>
+  const stripeConnectInstance = stripePromise.then((wrapper) =>
     wrapper.initialize({
       ...initParams,
-      metaOptions: { ...metaOptions, eagerClientSecretPromise }
+      metaOptions: { ...metaOptions, eagerClientSecretPromise },
     } as any)
   );
 
   return {
-    create: tagName => {
+    create: (tagName) => {
       let htmlName = componentNameMapping[tagName];
       if (!htmlName) {
-        htmlName = (tagName as unknown) as ConnectElementHTMLName;
+        htmlName = tagName as unknown as ConnectElementHTMLName;
       }
       const element = document.createElement(htmlName);
 
@@ -216,14 +206,20 @@ export const initStripeConnect = (
         : {};
       const methods = { ...customMethods, ...ConnectElementCommonMethodConfig };
       for (const method in methods) {
-        (element as any)[method] = function(value: any) {
+        (element as any)[method] = function (value: any) {
           stripeConnectInstance.then(() => {
+            if (!this[`${method}InternalOnly`]) {
+              throw new Error(
+                `Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: _NPM_PACKAGE_VERSION_`
+              );
+            }
+
             this[`${method}InternalOnly`](value);
           });
         };
       }
 
-      stripeConnectInstance.then(instance => {
+      stripeConnectInstance.then((instance) => {
         if (!element.isConnected && !(element as any).setConnector) {
           // If the element is not connected to the DOM and the `setConnector` method is not
           // defined, this indicates the element was created before connect.js was loaded, and has
@@ -251,8 +247,8 @@ export const initStripeConnect = (
 
       return element as ConnectHTMLElementRecord[typeof tagName];
     },
-    update: updateOptions => {
-      stripeConnectInstance.then(instance => {
+    update: (updateOptions) => {
+      stripeConnectInstance.then((instance) => {
         instance.update(updateOptions);
       });
     },
@@ -260,10 +256,10 @@ export const initStripeConnect = (
       return stripeConnectInstance;
     },
     logout: () => {
-      return stripeConnectInstance.then(instance => {
+      return stripeConnectInstance.then((instance) => {
         return instance.logout();
       });
-    }
+    },
   };
 };
 
@@ -280,12 +276,12 @@ const createWrapper = (stripeConnect: any) => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "_NPM_PACKAGE_VERSION_"
-          }
-        }
+            sdkVersion: "_NPM_PACKAGE_VERSION_",
+          },
+        },
       });
       return stripeConnectInstance;
-    }
+    },
   };
   return wrapper;
 };

package/types/checks.ts

@@ -1,5 +1,5 @@
-import { ConnectElementCustomMethodConfig } from "./config";
-import { ConnectElementTagName } from "./shared.d";
+import type { ConnectElementCustomMethodConfig } from "./config";
+import type { ConnectElementTagName } from "./shared.d";
 
 // ensure that keys of ConnectElementCustomMethodConfig are from ConnectElementTagName
 export type HasType<T, Q extends T> = Q;

package/types/config.ts

@@ -13,6 +13,13 @@ export type FetchEphemeralKeyFunction = (fetchParams: {
 export type CollectionOptions = {
   fields: "currently_due" | "eventually_due";
   futureRequirements?: "omit" | "include";
+  requirements?:
+    | {
+        only: string[];
+      }
+    | {
+        exclude: string[];
+      };
 };
 
 export type Status =
@@ -134,11 +141,6 @@ export type NotificationCount = {
   actionRequired: number;
 };
 
-export type InstallState = {
-  appId: string;
-  state: "INSTALLED" | "UNINSTALLED";
-};
-
 export type LoaderStart = {
   elementTagName: string;
 };
@@ -157,19 +159,6 @@ export type EmbeddedError = {
   message?: string;
 };
 
-export type FinancingProductType = {
-  productType: "standard" | "refill" | "none";
-  activeFinancingCount: number;
-};
-
-export type FinancingPromotionLayoutType = "full" | "banner";
-
-export type IntervalType = "day" | "week" | "month" | "quarter" | "year";
-
-export type ReportName = "gross_volume" | "net_volume";
-
-export type RecipientDataSource = "customers";
-
 export type EmbeddedErrorType =
   /**
    * Failure to connect to Stripe's API.
@@ -202,25 +191,10 @@ export const ConnectElementCommonMethodConfig = {
   ): void => {},
   setOnLoaderStart: (
     _listener: (({ elementTagName }: LoaderStart) => void) | undefined
-  ): void => {}
+  ): void => {},
 };
 
 export const ConnectElementCustomMethodConfig = {
-  payments: {
-    setDefaultFilters: (
-      _filters: PaymentsListDefaultFilters | undefined
-    ): void => {}
-  },
-  "payment-details": {
-    setPayment: (_payment: string | undefined): void => {},
-    setOnClose: (_listener: (() => void) | undefined): void => {}
-  },
-  "payment-disputes": {
-    setPayment: (_payment: string | undefined): void => {},
-    setOnDisputesLoaded: (
-      _listener: (({ total }: { total: number }) => void) | undefined
-    ): void => {}
-  },
   "account-onboarding": {
     setFullTermsOfServiceUrl: (
       _termOfServiceUrl: string | undefined
@@ -238,12 +212,12 @@ export const ConnectElementCustomMethodConfig = {
     setOnExit: (_listener: (() => void) | undefined): void => {},
     setOnStepChange: (
       _listener: (({ step }: StepChange) => void) | undefined
-    ): void => {}
+    ): void => {},
   },
   "account-management": {
     setCollectionOptions: (
       _collectionOptions: CollectionOptions | undefined
-    ): void => {}
+    ): void => {},
   },
   "notification-banner": {
     setCollectionOptions: (
@@ -253,7 +227,17 @@ export const ConnectElementCustomMethodConfig = {
       _listener:
         | (({ total, actionRequired }: NotificationCount) => void)
         | undefined
-    ): void => {}
+    ): void => {},
+  },
+  "instant-payouts-promotion": {
+    setOnInstantPayoutsPromotionLoaded: (
+      _listener:
+        | (({ promotionShown }: { promotionShown: boolean }) => void)
+        | undefined
+    ): void => {},
+    setOnInstantPayoutCreated: (
+      _listener: (({ payoutId }: { payoutId: string }) => void) | undefined
+    ): void => {},
   },
   "issuing-card": {
     setDefaultCard: (_defaultCard: string | undefined): void => {},
@@ -261,90 +245,35 @@ export const ConnectElementCustomMethodConfig = {
     setFetchEphemeralKey: (
       _fetchEphemeralKey: FetchEphemeralKeyFunction | undefined
     ): void => {},
-    setShowSpendControls: (_showSpendControls: boolean | undefined): void => {}
+    setShowSpendControls: (_showSpendControls: boolean | undefined): void => {},
   },
   "issuing-cards-list": {
     setFetchEphemeralKey: (
       _fetchEphemeralKey: FetchEphemeralKeyFunction | undefined
     ): void => {},
     setShowSpendControls: (_showSpendControls: boolean | undefined): void => {},
-    setIssuingProgram: (_issuingProgram: string | undefined): void => {}
+    setIssuingProgram: (_issuingProgram: string | undefined): void => {},
   },
   "financial-account": {
-    setFinancialAccount: (_financialAccount: string): void => {}
+    setFinancialAccount: (_financialAccount: string): void => {},
   },
   "financial-account-transactions": {
-    setFinancialAccount: (_financialAccount: string): void => {}
+    setFinancialAccount: (_financialAccount: string): void => {},
   },
-  recipients: {
-    setDataSource: (_dataSource: RecipientDataSource): void => {}
-  },
-  "app-install": {
-    setApp: (_app: string | undefined): void => {},
-    setOnAppInstallStateFetched: (
-      _listener: (({ appId, state }: InstallState) => void) | undefined
+  payments: {
+    setDefaultFilters: (
+      _filters: PaymentsListDefaultFilters | undefined
     ): void => {},
-    setOnAppInstallStateChanged: (
-      _listener: (({ appId, state }: InstallState) => void) | undefined
-    ): void => {}
-  },
-  "app-viewport": {
-    setApp: (_app: string | undefined): void => {},
-    setAppData: (_appData: Record<string, string> | undefined): void => {}
   },
-  "payment-method-settings": {
-    setPaymentMethodConfiguration: (
-      _paymentMethodConfiguration: string | undefined
-    ): void => {}
+  "payment-details": {
+    setPayment: (_payment: string | undefined): void => {},
+    setOnClose: (_listener: (() => void) | undefined): void => {},
   },
-  "capital-financing": {
-    setDefaultFinancingOffer: (
-      _defaultFinancingOffer: string | undefined
-    ): void => {},
-    setShowFinancingSelector: (
-      _showFinancingSelector: boolean | undefined
-    ): void => {},
-    setHowCapitalWorksUrl: (
-      _howCapitalWorksUrl: string | undefined
-    ): void => {},
-    setSupportUrl: (_supportUrl: string | undefined): void => {},
-    setOnFinancingsLoaded: (
+  "payment-disputes": {
+    setPayment: (_payment: string | undefined): void => {},
+    setOnDisputesLoaded: (
       _listener: (({ total }: { total: number }) => void) | undefined
-    ): void => {}
-  },
-  "capital-financing-application": {
-    setOnApplicationSubmitted: (
-      _listener: (() => void) | undefined
-    ): void => {},
-    setPrivacyPolicyUrl: (_privacyPolicyUrl: string | undefined): void => {},
-    setHowCapitalWorksUrl: (_howCapitalWorksUrl: string | undefined): void => {}
-  },
-  "capital-financing-promotion": {
-    setLayout: (_layout: FinancingPromotionLayoutType | undefined): void => {},
-    setOnApplicationSubmitted: (
-      _listener: (() => void) | undefined
-    ): void => {},
-    setOnEligibleFinancingOfferLoaded: (
-      _listener:
-        | (({
-            productType,
-            activeFinancingCount
-          }: FinancingProductType) => void)
-        | undefined
-    ): void => {},
-    setPrivacyPolicyUrl: (_privacyPolicyUrl: string | undefined): void => {},
-    setHowCapitalWorksUrl: (
-      _howCapitalWorksUrl: string | undefined
     ): void => {},
-    setEligibilityCriteriaUrl: (
-      _eligibilityCriteriaUrl: string | undefined
-    ): void => {}
-  },
-  "reporting-chart": {
-    setReportName: (_reportName: ReportName): void => {},
-    setIntervalStart: (_intervalStart: Date | undefined): void => {},
-    setIntervalEnd: (_intervalEnd: Date | undefined): void => {},
-    setIntervalType: (_intervalType: IntervalType | undefined): void => {}
   },
   "tax-settings": {
     setHideProductTaxCodeSelector: (_hidden: boolean | undefined): void => {},
@@ -353,24 +282,16 @@ export const ConnectElementCustomMethodConfig = {
     ): void => {},
     setOnTaxSettingsUpdated: (
       _listener: (({ id }: { id: string }) => void) | undefined
-    ): void => {}
+    ): void => {},
   },
   "tax-registrations": {
     setOnAfterTaxRegistrationAdded: (
       _listener: (({ id }: { id: string }) => void) | undefined
     ): void => {},
-    setDisplayCountries: (_countries: string[] | undefined): void => {}
-  },
-  "tax-threshold-monitoring": {
-    setDisplayCountries: (_countries: string[] | undefined): void => {}
+    setDisplayCountries: (_countries: string[] | undefined): void => {},
   },
-  "product-tax-code-selector": {
-    setOnTaxCodeSelect: (
-      _listener: (({ taxCode }: { taxCode: string }) => void) | undefined
-    ): void => {},
-    setHideDescription: (_hideDescription: boolean | undefined): void => {},
-    setDisabled: (_disabled: boolean | undefined): void => {},
-    setInitialTaxCode: (_initialTaxCode: string | undefined): void => {}
+  "payout-details": {
+    setPayout: (_payout: string | undefined): void => {},
+    setOnClose: (_listener: (() => void) | undefined): void => {},
   },
-  "export-tax-transactions": {}
 };

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { IStripeConnectInitParams, StripeConnectInstance } from "../types";
+import type { IStripeConnectInitParams, StripeConnectInstance } from "../types";
 
 export declare const loadConnectAndInitialize: (
   initParams: IStripeConnectInitParams

package/types/shared.d.ts

@@ -1,7 +1,8 @@
-import {
+import type {
   ConnectElementCustomMethodConfig,
-  ConnectElementCommonMethodConfig
+  ConnectElementCommonMethodConfig,
 } from "./config";
+
 export declare type LoadConnectAndInitialize = (
   initParams: IStripeConnectInitParams
 ) => StripeConnectInstance;
@@ -487,32 +488,22 @@ export interface StripeConnectInstance {
  * Tagnames to be used with the `create` method of the Connect instance.
  */
 export type ConnectElementTagName =
+  | "account-onboarding"
+  | "disputes-list"
   | "payments"
-  | "payouts"
   | "payment-details"
   | "payment-disputes"
-  | "account-onboarding"
-  | "payment-method-settings"
   | "account-management"
   | "notification-banner"
-  | "instant-payouts"
+  | "instant-payouts-promotion"
   | "issuing-card"
   | "issuing-cards-list"
   | "financial-account"
   | "financial-account-transactions"
-  | "recipients"
-  | "capital-financing"
-  | "capital-financing-application"
-  | "capital-financing-promotion"
-  | "capital-overview"
+  | "payouts"
+  | "payouts-list"
+  | "payout-details"
+  | "balances"
   | "documents"
-  | "product-tax-code-selector"
-  | "export-tax-transactions"
   | "tax-registrations"
-  | "tax-settings"
-  | "tax-threshold-monitoring"
-  | "balances"
-  | "payouts-list"
-  | "app-install"
-  | "app-viewport"
-  | "reporting-chart";
+  | "tax-settings";