@stripe/connect-js 1.0.9 → 1.1.0

package/dist/connect.esm.js

@@ -1,4 +1,4 @@
-var version = "1.0.9";
+var version = "1.0.10";
 
 const componentNameMapping = {
   payments: "stripe-connect-payments",
@@ -78,7 +78,8 @@ const createWrapper = stripeConnect => {
             sdkVersion: version
           }
         })
-      }));
+      })).connect;
+      console.log(stripeConnectInstance, "lemon");
       // We wrap create so we can map its different strings to supported components
       const oldCreate = stripeConnectInstance.create.bind(stripeConnectInstance);
       stripeConnectInstance.create = tagName => {

package/dist/connect.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.0.9";
+var version = "1.0.10";
 
 const componentNameMapping = {
   payments: "stripe-connect-payments",
@@ -82,7 +82,8 @@ const createWrapper = stripeConnect => {
             sdkVersion: version
           }
         })
-      }));
+      })).connect;
+      console.log(stripeConnectInstance, "lemon");
       // We wrap create so we can map its different strings to supported components
       const oldCreate = stripeConnectInstance.create.bind(stripeConnectInstance);
       stripeConnectInstance.create = tagName => {

package/dist/pure.esm.js

@@ -1,4 +1,4 @@
-var version = "1.0.9";
+var version = "1.0.10";
 
 const componentNameMapping = {
   payments: "stripe-connect-payments",
@@ -78,7 +78,8 @@ const createWrapper = stripeConnect => {
             sdkVersion: version
           }
         })
-      }));
+      })).connect;
+      console.log(stripeConnectInstance, "lemon");
       // We wrap create so we can map its different strings to supported components
       const oldCreate = stripeConnectInstance.create.bind(stripeConnectInstance);
       stripeConnectInstance.create = tagName => {

package/dist/pure.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.0.9";
+var version = "1.0.10";
 
 const componentNameMapping = {
   payments: "stripe-connect-payments",
@@ -82,7 +82,8 @@ const createWrapper = stripeConnect => {
             sdkVersion: version
           }
         })
