@stripe/connect-js 3.1.0-beta.1 → 3.1.1-beta.1

package/README.md

@@ -5,7 +5,7 @@ This NPM package contains initialization logic for Connect embedded components a
 
 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.
 
-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.
+The embedded onboarding component is generally available now. Please refer to our [documentation](https://stripe.com/docs/connect/supported-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.
 
@@ -60,17 +60,6 @@ script tag is inserted immediately upon page load.
 import "@stripe/connect-js";
 ```
 
-### Manually include the script tag
-
-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 `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 `loadConnectAndInitialize` without side effects
 
 If you would like to use `loadConnectAndInitialize` in your application, but defer loading the

package/dist/connect.esm.js

@@ -2,23 +2,24 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const ConnectElementCustomMethodConfig = {
   "payment-details": {
-    setPayment: payment => {},
-    setOnClose: listener => {}
+    setPayment: _payment => {},
+    setOnClose: _listener => {}
   },
   "account-onboarding": {
-    setFullTermsOfServiceUrl: termOfServiceUrl => {},
-    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
-    setPrivacyPolicyUrl: privacyPolicyUrl => {},
-    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
-    setOnExit: listener => {}
+    setFullTermsOfServiceUrl: _termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: _recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: _privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: _skipTermsOfServiceCollection => {},
+    setOnExit: _listener => {}
   },
   "issuing-card": {
-    setDefaultCard: defaultCard => {},
-    setCardArtFileLink: cardArtFileLink => {},
-    setCardSwitching: cardSwitching => {}
+    setDefaultCard: _defaultCard => {},
+    setCardArtFileLink: _cardArtFileLink => {},
+    setFetchEphemeralKey: _fetchEphemeralKey => {}
   },
   "issuing-cards-list": {
-    setCardArtFileLink: cardArtFileLink => {}
+    setCardArtFileLink: _cardArtFileLink => {},
+    setFetchEphemeralKey: _fetchEphemeralKey => {}
   }
 };
 
@@ -37,7 +38,7 @@ const componentNameMapping = {
 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 findScript = () => {
-  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
+  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0] || null;
 };
 const injectScript = () => {
   const script = document.createElement("script");
@@ -146,7 +147,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.1.0-beta.1"
+            sdkVersion: "3.1.1-beta.1"
           }
         })
       }));

package/dist/connect.js

@@ -6,23 +6,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const ConnectElementCustomMethodConfig = {
   "payment-details": {
-    setPayment: payment => {},
-    setOnClose: listener => {}
+    setPayment: _payment => {},
+    setOnClose: _listener => {}
   },
   "account-onboarding": {
-    setFullTermsOfServiceUrl: termOfServiceUrl => {},
-    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
-    setPrivacyPolicyUrl: privacyPolicyUrl => {},
-    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
-    setOnExit: listener => {}
+    setFullTermsOfServiceUrl: _termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: _recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: _privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: _skipTermsOfServiceCollection => {},
+    setOnExit: _listener => {}
   },
   "issuing-card": {
-    setDefaultCard: defaultCard => {},
-    setCardArtFileLink: cardArtFileLink => {},
-    setCardSwitching: cardSwitching => {}
+    setDefaultCard: _defaultCard => {},
+    setCardArtFileLink: _cardArtFileLink => {},
+    setFetchEphemeralKey: _fetchEphemeralKey => {}
   },
   "issuing-cards-list": {
-    setCardArtFileLink: cardArtFileLink => {}
+    setCardArtFileLink: _cardArtFileLink => {},
+    setFetchEphemeralKey: _fetchEphemeralKey => {}
   }
 };
 
@@ -41,7 +42,7 @@ const componentNameMapping = {
 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 findScript = () => {
-  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
+  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0] || null;
 };
 const injectScript = () => {
   const script = document.createElement("script");
@@ -150,7 +151,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.1.0-beta.1"
+            sdkVersion: "3.1.1-beta.1"
           }
         })
       }));

package/dist/pure.esm.js

@@ -2,23 +2,24 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const ConnectElementCustomMethodConfig = {
   "payment-details": {
-    setPayment: payment => {},
-    setOnClose: listener => {}
+    setPayment: _payment => {},
+    setOnClose: _listener => {}
   },
   "account-onboarding": {
-    setFullTermsOfServiceUrl: termOfServiceUrl => {},
-    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
-    setPrivacyPolicyUrl: privacyPolicyUrl => {},
-    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
-    setOnExit: listener => {}
+    setFullTermsOfServiceUrl: _termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: _recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: _privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: _skipTermsOfServiceCollection => {},
+    setOnExit: _listener => {}
   },
   "issuing-card": {
-    setDefaultCard: defaultCard => {},
-    setCardArtFileLink: cardArtFileLink => {},
-    setCardSwitching: cardSwitching => {}
+    setDefaultCard: _defaultCard => {},
+    setCardArtFileLink: _cardArtFileLink => {},
+    setFetchEphemeralKey: _fetchEphemeralKey => {}
   },
   "issuing-cards-list": {
-    setCardArtFileLink: cardArtFileLink => {}
+    setCardArtFileLink: _cardArtFileLink => {},
+    setFetchEphemeralKey: _fetchEphemeralKey => {}
   }
 };
 
