@stripe/connect-js 2.0.5 → 3.0.0

package/README.md

@@ -3,9 +3,11 @@
 The [Connect.js library](https://stripe.com/docs/connect/get-started-connect-embedded-components) and its supporting API allows you to add connected account dashboard functionality to your website.
 This NPM package contains initialization logic for Connect embedded components along with related types.
 
-Calling `loadConnect` always loads the latest version of Connect.js, regardless of which version of `@stripe/connect-js` you use. Updates for this package only impact tooling around the `loadConnect` helper itself and the TypeScript type definitions provided for Connect.js. Updates do not affect runtime availability of features of Connect.js.
+Calling `loadConnectAndInitialize` always loads the latest version of Connect.js, regardless of which version of `@stripe/connect-js` you use. Updates for this package only impact tooling around the `loadConnectAndInitialize` helper itself and the TypeScript type definitions provided for Connect.js. Updates do not affect runtime availability of features of Connect.js.
 
-Note: Connect embedded components is currently still in beta. Please [contact us](https://stripe.com/docs/connect/get-started-connect-embedded-components#access) to request beta access.
+The embedded onboarding component is generally available now. Please refer to our [documentation](https://stripe.com/docs/connect/get-started-connect-embedded-components#account-onboarding) for more information.
+
+Note: Majority of Connect embedded components are currently still in beta. Please [contact us](https://stripe.com/docs/connect/get-started-connect-embedded-components#access) to request beta access.
 
 ## Installation
 
@@ -17,25 +19,25 @@ npm install @stripe/connect-js
 
 ## Documentation
 
-- [Connect embedded components](https://stripe.com/docs/connect/get-started-connect-embedded-uis)
-- [Quickstart guide](https://stripe.com/docs/connect/connect-embedded-uis/quickstart)
+- [Connect embedded components](https://stripe.com/docs/connect/get-started-connect-embedded-components)
+- [Quickstart guide for GA](https://stripe.com/docs/connect/connect-embedded-components/quickstart)
+- [Quickstart guide for beta](https://stripe.com/docs/connect/connect-embedded-components/beta-quickstart)
 
 ## Usage
 
-### `loadConnect`
-
-This function returns a `Promise` that resolves with a newly created `StripeConnect`
-object once Connect.js has loaded. If necessary, it will load Connect.js for you by inserting the Connect.js script tag.
+### `loadConnectAndInitialize`
 
-The `stripeConnect.initialize` function returns a `ConnectInstance` once you initialize it with a publishable key and a client secret returned from the [Account Session API](https://stripe.com/docs/api/account_sessions/create) call.
+This synchronous function takes in a publishable key, a function to retrieve the client secret returned from the [Account Session API](https://stripe.com/docs/api/account_sessions/create), and other [initialization parameters](https://stripe.com/docs/connect/get-started-connect-embedded-components#configuring-connect-js). It returns a `StripeConnectInstance`. If necessary, it will load Connect.js for you by inserting the Connect.js script tag.
 
 ```js
-import { loadConnect } from "@stripe/connect-js";
+import { loadConnectAndInitialize } from "@stripe/connect-js";
+const fetchClientSecret = async () => {
+  // Fetch the AccountSession client secret by making an API call to your service
+};
 
-const stripeConnect = await loadConnect();
-const connectInstance = stripeConnect.initialize({
+const instance = loadConnectAndInitialize({
   publishableKey: "{{pk test123}}",
-  clientSecret: "{{client secret}}"
+  fetchClientSecret: fetchClientSecret
 });
 ```
 
@@ -62,22 +64,25 @@ import "@stripe/connect-js";
 
 Manually add the Connect.js script tag to the `<head>` of each page on your site.
 If an existing script tag is already present, this module will not insert a new
-one. When you call `loadConnect`, it will use the existing script tag.
+one. When you call `loadConnectAndInitialize`, it will use the existing script tag.
 
 ```html
 <!-- Somewhere in your site's <head> -->
 <script src="https://connect-js.stripe.com/v0.1/connect.js" async></script>
 ```
 
-### Importing `loadConnect` without side effects
+### Importing `loadConnectAndInitialize` without side effects
 
-If you would like to use `loadConnect` in your application, but defer loading the
-Connect.js script until `loadConnect` is first called, use the alternative
+If you would like to use `loadConnectAndInitialize` in your application, but defer loading the
+Connect.js script until `loadConnectAndInitialize` is first called, use the alternative
 `@stripe/connect-js/pure` import path:
 
 ```js
-import { loadConnect } from "@stripe/connect-js/pure";
+import { loadConnectAndInitialize } from "@stripe/connect-js/pure";
 
 // Connect.js will not be loaded until `loadConnect` is called
-const stripeConnect = await loadConnect();
+const instance = loadConnectAndInitialize({
+  publishableKey: "{{pk test123}}",
+  fetchClientSecret: fetchClientSecret
+});
 ```

package/dist/connect.esm.js

@@ -59,13 +59,38 @@ const loadScript = () => {
   });
   return stripePromise;
 };
-const initStripeConnect = stripeConnectPromise => {
-  if (stripeConnectPromise === null) {
-    return null;
-  }
-  return stripeConnectPromise;
+const initStripeConnect = (stripePromise, initParams) => {
+  const stripeConnectInstance = stripePromise.then(wrapper => wrapper.initialize(initParams));
+  return {
+    create: tagName => {
+      let htmlName = componentNameMapping[tagName];
+      if (!htmlName) {
+        htmlName = tagName;
+      }
+      const element = document.createElement(htmlName);
+      stripeConnectInstance.then(instance => {
+        element.setConnector(instance.connect);
+      });
+      return element;
+    },
+    update: updateOptions => {
+      stripeConnectInstance.then(instance => {
+        instance.update(updateOptions);
+      });
+    },
+    debugInstance: () => {
+      return stripeConnectInstance;
+    },
+    logout: () => {
+      return stripeConnectInstance.then(instance => {
+        instance.logout();
+      });
+    }
+  };
 };
 const createWrapper = stripeConnect => {
+  window.StripeConnect = window.StripeConnect || {};
+  window.StripeConnect.optimizedLoading = true;
   const wrapper = {
     initialize: params => {
       var _a;
@@ -75,19 +100,10 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.5"
+            sdkVersion: "3.0.0"
           }
         })
       }));
-      // We wrap create so we can map its different strings to supported components
-      const oldCreate = stripeConnectInstance.create.bind(stripeConnectInstance);
-      stripeConnectInstance.create = tagName => {
-        let htmlName = componentNameMapping[tagName];
-        if (!htmlName) {
-          htmlName = tagName;
-        }
-        return oldCreate(htmlName);
-      };
       return stripeConnectInstance;
     }
   };
@@ -103,9 +119,9 @@ stripePromise$1.catch(err => {
     console.warn(err);
   }
 });
-const loadConnect = () => {
+const loadConnectAndInitialize = initParams => {
   loadCalled = true;
-  return stripePromise$1.then(maybeConnect => initStripeConnect(maybeConnect));
+  return initStripeConnect(stripePromise$1, initParams);
 };
 
-export { loadConnect };
+export { loadConnectAndInitialize };

package/dist/connect.js

@@ -63,13 +63,38 @@ const loadScript = () => {
   });
   return stripePromise;
 };
-const initStripeConnect = stripeConnectPromise => {
-  if (stripeConnectPromise === null) {
-    return null;
-  }
-  return stripeConnectPromise;
+const initStripeConnect = (stripePromise, initParams) => {
+  const stripeConnectInstance = stripePromise.then(wrapper => wrapper.initialize(initParams));
+  return {
+    create: tagName => {
+      let htmlName = componentNameMapping[tagName];
+      if (!htmlName) {
+        htmlName = tagName;
+      }
+      const element = document.createElement(htmlName);
+      stripeConnectInstance.then(instance => {
+        element.setConnector(instance.connect);
+      });
+      return element;
+    },
+    update: updateOptions => {
+      stripeConnectInstance.then(instance => {
+        instance.update(updateOptions);
+      });
+    },
+    debugInstance: () => {
+      return stripeConnectInstance;
+    },
+    logout: () => {
+      return stripeConnectInstance.then(instance => {
+        instance.logout();
+      });
+    }
+  };
 };
 const createWrapper = stripeConnect => {
+  window.StripeConnect = window.StripeConnect || {};
+  window.StripeConnect.optimizedLoading = true;
   const wrapper = {
     initialize: params => {
       var _a;
@@ -79,19 +104,10 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.5"
+            sdkVersion: "3.0.0"
           }
         })
       }));
-      // We wrap create so we can map its different strings to supported components
-      const oldCreate = stripeConnectInstance.create.bind(stripeConnectInstance);
-      stripeConnectInstance.create = tagName => {
-        let htmlName = componentNameMapping[tagName];
-        if (!htmlName) {
-          htmlName = tagName;
-        }
-        return oldCreate(htmlName);
-      };
       return stripeConnectInstance;
     }
   };
