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

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

@@ -1,17 +1,20 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ConnectElementCustomMethodConfig = {
+  "account-onboarding": {
+    setFullTermsOfServiceUrl: termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
+    setOnExit: listener => {}
+  }
+};
+
 const componentNameMapping = {
-  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"
+  "account-onboarding": "stripe-connect-account-onboarding"
 };
 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/v0.1/connect.js";
+const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
 const findScript = () => {
   return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
 };
@@ -68,6 +71,9 @@ const loadScript = () => {
   });
   return stripePromise;
 };
+const hasCustomMethod = tagName => {
+  return tagName in ConnectElementCustomMethodConfig;
+};
 const initStripeConnect = (stripePromise, initParams) => {
   const stripeConnectInstance = stripePromise.then(wrapper => wrapper.initialize(initParams));
   return {
@@ -77,6 +83,16 @@ const initStripeConnect = (stripePromise, initParams) => {
         htmlName = tagName;
       }
       const element = document.createElement(htmlName);
+      if (hasCustomMethod(tagName)) {
+        const methods = ConnectElementCustomMethodConfig[tagName];
+        for (const method in methods) {
+          element[method] = function (value) {
+            stripeConnectInstance.then(() => {
+              this[`${method}InternalOnly`](value);
+            });
+          };
+        }
+      }
       stripeConnectInstance.then(instance => {
         element.setConnector(instance.connect);
       });
@@ -109,7 +125,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.0.0-beta.1"
+            sdkVersion: "3.0.1"
           }
         })
       }));

package/dist/connect.js

@@ -2,20 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ConnectElementCustomMethodConfig = {
+  "account-onboarding": {
+    setFullTermsOfServiceUrl: termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
+    setOnExit: listener => {}
+  }
+};
+
 const componentNameMapping = {
-  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"
+  "account-onboarding": "stripe-connect-account-onboarding"
 };
 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/v0.1/connect.js";
+const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
 const findScript = () => {
   return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
 };
@@ -72,6 +75,9 @@ const loadScript = () => {
   });
   return stripePromise;
 };
+const hasCustomMethod = tagName => {
+  return tagName in ConnectElementCustomMethodConfig;
+};
 const initStripeConnect = (stripePromise, initParams) => {
   const stripeConnectInstance = stripePromise.then(wrapper => wrapper.initialize(initParams));
   return {
@@ -81,6 +87,16 @@ const initStripeConnect = (stripePromise, initParams) => {
         htmlName = tagName;
       }
       const element = document.createElement(htmlName);
+      if (hasCustomMethod(tagName)) {
+        const methods = ConnectElementCustomMethodConfig[tagName];
+        for (const method in methods) {
+          element[method] = function (value) {
+            stripeConnectInstance.then(() => {
+              this[`${method}InternalOnly`](value);
+            });
+          };
+        }
+      }
       stripeConnectInstance.then(instance => {
         element.setConnector(instance.connect);
       });
@@ -113,7 +129,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.0.0-beta.1"
+            sdkVersion: "3.0.1"
           }
         })
       }));

package/dist/pure.esm.js

@@ -1,17 +1,20 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ConnectElementCustomMethodConfig = {
+  "account-onboarding": {
+    setFullTermsOfServiceUrl: termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
+    setOnExit: listener => {}
+  }
+};
+
 const componentNameMapping = {
-  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"
+  "account-onboarding": "stripe-connect-account-onboarding"
 };
 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/v0.1/connect.js";
+const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
 const findScript = () => {
   return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
 };
@@ -68,6 +71,9 @@ const loadScript = () => {
   });
   return stripePromise;
 };
+const hasCustomMethod = tagName => {
+  return tagName in ConnectElementCustomMethodConfig;
+};
 const initStripeConnect = (stripePromise, initParams) => {
   const stripeConnectInstance = stripePromise.then(wrapper => wrapper.initialize(initParams));
   return {
@@ -77,6 +83,16 @@ const initStripeConnect = (stripePromise, initParams) => {
         htmlName = tagName;
       }
       const element = document.createElement(htmlName);
+      if (hasCustomMethod(tagName)) {
+        const methods = ConnectElementCustomMethodConfig[tagName];
+        for (const method in methods) {
+          element[method] = function (value) {
+            stripeConnectInstance.then(() => {
+              this[`${method}InternalOnly`](value);
+            });
+          };
+        }
+      }
       stripeConnectInstance.then(instance => {
         element.setConnector(instance.connect);
       });
@@ -109,7 +125,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.0.0-beta.1"
+            sdkVersion: "3.0.1"
           }
         })
       }));

package/dist/pure.js

@@ -2,20 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ConnectElementCustomMethodConfig = {
+  "account-onboarding": {
+    setFullTermsOfServiceUrl: termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
+    setOnExit: listener => {}
+  }
+};
+
 const componentNameMapping = {
-  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"
+  "account-onboarding": "stripe-connect-account-onboarding"
 };
 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/v0.1/connect.js";
+const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
 const findScript = () => {
   return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
 };
@@ -72,6 +75,9 @@ const loadScript = () => {
   });
   return stripePromise;
 };
