@stripe/connect-js 3.3.52-preview-1 → 3.3.54-preview-1

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 (12) hide show
  1. package/dist/connect.esm.js +10 -4
  2. package/dist/connect.js +10 -4
  3. package/dist/pure.esm.js +10 -4
  4. package/dist/pure.js +10 -4
  5. package/dist/src/shared.d.ts +1 -1
  6. package/dist/types/config.d.ts +6 -0
  7. package/package.json +2 -2
  8. package/src/shared.ts +5 -1
  9. package/types/config.ts +10 -0
  10. package/types/shared.d.ts +3 -1
  11. package/LICENSE +0 -21
  12. package/README.md +0 -76
package/dist/connect.esm.js CHANGED
@@ -79,7 +79,8 @@ const ConnectElementCustomMethodConfig = {
79
79
  setOnApplicationSubmitted: _listener => {},
80
80
  setPrivacyPolicyUrl: _privacyPolicyUrl => {},
81
81
  setHowCapitalWorksUrl: _howCapitalWorksUrl => {},
82
- setOnApplicationStepChange: _listener => {}
82
+ setOnApplicationStepChange: _listener => {},
83
+ setDefaultFinancingOffer: _defaultFinancingOffer => {}
83
84
  },
84
85
  "capital-financing-promotion": {
85
86
  setLayout: _layout => {},
@@ -128,6 +129,9 @@ const ConnectElementCustomMethodConfig = {
128
129
  },
129
130
  "terminal-hardware-shop": {
130
131
  setOnCheckoutFinished: _listener => {}
132
+ },
133
+ "payout-reconciliation-report": {
134
+ setOnReportAvailabilityLoaded: _listener => {}
131
135
  }
132
136
  };
133
137
 
@@ -168,7 +172,9 @@ const componentNameMapping = {
168
172
  "agentic-commerce-settings": "stripe-connect-agentic-commerce-settings",
169
173
  "terminal-hardware-orders": "stripe-connect-terminal-hardware-orders",
170
174
  "terminal-hardware-shop": "stripe-connect-terminal-hardware-shop",
171
- "network-cost-passthrough-report": "stripe-connect-network-cost-passthrough-report"
175
+ "network-cost-passthrough-report": "stripe-connect-network-cost-passthrough-report",
176
+ "balance-report": "stripe-connect-balance-report",
177
+ "payout-reconciliation-report": "stripe-connect-payout-reconciliation-report"
172
178
  };
173
179
  const EXISTING_SCRIPT_MESSAGE = "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
174
180
  const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
@@ -265,7 +271,7 @@ const initStripeConnect = (stripePromise, initParams) => {
265
271
  element[method] = function (value) {
266
272
  stripeConnectInstance.then(() => {
267
273
  if (!this[`${method}InternalOnly`]) {
268
- 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.3.52-preview-1`);
274
+ 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.3.54-preview-1`);
269
275
  }
270
276
  this[`${method}InternalOnly`](value);
271
277
  });
@@ -319,7 +325,7 @@ const createWrapper = stripeConnect => {
319
325
  sdk: true,
320
326
  sdkOptions: {
321
327
  // This will be replaced by the npm package version when bundling
322
- sdkVersion: "3.3.52-preview-1"
328
+ sdkVersion: "3.3.54-preview-1"
323
329
  }
324
330
  })
325
331
  }));
package/dist/connect.js CHANGED
@@ -83,7 +83,8 @@ const ConnectElementCustomMethodConfig = {
83
83
  setOnApplicationSubmitted: _listener => {},
84
84
  setPrivacyPolicyUrl: _privacyPolicyUrl => {},
85
85
  setHowCapitalWorksUrl: _howCapitalWorksUrl => {},
86
- setOnApplicationStepChange: _listener => {}
86
+ setOnApplicationStepChange: _listener => {},
87
+ setDefaultFinancingOffer: _defaultFinancingOffer => {}
87
88
  },
88
89
  "capital-financing-promotion": {
89
90
  setLayout: _layout => {},
@@ -132,6 +133,9 @@ const ConnectElementCustomMethodConfig = {
132
133
  },
133
134
  "terminal-hardware-shop": {
134
135
  setOnCheckoutFinished: _listener => {}
136
+ },
137
+ "payout-reconciliation-report": {
138
+ setOnReportAvailabilityLoaded: _listener => {}
135
139
  }
136
140
  };
137
141
 
@@ -172,7 +176,9 @@ const componentNameMapping = {
172
176
  "agentic-commerce-settings": "stripe-connect-agentic-commerce-settings",
173
177
  "terminal-hardware-orders": "stripe-connect-terminal-hardware-orders",
174
178
  "terminal-hardware-shop": "stripe-connect-terminal-hardware-shop",
175
- "network-cost-passthrough-report": "stripe-connect-network-cost-passthrough-report"
179
+ "network-cost-passthrough-report": "stripe-connect-network-cost-passthrough-report",
180
+ "balance-report": "stripe-connect-balance-report",
181
+ "payout-reconciliation-report": "stripe-connect-payout-reconciliation-report"
176
182
  };