@@ -107,9 +123,9 @@ stripePromise$1.catch(err => {
     console.warn(err);
   }
 });
-const loadConnect = () => {
+const loadConnectAndInitialize = initParams => {
   loadCalled = true;
-  return stripePromise$1.then(maybeConnect => initStripeConnect(maybeConnect));
+  return initStripeConnect(stripePromise$1, initParams);
 };
 
-exports.loadConnect = loadConnect;
+exports.loadConnectAndInitialize = loadConnectAndInitialize;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { LoadConnectAndInitialize } from "./shared";
+export declare const loadConnectAndInitialize: LoadConnectAndInitialize;

package/dist/pure.d.ts

@@ -1,2 +1,2 @@
-import { LoadConnect } from "./shared";
-export declare const loadConnect: LoadConnect;
+import { LoadConnectAndInitialize } from "./shared";
+export declare const loadConnectAndInitialize: LoadConnectAndInitialize;

package/dist/pure.esm.js

@@ -59,13 +59,38 @@ const loadScript = () => {
   });
   return stripePromise;
 };
-const initStripeConnect = stripeConnectPromise => {
-  if (stripeConnectPromise === null) {
-    return null;
-  }
-  return stripeConnectPromise;
+const initStripeConnect = (stripePromise, initParams) => {
+  const stripeConnectInstance = stripePromise.then(wrapper => wrapper.initialize(initParams));
+  return {
+    create: tagName => {
+      let htmlName = componentNameMapping[tagName];
+      if (!htmlName) {
+        htmlName = tagName;
+      }
+      const element = document.createElement(htmlName);
+      stripeConnectInstance.then(instance => {
+        element.setConnector(instance.connect);
+      });
+      return element;
+    },
+    update: updateOptions => {
+      stripeConnectInstance.then(instance => {
+        instance.update(updateOptions);
+      });
+    },
+    debugInstance: () => {
+      return stripeConnectInstance;
+    },
+    logout: () => {
+      return stripeConnectInstance.then(instance => {
+        instance.logout();
+      });
+    }
+  };
 };
 const createWrapper = stripeConnect => {
+  window.StripeConnect = window.StripeConnect || {};
+  window.StripeConnect.optimizedLoading = true;
   const wrapper = {
     initialize: params => {
       var _a;
@@ -75,27 +100,19 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.5"
+            sdkVersion: "3.0.0"
           }
         })
       }));
