@stripe/connect-js 3.3.1 → 3.3.3-beta-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 (10) hide show
  1. package/dist/connect.esm.js +44 -7
  2. package/dist/connect.js +44 -7
  3. package/dist/pure.esm.js +44 -7
  4. package/dist/pure.js +44 -7
  5. package/dist/src/shared.d.ts +1 -1
  6. package/dist/types/config.d.ts +27 -3
  7. package/package.json +1 -1
  8. package/src/shared.ts +39 -6
  9. package/types/config.ts +32 -3
  10. package/types/shared.d.ts +10 -2
package/dist/connect.esm.js CHANGED
@@ -1,6 +1,10 @@
1
1
  /* eslint-disable @typescript-eslint/no-empty-function */
2
2
  /* eslint-disable @typescript-eslint/no-unused-vars */
3
3
  const ConnectElementCustomMethodConfig = {
4
+ "payment-details": {
5
+ setPayment: _payment => {},
6
+ setOnClose: _listener => {}
7
+ },
4
8
  "account-onboarding": {
5
9
  setFullTermsOfServiceUrl: _termOfServiceUrl => {},
6
10
  setRecipientTermsOfServiceUrl: _recipientTermsOfServiceUrl => {},
@@ -9,21 +13,41 @@ const ConnectElementCustomMethodConfig = {
9
13
  setCollectionOptions: _collectionOptions => {},
10
14
  setOnExit: _listener => {}
11
15
  },
12
- "payment-details": {
13
- setPayment: _payment => {},
14
- setOnClose: _listener => {}
16
+ "issuing-card": {
17
+ setDefaultCard: _defaultCard => {},
18
+ setCardArtFileLink: _cardArtFileLink => {},
19
+ setCardSwitching: _cardSwitching => {},
20
+ setFetchEphemeralKey: _fetchEphemeralKey => {}
21
+ },
22
+ "issuing-cards-list": {
23
+ setCardArtFileLink: _cardArtFileLink => {},
24
+ setFetchEphemeralKey: _fetchEphemeralKey => {}
25
+ },
26
+ "financial-account": {
27
+ setFinancialAccount: _financialAccount => {}
28
+ },
29
+ "financial-account-transactions": {
30
+ setFinancialAccount: _financialAccount => {}
15
31
  }
16
32
  };
17
33
 
18
34
  const componentNameMapping = {
19
- "account-onboarding": "stripe-connect-account-onboarding",
20
35
  payments: "stripe-connect-payments",
21
- "payment-details": "stripe-connect-payment-details",
22
36
  payouts: "stripe-connect-payouts",
37
+ "payment-details": "stripe-connect-payment-details",
38
+ "account-onboarding": "stripe-connect-account-onboarding",
39
+ "payment-method-settings": "stripe-connect-payment-method-settings",
40
+ "account-management": "stripe-connect-account-management",
41
+ "notification-banner": "stripe-connect-notification-banner",
42
+ "instant-payouts": "stripe-connect-instant-payouts",
43
+ "issuing-card": "stripe-connect-issuing-card",
44
+ "issuing-cards-list": "stripe-connect-issuing-cards-list",
45
+ "financial-account": "stripe-connect-financial-account",
46
+ "financial-account-transactions": "stripe-connect-financial-account-transactions",
23
47
  documents: "stripe-connect-documents"
24
48
  };
25
49
  const EXISTING_SCRIPT_MESSAGE = "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
26
- const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
50
+ const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
27
51
  const findScript = () => {
28
52
  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0] || null;
29
53
  };
@@ -103,6 +127,19 @@ const initStripeConnect = (stripePromise, initParams) => {
103
127
  }
104
128
  }
