@stripe/connect-js 2.0.1-beta.4 → 2.0.1-beta.6

package/dist/connect.esm.js

@@ -2,7 +2,8 @@ const componentNameMapping = {
   payments: "stripe-connect-payments",
   payouts: "stripe-connect-payouts",
   "payment-details": "stripe-connect-payment-details",
-  "account-onboarding": "stripe-connect-account-onboarding"
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings"
 };
 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";
@@ -78,7 +79,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.1-beta.4"
+            sdkVersion: "2.0.1-beta.5"
           }
         })
       }));

package/dist/connect.js

@@ -6,7 +6,8 @@ const componentNameMapping = {
   payments: "stripe-connect-payments",
   payouts: "stripe-connect-payouts",
   "payment-details": "stripe-connect-payment-details",
-  "account-onboarding": "stripe-connect-account-onboarding"
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings"
 };
 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";
@@ -82,7 +83,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.1-beta.4"
+            sdkVersion: "2.0.1-beta.5"
           }
         })
       }));

package/dist/pure.esm.js

@@ -2,7 +2,8 @@ const componentNameMapping = {
   payments: "stripe-connect-payments",
   payouts: "stripe-connect-payouts",
   "payment-details": "stripe-connect-payment-details",
-  "account-onboarding": "stripe-connect-account-onboarding"
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings"
 };
 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";
@@ -78,7 +79,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.1-beta.4"
+            sdkVersion: "2.0.1-beta.5"
           }
         })
       }));

package/dist/pure.js

@@ -6,7 +6,8 @@ const componentNameMapping = {
   payments: "stripe-connect-payments",
   payouts: "stripe-connect-payouts",
   "payment-details": "stripe-connect-payment-details",
-  "account-onboarding": "stripe-connect-account-onboarding"
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings"
 };
 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";
@@ -82,7 +83,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "2.0.1-beta.4"
+            sdkVersion: "2.0.1-beta.5"
           }
         })
       }));

package/package.json

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

package/src/shared.ts

@@ -10,7 +10,8 @@ type ConnectElementHTMLName =
   | "stripe-connect-payments"
   | "stripe-connect-payouts"
   | "stripe-connect-payment-details"
-  | "stripe-connect-account-onboarding";
+  | "stripe-connect-account-onboarding"
+  | "stripe-connect-payment-method-settings";
 
 const componentNameMapping: Record<
   ConnectElementTagName,
@@ -19,7 +20,8 @@ const componentNameMapping: Record<
   payments: "stripe-connect-payments",
   payouts: "stripe-connect-payouts",
   "payment-details": "stripe-connect-payment-details",
-  "account-onboarding": "stripe-connect-account-onboarding"
+  "account-onboarding": "stripe-connect-account-onboarding",
+  "payment-method-settings": "stripe-connect-payment-method-settings"
 };
 
 const EXISTING_SCRIPT_MESSAGE =

package/types/shared.d.ts