177
183
  const EXISTING_SCRIPT_MESSAGE = "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
178
184
  const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
@@ -269,7 +275,7 @@ const initStripeConnect = (stripePromise, initParams) => {
269
275
  element[method] = function (value) {
270
276
  stripeConnectInstance.then(() => {
271
277
  if (!this[`${method}InternalOnly`]) {
272
- 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.3.52-preview-1`);
278
+ 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.3.54-preview-1`);
273
279
  }
274
280
  this[`${method}InternalOnly`](value);
275
281
  });
@@ -323,7 +329,7 @@ const createWrapper = stripeConnect => {
323
329
  sdk: true,
324
330
  sdkOptions: {
325
331
  // This will be replaced by the npm package version when bundling
326
- sdkVersion: "3.3.52-preview-1"
332
+ sdkVersion: "3.3.54-preview-1"
327
333
  }
328
334
  })
329
335
  }));
package/dist/pure.esm.js CHANGED
@@ -79,7 +79,8 @@ const ConnectElementCustomMethodConfig = {
79
79
  setOnApplicationSubmitted: _listener => {},
80
80
  setPrivacyPolicyUrl: _privacyPolicyUrl => {},
81
81
  setHowCapitalWorksUrl: _howCapitalWorksUrl => {},
82
- setOnApplicationStepChange: _listener => {}
82
+ setOnApplicationStepChange: _listener => {},
83
+ setDefaultFinancingOffer: _defaultFinancingOffer => {}
83
84
  },
84
85
  "capital-financing-promotion": {
85
86
  setLayout: _layout => {},
@@ -128,6 +129,9 @@ const ConnectElementCustomMethodConfig = {
128
129
  },
129
130
  "terminal-hardware-shop": {
130
131
  setOnCheckoutFinished: _listener => {}
132
+ },
133
+ "payout-reconciliation-report": {
134
+ setOnReportAvailabilityLoaded: _listener => {}
131
135
  }
132
136
  };
133
137
 
@@ -168,7 +172,9 @@ const componentNameMapping = {
168
172
  "agentic-commerce-settings": "stripe-connect-agentic-commerce-settings",
169
173
  "terminal-hardware-orders": "stripe-connect-terminal-hardware-orders",
170
174
  "terminal-hardware-shop": "stripe-connect-terminal-hardware-shop",
171
- "network-cost-passthrough-report": "stripe-connect-network-cost-passthrough-report"
175
+ "network-cost-passthrough-report": "stripe-connect-network-cost-passthrough-report",
176
+ "balance-report": "stripe-connect-balance-report",
177
+ "payout-reconciliation-report": "stripe-connect-payout-reconciliation-report"
172
178
  };
173
179
  const EXISTING_SCRIPT_MESSAGE = "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
174
180
  const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
@@ -265,7 +271,7 @@ const initStripeConnect = (stripePromise, initParams) => {
265
271
  element[method] = function (value) {
266
272
  stripeConnectInstance.then(() => {
267
273
  if (!this[`${method}InternalOnly`]) {
268
- 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.3.52-preview-1`);
274
+ 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.3.54-preview-1`);
269
275
  }
270
276
  this[`${method}InternalOnly`](value);
271
277
  });
@@ -319,7 +325,7 @@ const createWrapper = stripeConnect => {
319
325
  sdk: true,
320
326
  sdkOptions: {
321
327
  // This will be replaced by the npm package version when bundling
322
- sdkVersion: "3.3.52-preview-1"
328
+ sdkVersion: "3.3.54-preview-1"
323
329
  }
324
330
  })
325
331
  }));
package/dist/pure.js CHANGED
@@ -83,7 +83,8 @@ const ConnectElementCustomMethodConfig = {
83
83
  setOnApplicationSubmitted: _listener => {},
84
84
  setPrivacyPolicyUrl: _privacyPolicyUrl => {},
85
85
  setHowCapitalWorksUrl: _howCapitalWorksUrl => {},
86
- setOnApplicationStepChange: _listener => {}
86
+ setOnApplicationStepChange: _listener => {},
87
+ setDefaultFinancingOffer: _defaultFinancingOffer => {}
87
88
  },
88
89
  "capital-financing-promotion": {
89
90
  setLayout: _layout => {},
@@ -132,6 +133,9 @@ const ConnectElementCustomMethodConfig = {
132
133
  },
133
134
  "terminal-hardware-shop": {
134
135
  setOnCheckoutFinished: _listener => {}
136
+ },
137
+ "payout-reconciliation-report": {
138
+ setOnReportAvailabilityLoaded: _listener => {}
135
139
  }
136
140
  };
