@stripe/connect-js 3.3.2-beta-1 → 3.3.3-beta-1

package/dist/connect.esm.js

@@ -127,6 +127,19 @@ const initStripeConnect = (stripePromise, initParams) => {
         }
       }
       stripeConnectInstance.then(instance => {
+        if (!element.isConnected && !element.setConnector) {
+          // If the element is not connected to the DOM and the `setConnector` method is not
+          // defined, this indicates the element was created before connect.js was loaded, and has
+          // not been transformed into a custom element yet
+          // To load the custom element code on it, we need to connect and disconnect it to the DOM
+          // This isn't a problem, as the element will be invisible, and we know the element is already
+          // not currently connected to the DOM
+          const oldDisplay = element.style.display;
+          element.style.display = "none";
+          document.body.appendChild(element);
+          document.body.removeChild(element);
+          element.style.display = oldDisplay;
+        }
         element.setConnector(instance.connect);
       });
       return element;
@@ -158,7 +171,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.3.2-beta-1"
+            sdkVersion: "3.3.3-beta-1"
           }
         })
       }));

package/dist/connect.js

@@ -131,6 +131,19 @@ const initStripeConnect = (stripePromise, initParams) => {
         }
       }
       stripeConnectInstance.then(instance => {
+        if (!element.isConnected && !element.setConnector) {
+          // If the element is not connected to the DOM and the `setConnector` method is not
+          // defined, this indicates the element was created before connect.js was loaded, and has
+          // not been transformed into a custom element yet
+          // To load the custom element code on it, we need to connect and disconnect it to the DOM
+          // This isn't a problem, as the element will be invisible, and we know the element is already
+          // not currently connected to the DOM
+          const oldDisplay = element.style.display;
+          element.style.display = "none";
+          document.body.appendChild(element);
+          document.body.removeChild(element);
+          element.style.display = oldDisplay;
+        }
         element.setConnector(instance.connect);
       });
       return element;
@@ -162,7 +175,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.3.2-beta-1"
+            sdkVersion: "3.3.3-beta-1"
           }
         })
       }));

package/dist/pure.esm.js

@@ -127,6 +127,19 @@ const initStripeConnect = (stripePromise, initParams) => {
         }
       }
       stripeConnectInstance.then(instance => {
+        if (!element.isConnected && !element.setConnector) {
+          // If the element is not connected to the DOM and the `setConnector` method is not
+          // defined, this indicates the element was created before connect.js was loaded, and has
+          // not been transformed into a custom element yet
+          // To load the custom element code on it, we need to connect and disconnect it to the DOM
+          // This isn't a problem, as the element will be invisible, and we know the element is already
+          // not currently connected to the DOM
+          const oldDisplay = element.style.display;
+          element.style.display = "none";
+          document.body.appendChild(element);
+          document.body.removeChild(element);
+          element.style.display = oldDisplay;
+        }
         element.setConnector(instance.connect);
       });
       return element;
@@ -158,7 +171,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.3.2-beta-1"
+            sdkVersion: "3.3.3-beta-1"
           }
         })
       }));

package/dist/pure.js

@@ -131,6 +131,19 @@ const initStripeConnect = (stripePromise, initParams) => {
         }
       }
       stripeConnectInstance.then(instance => {
+        if (!element.isConnected && !element.setConnector) {
+          // If the element is not connected to the DOM and the `setConnector` method is not
+          // defined, this indicates the element was created before connect.js was loaded, and has
+          // not been transformed into a custom element yet
+          // To load the custom element code on it, we need to connect and disconnect it to the DOM
+          // This isn't a problem, as the element will be invisible, and we know the element is already
+          // not currently connected to the DOM
+          const oldDisplay = element.style.display;
+          element.style.display = "none";
+          document.body.appendChild(element);
+          document.body.removeChild(element);
+          element.style.display = oldDisplay;
+        }
         element.setConnector(instance.connect);
       });
       return element;
@@ -162,7 +175,7 @@ const createWrapper = stripeConnect => {
           sdk: true,
           sdkOptions: {
             // This will be replaced by the npm package version when bundling
-            sdkVersion: "3.3.2-beta-1"
+            sdkVersion: "3.3.3-beta-1"
           }
         })
       }));

package/package.json

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

package/src/shared.ts

@@ -171,6 +171,22 @@ export const initStripeConnect = (
       }
 
       stripeConnectInstance.then(instance => {
+        if (!element.isConnected && !(element as any).setConnector) {
+          // If the element is not connected to the DOM and the `setConnector` method is not
+          // defined, this indicates the element was created before connect.js was loaded, and has
+          // not been transformed into a custom element yet
+
+          // To load the custom element code on it, we need to connect and disconnect it to the DOM
+          // This isn't a problem, as the element will be invisible, and we know the element is already
+          // not currently connected to the DOM
+
+          const oldDisplay = element.style.display;
+          element.style.display = "none";
+          document.body.appendChild(element);
+          document.body.removeChild(element);
+          element.style.display = oldDisplay;
+        }
+
         (element as any).setConnector((instance as any).connect);
       });