@stripe/connect-js 2.0.4 → 3.0.0-beta.1

package/dist/connect.esm.js

@@ -1,8 +1,17 @@
 const componentNameMapping = {
-  "account-onboarding": "stripe-connect-account-onboarding"
+  payments: "stripe-connect-payments",
+  payouts: "stripe-connect-payouts",
+  "payment-details": "stripe-connect-payment-details",
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings",
+  "account-management": "stripe-connect-account-management",
+  "notification-banner": "stripe-connect-notification-banner",
+  "instant-payouts": "stripe-connect-instant-payouts",
+  "issuing-card": "stripe-connect-issuing-card",
+  "issuing-cards-list": "stripe-connect-issuing-cards-list"
 };
 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";
+const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
 const findScript = () => {
   return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
 };
@@ -59,13 +68,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 +109,10 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.4"
+            sdkVersion: "3.0.0-beta.1"
           }
         })
       }));
-      // 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 +128,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

@@ -3,10 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const componentNameMapping = {
-  "account-onboarding": "stripe-connect-account-onboarding"
+  payments: "stripe-connect-payments",
+  payouts: "stripe-connect-payouts",
+  "payment-details": "stripe-connect-payment-details",
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings",
+  "account-management": "stripe-connect-account-management",
+  "notification-banner": "stripe-connect-notification-banner",
+  "instant-payouts": "stripe-connect-instant-payouts",
+  "issuing-card": "stripe-connect-issuing-card",
+  "issuing-cards-list": "stripe-connect-issuing-cards-list"
 };
 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";
+const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
 const findScript = () => {
   return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
 };
@@ -63,13 +72,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 +113,10 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.4"
+            sdkVersion: "3.0.0-beta.1"
           }
         })
       }));
-      // 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 +132,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

@@ -1,8 +1,17 @@
 const componentNameMapping = {
-  "account-onboarding": "stripe-connect-account-onboarding"
+  payments: "stripe-connect-payments",
+  payouts: "stripe-connect-payouts",
+  "payment-details": "stripe-connect-payment-details",
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings",
+  "account-management": "stripe-connect-account-management",
+  "notification-banner": "stripe-connect-notification-banner",
+  "instant-payouts": "stripe-connect-instant-payouts",
+  "issuing-card": "stripe-connect-issuing-card",
+  "issuing-cards-list": "stripe-connect-issuing-cards-list"
 };
 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";
+const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
 const findScript = () => {
   return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
 };
@@ -59,13 +68,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 +109,19 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.4"
+            sdkVersion: "3.0.0-beta.1"
           }
         })
       }));
-      // 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

@@ -3,10 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const componentNameMapping = {
-  "account-onboarding": "stripe-connect-account-onboarding"
+  payments: "stripe-connect-payments",
+  payouts: "stripe-connect-payouts",
+  "payment-details": "stripe-connect-payment-details",
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings",
+  "account-management": "stripe-connect-account-management",
+  "notification-banner": "stripe-connect-notification-banner",
+  "instant-payouts": "stripe-connect-instant-payouts",
+  "issuing-card": "stripe-connect-issuing-card",
+  "issuing-cards-list": "stripe-connect-issuing-cards-list"
 };
 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";
+const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
 const findScript = () => {
   return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
 };
@@ -63,13 +72,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 +113,19 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.4"
+            sdkVersion: "3.0.0-beta.1"
           }
         })
       }));
-      // 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;
+export type ConnectElementHTMLName = "stripe-connect-payments" | "stripe-connect-payouts" | "stripe-connect-payment-details" | "stripe-connect-account-onboarding" | "stripe-connect-payment-method-settings" | "stripe-connect-account-management" | "stripe-connect-notification-banner" | "stripe-connect-instant-payouts" | "stripe-connect-issuing-card" | "stripe-connect-issuing-cards-list";
+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.4",
+  "version": "3.0.0-beta.1",
   "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,23 +1,53 @@
 import {
-  StripeConnectWrapper,
   IStripeConnectInitParams,
-  ConnectElementTagName
+  StripeConnectInstance,
+  ConnectElementTagName,
+  ConnectHTMLElementRecord
 } from "../types";
 