137
141
 
@@ -172,7 +176,9 @@ const componentNameMapping = {
172
176
  "agentic-commerce-settings": "stripe-connect-agentic-commerce-settings",
173
177
  "terminal-hardware-orders": "stripe-connect-terminal-hardware-orders",
174
178
  "terminal-hardware-shop": "stripe-connect-terminal-hardware-shop",
175
- "network-cost-passthrough-report": "stripe-connect-network-cost-passthrough-report"
179
+ "network-cost-passthrough-report": "stripe-connect-network-cost-passthrough-report",
180
+ "balance-report": "stripe-connect-balance-report",
181
+ "payout-reconciliation-report": "stripe-connect-payout-reconciliation-report"
176
182
  };
177
183
  const EXISTING_SCRIPT_MESSAGE = "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
178
184
  const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
@@ -269,7 +275,7 @@ const initStripeConnect = (stripePromise, initParams) => {
269
275
  element[method] = function (value) {
270
276
  stripeConnectInstance.then(() => {
271
277
  if (!this[`${method}InternalOnly`]) {
272
- 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.3.52-preview-1`);
278
+ 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.3.54-preview-1`);
273
279
  }
274
280
  this[`${method}InternalOnly`](value);
275
281
  });
@@ -323,7 +329,7 @@ const createWrapper = stripeConnect => {
323
329
  sdk: true,
324
330
  sdkOptions: {
325
331
  // This will be replaced by the npm package version when bundling
326
- sdkVersion: "3.3.52-preview-1"
332
+ sdkVersion: "3.3.54-preview-1"
327
333
  }
328
334
  })
329
335
  }));
package/dist/src/shared.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { IStripeConnectInitParams, StripeConnectInstance, ConnectElementTagName } from "../types";
2
2
  export type LoadConnectAndInitialize = (initParams: IStripeConnectInitParams) => StripeConnectInstance;
3
- export type ConnectElementHTMLName = "stripe-connect-payments" | "stripe-connect-payouts" | "stripe-connect-payment-details" | "stripe-connect-payment-disputes" | "stripe-connect-disputes-list" | "stripe-connect-account-onboarding" | "stripe-connect-payment-method-settings" | "stripe-connect-account-management" | "stripe-connect-notification-banner" | "stripe-connect-instant-payouts" | "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-recipients" | "stripe-connect-capital-financing" | "stripe-connect-capital-financing-application" | "stripe-connect-capital-financing-promotion" | "stripe-connect-capital-overview" | "stripe-connect-documents" | "stripe-connect-product-tax-code-selector" | "stripe-connect-export-tax-transactions" | "stripe-connect-tax-registrations" | "stripe-connect-tax-settings" | "stripe-connect-tax-threshold-monitoring" | "stripe-connect-balances" | "stripe-connect-payouts-list" | "stripe-connect-payout-details" | "stripe-connect-app-install" | "stripe-connect-app-viewport" | "stripe-connect-reporting-chart" | "stripe-connect-check-scanning" | "stripe-connect-agentic-commerce-settings" | "stripe-connect-terminal-hardware-orders" | "stripe-connect-terminal-hardware-shop" | "stripe-connect-network-cost-passthrough-report";
3
+ export type ConnectElementHTMLName = "stripe-connect-payments" | "stripe-connect-payouts" | "stripe-connect-payment-details" | "stripe-connect-payment-disputes" | "stripe-connect-disputes-list" | "stripe-connect-account-onboarding" | "stripe-connect-payment-method-settings" | "stripe-connect-account-management" | "stripe-connect-notification-banner" | "stripe-connect-instant-payouts" | "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-recipients" | "stripe-connect-capital-financing" | "stripe-connect-capital-financing-application" | "stripe-connect-capital-financing-promotion" | "stripe-connect-capital-overview" | "stripe-connect-documents" | "stripe-connect-product-tax-code-selector" | "stripe-connect-export-tax-transactions" | "stripe-connect-tax-registrations" | "stripe-connect-tax-settings" | "stripe-connect-tax-threshold-monitoring" | "stripe-connect-balances" | "stripe-connect-payouts-list" | "stripe-connect-payout-details" | "stripe-connect-app-install" | "stripe-connect-app-viewport" | "stripe-connect-reporting-chart" | "stripe-connect-check-scanning" | "stripe-connect-agentic-commerce-settings" | "stripe-connect-terminal-hardware-orders" | "stripe-connect-terminal-hardware-shop" | "stripe-connect-network-cost-passthrough-report" | "stripe-connect-balance-report" | "stripe-connect-payout-reconciliation-report";
4
4
  export declare const componentNameMapping: Record<ConnectElementTagName, ConnectElementHTMLName>;