@@ -6,114 +6,342 @@ export declare type OverlayOption = "dialog" | "drawer";
  * Appearance options for the Connect instance.
  */
 export declare type AppearanceOptions = {
+  /**
+   * The type of overlay used throughout the Connect.js design system. Set this to be either a Dialog or Drawer.
+   */
   overlays?: OverlayOption;
   variables?: AppearanceVariables;
 };
 
 export declare type AppearanceVariables = {
+  // Commonly used
+
+  /**
+   * The font family value used throughout embedded components. If an embedded component inherits a font-family value from an element on your site in which it’s placed, this setting overrides that inheritance.
+   */
+  fontFamily?: string;
+
+  /**
+   * The baseline font size set on the embedded component root. This scales the value of other font size variables. This supports pixel values only.
+   */
+  fontSizeBase?: string;
+
+  /**
+   * The base spacing unit that derives all spacing values. Increase or decrease this value to make your layout more or less spacious. This supports pixel values only.
+   */
+  spacingUnit?: string;
+
+  /**
+   * The general border radius used in embedded components. This sets the default border radius for all components. This supports pixel values only.
+   */
+  borderRadius?: string;
+
+  /**
+   * The primary color used throughout embedded components. Set this to your primary brand color. This accepts hex values or RGB/HSL strings.
+   */
   colorPrimary?: string;
+
+  /**
+   * The background color for embedded components, including overlays, tooltips, and popovers. This accepts hex values or RGB/HSL strings.
+   */
+  colorBackground?: string;
+
+  /**
+   * The color used for regular text. This accepts hex values or RGB/HSL strings.
+   */
+  colorText?: string;
+
+  /**
+   * The color used to indicate errors or destructive actions. This accepts hex values or RGB/HSL strings.
+   */
+  colorDanger?: string;
+
+  // Less commonly used
+
   // Primary Button
-  buttonPrimaryColorBorder?: string;
+  /**
+   * The color used as a background for primary buttons. This accepts hex values or RGB/HSL strings.
+   */
   buttonPrimaryColorBackground?: string;
+  /**
+   * The border color used for primary buttons. This accepts hex values or RGB/HSL strings.
+   */
+  buttonPrimaryColorBorder?: string;
+  /**
+   * The text color used for primary buttons. This accepts hex values or RGB/HSL strings.
+   */
   buttonPrimaryColorText?: string;
+
   // Secondary Button
-  buttonSecondaryColorBorder?: string;
+  /**
+   * The color used as a background for secondary buttons. This accepts hex values or RGB/HSL strings.
+   */
   buttonSecondaryColorBackground?: string;
+  /**
+   * The color used as a border for secondary buttons. This accepts hex values or RGB/HSL strings.
+   */
+  buttonSecondaryColorBorder?: string;
+  /**
+   * The text color used for secondary buttons. This accepts hex values or RGB/HSL strings.
+   */
   buttonSecondaryColorText?: string;
-  // Link
+
+  /**
+   * The color used for secondary text. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  colorSecondaryText?: string;
+  /**
+   * The color used for primary actions and links. This accepts hex values or RGB/HSL strings.
+   */
   actionPrimaryColorText?: string;
+  /**
+   * The color used for secondary actions and links. This accepts hex values or RGB/HSL strings.
+   */
   actionSecondaryColorText?: string;
-  // Border
-  colorBorder?: string;
-  // Form
-  formHighlightColorBorder?: string;
-  formAccentColor?: string;
-  // Text
-  colorText?: string;
-  colorSecondaryText?: string;
-  // Background
-  colorBackground?: string;
-  offsetBackgroundColor?: string;
-  formBackgroundColor?: string;
-
-  // Feedback Colors
-  colorDanger?: string;
 
   // Neutral Badge Colors
-  badgeNeutralColorBorder?: string;
+  /**
+   * The background color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/HSL strings.
+   */
   badgeNeutralColorBackground?: string;
+  /**
+   * The text color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/HSL strings.
+   */
   badgeNeutralColorText?: string;
+  /**
+   * The border color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  badgeNeutralColorBorder?: string;
 
   // Success Badge Colors
-  badgeSuccessColorBorder?: string;
+  /**
+   * The background color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/HSL strings.
+   */
   badgeSuccessColorBackground?: string;
+  /**
+   * The text color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/HSL strings.
+   */
   badgeSuccessColorText?: string;
+  /**
+   * The border color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  badgeSuccessColorBorder?: string;
 
   // Warning Badge Colors
-  badgeWarningColorBorder?: string;
+  /**
+   * The background color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/HSL strings.
+   */
   badgeWarningColorBackground?: string;
+  /**
+   * The text color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/HSL strings.
+   */
   badgeWarningColorText?: string;
+  /**
+   * The border color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  badgeWarningColorBorder?: string;
 
   // Danger Badge Colors
-  badgeDangerColorBorder?: string;
+  /**
+   * The background color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/HSL strings.
+   */
   badgeDangerColorBackground?: string;
+  /**
+   * The text color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/HSL strings.
+   */
   badgeDangerColorText?: string;
+  /**
+   * The border color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  badgeDangerColorBorder?: string;
+
+  // Background
+  /**
+   * The background color used when highlighting information, like the selected row on a table or particular piece of UI. This accepts hex values or RGB/HSL strings.
+   */
+  offsetBackgroundColor?: string;
+  /**
+   * The background color used for form items. This accepts hex values or RGB/HSL strings.
+   */
+  formBackgroundColor?: string;
+
+  /**
+   * The color used for borders throughout the component. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  colorBorder?: string;
+
+  // Form
+  /**
+   * The color used to highlight form items when focused. This accepts hex values or RGB/RGBA/HSL strings.
+   */
+  formHighlightColorBorder?: string;
+  /**
+   * The color used for to fill in form items like checkboxes, radio buttons and switches. This accepts hex values or RGB/HSL strings.
+   */
+  formAccentColor?: string;
 
   // Border Sizing
-  borderRadius?: string;
+  /**
+   * The border radius used for buttons. This supports pixel values only.
+   */
   buttonBorderRadius?: string;
+  /**
+   * The border radius used for form elements. This supports pixel values only.
+   */
   formBorderRadius?: string;
+  /**
+   * The border radius used for badges. This supports pixel values only.
+   */
   badgeBorderRadius?: string;
+  /**
+   * The border radius used for overlays. This supports pixel values only.
+   */
   overlayBorderRadius?: string;
 
-  // Overlay
-  overlayZIndex?: number;
-
   // Font Sizing
-  fontSizeBase?: string;
 
-  // Spacing
-  spacingUnit?: string;
+  // Overlay
+  /**
+   * A z-index to use for the overlay throughout embedded components. Set this number to control the z-order of the overlay.
+   */
+  overlayZIndex?: number;
 
   // Body Typography
+  /**
+   * The font size for the large body typography. Body typography variables accept a valid font size value.
+   */
   bodyLgFontSize?: string;
+  /**
+   * The font weight for the large body typography. Body typography variables accept a valid font weight value.
+   */
   bodyLgFontWeight?: string;
+  /**
+   * The font size for the medium body typography. Body typography variables accept a valid font size value.
+   */
   bodyMdFontSize?: string;
+  /**
+   * The font weight for the medium body typography. Body typography variables accept a valid font weight value.
+   */
   bodyMdFontWeight?: string;
+  /**
+   * The font size for the small body typography. Body typography variables accept a valid font size value.
+   */
   bodySmFontSize?: string;
+  /**
+   * The font weight for the small body typography. Body typography variables accept a valid font weight value.
+   */
   bodySmFontWeight?: string;
 
-  // Label Typography
-  labelLgFontSize?: string;
-  labelLgFontWeight?: string;
-  labelLgTextTransform?: string;
-  labelMdFontSize?: string;
-  labelMdFontWeight?: string;
-  labelMdTextTransform?: string;
-  labelSmFontSize?: string;
-  labelSmFontWeight?: string;
-  labelSmTextTransform?: string;
-
   // Heading Typography
+  /**
+   * The font size for the extra large heading typography. Heading typography variables accept a valid font size value.
+   */
   headingXlFontSize?: string;
+  /**
+   * The font weight for the extra large heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingXlFontWeight?: string;
+  /**
+   * The text transform for the extra large heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingXlTextTransform?: string;
+  /**
+   * The font size for the large heading typography. Heading typography variables accept a valid font size value.
+   */
   headingLgFontSize?: string;
+  /**
+   * The font weight for the large heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingLgFontWeight?: string;
+  /**
+   * The text transform for the large heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingLgTextTransform?: string;
+  /**
+   * The font size for the medium heading typography. Heading typography variables accept a valid font size value.
+   */
   headingMdFontSize?: string;
+  /**
+   * The font weight for the medium heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingMdFontWeight?: string;
+  /**
+   * The text transform for the medium heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingMdTextTransform?: string;
+  /**
+   * The font size for the small heading typography. Heading typography variables accept a valid font size value.
+   */
   headingSmFontSize?: string;
+  /**
+   * The font weight for the small heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingSmFontWeight?: string;
+  /**
+   * The text transform for the small heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingSmTextTransform?: string;
+  /**
+   * The font size for the extra small heading typography. Heading typography variables accept a valid font size value.
+   */
   headingXsFontSize?: string;
+  /**
+   * The font weight for the extra small heading typography. Heading typography variables accept a valid font weight value.
+   */
   headingXsFontWeight?: string;
+  /**
+   * The text transform for the extra small heading typography. Heading typography variables accept a valid text transform value.
+   */
   headingXsTextTransform?: string;
+
+  // Label Typography
+  /**
+   * The font size for the large label typography. Label typography variables accept a valid font size value.
+   */
+  labelLgFontSize?: string;
+  /**
+   * The font weight for the large label typography. Label typography variables accept a valid font weight value.
+   */
+  labelLgFontWeight?: string;
+  /**
+   * The text transform for the large label typography. Label typography variables accept a valid text transform value.
+   */
+  labelLgTextTransform?: string;
+  /**
+   * The font size for the medium label typography. Label typography variables accept a valid font size value.
+   */
+  labelMdFontSize?: string;
+  /**
+   * The font weight for the medium label typography. Label typography variables accept a valid font weight value.
+   */
+  labelMdFontWeight?: string;
+  /**
+   * The text transform for the medium label typography. Label typography variables accept a valid text transform value.
+   */
+  labelMdTextTransform?: string;
+  /**
+   * The font size for the small label typography. Label typography variables accept a valid font size value.
+   */
+  labelSmFontSize?: string;
+  /**
+   * The font weight for the small label typography. Label typography variables accept a valid font weight value.
+   */
+  labelSmFontWeight?: string;
+  /**
+   * The text transform for the small label typography. Label typography variables accept a valid text transform value.
+   */
+  labelSmTextTransform?: string;
 };
 
 export type IStripeConnectUpdateParams = {
+  /**
+   * Appearance options for the Connect instance.
+   */
   appearance?: AppearanceOptions;
+
+  /**
+   * The locale to use for the Connect instance.
+   */
   locale?: string;
 };
 
@@ -185,7 +413,8 @@ export type ConnectElementTagName =
   | "payments"
   | "payouts"
   | "payment-details"
-  | "account-onboarding";
+  | "account-onboarding"
+  | "payment-method-settings";
 
 export declare const findScript: () => HTMLScriptElement | null;