-export type LoadConnect = () => Promise<StripeConnectWrapper>;
-
-type ConnectElementHTMLName = "stripe-connect-account-onboarding";
-
-const componentNameMapping: Record<
+export type LoadConnectAndInitialize = (
+  initParams: IStripeConnectInitParams
+) => StripeConnectInstance;
+
+export type ConnectElementHTMLName =
+  | "stripe-connect-payments"
+  | "stripe-connect-payouts"
+  | "stripe-connect-payment-details"
+  | "stripe-connect-account-onboarding"
+  | "stripe-connect-payment-method-settings"
+  | "stripe-connect-account-management"
+  | "stripe-connect-notification-banner"
+  | "stripe-connect-instant-payouts"
+  | "stripe-connect-issuing-card"
+  | "stripe-connect-issuing-cards-list";
+
+export const componentNameMapping: Record<
   ConnectElementTagName,
   ConnectElementHTMLName
 > = {
-  "account-onboarding": "stripe-connect-account-onboarding"
+  payments: "stripe-connect-payments",
+  payouts: "stripe-connect-payouts",
+  "payment-details": "stripe-connect-payment-details",
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings",
+  "account-management": "stripe-connect-account-management",
+  "notification-banner": "stripe-connect-notification-banner",
+  "instant-payouts": "stripe-connect-instant-payouts",
+  "issuing-card": "stripe-connect-issuing-card",
+  "issuing-cards-list": "stripe-connect-issuing-cards-list"
+};
+
+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";
+const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
 
 export const findScript = (): HTMLScriptElement | null => {
   return document.querySelectorAll<HTMLScriptElement>(
@@ -44,13 +74,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 +128,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 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 +181,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";
 
@@ -6,114 +8,342 @@ export declare type OverlayOption = "dialog" | "drawer";
  * Appearance options for the Connect instance.
  */
 export declare type AppearanceOptions = {
+  /**
+   * The type of overlay used throughout the Connect.js design system. Set this to be either a Dialog or Drawer.
+   */
   overlays?: OverlayOption;
   variables?: AppearanceVariables;
 };
 
 export declare type AppearanceVariables = {
+  // Commonly used
+
+  /**
+   * The font family value used throughout embedded components. If an embedded component inherits a font-family value from an element on your site in which it’s placed, this setting overrides that inheritance.
+   */
+  fontFamily?: string;
+
+  /**
+   * The baseline font size set on the embedded component root. This scales the value of other font size variables. This supports pixel values only.
+   */
+  fontSizeBase?: string;
+
+  /**
+   * The base spacing unit that derives all spacing values. Increase or decrease this value to make your layout more or less spacious. This supports pixel values only.
+   */
+  spacingUnit?: string;
+
+  /**
+   * The general border radius used in embedded components. This sets the default border radius for all components. This supports pixel values only.
+   */
+  borderRadius?: string;
+
+  /**
+   * The primary color used throughout embedded components. Set this to your primary brand color. This accepts hex values or RGB/HSL strings.
+   */
   colorPrimary?: string;
+
+  /**
+   * The background color for embedded components, including overlays, tooltips, and popovers. This accepts hex values or RGB/HSL strings.
+   */
+  colorBackground?: string;
+
+  /**
+   * The color used for regular text. This accepts hex values or RGB/HSL strings.
+   */
+  colorText?: string;
+
+  /**
+   * The color used to indicate errors or destructive actions. This accepts hex values or RGB/HSL strings.
+   */
+  colorDanger?: string;
+
+  // Less commonly used
+
   // Primary Button
-  buttonPrimaryColorBorder?: string;
+  /**
+   * The color used as a background for primary buttons. This accepts hex values or RGB/HSL strings.
+   */
   buttonPrimaryColorBackground?: string;
+  /**
+   * The border color used for primary buttons. This accepts hex values or RGB/HSL strings.
+   */
+  buttonPrimaryColorBorder?: string;
+  /**
+   * The text color used for primary buttons. This accepts hex values or RGB/HSL strings.
+   */
   buttonPrimaryColorText?: string;
+
   // Secondary Button
-  buttonSecondaryColorBorder?: string;
+  /**
+   * The color used as a background for secondary buttons. This accepts hex values or RGB/HSL strings.
+   */
   buttonSecondaryColorBackground?: string;
+  /**
+   * The color used as a border for secondary buttons. This accepts hex values or RGB/HSL strings.
+   */
+  buttonSecondaryColorBorder?: string;
+  /**
+   * The text color used for secondary buttons. This accepts hex values or RGB/HSL strings.
+   */
   buttonSecondaryColorText?: string;
-  // Link
+
+  /**
+   * The color used for secondary text. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  colorSecondaryText?: string;
+  /**
+   * The color used for primary actions and links. This accepts hex values or RGB/HSL strings.
+   */
   actionPrimaryColorText?: string;
+  /**
+   * The color used for secondary actions and links. This accepts hex values or RGB/HSL strings.
+   */
   actionSecondaryColorText?: string;
-  // Border
-  colorBorder?: string;
-  // Form
-  formHighlightColorBorder?: string;
-  formAccentColor?: string;
-  // Text
-  colorText?: string;
-  colorSecondaryText?: string;
-  // Background
-  colorBackground?: string;
-  offsetBackgroundColor?: string;
-  formBackgroundColor?: string;
-
-  // Feedback Colors
-  colorDanger?: string;
 
   // Neutral Badge Colors
-  badgeNeutralColorBorder?: string;
+  /**
+   * The background color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/HSL strings.
+   */
   badgeNeutralColorBackground?: string;
+  /**
+   * The text color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/HSL strings.
+   */
   badgeNeutralColorText?: string;
+  /**
+   * The border color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  badgeNeutralColorBorder?: string;
 
   // Success Badge Colors
-  badgeSuccessColorBorder?: string;
+  /**
+   * The background color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/HSL strings.
+   */
   badgeSuccessColorBackground?: string;
+  /**
+   * The text color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/HSL strings.
+   */
   badgeSuccessColorText?: string;
+  /**
+   * The border color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  badgeSuccessColorBorder?: string;
 
   // Warning Badge Colors
-  badgeWarningColorBorder?: string;
+  /**
+   * The background color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/HSL strings.
+   */
   badgeWarningColorBackground?: string;
+  /**
+   * The text color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/HSL strings.
+   */
   badgeWarningColorText?: string;
+  /**
+   * The border color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  badgeWarningColorBorder?: string;
 
   // Danger Badge Colors
-  badgeDangerColorBorder?: string;
+  /**
+   * The background color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/HSL strings.
+   */
   badgeDangerColorBackground?: string;
+  /**
+   * The text color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/HSL strings.
+   */
   badgeDangerColorText?: string;
+  /**
+   * The border color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  badgeDangerColorBorder?: string;
+
+  // Background
+  /**
+   * The background color used when highlighting information, like the selected row on a table or particular piece of UI. This accepts hex values or RGB/HSL strings.
+   */
+  offsetBackgroundColor?: string;
+  /**
+   * The background color used for form items. This accepts hex values or RGB/HSL strings.
+   */
+  formBackgroundColor?: string;
+
+  /**
+   * The color used for borders throughout the component. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  colorBorder?: string;
+
+  // Form
+  /**
+   * The color used to highlight form items when focused. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  formHighlightColorBorder?: string;
+  /**
+   * The color used for to fill in form items like checkboxes, radio buttons and switches. This accepts hex values or RGB/HSL strings.
+   */
+  formAccentColor?: string;
 
   // Border Sizing
-  borderRadius?: string;
+  /**
+   * The border radius used for buttons. This supports pixel values only.
+   */
   buttonBorderRadius?: string;
+  /**
+   * The border radius used for form elements. This supports pixel values only.
+   */
   formBorderRadius?: string;
+  /**
+   * The border radius used for badges. This supports pixel values only.
+   */
   badgeBorderRadius?: string;
+  /**
+   * The border radius used for overlays. This supports pixel values only.
+   */
   overlayBorderRadius?: string;
 
-  // Overlay
-  overlayZIndex?: number;
-
   // Font Sizing
-  fontSizeBase?: string;
 
-  // Spacing
-  spacingUnit?: string;
+  // Overlay
+  /**
+   * A z-index to use for the overlay throughout embedded components. Set this number to control the z-order of the overlay.
+   */
+  overlayZIndex?: number;
 
   // Body Typography
+  /**
+   * The font size for the large body typography. Body typography variables accept a valid font size value.
+   */
   bodyLgFontSize?: string;
+  /**
+   * The font weight for the large body typography. Body typography variables accept a valid font weight value.
+   */
   bodyLgFontWeight?: string;
+  /**
+   * The font size for the medium body typography. Body typography variables accept a valid font size value.
+   */
   bodyMdFontSize?: string;
+  /**
+   * The font weight for the medium body typography. Body typography variables accept a valid font weight value.
+   */
   bodyMdFontWeight?: string;
+  /**
+   * The font size for the small body typography. Body typography variables accept a valid font size value.
+   */
   bodySmFontSize?: string;
+  /**
+   * The font weight for the small body typography. Body typography variables accept a valid font weight value.
+   */
   bodySmFontWeight?: string;
 
-  // Label Typography
-  labelLgFontSize?: string;
-  labelLgFontWeight?: string;
-  labelLgTextTransform?: string;
-  labelMdFontSize?: string;
-  labelMdFontWeight?: string;
-  labelMdTextTransform?: string;
-  labelSmFontSize?: string;
-  labelSmFontWeight?: string;
-  labelSmTextTransform?: string;
-
   // Heading Typography
+  /**
+   * The font size for the extra large heading typography. Heading typography variables accept a valid font size value.
+   */
   headingXlFontSize?: string;
+  /**
+   * The font weight for the extra large heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingXlFontWeight?: string;
+  /**
+   * The text transform for the extra large heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingXlTextTransform?: string;
+  /**
+   * The font size for the large heading typography. Heading typography variables accept a valid font size value.
+   */
   headingLgFontSize?: string;
+  /**
+   * The font weight for the large heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingLgFontWeight?: string;
+  /**
+   * The text transform for the large heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingLgTextTransform?: string;
+  /**
+   * The font size for the medium heading typography. Heading typography variables accept a valid font size value.
+   */
   headingMdFontSize?: string;
+  /**
+   * The font weight for the medium heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingMdFontWeight?: string;
+  /**
+   * The text transform for the medium heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingMdTextTransform?: string;
+  /**
+   * The font size for the small heading typography. Heading typography variables accept a valid font size value.
+   */
   headingSmFontSize?: string;
+  /**
+   * The font weight for the small heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingSmFontWeight?: string;
+  /**
+   * The text transform for the small heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingSmTextTransform?: string;
+  /**
+   * The font size for the extra small heading typography. Heading typography variables accept a valid font size value.
+   */
   headingXsFontSize?: string;
+  /**
+   * The font weight for the extra small heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingXsFontWeight?: string;
+  /**
+   * The text transform for the extra small heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingXsTextTransform?: string;
+
+  // Label Typography
+  /**
+   * The font size for the large label typography. Label typography variables accept a valid font size value.
+   */
+  labelLgFontSize?: string;
+  /**
+   * The font weight for the large label typography. Label typography variables accept a valid font weight value.
+   */
+  labelLgFontWeight?: string;
+  /**
+   * The text transform for the large label typography. Label typography variables accept a valid text transform value.
+   */
+  labelLgTextTransform?: string;
+  /**
+   * The font size for the medium label typography. Label typography variables accept a valid font size value.
+   */
+  labelMdFontSize?: string;
+  /**
+   * The font weight for the medium label typography. Label typography variables accept a valid font weight value.
+   */
+  labelMdFontWeight?: string;
+  /**
+   * The text transform for the medium label typography. Label typography variables accept a valid text transform value.
+   */
+  labelMdTextTransform?: string;
+  /**
+   * The font size for the small label typography. Label typography variables accept a valid font size value.
+   */
+  labelSmFontSize?: string;
+  /**
+   * The font weight for the small label typography. Label typography variables accept a valid font weight value.
+   */
+  labelSmFontWeight?: string;
+  /**
+   * The text transform for the small label typography. Label typography variables accept a valid text transform value.
+   */
+  labelSmTextTransform?: string;
 };
 
 export type IStripeConnectUpdateParams = {
+  /**
+   * Appearance options for the Connect instance.
+   */
   appearance?: AppearanceOptions;
+
+  /**
+   * The locale to use for the Connect instance.
+   */
   locale?: string;
 };
 
@@ -127,9 +357,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.
@@ -137,24 +368,37 @@ 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 {
+  "payment-details": HTMLElement & {
+    setPayment: (payment: string | undefined) => void;
+    setOnClose: (listener: (() => void) | undefined) => void;
+  };
+  "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) | undefined) => void;
+  };
 }
 
 export interface StripeConnectInstance {
@@ -163,7 +407,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.
@@ -181,12 +427,14 @@ 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;
+export type ConnectElementTagName =
+  | "payments"
+  | "payouts"
+  | "payment-details"
+  | "account-onboarding"
+  | "payment-method-settings"
+  | "account-management"
+  | "notification-banner"
+  | "instant-payouts"
+  | "issuing-card"
+  | "issuing-cards-list";

package/dist/src/index.d.ts

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