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

package/src/shared.ts

@@ -13,72 +13,51 @@ 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 {
@@ -218,6 +208,12 @@ export const initStripeConnect = (
       for (const method in methods) {
         (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);
           });
         };

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.
@@ -206,21 +195,6 @@ export const ConnectElementCommonMethodConfig = {
 };
 
 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
@@ -255,6 +229,16 @@ export const ConnectElementCustomMethodConfig = {
         | undefined
     ): 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 => {},
     setCardSwitching: (_cardSwitching: boolean | undefined): void => {},
@@ -276,78 +260,21 @@ export const ConnectElementCustomMethodConfig = {
   "financial-account-transactions": {
     setFinancialAccount: (_financialAccount: string): void => {},
   },
-  recipients: {
-    setDataSource: (_dataSource: RecipientDataSource): void => {},
-  },
-  "app-install": {
-    setApp: (_app: string | undefined): void => {},
-    setOnAppInstallStateFetched: (
-      _listener: (({ appId, state }: InstallState) => void) | undefined
-    ): void => {},
-    setOnAppInstallStateChanged: (
-      _listener: (({ appId, state }: InstallState) => void) | undefined
+  payments: {
+    setDefaultFilters: (
+      _filters: PaymentsListDefaultFilters | 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 => {},
     setDisplayHeadOfficeCountries: (
@@ -362,17 +289,12 @@ export const ConnectElementCustomMethodConfig = {
       _listener: (({ id }: { id: string }) => void) | undefined
     ): void => {},
     setDisplayCountries: (_countries: string[] | undefined): void => {},
-  },
-  "tax-threshold-monitoring": {
-    setDisplayCountries: (_countries: string[] | undefined): void => {},
-  },
-  "product-tax-code-selector": {
-    setOnTaxCodeSelect: (
-      _listener: ((taxCode: string) => void) | undefined
+    setOnAfterTaxRegistrationExpired: (
+      _listener: (({ id }: { id: string }) => void) | undefined
     ): void => {},
-    setHideDescription: (_hideDescription: boolean | undefined): void => {},
-    setDisabled: (_disabled: boolean | undefined): void => {},
-    setInitialTaxCode: (_initialTaxCode: string | undefined): void => {},
   },
-  "export-tax-transactions": {},
+  "payout-details": {
+    setPayout: (_payout: string | undefined): void => {},
+    setOnClose: (_listener: (() => void) | undefined): void => {},
+  },
 };

package/types/shared.d.ts

@@ -2,6 +2,7 @@ import type {
   ConnectElementCustomMethodConfig,
   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";