-      // We wrap create so we can map its different strings to supported components
-      const oldCreate = stripeConnectInstance.create.bind(stripeConnectInstance);
-      stripeConnectInstance.create = tagName => {
-        let htmlName = componentNameMapping[tagName];
-        if (!htmlName) {
-          htmlName = tagName;
-        }
-        return oldCreate(htmlName);
-      };
       return stripeConnectInstance;
     }
   };
   return wrapper;
 };
 
-const loadConnect = () => {
-  return loadScript().then(maybeStripe => initStripeConnect(maybeStripe));
+const loadConnectAndInitialize = initParams => {
+  const maybeConnect = loadScript();
+  return initStripeConnect(maybeConnect, initParams);
 };
 
-export { loadConnect };
+export { loadConnectAndInitialize };

package/dist/pure.js

@@ -63,13 +63,38 @@ const loadScript = () => {
   });
   return stripePromise;
 };
-const initStripeConnect = stripeConnectPromise => {
-  if (stripeConnectPromise === null) {
-    return null;
-  }
-  return stripeConnectPromise;
+const initStripeConnect = (stripePromise, initParams) => {
+  const stripeConnectInstance = stripePromise.then(wrapper => wrapper.initialize(initParams));
+  return {
+    create: tagName => {
+      let htmlName = componentNameMapping[tagName];
+      if (!htmlName) {
+        htmlName = tagName;
+      }
+      const element = document.createElement(htmlName);
+      stripeConnectInstance.then(instance => {
+        element.setConnector(instance.connect);
+      });
+      return element;
+    },
+    update: updateOptions => {
+      stripeConnectInstance.then(instance => {
+        instance.update(updateOptions);
+      });
+    },
+    debugInstance: () => {
+      return stripeConnectInstance;
+    },
+    logout: () => {
+      return stripeConnectInstance.then(instance => {
+        instance.logout();
+      });
+    }
+  };
 };
 const createWrapper = stripeConnect => {
+  window.StripeConnect = window.StripeConnect || {};
+  window.StripeConnect.optimizedLoading = true;
   const wrapper = {
     initialize: params => {
       var _a;
@@ -79,27 +104,19 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.5"
+            sdkVersion: "3.0.0"
           }
         })
       }));