5
5
  type StripeConnectInstanceExtended = StripeConnectInstance & {
6
6
  debugInstance: () => Promise<StripeConnectInstance>;
package/dist/types/config.d.ts CHANGED
@@ -190,6 +190,7 @@ export declare const ConnectElementCustomMethodConfig: {
190
190
  setPrivacyPolicyUrl: (_privacyPolicyUrl: string | undefined) => void;
191
191
  setHowCapitalWorksUrl: (_howCapitalWorksUrl: string | undefined) => void;
192
192
  setOnApplicationStepChange: (_listener: (({ step }: StepChange) => void) | undefined) => void;
193
+ setDefaultFinancingOffer: (_defaultFinancingOffer: string | undefined) => void;
193
194
  };
194
195
  "capital-financing-promotion": {
195
196
  setLayout: (_layout: FinancingPromotionLayoutType | undefined) => void;
@@ -251,4 +252,9 @@ export declare const ConnectElementCustomMethodConfig: {
251
252
  "terminal-hardware-shop": {
252
253
  setOnCheckoutFinished: (_listener: (() => void) | undefined) => void;
253
254
  };
255
+ "payout-reconciliation-report": {
256
+ setOnReportAvailabilityLoaded: (_listener: (({ isReportAvailable }: {
257
+ isReportAvailable: boolean;
258
+ }) => void) | undefined) => void;
259
+ };
254
260
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stripe/connect-js",
3
- "version": "3.3.52-preview-1",
4
- "description": "Connect.js loading utility package",
3
+ "version": "3.3.54-preview-1",
4
+ "description": "Connect.js loading utility package (preview version)",
5
5
  "main": "dist/connect.js",
6
6
  "module": "dist/connect.esm.js",
7
7
  "types": "types/index.d.ts",
package/src/shared.ts CHANGED
@@ -50,7 +50,9 @@ export type ConnectElementHTMLName =
50
50
  | "stripe-connect-agentic-commerce-settings"
51
51
  | "stripe-connect-terminal-hardware-orders"
52
52
  | "stripe-connect-terminal-hardware-shop"
53
- | "stripe-connect-network-cost-passthrough-report";
53
+ | "stripe-connect-network-cost-passthrough-report"
54
+ | "stripe-connect-balance-report"
55
+ | "stripe-connect-payout-reconciliation-report";
54
56
 
55
57
  export const componentNameMapping: Record<
56
58
  ConnectElementTagName,
@@ -96,6 +98,8 @@ export const componentNameMapping: Record<
96
98
  "terminal-hardware-shop": "stripe-connect-terminal-hardware-shop",
97
99
  "network-cost-passthrough-report":
98
100
  "stripe-connect-network-cost-passthrough-report",
101
+ "balance-report": "stripe-connect-balance-report",
102
+ "payout-reconciliation-report": "stripe-connect-payout-reconciliation-report",
99
103
  };
100
104
 
101
105
  type StripeConnectInstanceExtended = StripeConnectInstance & {
package/types/config.ts CHANGED
@@ -344,6 +344,9 @@ export const ConnectElementCustomMethodConfig = {
344
344
  setOnApplicationStepChange: (
345
345
  _listener: (({ step }: StepChange) => void) | undefined
346
346
  ): void => {},
347
+ setDefaultFinancingOffer: (
348
+ _defaultFinancingOffer: string | undefined
349
+ ): void => {},
347
350
  },
348
351
  "capital-financing-promotion": {
349
352
  setLayout: (_layout: FinancingPromotionLayoutType | undefined): void => {},
@@ -433,4 +436,11 @@ export const ConnectElementCustomMethodConfig = {
433
436
  "terminal-hardware-shop": {
434
437
  setOnCheckoutFinished: (_listener: (() => void) | undefined): void => {},
435
438
  },
439
+ "payout-reconciliation-report": {
440
+ setOnReportAvailabilityLoaded: (
441
+ _listener:
442
+ | (({ isReportAvailable }: { isReportAvailable: boolean }) => void)
443
+ | undefined
444
+ ): void => {},
445
+ },
436
446
  };
package/types/shared.d.ts CHANGED
@@ -680,4 +680,6 @@ export type ConnectElementTagName =
680
680
  | "agentic-commerce-settings"
681
681
  | "terminal-hardware-orders"
682
682
  | "terminal-hardware-shop"
683
- | "network-cost-passthrough-report";
683
+ | "network-cost-passthrough-report"
684
+ | "balance-report"
685
+ | "payout-reconciliation-report";
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2023 Stripe, Inc.
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
package/README.md DELETED
@@ -1,76 +0,0 @@
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 currently still 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
- ```