105
129
  stripeConnectInstance.then(instance => {
130
+ if (!element.isConnected && !element.setConnector) {
131
+ // If the element is not connected to the DOM and the `setConnector` method is not
132
+ // defined, this indicates the element was created before connect.js was loaded, and has
133
+ // not been transformed into a custom element yet
134
+ // To load the custom element code on it, we need to connect and disconnect it to the DOM
135
+ // This isn't a problem, as the element will be invisible, and we know the element is already
136
+ // not currently connected to the DOM
137
+ const oldDisplay = element.style.display;
138
+ element.style.display = "none";
139
+ document.body.appendChild(element);
140
+ document.body.removeChild(element);
141
+ element.style.display = oldDisplay;
142
+ }
106
143
  element.setConnector(instance.connect);
107
144
  });
108
145
  return element;
@@ -134,7 +171,7 @@ const createWrapper = stripeConnect => {
134
171
  sdk: true,
135
172
  sdkOptions: {
136
173
  // This will be replaced by the npm package version when bundling
137
- sdkVersion: "3.3.1"
174
+ sdkVersion: "3.3.3-beta-1"
138
175
  }
139
176
  })
140
177
  }));
package/dist/connect.js CHANGED
@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  /* eslint-disable @typescript-eslint/no-empty-function */
6
6
  /* eslint-disable @typescript-eslint/no-unused-vars */
7
7
  const ConnectElementCustomMethodConfig = {
8
+ "payment-details": {
9
+ setPayment: _payment => {},
10
+ setOnClose: _listener => {}
11
+ },
8
12
  "account-onboarding": {
9
13
  setFullTermsOfServiceUrl: _termOfServiceUrl => {},
10
14
  setRecipientTermsOfServiceUrl: _recipientTermsOfServiceUrl => {},
@@ -13,21 +17,41 @@ const ConnectElementCustomMethodConfig = {
13
17
  setCollectionOptions: _collectionOptions => {},
14
18
  setOnExit: _listener => {}
15
19
  },
16
- "payment-details": {
17
- setPayment: _payment => {},
18
- setOnClose: _listener => {}
20
+ "issuing-card": {
21
+ setDefaultCard: _defaultCard => {},
22
+ setCardArtFileLink: _cardArtFileLink => {},
23
+ setCardSwitching: _cardSwitching => {},
24
+ setFetchEphemeralKey: _fetchEphemeralKey => {}
25
+ },
26
+ "issuing-cards-list": {
27
+ setCardArtFileLink: _cardArtFileLink => {},
28
+ setFetchEphemeralKey: _fetchEphemeralKey => {}
29
+ },
30
+ "financial-account": {
31
+ setFinancialAccount: _financialAccount => {}
32
+ },
33
+ "financial-account-transactions": {
34
+ setFinancialAccount: _financialAccount => {}
19
35
  }
20
36
  };
21
37
 
22
38
  const componentNameMapping = {
23
- "account-onboarding": "stripe-connect-account-onboarding",
24
39
  payments: "stripe-connect-payments",
25
- "payment-details": "stripe-connect-payment-details",
26
40
  payouts: "stripe-connect-payouts",
41
+ "payment-details": "stripe-connect-payment-details",
42
+ "account-onboarding": "stripe-connect-account-onboarding",
43
+ "payment-method-settings": "stripe-connect-payment-method-settings",
44
+ "account-management": "stripe-connect-account-management",
45
+ "notification-banner": "stripe-connect-notification-banner",
46
+ "instant-payouts": "stripe-connect-instant-payouts",
47
+ "issuing-card": "stripe-connect-issuing-card",
48
+ "issuing-cards-list": "stripe-connect-issuing-cards-list",
49
+ "financial-account": "stripe-connect-financial-account",
50
+ "financial-account-transactions": "stripe-connect-financial-account-transactions",
27
51
  documents: "stripe-connect-documents"
28
52
  };
29
53
  const EXISTING_SCRIPT_MESSAGE = "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
30
- const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
54
+ const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
31
55
  const findScript = () => {
32
56
  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0] || null;
33
57
  };
@@ -107,6 +131,19 @@ const initStripeConnect = (stripePromise, initParams) => {
107
131
  }
108
132
  }