+const hasCustomMethod = tagName => {
+  return tagName in ConnectElementCustomMethodConfig;
+};
 const initStripeConnect = (stripePromise, initParams) => {
   const stripeConnectInstance = stripePromise.then(wrapper => wrapper.initialize(initParams));
   return {
@@ -81,6 +87,16 @@ const initStripeConnect = (stripePromise, initParams) => {
         htmlName = tagName;
       }
       const element = document.createElement(htmlName);
+      if (hasCustomMethod(tagName)) {
+        const methods = ConnectElementCustomMethodConfig[tagName];
+        for (const method in methods) {
+          element[method] = function (value) {
+            stripeConnectInstance.then(() => {
+              this[`${method}InternalOnly`](value);
+            });
+          };
+        }
+      }
       stripeConnectInstance.then(instance => {
         element.setConnector(instance.connect);
       });
@@ -113,7 +129,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.0.0-beta.1"
+            sdkVersion: "3.0.1"
           }
         })
       }));

package/dist/{shared.d.ts → src/shared.d.ts}

@@ -1,6 +1,6 @@
 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";
+type ConnectElementHTMLName = "stripe-connect-account-onboarding";
 export declare const componentNameMapping: Record<ConnectElementTagName, ConnectElementHTMLName>;
 type StripeConnectInstanceExtended = StripeConnectInstance & {
     debugInstance: () => Promise<StripeConnectInstance>;

package/dist/types/config.d.ts

@@ -0,0 +1,9 @@
+export declare const ConnectElementCustomMethodConfig: {
+    "account-onboarding": {
+        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;
+    };
+};

package/package.json

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

package/src/shared.ts

@@ -4,37 +4,19 @@ import {
   ConnectElementTagName,
   ConnectHTMLElementRecord
 } from "../types";
+import { ConnectElementCustomMethodConfig } from "../types/config";
 
 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";
+type ConnectElementHTMLName = "stripe-connect-account-onboarding";
 
 export const componentNameMapping: Record<
   ConnectElementTagName,
   ConnectElementHTMLName
 > = {
-  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"
+  "account-onboarding": "stripe-connect-account-onboarding"
 };
 
 type StripeConnectInstanceExtended = StripeConnectInstance & {
@@ -47,7 +29,7 @@ interface StripeConnectWrapper {
 
 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/v0.1/connect.js";
+const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
 
 export const findScript = (): HTMLScriptElement | null => {
   return document.querySelectorAll<HTMLScriptElement>(
@@ -127,6 +109,12 @@ export const loadScript = (): Promise<StripeConnectWrapper> => {
   return stripePromise;
 };
 
+const hasCustomMethod = (
+  tagName: ConnectElementTagName
+): tagName is keyof typeof ConnectElementCustomMethodConfig => {
+  return tagName in ConnectElementCustomMethodConfig;
+};
+
 export const initStripeConnect = (
   stripePromise: Promise<StripeConnectWrapper>,
   initParams: IStripeConnectInitParams
@@ -139,9 +127,21 @@ export const initStripeConnect = (
     create: tagName => {
       let htmlName = componentNameMapping[tagName];
       if (!htmlName) {
-        htmlName = tagName as ConnectElementHTMLName;
+        htmlName = (tagName as unknown) as ConnectElementHTMLName;
       }
       const element = document.createElement(htmlName);
+
+      if (hasCustomMethod(tagName)) {
+        const methods = ConnectElementCustomMethodConfig[tagName];
+        for (const method in methods) {
+          (element as any)[method] = function(value: any) {
+            stripeConnectInstance.then(() => {
+              this[`${method}InternalOnly`](value);
+            });
+          };
+        }
+      }
+
       stripeConnectInstance.then(instance => {
         (element as any).setConnector((instance as any).connect);
       });

package/types/config.ts

@@ -0,0 +1,27 @@
+import { ConnectElementTagName } from "./shared.d";
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+export const ConnectElementCustomMethodConfig = {
+  "account-onboarding": {
+    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 => {}
+  }
+};
+
+// ensure that keys of ConnectElementCustomMethodConfig are from ConnectElementTagName
+type HasType<T, Q extends T> = Q;
+type CustomMethodConfigValidation = HasType<
+  ConnectElementTagName,
+  keyof typeof ConnectElementCustomMethodConfig
+>;

package/types/shared.d.ts

@@ -1,3 +1,5 @@
+import { ConnectElementCustomMethodConfig } from "./config";
+
 export declare type LoadConnectAndInitialize = (
   initParams: IStripeConnectInitParams
 ) => StripeConnectInstance;
@@ -209,14 +211,6 @@ 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.
    */
@@ -297,18 +291,6 @@ 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.
    */
@@ -374,32 +356,14 @@ export interface IStripeConnectInitParams {
   locale?: string;
 }
 
-type ConnectHTMLElementRecordFallback = {
-  [key in string]: HTMLElement | null;
-};
-type ConnectHTMLElementRecordBase = {
-  [tagName in ConnectElementTagName]: HTMLElement;
-};
+type ConnectElementCustomMethods = typeof ConnectElementCustomMethodConfig;
 
-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;
-  };
-}
+type ConnectHTMLElementRecord = {
+  [K in keyof ConnectElementCustomMethods]: HTMLElement &
+    ConnectElementCustomMethods[K];
+} & {
+  [key: string]: HTMLElement;
+};
 
 export interface StripeConnectInstance {
   /**
@@ -427,14 +391,4 @@ export interface StripeConnectInstance {
 /**
  * Tagnames to be used with the `create` method of the Connect instance.
  */
-export type ConnectElementTagName =
-  | "payments"
-  | "payouts"
-  | "payment-details"
-  | "account-onboarding"
-  | "payment-method-settings"
-  | "account-management"
-  | "notification-banner"
-  | "instant-payouts"
-  | "issuing-card"
-  | "issuing-cards-list";
+export type ConnectElementTagName = "account-onboarding";