#fickle_pickle-webview-cardelement

1 messages · Page 1 of 1 (latest)

rain fernBOT
#

Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

formal thunder
#

We like to open new threads but I remember you from the last one, catching up on what I missed...

odd spear
#

Right now, I'm trying to work on embedding the website within an iframe of another web page

#

will update

formal thunder
#

Gotcha, so you can see the 4242 site if you point the webView directly at it, but you are getting the SSL issue if it is in an iframe within the site that 4242.io is pointing to?

odd spear
#

The opposite, I can't see the 4242 site if I point the webview directly at it

#

So they recommended that I embed the 4242 site within a page that has the 4242 site within a iframe

#

do you have any recommendations on how to do that? I've been trying a couple of things, like making a create-react-app to host it, but localhost:3000 doesn't have https so the card element doesn't work

#

fwiw, that's not the original issue that I have with my mobile app. It's an https address

formal thunder
#

I'm not as familiar with RN development, will ask my colleagues and get back to you. One thing I do know of is utilities like ngrok which will give you a lightweight public HTTPS address that redirects to your localhost

odd spear
#

hmm ok I tried a tunnel to point to the localhost and I still get the same SSL error

#

perhaps there's something with the 4242 page?

formal thunder
odd spear
#

since this webview has been able to handle other https sites

formal thunder
#

My colleague had that 4242 page working in their webviews

odd spear
#

hmm ok turning off VPN didn't help either

formal thunder
#

Hmmm I am trying to think of what this could be. Colleague also said that they were able to access 4242 just fine from the iframe when serving their webview page over localhost w/ HTTP

#

Is that screenshot from desktop browser devtools when experimenting with that page? And that error goes away when you give it other HTTPS sites?

odd spear
#

yeah React Native Debugger

#

through browser devtools

#

yeah that error isn't there when I plug in the original url

#

and turn on vpn

formal thunder
#

Is your test URL public? Would you be able to DM it to me so I can see if my colleague's RN app can load it? I would expect so but that might help us narrow this down a bit more

odd spear
#

alas it's not accessible unless you're on my company VPN :/

formal thunder
odd spear
#

Hah it works but it's hard to see

#

but I do see faintly in the corner that the zipcode field is clickable!

#

I was trying to click on the other fields and input characters, but the characters don't reach what I'm able to see

#

and I'm unable to navigate to more of the left

formal thunder
#

Gotcha, sorry, I realized that that site might be very difficult to navigate on mobile.

#

At this point, I think the best way forward would be for us to run your sample project and repro the behavior that you are seeing on our site.

odd spear
#

Alright, how do you want to do that? Have me send over the project folder over here?

#

And you're talking about the create-react-app project I made?

formal thunder
#

Yep, a zip of your folder that we can build your project from and run it for yourselves. That create-react-app project sounds like it should be fairly simple at the moment so that sounds like a good one to send.

odd spear
#

hmm looks like it's still too big

#

alright here we go, had to remove the node_modules

#

run using npm run start

formal thunder
#

Oh sorry meant to specify, can you create a ticket through https://support.stripe.com/?contact=true and DM me your email address? I can pull it to where my collegues can take a look

Stripe: Help & Support

Find help and support for Stripe. Our support site provides answers on all types of situations, including account information, charges and refunds, and subscriptions information. Get your questions answered and find international support for Stripe.

#

And we'll have to take some time to test and get back to you through the email

odd spear
#

How do I create a ticket? I just see this

#

Is it via the chat window?

formal thunder
#

Yes, if you select a topic the options should become clickable

#

Thank you, grabbed it!

surreal vine
#

@odd spear are you around?

rain fernBOT
odd spear
#

yes I am!

surreal vine
#

Great, I was looking at your ticket and also chatting with Pompey about the issue you're seeing.

You were able to click through the card element when you used the JSFiddle URL correct?

odd spear
#

Yes, kinda, just the zipcode field that was seeable

#

but it looked like it was working

surreal vine
#

Gotcha. That likely confirms that the issue is with the page you're trying to load on the webview rather than with the Stripe element itself..

I was helping Pompey reproduce the issue with a local project and didn't see similar beahvior either.

#

You mentioned the page is internal only so we can't really access it.

#

The reason we asked you to try a different page in the webview was so that we can isolate the problem.

I built a simple HTML page with an iframe that loads the card element from a different page & tested on many different combos like

1/ iOS + UIWebView (worked fine)
2/ iOS + WKWebView (worked fine)
3/ React Native + iOS + RN WebView (worked fine)

#

Since the JSFiddle link worked fine in your app, the last suspect left is the webpage that loads the card element

Do you have any modals or third-party UI/CSS frameworks that you're using on that page specifically?

odd spear
#

hmmmm ok

#

the only other thing I can think of that might affecting this

#

so the page is an aspx page, and we load a microfrontend that has the Stripe card element in there

#

Here is how the MFE gets loaded into the aspx page

<script
    type="module" async
    src="<%=GetMfeAssetUrl("index.123asd.min.js")%>"
    integrity="sha512-....==" crossorigin="anonymous"
    data-payment-options-script="">
</script>
#

that index.123asd.min.js is from a CDN

#

there aren't any modals on that page, at least in that particular flow

#

and there are also other input fields next to the stripe card element that have no problems being clicked into

surreal vine
#

Your microfrontend is rendered in an iframe correct? As card Element would be mounted in its own iframe, so its possible that other inputs on the page are being mounted differently.

So yeah your micro-frontend could be a factor, unfortunately there's no way for us to reproduce that on our end.

I'd recommend just stripping everything from the page and adding back one element/input at a time to see if that changes anything

odd spear
#

the MFE is not rendered in its own iframe

#

I think it's only the iframe within the Stripe element itself

#

You guys are using this CardElement right?

import { CardElement } from '@stripe/react-stripe-js';

surreal vine
#

yup

odd spear
#

Ok cool, just checking. Thanks so much for all y'alls help! Appreciate it a ton

#

Actually one more question

surreal vine
#

NP! 🙂 Since we're unable to reproduce it on our end, I'm unsure about the next steps.

Sure

odd spear
#

Actually never mind

#

I was gonna ask if stripe/stripe-js": "^1.47.0" not being on v2 matters, but the element comes from stripe/react-stripe-js

surreal vine
#

it shouldn't matter, yeah...

I'd recommend the same thing I did above, start with just an empty page and card element & see if that changes anything. No styling, nothing.

#

Addtionally, feel free to reach out to us if you're able to reproduce the behavior consistently with a public URL like 4242.io or JSfiddle or anything else.

#

We'd be happy to take a deeper look.

#

I'll need to step away soon but I've already grabbed your support ticket.

odd spear
#

Sounds good, thank you again!!!