109
133
  stripeConnectInstance.then(instance => {
134
+ if (!element.isConnected && !element.setConnector) {
135
+ // If the element is not connected to the DOM and the `setConnector` method is not
136
+ // defined, this indicates the element was created before connect.js was loaded, and has
137
+ // not been transformed into a custom element yet
138
+ // To load the custom element code on it, we need to connect and disconnect it to the DOM
139
+ // This isn't a problem, as the element will be invisible, and we know the element is already
140
+ // not currently connected to the DOM
141
+ const oldDisplay = element.style.display;
142
+ element.style.display = "none";
143
+ document.body.appendChild(element);
144
+ document.body.removeChild(element);
145
+ element.style.display = oldDisplay;
146
+ }
110
147
  element.setConnector(instance.connect);
111
148
  });
112
149
  return element;
@@ -138,7 +175,7 @@ const createWrapper = stripeConnect => {
138
175
  sdk: true,
139
176
  sdkOptions: {
140
177
  // This will be replaced by the npm package version when bundling
141
- sdkVersion: "3.3.1"
178
+ sdkVersion: "3.3.3-beta-1"
142
179
  }
143
180
  })
144
181
  }));
package/dist/pure.esm.js CHANGED
@@ -1,6 +1,10 @@
1
1
  /* eslint-disable @typescript-eslint/no-empty-function */
2
2
  /* eslint-disable @typescript-eslint/no-unused-vars */
3
3
  const ConnectElementCustomMethodConfig = {
4
+ "payment-details": {
5
+ setPayment: _payment => {},
6
+ setOnClose: _listener => {}
7
+ },
4
8
  "account-onboarding": {
5
9
  setFullTermsOfServiceUrl: _termOfServiceUrl => {},
6
10
  setRecipientTermsOfServiceUrl: _recipientTermsOfServiceUrl => {},
@@ -9,21 +13,41 @@ const ConnectElementCustomMethodConfig = {
9
13
  setCollectionOptions: _collectionOptions => {},
10
14
  setOnExit: _listener => {}
11
15
  },
12
- "payment-details": {
13
- setPayment: _payment => {},
14
- setOnClose: _listener => {}
16
+ "issuing-card": {
17
+ setDefaultCard: _defaultCard => {},
18
+ setCardArtFileLink: _cardArtFileLink => {},
19
+ setCardSwitching: _cardSwitching => {},
20
+ setFetchEphemeralKey: _fetchEphemeralKey => {}
21
+ },
22
+ "issuing-cards-list": {
23
+ setCardArtFileLink: _cardArtFileLink => {},
24
+ setFetchEphemeralKey: _fetchEphemeralKey => {}
25
+ },
26
+ "financial-account": {
27
+ setFinancialAccount: _financialAccount => {}
28
+ },
29
+ "financial-account-transactions": {
30
+ setFinancialAccount: _financialAccount => {}
15
31
  }
16
32
  };
17
33
 
18
34
  const componentNameMapping = {
19
- "account-onboarding": "stripe-connect-account-onboarding",
20
35
  payments: "stripe-connect-payments",
21
- "payment-details": "stripe-connect-payment-details",
22
36
  payouts: "stripe-connect-payouts",
37
+ "payment-details": "stripe-connect-payment-details",
38
+ "account-onboarding": "stripe-connect-account-onboarding",
39
+ "payment-method-settings": "stripe-connect-payment-method-settings",
40
+ "account-management": "stripe-connect-account-management",
41
+ "notification-banner": "stripe-connect-notification-banner",
42
+ "instant-payouts": "stripe-connect-instant-payouts",
43
+ "issuing-card": "stripe-connect-issuing-card",
44
+ "issuing-cards-list": "stripe-connect-issuing-cards-list",
45
+ "financial-account": "stripe-connect-financial-account",
46
+ "financial-account-transactions": "stripe-connect-financial-account-transactions",
23
47
  documents: "stripe-connect-documents"
24
48
  };
25
49
  const EXISTING_SCRIPT_MESSAGE = "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
26
- const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
50
+ const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
27
51
  const findScript = () => {
28
52
  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0] || null;
29
53
  };
@@ -103,6 +127,19 @@ const initStripeConnect = (stripePromise, initParams) => {
103
127
  }
104
128
  }
