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

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,8 @@
 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];
 };
@@ -109,7 +100,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.0"
           }
         })
       }));

package/dist/connect.js

@@ -3,19 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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];
 };
@@ -113,7 +104,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.0"
           }
         })
       }));

package/dist/pure.esm.js

@@ -1,17 +1,8 @@
 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];
 };
@@ -109,7 +100,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.0"
           }
         })
       }));

package/dist/pure.js

@@ -3,19 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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];
 };
@@ -113,7 +104,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.0"
           }
         })
       }));

package/dist/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/package.json

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

package/src/shared.ts

@@ -9,32 +9,13 @@ 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 +28,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>(
@@ -139,7 +120,7 @@ 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);
       stripeConnectInstance.then(instance => {

package/types/shared.d.ts

@@ -209,14 +209,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 +289,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.
    */
@@ -384,10 +364,6 @@ type ConnectHTMLElementRecordBase = {
 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: (
@@ -397,7 +373,7 @@ interface ConnectHTMLElementRecord
     setSkipTermsOfServiceCollection: (
       skipTermsOfServiceCollection: boolean | undefined
     ) => void;
-    setOnExit: (listener: (() => void) | undefined) => void;
+    setOnExit: (listener: () => void) => void;
   };
 }
 
@@ -427,14 +403,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";