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

package/dist/connect.esm.js

@@ -1,8 +1,41 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ConnectElementCustomMethodConfig = {
+  "payment-details": {
+    setPayment: payment => {},
+    setOnClose: listener => {}
+  },
+  "account-onboarding": {
+    setFullTermsOfServiceUrl: termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
+    setOnExit: listener => {}
+  },
+  "issuing-card": {
+    setDefaultCard: defaultCard => {},
+    setCardArtFileLink: cardArtFileLink => {},
+    setCardSwitching: cardSwitching => {}
+  },
+  "issuing-cards-list": {
+    setCardArtFileLink: cardArtFileLink => {}
+  }
+};
+
 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,6 +92,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 {
@@ -68,6 +104,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);
       });
@@ -100,7 +146,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.0.0"
+            sdkVersion: "3.1.0-beta.1"
           }
         })
       }));

package/dist/connect.js

@@ -2,11 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ConnectElementCustomMethodConfig = {
+  "payment-details": {
+    setPayment: payment => {},
+    setOnClose: listener => {}
+  },
+  "account-onboarding": {
+    setFullTermsOfServiceUrl: termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
+    setOnExit: listener => {}
+  },
+  "issuing-card": {
+    setDefaultCard: defaultCard => {},
+    setCardArtFileLink: cardArtFileLink => {},
+    setCardSwitching: cardSwitching => {}
+  },
+  "issuing-cards-list": {
+    setCardArtFileLink: cardArtFileLink => {}
+  }
+};
+
 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,6 +96,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 {
@@ -72,6 +108,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);
       });
@@ -104,7 +150,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.0.0"
+            sdkVersion: "3.1.0-beta.1"
           }
         })
       }));

package/dist/pure.esm.js

@@ -1,8 +1,41 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ConnectElementCustomMethodConfig = {
+  "payment-details": {
+    setPayment: payment => {},
+    setOnClose: listener => {}
+  },
+  "account-onboarding": {
+    setFullTermsOfServiceUrl: termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
+    setOnExit: listener => {}
+  },
+  "issuing-card": {
+    setDefaultCard: defaultCard => {},
+    setCardArtFileLink: cardArtFileLink => {},
+    setCardSwitching: cardSwitching => {}
+  },
+  "issuing-cards-list": {
+    setCardArtFileLink: cardArtFileLink => {}
+  }
+};
+
 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,6 +92,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 {
@@ -68,6 +104,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);
       });
@@ -100,7 +146,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.0.0"
+            sdkVersion: "3.1.0-beta.1"
           }
         })
       }));

package/dist/pure.js

@@ -2,11 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ConnectElementCustomMethodConfig = {
+  "payment-details": {
+    setPayment: payment => {},
+    setOnClose: listener => {}
+  },
+  "account-onboarding": {
+    setFullTermsOfServiceUrl: termOfServiceUrl => {},
+    setRecipientTermsOfServiceUrl: recipientTermsOfServiceUrl => {},
+    setPrivacyPolicyUrl: privacyPolicyUrl => {},
+    setSkipTermsOfServiceCollection: skipTermsOfServiceCollection => {},
+    setOnExit: listener => {}
+  },
+  "issuing-card": {
+    setDefaultCard: defaultCard => {},
+    setCardArtFileLink: cardArtFileLink => {},
+    setCardSwitching: cardSwitching => {}
+  },
+  "issuing-cards-list": {
+    setCardArtFileLink: cardArtFileLink => {}
+  }
+};
+
 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,6 +96,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 {
@@ -72,6 +108,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);
       });
@@ -104,7 +150,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.0.0"
+            sdkVersion: "3.1.0-beta.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;
-type ConnectElementHTMLName = "stripe-connect-account-onboarding";
+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>;

package/dist/types/config.d.ts

@@ -0,0 +1,21 @@
+export declare const ConnectElementCustomMethodConfig: {
+    "payment-details": {
+        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;
+    };
+    "issuing-card": {
+        setDefaultCard: (defaultCard: string | undefined) => void;
+        setCardArtFileLink: (cardArtFileLink: string | undefined) => void;
+        setCardSwitching: (cardSwitching: boolean | undefined) => void;
+    };
+    "issuing-cards-list": {
+        setCardArtFileLink: (cardArtFileLink: string | undefined) => void;
+    };
+};

package/package.json

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

package/src/shared.ts

@@ -4,18 +4,38 @@ import {
   ConnectElementTagName,
   ConnectHTMLElementRecord
 } from "../types";
+import { ConnectElementCustomMethodConfig } from "../types/config";
 
 export type LoadConnectAndInitialize = (
   initParams: IStripeConnectInitParams
 ) => StripeConnectInstance;
 
-type ConnectElementHTMLName = "stripe-connect-account-onboarding";
+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 & {
@@ -28,7 +48,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/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>(
@@ -108,6 +128,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
@@ -123,6 +149,18 @@ export const initStripeConnect = (
         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,39 @@
+import { ConnectElementTagName } from "./shared.d";
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+export const ConnectElementCustomMethodConfig = {
+  "payment-details": {
+    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 => {}
+  },
+  "issuing-card": {
+    setDefaultCard: (defaultCard: string | undefined): void => {},
+    setCardArtFileLink: (cardArtFileLink: string | undefined): void => {},
+    setCardSwitching: (cardSwitching: boolean | undefined): void => {}
+  },
+  "issuing-cards-list": {
+    setCardArtFileLink: (cardArtFileLink: string | 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,6 +211,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.
    */
@@ -289,6 +299,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.
    */
@@ -354,28 +376,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 {
-  "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) => void;
-  };
-}
+type ConnectHTMLElementRecord = {
+  [K in keyof ConnectElementCustomMethods]: HTMLElement &
+    ConnectElementCustomMethods[K];
+} & {
+  [key: string]: HTMLElement;
+};
 
 export interface StripeConnectInstance {
   /**
@@ -403,4 +411,14 @@ export interface StripeConnectInstance {
 /**
  * Tagnames to be used with the `create` method of the Connect instance.
  */
-export type ConnectElementTagName = "account-onboarding";
+export type ConnectElementTagName =
+  | "payments"
+  | "payouts"
+  | "payment-details"
+  | "account-onboarding"
+  | "payment-method-settings"
+  | "account-management"
+  | "notification-banner"
+  | "instant-payouts"
+  | "issuing-card"
+  | "issuing-cards-list";