-      // We wrap create so we can map its different strings to supported components
-      const oldCreate = stripeConnectInstance.create.bind(stripeConnectInstance);
-      stripeConnectInstance.create = tagName => {
-        let htmlName = componentNameMapping[tagName];
-        if (!htmlName) {
-          htmlName = tagName;
-        }
-        return oldCreate(htmlName);
-      };
       return stripeConnectInstance;
     }
   };
   return wrapper;
 };
 
-const loadConnect = () => {
-  return loadScript().then(maybeStripe => initStripeConnect(maybeStripe));
+const loadConnectAndInitialize = initParams => {
+  const maybeConnect = loadScript();
+  return initStripeConnect(maybeConnect, initParams);
 };
 
-exports.loadConnect = loadConnect;
+exports.loadConnectAndInitialize = loadConnectAndInitialize;

package/dist/shared.d.ts

@@ -1,5 +1,14 @@
-import { StripeConnectWrapper } from "../types";
-export type LoadConnect = () => Promise<StripeConnectWrapper>;
+import { IStripeConnectInitParams, StripeConnectInstance, ConnectElementTagName } from "../types";
+export type LoadConnectAndInitialize = (initParams: IStripeConnectInitParams) => StripeConnectInstance;
+type ConnectElementHTMLName = "stripe-connect-account-onboarding";
+export declare const componentNameMapping: Record<ConnectElementTagName, ConnectElementHTMLName>;
+type StripeConnectInstanceExtended = StripeConnectInstance & {
+    debugInstance: () => Promise<StripeConnectInstance>;
+};
+interface StripeConnectWrapper {
+    initialize: (params: IStripeConnectInitParams) => StripeConnectInstance;
+}
 export declare const findScript: () => HTMLScriptElement | null;
-export declare const loadScript: () => Promise<StripeConnectWrapper | null>;
-export declare const initStripeConnect: (stripeConnectPromise: StripeConnectWrapper | null) => any | null;
+export declare const loadScript: () => Promise<StripeConnectWrapper>;
+export declare const initStripeConnect: (stripePromise: Promise<StripeConnectWrapper>, initParams: IStripeConnectInitParams) => StripeConnectInstanceExtended;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stripe/connect-js",
-  "version": "2.0.5",
+  "version": "3.0.0",
   "description": "Connect.js loading utility package",
   "main": "dist/connect.js",
   "module": "dist/connect.esm.js",

package/pure.d.ts

@@ -1,4 +1,4 @@
-import { LoadConnect } from "./src/shared";
+import { LoadConnectAndInitialize } from "./src/shared";
 
-export declare const loadConnect: LoadConnect;
+export declare const loadConnectAndInitialize: LoadConnectAndInitialize;
 export * from "./types/shared";

package/src/index.ts

@@ -1,4 +1,9 @@
-import { loadScript, initStripeConnect, LoadConnect } from "./shared";
+import { IStripeConnectInitParams, StripeConnectInstance } from "../types";
+import {
+  loadScript,
+  initStripeConnect,
+  LoadConnectAndInitialize
+} from "./shared";
 
 // Execute our own script injection after a tick to give users time to do their
 // own script injection.
@@ -12,10 +17,9 @@ stripePromise.catch((err: Error) => {
   }
 });
 
