react native – Stripe checkout not working in iOS internet view

I am making a native app utilizing react-native-webview that wraps a Bubble utility. When continuing to checkout in an iOS system, the display rapidly blinks like it’s loading one thing however nothing occurs.
One other level that’s value noticing is that after I open the app, I am redirected to a stripe checkout URL that opens in my browser. It doesn’t occur in an Android system.

Anticipated habits:

This course of works in an Android system. When continuing to checkout, it opens a popup the place I can enter my bank card info.

To Reproduce:

Right here is the code that i am utilizing to render the webview.

I had so as to add “userAgent” with that worth as a result of the checkout was not working in my Android system. Including the userAgent as prompt on this strackoverflow reply (https://stackoverflow.com/a/48225733/10628833) solved the issue. I believed that it is also the reason for the bug within the iOS system, however even after eradicating the userAgent prop, the habits is identical.

The onShouldStartLoadWithRequest prop was added to open exterior hyperlinks within the browser as a substitute of within the webview. I did as was prompt on this one other stackoverflow anser (https://stackoverflow.com/a/54115883/10628833) and it additionally labored appropriately. I do not suppose it’s the reason for the issue as a result of stripe shouldn’t be making an attempt to open a brand new url after I proceed to checkout, it ought to simply open a popup. In my android system, when debugging the perform on this prop, the perform will not be referred to as when I attempt to checkout.

import React from 'react';
import {WebView} from 'react-native-webview';
import {
  ActivityIndicator,
  Linking,
  StyleSheet,
  View,
  Platform,
} from 'react-native';
import useDoubleBackToClose from './useDoubleBackToClose';

export default perform App() {
  const URI = "my uri";

  useDoubleBackToClose('Aperte duas vezes para sair');

  const renderLoading = () => {
    return (
      <View model={kinds.loadingContainer}>
        <ActivityIndicator dimension="giant" shade="#36CD72" />
      </View>
    );
  };

  return (
    <WebView
      setBuiltInZoomControls={false}
      geolocationEnabled
      startInLoadingState
      renderLoading={renderLoading}
      userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 13_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Cellular/15E148"
      supply={{uri: URI}}
      onShouldStartLoadWithRequest={request => {
        if (request.url !== URI) {
          Linking.openURL(request.url);
          return false;
        }
        return true;
      }}
    />
  );
}

const kinds = StyleSheet.create({
  loadingContainer: {
    show: 'flex',
    justifyContent: 'middle',
    alignItems: 'middle',
    backgroundColor: '#292929',
    peak: '100%',
  },
});

Does anybody have an thought of why it may be engaged on android however not on iOS?