@stripe/connect-js 2.0.5 → 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.5"
+            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.5"
+            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.5"
+            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.5"
+            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.5",
+  "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";
 
@@ -207,6 +209,14 @@ export declare type AppearanceVariables = {
   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.
    */
@@ -287,6 +297,18 @@ export declare type AppearanceVariables = {
   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.
    */
@@ -335,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.
@@ -345,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 {
@@ -371,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.
@@ -389,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 {};