-export const loadConnect: LoadConnect = () => {
+export const loadConnectAndInitialize: LoadConnectAndInitialize = (
+  initParams: IStripeConnectInitParams
+): StripeConnectInstance => {
   loadCalled = true;
-
-  return stripePromise.then(maybeConnect => initStripeConnect(maybeConnect));
+  return initStripeConnect(stripePromise, initParams);
 };
-
-export {};

package/src/pure.test.ts

@@ -1,17 +1,24 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
+import { IStripeConnectInitParams } from "../types";
 import { SCRIPT_SELECTOR } from "./utils/jestHelpers";
 
 describe("pure module", () => {
-  test("does not inject the script if loadConnect is not called", async () => {
+  test("does not inject the script if loadConnectAndInitialize is not called", async () => {
     require("./pure");
 
     expect(document.querySelector(SCRIPT_SELECTOR)).toBe(null);
   });
 
-  test("it injects the script if loadConnect is called", async () => {
-    const { loadConnect } = require("./pure");
-    loadConnect();
+  test("it injects the script if loadConnectAndInitialize is called", async () => {
+    const { loadConnectAndInitialize } = require("./pure");
+    const mockInitParams: IStripeConnectInitParams = {
+      publishableKey: "pk_123",
+      fetchClientSecret: async () => {
+        return "secret_123";
+      }
+    };
+    loadConnectAndInitialize(mockInitParams);
 
     expect(document.querySelector(SCRIPT_SELECTOR)).not.toBe(null);
   });

package/src/pure.ts

@@ -1,5 +1,13 @@
-import { loadScript, initStripeConnect, LoadConnect } from "./shared";
+import { IStripeConnectInitParams, StripeConnectInstance } from "../types";
+import {
+  loadScript,
+  initStripeConnect,
+  LoadConnectAndInitialize
+} from "./shared";
 
-export const loadConnect: LoadConnect = () => {
-  return loadScript().then(maybeStripe => initStripeConnect(maybeStripe));
+export const loadConnectAndInitialize: LoadConnectAndInitialize = (
+  initParams: IStripeConnectInitParams
+): StripeConnectInstance => {
+  const maybeConnect = loadScript();
+  return initStripeConnect(maybeConnect, initParams);
 };

package/src/shared.ts

@@ -1,20 +1,31 @@
 import {
-  StripeConnectWrapper,
   IStripeConnectInitParams,
-  ConnectElementTagName
+  StripeConnectInstance,
+  ConnectElementTagName,
+  ConnectHTMLElementRecord
 } from "../types";
 
-export type LoadConnect = () => Promise<StripeConnectWrapper>;
+export type LoadConnectAndInitialize = (
+  initParams: IStripeConnectInitParams
+) => StripeConnectInstance;
 
 type ConnectElementHTMLName = "stripe-connect-account-onboarding";
 
-const componentNameMapping: Record<
+export const componentNameMapping: Record<
   ConnectElementTagName,
   ConnectElementHTMLName
 > = {
   "account-onboarding": "stripe-connect-account-onboarding"
 };
 
+type StripeConnectInstanceExtended = StripeConnectInstance & {
+  debugInstance: () => Promise<StripeConnectInstance>;
+};
+
+interface StripeConnectWrapper {
+  initialize: (params: IStripeConnectInitParams) => StripeConnectInstance;
+}
+
 const EXISTING_SCRIPT_MESSAGE =
   "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
 const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
@@ -44,13 +55,13 @@ const injectScript = (): HTMLScriptElement => {
 
 let stripePromise: Promise<StripeConnectWrapper> | null = null;
 
-export const loadScript = (): Promise<StripeConnectWrapper | null> => {
+export const loadScript = (): Promise<StripeConnectWrapper> => {
   // Ensure that we only attempt to load Connect.js at most once
   if (stripePromise !== null) {
     return stripePromise;
   }
 
-  stripePromise = new Promise((resolve, reject) => {
+  stripePromise = new Promise<StripeConnectWrapper>((resolve, reject) => {
     if (typeof window === "undefined") {
       reject(
         "ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the `pure` version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects."
@@ -98,16 +109,45 @@ export const loadScript = (): Promise<StripeConnectWrapper | null> => {
 };
 
 export const initStripeConnect = (
-  stripeConnectPromise: StripeConnectWrapper | null
-): any | null => {
-  if (stripeConnectPromise === null) {
-    return null;
-  }
+  stripePromise: Promise<StripeConnectWrapper>,
+  initParams: IStripeConnectInitParams
+): StripeConnectInstanceExtended => {
+  const stripeConnectInstance = stripePromise.then(wrapper =>
+    wrapper.initialize(initParams)
+  );
+
+  return {
+    create: tagName => {
+      let htmlName = componentNameMapping[tagName];
+      if (!htmlName) {
+        htmlName = (tagName as unknown) as ConnectElementHTMLName;
+      }
+      const element = document.createElement(htmlName);
+      stripeConnectInstance.then(instance => {
+        (element as any).setConnector((instance as any).connect);
+      });
 
-  return stripeConnectPromise;
+      return element as ConnectHTMLElementRecord[typeof tagName];
+    },
+    update: updateOptions => {
+      stripeConnectInstance.then(instance => {
+        instance.update(updateOptions);
+      });
+    },
+    debugInstance: () => {
+      return stripeConnectInstance;
+    },
+    logout: () => {
+      return stripeConnectInstance.then(instance => {
+        instance.logout();
+      });
+    }
+  };
 };
 
 const createWrapper = (stripeConnect: any) => {
+  (window as any).StripeConnect = (window as any).StripeConnect || {};
+  (window as any).StripeConnect.optimizedLoading = true;
   const wrapper: StripeConnectWrapper = {
     initialize: (params: IStripeConnectInitParams) => {
       const metaOptions = (params as any).metaOptions ?? {};
@@ -122,18 +162,6 @@ const createWrapper = (stripeConnect: any) => {
           }
         }
       });
-
-      // We wrap create so we can map its different strings to supported components
-      const oldCreate = stripeConnectInstance.create.bind(
-        stripeConnectInstance
-      );
-      stripeConnectInstance.create = (tagName: ConnectElementTagName) => {
-        let htmlName = componentNameMapping[tagName];
-        if (!htmlName) {
-          htmlName = tagName as ConnectElementHTMLName;
-        }
-        return oldCreate(htmlName);
-      };
       return stripeConnectInstance;
     }
   };

package/types/index.d.ts

@@ -1,4 +1,6 @@
-import { LoadConnect } from "../src/shared";
+import { IStripeConnectInitParams, StripeConnectInstance } from "../types";
 
-export declare const loadConnect: LoadConnect;
+export declare const loadConnectAndInitialize: (
+  initParams: IStripeConnectInitParams
+) => StripeConnectInstance;
 export * from "./shared";

package/types/shared.d.ts

@@ -1,4 +1,6 @@
-export declare type LoadConnect = () => Promise<StripeConnectWrapper>;
+export declare type LoadConnectAndInitialize = (
+  initParams: IStripeConnectInitParams
+) => StripeConnectInstance;
 
 export declare type OverlayOption = "dialog" | "drawer";
 
@@ -335,9 +337,10 @@ export interface IStripeConnectInitParams {
   publishableKey: string;
 
   /**
-   * The client secret for the connected account.
+   * Function that fetches client secret
+   * @returns A promise that resolves with a new client secret.
    */
-  clientSecret: string;
+  fetchClientSecret: () => Promise<string>;
 
   /**
    * Appearance options for the Connect instance.
@@ -345,24 +348,33 @@ export interface IStripeConnectInitParams {
    */
   appearance?: AppearanceOptions;
 
-  /**
-   * Callback function that returns a new client secret. Used to support long running sessions and called on account session expiry.
-   */
-  refreshClientSecret?: () => Promise<string>;
-
   /**
    * The locale to use for the Connect instance.
    */
   locale?: string;
 }
 
-export interface StripeConnectWrapper {
-  /**
-   * Initializes a Connect JS instance that can be used to create and update Connect components.
-   * @param params Initialization parameters for Connect JS. See https://stripe.com/docs/connect/get-started-connect-embedded-components#configuring-connect-js for more details.
-   * @returns A Connect JS instance.
-   */
-  initialize: (params: IStripeConnectInitParams) => StripeConnectInstance;
+type ConnectHTMLElementRecordFallback = {
+  [key in string]: HTMLElement | null;
+};
+type ConnectHTMLElementRecordBase = {
+  [tagName in ConnectElementTagName]: HTMLElement;
+};
+
+interface ConnectHTMLElementRecord
+  extends ConnectHTMLElementRecordBase,
+    ConnectHTMLElementRecordFallback {
+  "account-onboarding": HTMLElement & {
+    setFullTermsOfServiceUrl: (termOfServiceUrl: string | undefined) => void;
+    setRecipientTermsOfServiceUrl: (
+      recipientTermsOfServiceUrl: string | undefined
+    ) => void;
+    setPrivacyPolicyUrl: (privacyPolicyUrl: string | undefined) => void;
+    setSkipTermsOfServiceCollection: (
+      skipTermsOfServiceCollection: boolean | undefined
+    ) => void;
+    setOnExit: (listener: () => void) => void;
+  };
 }
 
 export interface StripeConnectInstance {
@@ -371,7 +383,9 @@ export interface StripeConnectInstance {
    * @tagName Name of the Connect component to create.
    * @returns An HTML component corresponding to that connect component
    */
-  create: (tagName: ConnectElementTagName) => HTMLElement | null;
+  create: <T extends ConnectElementTagName>(
+    tagName: T
+  ) => ConnectHTMLElementRecord[T];
 
   /**
    * Updates the Connect instance with new parameters.
@@ -390,11 +404,3 @@ export interface StripeConnectInstance {
  * Tagnames to be used with the `create` method of the Connect instance.
  */
 export type ConnectElementTagName = "account-onboarding";
-
-export declare const findScript: () => HTMLScriptElement | null;
-
-export declare const loadScript: () => Promise<any | null>;
-
-export declare const initStripeConnect: (
-  stripeConnectPromise: StripeConnectWrapper | null
-) => any | null;

package/dist/src/index.d.ts

@@ -1,3 +0,0 @@
-import { LoadConnect } from "./shared";
-export declare const loadConnect: LoadConnect;
-export {};