105
129
  stripeConnectInstance.then(instance => {
130
+ if (!element.isConnected && !element.setConnector) {
131
+ // If the element is not connected to the DOM and the `setConnector` method is not
132
+ // defined, this indicates the element was created before connect.js was loaded, and has
133
+ // not been transformed into a custom element yet
134
+ // To load the custom element code on it, we need to connect and disconnect it to the DOM
135
+ // This isn't a problem, as the element will be invisible, and we know the element is already
136
+ // not currently connected to the DOM
137
+ const oldDisplay = element.style.display;
138
+ element.style.display = "none";
139
+ document.body.appendChild(element);
140
+ document.body.removeChild(element);
141
+ element.style.display = oldDisplay;
142
+ }
106
143
  element.setConnector(instance.connect);
107
144
  });
108
145
  return element;
@@ -134,7 +171,7 @@ const createWrapper = stripeConnect => {
134
171
  sdk: true,
135
172
  sdkOptions: {
136
173
  // This will be replaced by the npm package version when bundling
137
- sdkVersion: "3.3.1"
174
+ sdkVersion: "3.3.3-beta-1"
138
175
  }
139
176
  })
140
177
  }));
package/dist/pure.js CHANGED
@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  /* eslint-disable @typescript-eslint/no-empty-function */
6
6
  /* eslint-disable @typescript-eslint/no-unused-vars */
7
7
  const ConnectElementCustomMethodConfig = {
8
+ "payment-details": {
9
+ setPayment: _payment => {},
10
+ setOnClose: _listener => {}
11
+ },
8
12
  "account-onboarding": {
9
13
  setFullTermsOfServiceUrl: _termOfServiceUrl => {},
10
14
  setRecipientTermsOfServiceUrl: _recipientTermsOfServiceUrl => {},
@@ -13,21 +17,41 @@ const ConnectElementCustomMethodConfig = {
13
17
  setCollectionOptions: _collectionOptions => {},
14
18
  setOnExit: _listener => {}
15
19
  },
16
- "payment-details": {
17
- setPayment: _payment => {},
18
- setOnClose: _listener => {}
20
+ "issuing-card": {
21
+ setDefaultCard: _defaultCard => {},
22
+ setCardArtFileLink: _cardArtFileLink => {},
23
+ setCardSwitching: _cardSwitching => {},
24
+ setFetchEphemeralKey: _fetchEphemeralKey => {}
25
+ },
26
+ "issuing-cards-list": {
27
+ setCardArtFileLink: _cardArtFileLink => {},
28
+ setFetchEphemeralKey: _fetchEphemeralKey => {}
29
+ },
30
+ "financial-account": {
31
+ setFinancialAccount: _financialAccount => {}
32
+ },
33
+ "financial-account-transactions": {
34
+ setFinancialAccount: _financialAccount => {}
19
35
  }
20
36
  };
21
37
 
22
38
  const componentNameMapping = {
23
- "account-onboarding": "stripe-connect-account-onboarding",
24
39
  payments: "stripe-connect-payments",
25
- "payment-details": "stripe-connect-payment-details",
26
40
  payouts: "stripe-connect-payouts",
41
+ "payment-details": "stripe-connect-payment-details",
42
+ "account-onboarding": "stripe-connect-account-onboarding",
43
+ "payment-method-settings": "stripe-connect-payment-method-settings",
44
+ "account-management": "stripe-connect-account-management",
45
+ "notification-banner": "stripe-connect-notification-banner",
46
+ "instant-payouts": "stripe-connect-instant-payouts",
47
+ "issuing-card": "stripe-connect-issuing-card",
48
+ "issuing-cards-list": "stripe-connect-issuing-cards-list",
49
+ "financial-account": "stripe-connect-financial-account",
50
+ "financial-account-transactions": "stripe-connect-financial-account-transactions",
27
51
  documents: "stripe-connect-documents"
28
52
  };
29
53
  const EXISTING_SCRIPT_MESSAGE = "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
30
- const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
54
+ const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
31
55
  const findScript = () => {
32
56
  return document.querySelectorAll(`script[src="${V0_URL}"]`)[0] || null;
33
57
  };
@@ -107,6 +131,19 @@ const initStripeConnect = (stripePromise, initParams) => {
107
131
  }
108
132
  }
109
133
  stripeConnectInstance.then(instance => {
134
+ if (!element.isConnected && !element.setConnector) {
135
+ // If the element is not connected to the DOM and the `setConnector` method is not
136
+ // defined, this indicates the element was created before connect.js was loaded, and has
137
+ // not been transformed into a custom element yet
138
+ // To load the custom element code on it, we need to connect and disconnect it to the DOM
139
+ // This isn't a problem, as the element will be invisible, and we know the element is already
140
+ // not currently connected to the DOM
141
+ const oldDisplay = element.style.display;
142
+ element.style.display = "none";
143
+ document.body.appendChild(element);
144
+ document.body.removeChild(element);
145
+ element.style.display = oldDisplay;
146
+ }
110
147
  element.setConnector(instance.connect);
111
148
  });
112
149
  return element;
@@ -138,7 +175,7 @@ const createWrapper = stripeConnect => {
138
175
  sdk: true,
139
176
  sdkOptions: {
140
177
  // This will be replaced by the npm package version when bundling
141
- sdkVersion: "3.3.1"
178
+ sdkVersion: "3.3.3-beta-1"
142
179
  }
143
180
  })
