#DMFist
eager shard
tawny osprey
Hi 👋 I don't think there are limitations with putting the Payment Element in an iFrame (like there are with some of our hosted pages), though there are some extra hurdles to get some features like Apple Pay to work.
Are you encountering any specific errors when trying to mount/render the element?
glad blade
I don't see any obvious errors, just normal warnings
it makes it to this point. but never gets past the loading skeleton
to be clear, this isn't a typical iframe type use case. due to requirements, a script is appending an iframe with src="about:blank" to the page and then rendering a react app inside of it
the react app is loading the stripe elements using @stripe/react-js-stripe
tawny osprey
Okay, so it seems that the Payment Element isn't finishing loading. Did this flow work outside of an iframe?
glad blade
yes, it typically works in this app
tawny osprey
Is your test site publicly accessible?
glad blade
unfortunately no
I could maybe put a repository together that could illustrate the issue
tawny osprey
Hm, that may be helpful, I'm just not seeing any clear indicators of where a problem could be currently. It looks like the Payment Element was successfully mounted and started it's rendering, but that something it is trying to load isn't completing. Are there any outbound requests from the iframe that aren't completing successfully?
glad blade
I don't see any network errors
I do notice that outside of the iframe, when the elements render, there are more network requests going out to stripe
but I'm assuming that is probably because the payment element gets hung up before it has a chance to send those requests
could the issue be related to
- Stripe attempting to put an iframe inside of another iframe or
- The
src="about:blank"
tawny osprey
I'm not sure, I feel like if it were either of those you would see errors in the console when stripe.js tries to mount our iframe, but it looks like the iframe is getting created successfully.
glad blade
I'm not sure that it ever does put the iframe in the dom
this appears to just be a div
oh nevermind there's tons of hidden stripe iframes at the bottom of the document
tawny osprey
The one I'm thinking of wouldn't be at the bottom, it would be nested there. Maybe we display the loader before the iframe is created/inserted, sorry, I didn't realize that.
glad blade
makes sense, I probably wouldn't iframe the loader
so whatever the issue is, it is preventing that iframe from getting added to the document
tawny osprey
Yeah, I'm just not seeing any indicators of what that problem could be, have you tried adding logging to the scripts that are running to see exactly where things stop executing as expected?
glad blade
no, but I'm not sure that I can. this is what is rendering the payment element
<PaymentElement
options={{
defaultValues: {
billingDetails: {
// must pass email for Stripe Link
email: this.props.email,
}
},
fields: {
billingDetails: this.isAppleOrGooglePay() ? 'auto' : 'never',
},
wallets: {
applePay: this.supportsApplePay() ? 'auto' : 'never',
googlePay: this.supportsGooglePay() ? 'auto' : 'never',
},
}}
onChange={this.handlePaymentElementChange}
/>
is there a prop that I can pass to log out errors?
tawny osprey
I'm not sure, I'm not the most familiar with React.
fathom folio
The LoadError event may be relevant here https://stripe.com/docs/js/element/events/on_loaderror
I don't think there is a property on the element for error logging specifically though unfortunately
glad blade
maybe I can hack that into the react-stripe-js src for debugging
I'll give that a try and drop another Q if I find anything relevant. thanks for the help
fathom folio
Sounds good, good luck in your hacking!