@@ -37,7 +38,7 @@ const componentNameMapping = {
 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 findScript = () => {
-  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
+  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0] || null;
 };
 const injectScript = () => {
   const script = document.createElement("script");
@@ -146,7 +147,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.1.0-beta.1"
+            sdkVersion: "3.1.1-beta.1"
           }
         })
       }));

package/dist/pure.js

@@ -6,23 +6,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const ConnectElementCustomMethodConfig = {
   "payment-details": {
-    setPayment: payment => {},
-    setOnClose: listener => {}
+    setPayment: _payment => {},
+    setOnClose: _listener => {}
   },
   "account-onboarding": {
-    setFullTermsOfServiceUrl: termOfServiceUrl => {},
-    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
-    setPrivacyPolicyUrl: privacyPolicyUrl => {},
-    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
-    setOnExit: listener => {}
+    setFullTermsOfServiceUrl: _termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: _recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: _privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: _skipTermsOfServiceCollection => {},
+    setOnExit: _listener => {}
   },
   "issuing-card": {
-    setDefaultCard: defaultCard => {},
-    setCardArtFileLink: cardArtFileLink => {},
-    setCardSwitching: cardSwitching => {}
+    setDefaultCard: _defaultCard => {},
+    setCardArtFileLink: _cardArtFileLink => {},
+    setFetchEphemeralKey: _fetchEphemeralKey => {}
   },
   "issuing-cards-list": {
-    setCardArtFileLink: cardArtFileLink => {}
+    setCardArtFileLink: _cardArtFileLink => {},
+    setFetchEphemeralKey: _fetchEphemeralKey => {}
   }
 };
 
@@ -41,7 +42,7 @@ const componentNameMapping = {
 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 findScript = () => {
-  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0];
+  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0] || null;
 };
 const injectScript = () => {
   const script = document.createElement("script");
@@ -150,7 +151,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.1.0-beta.1"
+            sdkVersion: "3.1.1-beta.1"
           }
         })
       }));

package/dist/types/config.d.ts

@@ -1,21 +1,31 @@
+type FetchEphemeralKeyFunction = (fetchParams: {
+    issuingCard: string;
+    nonce: string;
+}) => Promise<{
+    issuingCard: string;
+    nonce: string;
+    ephemeralKeySecret: string;
+}>;
 export declare const ConnectElementCustomMethodConfig: {
     "payment-details": {
-        setPayment: (payment: string | undefined) => void;
-        setOnClose: (listener: (() => void) | undefined) => void;
+        setPayment: (_payment: string | undefined) => void;
+        setOnClose: (_listener: (() => void) | undefined) => void;
     };
     "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;
+        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;
     };
     "issuing-card": {
-        setDefaultCard: (defaultCard: string | undefined) => void;
-        setCardArtFileLink: (cardArtFileLink: string | undefined) => void;
-        setCardSwitching: (cardSwitching: boolean | undefined) => void;
+        setDefaultCard: (_defaultCard: string | undefined) => void;
+        setCardArtFileLink: (_cardArtFileLink: string | undefined) => void;
+        setFetchEphemeralKey: (_fetchEphemeralKey: FetchEphemeralKeyFunction | undefined) => void;
     };
     "issuing-cards-list": {
-        setCardArtFileLink: (cardArtFileLink: string | undefined) => void;
+        setCardArtFileLink: (_cardArtFileLink: string | undefined) => void;
+        setFetchEphemeralKey: (_fetchEphemeralKey: FetchEphemeralKeyFunction | undefined) => void;
     };
 };
