@stripe/connect-js 3.4.6 → 3.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +80 -0
  2. package/dist/components/componentsAndSetters.d.ts +4 -1
  3. package/dist/connect.esm.js +6 -3
  4. package/dist/connect.js +6 -3
  5. package/dist/init.d.ts +1 -1
  6. package/dist/pure.esm.js +6 -3
  7. package/dist/pure.js +6 -3
  8. package/package.json +1 -1
  9. package/src/components/componentsAndSetters.ts +5 -0
package/README.md ADDED
@@ -0,0 +1,80 @@
1
+ # Connect.js ES Module
2
+
3
+ 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.
4
+ This NPM package contains initialization logic for Connect embedded components along with related types.
5
+
6
+ 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.
7
+
8
+ 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.
9
+
10
+ Note: Some Connect embedded components are in preview. These can be [viewed on our doc site](https://docs.stripe.com/connect/supported-embedded-components), where you can also request preview access.
11
+
12
+ ## Installation
13
+
14
+ Use `npm` to install the Connect.js module:
15
+
16
+ ```sh
17
+ npm install @stripe/connect-js
18
+ ```
19
+
20
+ ## Documentation
21
+
22
+ - [Connect embedded components](https://stripe.com/docs/connect/get-started-connect-embedded-components)
23
+ - [Quickstart guide](https://stripe.com/docs/connect/connect-embedded-components/quickstart)
24
+
25
+ ## Usage
26
+
27
+ ### `loadConnectAndInitialize`
28
+
29
+ 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.
30
+
31
+ ```js
32
+ import { loadConnectAndInitialize } from "@stripe/connect-js";
33
+ const fetchClientSecret = async () => {
34
+ // Fetch the AccountSession client secret by making an API call to your service
35
+ };
36
+
37
+ const instance = loadConnectAndInitialize({
38
+ publishableKey: "{{pk test123}}",
39
+ fetchClientSecret: fetchClientSecret,
40
+ });
41
+ ```
42
+
43
+ We’ve placed a random API key in this example. Replace it with your
44
+ [actual publishable API keys](https://dashboard.stripe.com/account/apikeys) to
45
+ test this code through your Connect account.
46
+
47
+ If you have deployed a
48
+ [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/Security/CSP),
49
+ make sure to
50
+ [include Connect.js in your directives](https://stripe.com/docs/connect/get-started-connect-embedded-components?platform=web#csp-and-http-header-requirements).
51
+
52
+ ### Import as a side effect
53
+
54
+ Import `@stripe/connect-js` as a side effect in code that will be included
55
+ throughout your site (e.g. your root module). This will make sure the Connect.js
56
+ script tag is inserted immediately upon page load.
57
+
58
+ ```js
59
+ import "@stripe/connect-js";
60
+ ```
61
+
62
+ ### Importing `loadConnectAndInitialize` without side effects
63
+
64
+ If you would like to use `loadConnectAndInitialize` in your application, but defer loading the
65
+ Connect.js script until `loadConnectAndInitialize` is first called, use the alternative
66
+ `@stripe/connect-js/pure` import path:
67
+
68
+ ```js
69
+ import { loadConnectAndInitialize } from "@stripe/connect-js/pure";
70
+
71
+ // Connect.js will not be loaded until `loadConnect` is called
72
+ const instance = loadConnectAndInitialize({
73
+ publishableKey: "{{pk test123}}",
74
+ fetchClientSecret: fetchClientSecret,
75
+ });
76
+ ```
77
+
78
+ ## Preview/GA
79
+
80
+ To work with the [preview](https://docs.stripe.com/connect/supported-embedded-components) version of embedded components, use the [preview](/preview) folder. For the stable GA version, use [/ga](/ga).
package/dist/components/componentsAndSetters.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const connectElementTagNames: readonly ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "balance-report", "payout-reconciliation-report"];
1
+ export declare const connectElementTagNames: readonly ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "terminal-hardware-orders", "terminal-hardware-shop", "balance-report", "payout-reconciliation-report"];
2
2
  export type FetchEphemeralKeyFunction = (fetchParams: {
3
3
  issuingCard: string;
4
4
  nonce: string;
@@ -174,6 +174,9 @@ export declare const ConnectElementCustomMethodConfig: {
174
174
  setPayout: (_payout: string | undefined) => void;
175
175
  setOnClose: (_listener: (() => void) | undefined) => void;
176
176
  };
177
+ "terminal-hardware-shop": {
178
+ setOnCheckoutFinished: (_listener: (() => void) | undefined) => void;
179
+ };
177
180
  "payout-reconciliation-report": {
178
181
  setOnReportAvailabilityLoaded: (_listener: (({ isReportAvailable }: {
179
182
  isReportAvailable: boolean;
package/dist/connect.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable @typescript-eslint/no-unused-vars */
2
2
  // Source of truth for the entire list of components. When you add a new component, it should be added here.
3
- const connectElementTagNames = ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "balance-report", "payout-reconciliation-report"];
3
+ const connectElementTagNames = ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "terminal-hardware-orders", "terminal-hardware-shop", "balance-report", "payout-reconciliation-report"];
4
4
  const ConnectElementCommonMethodConfig = {
5
5
  setOnLoadError: _listener => {},
6
6
  setOnLoaderStart: _listener => {}
@@ -69,6 +69,9 @@ const ConnectElementCustomMethodConfig = {
69
69
  setPayout: _payout => {},
70
70
  setOnClose: _listener => {}
71
71
  },
72
+ "terminal-hardware-shop": {
73
+ setOnCheckoutFinished: _listener => {}
74
+ },
72
75
  "payout-reconciliation-report": {
73
76
  setOnReportAvailabilityLoaded: _listener => {}
74
77
  }
@@ -174,7 +177,7 @@ const initStripeConnect = (stripePromise, initParams) => {
174
177
  element[method] = function (value) {
175
178
  stripeConnectInstance.then(() => {
176
179
  if (!this[`${method}InternalOnly`]) {
177
- throw new Error(`Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: 3.4.6`);
180
+ throw new Error(`Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: 3.4.7`);
178
181
  }
179
182
  this[`${method}InternalOnly`](value);
180
183
  });
@@ -228,7 +231,7 @@ const createWrapper = stripeConnect => {
228
231
  sdk: true,
229
232
  sdkOptions: {
230
233
  // This will be replaced by the npm package version when bundling
231
- sdkVersion: "3.4.6"
234
+ sdkVersion: "3.4.7"
232
235
  }
233
236
  })
234
237
  }));
package/dist/connect.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  /* eslint-disable @typescript-eslint/no-unused-vars */
6
6
  // Source of truth for the entire list of components. When you add a new component, it should be added here.
7
- const connectElementTagNames = ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "balance-report", "payout-reconciliation-report"];
7
+ const connectElementTagNames = ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "terminal-hardware-orders", "terminal-hardware-shop", "balance-report", "payout-reconciliation-report"];
8
8
  const ConnectElementCommonMethodConfig = {
9
9
  setOnLoadError: _listener => {},
10
10
  setOnLoaderStart: _listener => {}
@@ -73,6 +73,9 @@ const ConnectElementCustomMethodConfig = {
73
73
  setPayout: _payout => {},
74
74
  setOnClose: _listener => {}
75
75
  },
76
+ "terminal-hardware-shop": {
77
+ setOnCheckoutFinished: _listener => {}
78
+ },
76
79
  "payout-reconciliation-report": {
77
80
  setOnReportAvailabilityLoaded: _listener => {}
78
81
  }
@@ -178,7 +181,7 @@ const initStripeConnect = (stripePromise, initParams) => {
178
181
  element[method] = function (value) {
179
182
  stripeConnectInstance.then(() => {
180
183
  if (!this[`${method}InternalOnly`]) {
181
- throw new Error(`Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: 3.4.6`);
184
+ throw new Error(`Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: 3.4.7`);
182
185
  }
183
186
  this[`${method}InternalOnly`](value);
184
187
  });
@@ -232,7 +235,7 @@ const createWrapper = stripeConnect => {
232
235
  sdk: true,
233
236
  sdkOptions: {
234
237
  // This will be replaced by the npm package version when bundling
235
- sdkVersion: "3.4.6"
238
+ sdkVersion: "3.4.7"
236
239
  }
237
240
  })
238
241
  }));
package/dist/init.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { ConnectElementTagName, IStripeConnectInitParams, StripeConnectInstance, StripeConnectWrapper } from "./exportedTypes/shared";
2
2
  export type ConnectElementHTMLName = `stripe-connect-${ConnectElementTagName}`;
3
- export declare const componentNameMapping: Record<"account-onboarding" | "disputes-list" | "payments" | "payment-details" | "payment-disputes" | "payouts" | "payouts-list" | "payout-details" | "balances" | "account-management" | "notification-banner" | "instant-payouts-promotion" | "issuing-card" | "issuing-cards-list" | "financial-account" | "financial-account-transactions" | "documents" | "tax-registrations" | "tax-settings" | "balance-report" | "payout-reconciliation-report", "stripe-connect-account-onboarding" | "stripe-connect-disputes-list" | "stripe-connect-payments" | "stripe-connect-payment-details" | "stripe-connect-payment-disputes" | "stripe-connect-payouts" | "stripe-connect-payouts-list" | "stripe-connect-payout-details" | "stripe-connect-balances" | "stripe-connect-account-management" | "stripe-connect-notification-banner" | "stripe-connect-instant-payouts-promotion" | "stripe-connect-issuing-card" | "stripe-connect-issuing-cards-list" | "stripe-connect-financial-account" | "stripe-connect-financial-account-transactions" | "stripe-connect-documents" | "stripe-connect-tax-registrations" | "stripe-connect-tax-settings" | "stripe-connect-balance-report" | "stripe-connect-payout-reconciliation-report">;
3
+ export declare const componentNameMapping: Record<"account-onboarding" | "disputes-list" | "payments" | "payment-details" | "payment-disputes" | "payouts" | "payouts-list" | "payout-details" | "balances" | "account-management" | "notification-banner" | "instant-payouts-promotion" | "issuing-card" | "issuing-cards-list" | "financial-account" | "financial-account-transactions" | "documents" | "tax-registrations" | "tax-settings" | "terminal-hardware-orders" | "terminal-hardware-shop" | "balance-report" | "payout-reconciliation-report", "stripe-connect-account-onboarding" | "stripe-connect-disputes-list" | "stripe-connect-payments" | "stripe-connect-payment-details" | "stripe-connect-payment-disputes" | "stripe-connect-payouts" | "stripe-connect-payouts-list" | "stripe-connect-payout-details" | "stripe-connect-balances" | "stripe-connect-account-management" | "stripe-connect-notification-banner" | "stripe-connect-instant-payouts-promotion" | "stripe-connect-issuing-card" | "stripe-connect-issuing-cards-list" | "stripe-connect-financial-account" | "stripe-connect-financial-account-transactions" | "stripe-connect-documents" | "stripe-connect-tax-registrations" | "stripe-connect-tax-settings" | "stripe-connect-terminal-hardware-orders" | "stripe-connect-terminal-hardware-shop" | "stripe-connect-balance-report" | "stripe-connect-payout-reconciliation-report">;
4
4
  type StripeConnectInstanceExtended = StripeConnectInstance & {
5
5
  debugInstance: () => Promise<StripeConnectInstance>;
6
6
  };
package/dist/pure.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable @typescript-eslint/no-unused-vars */
2
2
  // Source of truth for the entire list of components. When you add a new component, it should be added here.
3
- const connectElementTagNames = ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "balance-report", "payout-reconciliation-report"];
3
+ const connectElementTagNames = ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "terminal-hardware-orders", "terminal-hardware-shop", "balance-report", "payout-reconciliation-report"];
4
4
  const ConnectElementCommonMethodConfig = {
5
5
  setOnLoadError: _listener => {},
6
6
  setOnLoaderStart: _listener => {}
@@ -69,6 +69,9 @@ const ConnectElementCustomMethodConfig = {
69
69
  setPayout: _payout => {},
70
70
  setOnClose: _listener => {}
71
71
  },
72
+ "terminal-hardware-shop": {
73
+ setOnCheckoutFinished: _listener => {}
74
+ },
72
75
  "payout-reconciliation-report": {
73
76
  setOnReportAvailabilityLoaded: _listener => {}
74
77
  }
@@ -174,7 +177,7 @@ const initStripeConnect = (stripePromise, initParams) => {
174
177
  element[method] = function (value) {
175
178
  stripeConnectInstance.then(() => {
176
179
  if (!this[`${method}InternalOnly`]) {
177
- throw new Error(`Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: 3.4.6`);
180
+ throw new Error(`Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: 3.4.7`);
178
181
  }
179
182
  this[`${method}InternalOnly`](value);
180
183
  });
@@ -228,7 +231,7 @@ const createWrapper = stripeConnect => {
228
231
  sdk: true,
229
232
  sdkOptions: {
230
233
  // This will be replaced by the npm package version when bundling
231
- sdkVersion: "3.4.6"
234
+ sdkVersion: "3.4.7"
232
235
  }
233
236
  })
234
237
  }));
package/dist/pure.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  /* eslint-disable @typescript-eslint/no-unused-vars */
6
6
  // Source of truth for the entire list of components. When you add a new component, it should be added here.
7
- const connectElementTagNames = ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "balance-report", "payout-reconciliation-report"];
7
+ const connectElementTagNames = ["account-onboarding", "disputes-list", "payments", "payment-details", "payment-disputes", "payouts", "payouts-list", "payout-details", "balances", "account-management", "notification-banner", "instant-payouts-promotion", "issuing-card", "issuing-cards-list", "financial-account", "financial-account-transactions", "documents", "tax-registrations", "tax-settings", "terminal-hardware-orders", "terminal-hardware-shop", "balance-report", "payout-reconciliation-report"];
8
8
  const ConnectElementCommonMethodConfig = {
9
9
  setOnLoadError: _listener => {},
10
10
  setOnLoaderStart: _listener => {}
@@ -73,6 +73,9 @@ const ConnectElementCustomMethodConfig = {
73
73
  setPayout: _payout => {},
74
74
  setOnClose: _listener => {}
75
75
  },
76
+ "terminal-hardware-shop": {
77
+ setOnCheckoutFinished: _listener => {}
78
+ },
76
79
  "payout-reconciliation-report": {
77
80
  setOnReportAvailabilityLoaded: _listener => {}
78
81
  }
@@ -178,7 +181,7 @@ const initStripeConnect = (stripePromise, initParams) => {
178
181
  element[method] = function (value) {
179
182
  stripeConnectInstance.then(() => {
180
183
  if (!this[`${method}InternalOnly`]) {
181
- throw new Error(`Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: 3.4.6`);
184
+ throw new Error(`Method ${method} is not available in the ${tagName} HTML element. Are you using a supported version of the "@stripe/connect-js" package? Using version: 3.4.7`);
182
185
  }
183
186
  this[`${method}InternalOnly`](value);
184
187
  });
@@ -232,7 +235,7 @@ const createWrapper = stripeConnect => {
232
235
  sdk: true,
233
236
  sdkOptions: {
234
237
  // This will be replaced by the npm package version when bundling
235
- sdkVersion: "3.4.6"
238
+ sdkVersion: "3.4.7"
236
239
  }
237
240
  })
238
241
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stripe/connect-js",
3
- "version": "3.4.6",
3
+ "version": "3.4.7",
4
4
  "description": "Connect.js loading utility package (GA version)",
5
5
  "main": "dist/connect.js",
6
6
  "module": "dist/connect.esm.js",
package/src/components/componentsAndSetters.ts CHANGED
@@ -21,6 +21,8 @@ export const connectElementTagNames = [
21
21
  "documents",
22
22
  "tax-registrations",
23
23
  "tax-settings",
24
+ "terminal-hardware-orders",
25
+ "terminal-hardware-shop",
24
26
  "balance-report",
25
27
  "payout-reconciliation-report",
26
28
  ] as const;
@@ -333,6 +335,9 @@ export const ConnectElementCustomMethodConfig = {
333
335
  setPayout: (_payout: string | undefined): void => {},
334
336
  setOnClose: (_listener: (() => void) | undefined): void => {},
335
337
  },
338
+ "terminal-hardware-shop": {
339
+ setOnCheckoutFinished: (_listener: (() => void) | undefined): void => {},
340
+ },
336
341
  "payout-reconciliation-report": {
337
342
  setOnReportAvailabilityLoaded: (
338
343
  _listener: