Embedded components not properly rendered with loadConnectAndInitialize instance and HTMX #217
Description
I'm trying to create a single instance of loadConnectAndInitialize and reuse it throughout the application. However, the embedded components are not rendering properly—they often appear with zero width and height. I'm using HTMX to switch between pages.
The embedded components work correctly when the page is reloaded or when a new instance is created. However, they fail to render when reusing an existing instance. I've tried storing the instance using Alpine.js state management and the window object, but neither approach works consistently. In some cases, I also encounter an error indicating that the instance has expired.
This approach does not work, only on reload to the page (not navigating to the page with HTMX):
init() {
this.container = document.getElementById('embedded-component');
this.loadStripeComponent();
this.$watch('activeInnerTab', () => this.loadStripeComponent());
},
loadStripeComponent() {
if (!window.stripeConnectInstance || !this.container) return;
this.container.innerHTML = '';
const embeddedComponent = window.stripeConnectInstance.create(
this.activeInnerTab
);
this.container.appendChild(embeddedComponent);
...
This does work, but it initializes the instance every time I visit the page:
init() {
this.container = document.getElementById('embedded-component');
this.stripeConnectInstance = loadConnectAndInitialize({
publishableKey:
'pk_test_***',
fetchClientSecret: this.fetchClientSecret,
appearance: {
overlays: 'dialog',
variables: {
colorPrimary: '#FD473C',
},
},
});
this.loadStripeComponent();
this.$watch('activeInnerTab', () => this.loadStripeComponent());
},
loadStripeComponent() {
if (!this.stripeConnectInstance || !this.container) return;
this.container.innerHTML = '';
const embeddedComponent = this.stripeConnectInstance.create(
this.activeInnerTab
);
this.container.appendChild(embeddedComponent);
...
Example of a successful embedded component:
<div id="embedded-component">
<stripe-connect-account-management>
<div style="display: block; height: calc(1352px); width: calc(0px + max(100%, 320px));">
<iframe
name="stripe-connect-ui-layer-***"
allow="camera *"
src="https://connect-js.stripe.com/ui_layer_********.html#embeddedComponent=stripe-connect-account-management&platformUrl=http%3A%2F%2Flocalhost%2Fyour-path%2F&stripe_internal_running_in_iframe=true&disableAnalytics=false&pageViewId=********"
scrolling="no"
data-testid="stripe-connect-ui-layer-stripe-connect-account-management"
aria-label="stripe-connect-ui-layer-stripe-connect-account-management"
style="display: block; height: 1360px; width: calc(8px + max(100%, 320px)); ...">
</iframe>
</div>
<div></div>
</stripe-connect-account-management>
</div>Example of a failed embedded component:
<div id="embedded-component">
<stripe-connect-account-management>
<div style="display: block;">
<iframe
name="stripe-connect-ui-layer-***"
allow="camera *"
src="https://connect-js.stripe.com/ui_layer_********.html#embeddedComponent=stripe-connect-account-management&platformUrl=http%3A%2F%2Flocalhost%2Fyour-path%2F&stripe_internal_running_in_iframe=true&disableAnalytics=false&pageViewId=********"
scrolling="no"
data-testid="stripe-connect-ui-layer-stripe-connect-account-management"
aria-label="stripe-connect-ui-layer-stripe-connect-account-management"
style="display: block; height: 1px; width: 100%; ...">
</iframe>
</div>
<div></div>
</stripe-connect-account-management>
</div>Thank you so much in advance. Let me know if you need more details.