-      }));
+      })).connect;
+      console.log(stripeConnectInstance, "lemon");
       // We wrap create so we can map its different strings to supported components
       const oldCreate = stripeConnectInstance.create.bind(stripeConnectInstance);
       stripeConnectInstance.create = tagName => {

package/package.json

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

package/src/shared.ts

@@ -59,6 +59,13 @@ export const loadScript = (): Promise<StripeConnectWrapper | null> => {
   }
 
   stripePromise = new Promise((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."
+      );
+      return;
+    }
+
     if ((window as any).StripeConnect) {
       console.warn(EXISTING_SCRIPT_MESSAGE);
     }

package/types/shared.d.ts

@@ -2,116 +2,148 @@ export declare type LoadConnect = () => Promise<StripeConnectWrapper>;
 
 export declare type OverlayOption = "dialog" | "drawer";
 
-export declare type UIConfigOptions = {
-  overlay?: OverlayOption;
-  overlayZIndex?: number;
+/**
+ * Appearance options for the Connect instance.
+ */
+export declare type AppearanceOptions = {
+  overlays?: OverlayOption;
+  variables?: AppearanceVariables;
 };
 
-export declare type AppearanceOptions = {
+export declare type AppearanceVariables = {
   colorPrimary?: string;
   // Primary Button
-  colorPrimaryButtonBorder?: string;
-  colorPrimaryButtonBackground?: string;
-  colorPrimaryButtonText?: string;
+  buttonPrimaryColorBorder?: string;
+  buttonPrimaryColorBackground?: string;
+  buttonPrimaryColorText?: string;
   // Secondary Button
-  colorSecondaryButtonBorder?: string;
-  colorSecondaryButtonBackground?: string;
-  colorSecondaryButtonText?: string;
+  buttonSecondaryColorBorder?: string;
+  buttonSecondaryColorBackground?: string;
+  buttonSecondaryColorText?: string;
   // Link
-  colorPrimaryLinkText?: string;
-  colorSecondaryLinkText?: string;
+  actionPrimaryColorText?: string;
+  actionSecondaryColorText?: string;
   // Border
   colorBorder?: string;
   // Form
-  colorFormHighlightBorder?: string;
-  colorFormAccent?: string;
+  formHighlightColorBorder?: string;
+  formAccentColor?: string;
   // Text
   colorText?: string;
   colorSecondaryText?: string;
   // Background
   colorBackground?: string;
-  colorOffsetBackground?: string;
-  colorFormBackground?: string;
+  offsetBackgroundColor?: string;
+  formBackgroundColor?: string;
 
   // Feedback Colors
   colorDanger?: string;
 
   // Neutral Badge Colors
-  badgeNeutralBorderColor?: string;
-  badgeNeutralBackgroundColor?: string;
-  badgeNeutralTextColor?: string;
+  badgeNeutralColorBorder?: string;
+  badgeNeutralColorBackground?: string;
+  badgeNeutralColorText?: string;
 
   // Success Badge Colors
-  badgeSuccessBorderColor?: string;
-  badgeSuccessBackgroundColor?: string;
-  badgeSuccessTextColor?: string;
+  badgeSuccessColorBorder?: string;
+  badgeSuccessColorBackground?: string;
+  badgeSuccessColorText?: string;
 
   // Warning Badge Colors
-  badgeWarningBorderColor?: string;
-  badgeWarningBackgroundColor?: string;
-  badgeWarningTextColor?: string;
+  badgeWarningColorBorder?: string;
+  badgeWarningColorBackground?: string;
+  badgeWarningColorText?: string;
 
   // Danger Badge Colors
-  badgeDangerBorderColor?: string;
-  badgeDangerBackgroundColor?: string;
-  badgeDangerTextColor?: string;
+  badgeDangerColorBorder?: string;
+  badgeDangerColorBackground?: string;
+  badgeDangerColorText?: string;
 
   // Border Sizing
   borderRadius?: string;
-  borderRadiusButton?: string;
-  borderRadiusForm?: string;
-  borderRadiusBadge?: string;
+  buttonBorderRadius?: string;
+  formBorderRadius?: string;
+  badgeBorderRadius?: string;
+  overlayBorderRadius?: string;
+
+  // Overlay
+  overlayZIndex?: number;
+
+  // Font Sizing
+  fontSizeBase?: string;
+
+  // Spacing
+  spacingUnit?: string;
 
   // Body Typography
-  bodyLargeFontSize?: string;
-  bodyLargeFontWeight?: string;
-  bodyMediumFontSize?: string;
-  bodyMediumFontWeight?: string;
-  bodySmallFontSize?: string;
-  bodySmallFontWeight?: string;
+  bodyLgFontSize?: string;
+  bodyLgFontWeight?: string;
+  bodyMdFontSize?: string;
+  bodyMdFontWeight?: string;
+  bodySmFontSize?: string;
+  bodySmFontWeight?: string;
 
   // Label Typography
-  labelLargeFontSize?: string;
-  labelLargeFontWeight?: string;
-  labelLargeTextTransform?: string;
-  labelMediumFontSize?: string;
-  labelMediumFontWeight?: string;
-  labelMediumTextTransform?: string;
-  labelSmallFontSize?: string;
-  labelSmallFontWeight?: string;
-  labelSmallTextTransform?: string;
+  labelLgFontSize?: string;
+  labelLgFontWeight?: string;
+  labelLgTextTransform?: string;
+  labelMdFontSize?: string;
+  labelMdFontWeight?: string;
+  labelMdTextTransform?: string;
+  labelSmFontSize?: string;
+  labelSmFontWeight?: string;
+  labelSmTextTransform?: string;
 
   // Heading Typography
-  headingXLargeFontSize?: string;
-  headingXLargeFontWeight?: string;
-  headingXLargeTextTransform?: string;
-  headingLargeFontSize?: string;
-  headingLargeFontWeight?: string;
-  headingLargeTextTransform?: string;
-  headingMediumFontSize?: string;
-  headingMediumFontWeight?: string;
-  headingMediumTextTransform?: string;
-  headingSmallFontSize?: string;
-  headingSmallFontWeight?: string;
-  headingSmallTextTransform?: string;
-  headingXSmallFontSize?: string;
-  headingXSmallFontWeight?: string;
-  headingXSmallTextTransform?: string;
-
-  // Spacing
-  spacingScale?: string;
+  headingXlFontSize?: string;
+  headingXlFontWeight?: string;
+  headingXlTextTransform?: string;
+  headingLgFontSize?: string;
+  headingLgFontWeight?: string;
+  headingLgTextTransform?: string;
+  headingMdFontSize?: string;
+  headingMdFontWeight?: string;
+  headingMdTextTransform?: string;
+  headingSmFontSize?: string;
+  headingSmFontWeight?: string;
+  headingSmTextTransform?: string;
+  headingXsFontSize?: string;
+  headingXsFontWeight?: string;
+  headingXsTextTransform?: string;
 };
 
 export type IStripeConnectUpdateParams = {
   appearance?: AppearanceOptions;
 };
 
+/**
+ * Initialization parameters for Connect JS. See https://stripe.com/docs/connect/get-started-connect-embedded-components#configuring-connect-js for more details.
+ */
 export interface IStripeConnectInitParams {
+  /**
+   * The publishable key for the connected account.
+   */
   publishableKey: string;
+
+  /**
+   * The client secret for the connected account.
+   */
   clientSecret: string;
+
+  /**
+   * Appearance options for the Connect instance.
+   * @see https://stripe.com/docs/connect/customize-connect-embedded-components
+   */
   appearance?: AppearanceOptions;
-  uiConfig?: UIConfigOptions;
+
+  /**
+   * 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;
 }
 
@@ -145,6 +177,9 @@ export interface StripeConnectInstance {
   logout: () => Promise<void>;
 }
 
+/**
+ * Tagnames to be used with the `create` method of the Connect instance.
+ */
 export type ConnectElementTagName =
   | "payments"
   | "payouts"