React native web safari compatibility

[pakaplace]

Hello,

First off, thank you so much for creating and maintaining this component.

I was able to get the correct sessionId and correct Stripe public key into the component, but upon render I'm getting a completely blank off-white screen. I've searched the page elements for the stripe page html, but can't find it.

Any idea why this could be? I found a closed issue regarding permanent loading, but at least those screens showed something. https://github.com/A-Tokyo/react-native-stripe-checkout-webview/issues/10

I'm using expo start --web --https (https enabled) to test it. example url: https://localhost:4000

Thanks!

[a-tokyo]

Hey @pakaplace I am not sure why this is happening, but I have not tested the library with web.

It was only tested with react-native ios and android.

Can you check if react-native-webview works with web? If so, can you try to use the react-native-webview component out of the box? If it loads there then the issue is likely to be with this library. If not, then the issue is either on expo, rn web, or webview's side.

[a-tokyo]

@pakaplace Any updates on this?

[pakaplace]

Hi @A-Tokyo , sorry for the delay. I got it working on web with react native by substituting react-native-webview with react-native-web-webview.

It did not work with react-native-webview. It could be helpful to add this to the readme or consider a forked version for web.

[pakaplace]

@A-Tokyo , I got it working on Chrome by subbing react-native-webview with react-native-web-webview. react-native-webview does not support the web 😂

It's live at the site I'm developing- https://web.replyguy.app

However, I haven't figured out an eror specific to Safari. More info- Stack overflow issue

It appears that Safari is complaining about the react-native-web-webview attempting to change the top-level URL. In Chrome, this same redirect to the stripe URL is allowed.

I may just be configuring webview wrong. I'm not the best with cors errors :/ Any ideas?