+export {};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@stripe/connect-js",
-  "version": "3.1.0-beta.1",
+  "version": "3.1.1-beta.1",
   "description": "Connect.js loading utility package",
   "main": "dist/connect.js",
   "module": "dist/connect.esm.js",
   "types": "types/index.d.ts",
   "typings": "types/index.d.ts",
   "scripts": {
-    "test": "yarn lint && yarn test:unit --passWithNoTests && yarn typecheck",
+    "test": "yarn lint && yarn test:unit --passWithNoTests && yarn typecheck && yarn build",
     "test:unit": "jest",
     "test:types": "zx ./tests/types/scripts/test.mjs",
     "lint": "eslint '{src,types}/**/*.{ts,js}' && yarn prettier-check",

package/src/shared.ts

@@ -51,9 +51,11 @@ const EXISTING_SCRIPT_MESSAGE =
 const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
 
 export const findScript = (): HTMLScriptElement | null => {
-  return document.querySelectorAll<HTMLScriptElement>(
-    `script[src="${V0_URL}"]`
-  )[0];
+  return (
+    document.querySelectorAll<HTMLScriptElement>(
+      `script[src="${V0_URL}"]`
+    )[0] || null
+  );
 };
 
 const injectScript = (): HTMLScriptElement => {

package/types/checks.ts

@@ -0,0 +1,9 @@
+import { ConnectElementCustomMethodConfig } from "./config";
+import { ConnectElementTagName } from "./shared.d";
+
+// ensure that keys of ConnectElementCustomMethodConfig are from ConnectElementTagName
+export type HasType<T, Q extends T> = Q;
+export type CustomMethodConfigValidation = HasType<
+  ConnectElementTagName,
+  keyof typeof ConnectElementCustomMethodConfig
+>;

package/types/config.ts

@@ -1,39 +1,44 @@
-import { ConnectElementTagName } from "./shared.d";
-
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
+type FetchEphemeralKeyFunction = (fetchParams: {
+  issuingCard: string;
+  nonce: string;
+}) => Promise<{
+  issuingCard: string;
+  nonce: string;
+  ephemeralKeySecret: string;
+}>;
+
 export const ConnectElementCustomMethodConfig = {
   "payment-details": {
-    setPayment: (payment: string | undefined): void => {},
-    setOnClose: (listener: (() => void) | undefined): void => {}
+    setPayment: (_payment: string | undefined): void => {},
+    setOnClose: (_listener: (() => void) | undefined): void => {}
   },
   "account-onboarding": {
     setFullTermsOfServiceUrl: (
-      termOfServiceUrl: string | undefined
+      _termOfServiceUrl: string | undefined
     ): void => {},
     setRecipientTermsOfServiceUrl: (
-      recipientTermsOfServiceUrl: string | undefined
+      _recipientTermsOfServiceUrl: string | undefined
     ): void => {},
-    setPrivacyPolicyUrl: (privacyPolicyUrl: string | undefined): void => {},
+    setPrivacyPolicyUrl: (_privacyPolicyUrl: string | undefined): void => {},
     setSkipTermsOfServiceCollection: (
-      skipTermsOfServiceCollection: boolean | undefined
+      _skipTermsOfServiceCollection: boolean | undefined
     ): void => {},
-    setOnExit: (listener: (() => void) | undefined): void => {}
+    setOnExit: (_listener: (() => void) | undefined): void => {}
   },
   "issuing-card": {
-    setDefaultCard: (defaultCard: string | undefined): void => {},
-    setCardArtFileLink: (cardArtFileLink: string | undefined): void => {},
-    setCardSwitching: (cardSwitching: boolean | undefined): void => {}
+    setDefaultCard: (_defaultCard: string | undefined): void => {},
+    setCardArtFileLink: (_cardArtFileLink: string | undefined): void => {},
+    setFetchEphemeralKey: (
+      _fetchEphemeralKey: FetchEphemeralKeyFunction | undefined
+    ): void => {}
   },
   "issuing-cards-list": {
-    setCardArtFileLink: (cardArtFileLink: string | undefined): void => {}
+    setCardArtFileLink: (_cardArtFileLink: string | undefined): void => {},
+    setFetchEphemeralKey: (
+      _fetchEphemeralKey: FetchEphemeralKeyFunction | 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

@@ -6,6 +6,56 @@ export declare type LoadConnectAndInitialize = (
 
 export declare type OverlayOption = "dialog" | "drawer";
 
+/*
+ * Use a `CssFontSource` to pass custom fonts via a stylesheet URL when initializing a Connect instance.
+ */
+export declare type CssFontSource = {
+  /**
+   * A relative or absolute URL pointing to a CSS file with [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face) definitions, for example:
+   *
+   *     https://fonts.googleapis.com/css?family=Open+Sans
+   *
+   * Note that if you are using a [content security policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) (CSP), [additional directives](https://stripe.com/docs/security#content-security-policy) may be necessary.
+   */
+  cssSrc: string;
+};
+
+/*
+ * Use a `CustomFontSource` to pass custom fonts when initializing a Connect instance.
+ */
+export declare type CustomFontSource = {
+  /**
+   * The name to give the font
+   */
+  family: string;
+
+  /**
+   * A valid [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) value pointing to your custom font file.
+   * This is usually (though not always) a link to a file with a `.woff` , `.otf`, or `.svg` suffix.
+   */
+  src: string;
+
+  /**
+   * A valid [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) value.
+   */
+  display?: string;
+
+  /**
+   * Defaults to `normal`.
+   */
+  style?: "normal" | "italic" | "oblique";
+
+  /**
+   * A valid [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range) value.
+   */
+  unicodeRange?: string;
+
+  /**
+   * A valid [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight), as a string.
+   */
+  weight?: string;
+};
+
 /**
  * Appearance options for the Connect instance.
  */
@@ -26,17 +76,17 @@ export declare type AppearanceVariables = {
   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.
+   * The baseline font size set on the embedded component root. This scales the value of other font size variables. This supports pixel values only ranging from 1px to 40px, 0.1em to 4em, and 0.1rem to 4rem.
    */
   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.
+   * 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 ranging from 8px to 20px.
    */
   spacingUnit?: string;
 
   /**
-   * The general border radius used in embedded components. This sets the default border radius for all components. This supports pixel values only.
+   * The general border radius used in embedded components. This sets the default border radius for all components. This supports pixel values only, with a maximum value of 24px.
    */
   borderRadius?: string;
 
@@ -190,15 +240,15 @@ export declare type AppearanceVariables = {
    */
   buttonBorderRadius?: string;
   /**
-   * The border radius used for form elements. This supports pixel values only.
+   * The border radius used for form elements. This supports pixel values only, with a maximum value of 24px.
    */
   formBorderRadius?: string;
   /**
-   * The border radius used for badges. This supports pixel values only.
+   * The border radius used for badges. This supports pixel values only, with a maximum value of 24px.
    */
   badgeBorderRadius?: string;
   /**
-   * The border radius used for overlays. This supports pixel values only.
+   * The border radius used for overlays. This supports pixel values only, with a maximum value of 24px.
    */
   overlayBorderRadius?: string;
 
@@ -212,15 +262,7 @@ export declare type AppearanceVariables = {
 
   // 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.
+   * The font size for the medium body typography. Body typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   bodyMdFontSize?: string;
   /**
@@ -228,7 +270,7 @@ export declare type AppearanceVariables = {
    */
   bodyMdFontWeight?: string;
   /**
-   * The font size for the small body typography. Body typography variables accept a valid font size value.
+   * The font size for the small body typography. Body typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   bodySmFontSize?: string;
   /**
@@ -238,7 +280,7 @@ export declare type AppearanceVariables = {
 
   // Heading Typography
   /**
-   * The font size for the extra large heading typography. Heading typography variables accept a valid font size value.
+   * The font size for the extra large heading typography. Heading typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   headingXlFontSize?: string;
   /**
@@ -250,7 +292,7 @@ export declare type AppearanceVariables = {
    */
   headingXlTextTransform?: string;
   /**
-   * The font size for the large heading typography. Heading typography variables accept a valid font size value.
+   * The font size for the large heading typography. Heading typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   headingLgFontSize?: string;
   /**
@@ -262,7 +304,7 @@ export declare type AppearanceVariables = {
    */
   headingLgTextTransform?: string;
   /**
-   * The font size for the medium heading typography. Heading typography variables accept a valid font size value.
+   * The font size for the medium heading typography. Heading typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   headingMdFontSize?: string;
   /**
@@ -274,7 +316,7 @@ export declare type AppearanceVariables = {
    */
   headingMdTextTransform?: string;
   /**
-   * The font size for the small heading typography. Heading typography variables accept a valid font size value.
+   * The font size for the small heading typography. Heading typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   headingSmFontSize?: string;
   /**
@@ -286,7 +328,7 @@ export declare type AppearanceVariables = {
    */
   headingSmTextTransform?: string;
   /**
-   * The font size for the extra small heading typography. Heading typography variables accept a valid font size value.
+   * The font size for the extra small heading typography. Heading typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   headingXsFontSize?: string;
   /**
@@ -300,19 +342,7 @@ export declare type AppearanceVariables = {
 
   // 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.
+   * The font size for the medium label typography. Label typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   labelMdFontSize?: string;
   /**
@@ -324,7 +354,7 @@ export declare type AppearanceVariables = {
    */
   labelMdTextTransform?: string;
   /**
-   * The font size for the small label typography. Label typography variables accept a valid font size value.
+   * The font size for the small label typography. Label typography variables accept a valid font size value ranging from 1px to 200px, 0.1em to 12em, and 0.1rem to 12rem.
    */
   labelSmFontSize?: string;
   /**
@@ -374,6 +404,11 @@ export interface IStripeConnectInitParams {
    * The locale to use for the Connect instance.
    */
   locale?: string;
+
+  /**
+   * An array of custom fonts, which embedded components created from a ConnectInstance can use.
+   */
+  fonts?: Array<CssFontSource | CustomFontSource>;
 }
 
 type ConnectElementCustomMethods = typeof ConnectElementCustomMethodConfig;