144
181
  }));
package/dist/src/shared.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { IStripeConnectInitParams, StripeConnectInstance, ConnectElementTagName } from "../types";
2
2
  export type LoadConnectAndInitialize = (initParams: IStripeConnectInitParams) => StripeConnectInstance;
3
- type ConnectElementHTMLName = "stripe-connect-account-onboarding" | "stripe-connect-payments" | "stripe-connect-payment-details" | "stripe-connect-payouts" | "stripe-connect-documents";
3
+ 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" | "stripe-connect-financial-account" | "stripe-connect-financial-account-transactions" | "stripe-connect-documents";
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
@@ -1,8 +1,20 @@
1
+ export type FetchEphemeralKeyFunction = (fetchParams: {
2
+ issuingCard: string;
3
+ nonce: string;
4
+ }) => Promise<{
5
+ issuingCard: string;
6
+ nonce: string;
7
+ ephemeralKeySecret: string;
8
+ }>;
1
9
  export type CollectionOptions = {
2
10
  fields: "currently_due" | "eventually_due";
3
11
  futureRequirements?: "omit" | "include";
4
12
  };
5
13
  export declare const ConnectElementCustomMethodConfig: {
14
+ "payment-details": {
15
+ setPayment: (_payment: string | undefined) => void;
16
+ setOnClose: (_listener: (() => void) | undefined) => void;
17
+ };
6
18
  "account-onboarding": {
7
19
  setFullTermsOfServiceUrl: (_termOfServiceUrl: string | undefined) => void;
8
20
  setRecipientTermsOfServiceUrl: (_recipientTermsOfServiceUrl: string | undefined) => void;
@@ -11,8 +23,20 @@ export declare const ConnectElementCustomMethodConfig: {
11
23
  setCollectionOptions: (_collectionOptions: CollectionOptions | undefined) => void;
12
24
  setOnExit: (_listener: (() => void) | undefined) => void;
13
25
  };
14
- "payment-details": {
15
- setPayment: (_payment: string | undefined) => void;
16
- setOnClose: (_listener: (() => void) | undefined) => void;
26
+ "issuing-card": {
27
+ setDefaultCard: (_defaultCard: string | undefined) => void;
28
+ setCardArtFileLink: (_cardArtFileLink: string | undefined) => void;
29
+ setCardSwitching: (_cardSwitching: boolean | undefined) => void;
30
+ setFetchEphemeralKey: (_fetchEphemeralKey: FetchEphemeralKeyFunction | undefined) => void;
31
+ };
32
+ "issuing-cards-list": {
33
+ setCardArtFileLink: (_cardArtFileLink: string | undefined) => void;
34
+ setFetchEphemeralKey: (_fetchEphemeralKey: FetchEphemeralKeyFunction | undefined) => void;
35
+ };
36
+ "financial-account": {
37
+ setFinancialAccount: (_financialAccount: string) => void;
38
+ };
39
+ "financial-account-transactions": {
40
+ setFinancialAccount: (_financialAccount: string) => void;
17
41
  };
18
42
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stripe/connect-js",
3
- "version": "3.3.1",
3
+ "version": "3.3.3-beta-1",
4
4
  "description": "Connect.js loading utility package",
5
5
  "main": "dist/connect.js",
6
6
  "module": "dist/connect.esm.js",
package/src/shared.ts CHANGED
@@ -10,21 +10,38 @@ export type LoadConnectAndInitialize = (
10
10
  initParams: IStripeConnectInitParams
11
11
  ) => StripeConnectInstance;
12
12
 
13
- type ConnectElementHTMLName =
14
- | "stripe-connect-account-onboarding"
13
+ export type ConnectElementHTMLName =
15
14
  | "stripe-connect-payments"
16
- | "stripe-connect-payment-details"
17
15
  | "stripe-connect-payouts"
16
+ | "stripe-connect-payment-details"
17
+ | "stripe-connect-account-onboarding"
18
+ | "stripe-connect-payment-method-settings"
19
+ | "stripe-connect-account-management"
20
+ | "stripe-connect-notification-banner"
21
+ | "stripe-connect-instant-payouts"
22
+ | "stripe-connect-issuing-card"
23
+ | "stripe-connect-issuing-cards-list"
24
+ | "stripe-connect-financial-account"
25
+ | "stripe-connect-financial-account-transactions"
18
26
  | "stripe-connect-documents";
19
27
 
20
28
  export const componentNameMapping: Record<
21
29
  ConnectElementTagName,
22
30
  ConnectElementHTMLName
23
31
  > = {
24
- "account-onboarding": "stripe-connect-account-onboarding",
25
32
  payments: "stripe-connect-payments",
26
- "payment-details": "stripe-connect-payment-details",
27
33
  payouts: "stripe-connect-payouts",
34
+ "payment-details": "stripe-connect-payment-details",
35
+ "account-onboarding": "stripe-connect-account-onboarding",
36
+ "payment-method-settings": "stripe-connect-payment-method-settings",
37
+ "account-management": "stripe-connect-account-management",
38
+ "notification-banner": "stripe-connect-notification-banner",
39
+ "instant-payouts": "stripe-connect-instant-payouts",
40
+ "issuing-card": "stripe-connect-issuing-card",
41
+ "issuing-cards-list": "stripe-connect-issuing-cards-list",
42
+ "financial-account": "stripe-connect-financial-account",
43
+ "financial-account-transactions":
44
+ "stripe-connect-financial-account-transactions",
28
45
  documents: "stripe-connect-documents"
29
46
  };
30
47
 
@@ -38,7 +55,7 @@ interface StripeConnectWrapper {
38
55
 
39
56
  const EXISTING_SCRIPT_MESSAGE =
40
57
  "loadConnect was called but an existing Connect.js script already exists in the document; existing script parameters will be used";
41
- const V0_URL = "https://connect-js.stripe.com/v1.0/connect.js";
58
+ const V0_URL = "https://connect-js.stripe.com/v0.1/connect.js";
42
59
 
43
60
  export const findScript = (): HTMLScriptElement | null => {
44
61
  return (
@@ -154,6 +171,22 @@ export const initStripeConnect = (
154
171
  }
155
172
 
156
173
  stripeConnectInstance.then(instance => {
174
+ if (!element.isConnected && !(element as any).setConnector) {
175
+ // If the element is not connected to the DOM and the `setConnector` method is not
176
+ // defined, this indicates the element was created before connect.js was loaded, and has
177
+ // not been transformed into a custom element yet
178
+
179
+ // To load the custom element code on it, we need to connect and disconnect it to the DOM
180
+ // This isn't a problem, as the element will be invisible, and we know the element is already
181
+ // not currently connected to the DOM
182
+
183
+ const oldDisplay = element.style.display;
184
+ element.style.display = "none";
185
+ document.body.appendChild(element);
186
+ document.body.removeChild(element);
187
+ element.style.display = oldDisplay;
188
+ }
189
+
157
190
  (element as any).setConnector((instance as any).connect);
158
191
  });
159
192
 
package/types/config.ts CHANGED
@@ -1,12 +1,25 @@
1
1
  /* eslint-disable @typescript-eslint/no-empty-function */
2
2
  /* eslint-disable @typescript-eslint/no-unused-vars */
3
3
 
4
+ export type FetchEphemeralKeyFunction = (fetchParams: {
5
+ issuingCard: string;
6
+ nonce: string;
7
+ }) => Promise<{
8
+ issuingCard: string;
9
+ nonce: string;
10
+ ephemeralKeySecret: string;
11
+ }>;
12
+
4
13
  export type CollectionOptions = {
5
14
  fields: "currently_due" | "eventually_due";
6
15
  futureRequirements?: "omit" | "include";
7
16
  };
8
17
 
9
18
  export const ConnectElementCustomMethodConfig = {
19
+ "payment-details": {
20
+ setPayment: (_payment: string | undefined): void => {},
21
+ setOnClose: (_listener: (() => void) | undefined): void => {}
22
+ },
10
23
  "account-onboarding": {
11
24
  setFullTermsOfServiceUrl: (
12
25
  _termOfServiceUrl: string | undefined
@@ -23,8 +36,24 @@ export const ConnectElementCustomMethodConfig = {
23
36
  ): void => {},
24
37
  setOnExit: (_listener: (() => void) | undefined): void => {}
25
38
  },
26
- "payment-details": {
27
- setPayment: (_payment: string | undefined): void => {},
28
- setOnClose: (_listener: (() => void) | undefined): void => {}
39
+ "issuing-card": {
40
+ setDefaultCard: (_defaultCard: string | undefined): void => {},
41
+ setCardArtFileLink: (_cardArtFileLink: string | undefined): void => {},
42
+ setCardSwitching: (_cardSwitching: boolean | undefined): void => {},
43
+ setFetchEphemeralKey: (
44
+ _fetchEphemeralKey: FetchEphemeralKeyFunction | undefined
45
+ ): void => {}
46
+ },
47
+ "issuing-cards-list": {
48
+ setCardArtFileLink: (_cardArtFileLink: string | undefined): void => {},
49
+ setFetchEphemeralKey: (
50
+ _fetchEphemeralKey: FetchEphemeralKeyFunction | undefined
51
+ ): void => {}
52
+ },
53
+ "financial-account": {
54
+ setFinancialAccount: (_financialAccount: string): void => {}
55
+ },
56
+ "financial-account-transactions": {
57
+ setFinancialAccount: (_financialAccount: string): void => {}
29
58
  }
30
59
  };
package/types/shared.d.ts CHANGED
@@ -447,8 +447,16 @@ export interface StripeConnectInstance {
447
447
  * Tagnames to be used with the `create` method of the Connect instance.
448
448
  */
449
449
  export type ConnectElementTagName =
450
- | "account-onboarding"
451
450
  | "payments"
452
- | "payment-details"
453
451
  | "payouts"
452
+ | "payment-details"
453
+ | "account-onboarding"
454
+ | "payment-method-settings"
455
+ | "account-management"
456
+ | "notification-banner"
457
+ | "instant-payouts"
458
+ | "issuing-card"
459
+ | "issuing-cards-list"
460
+ | "financial-account"
461
+ | "financial-account-transactions"
454
462
  | "documents";