Im using react-native-webview (v9.4.0) in a RN project (v.61.5) to display a url. First it goes to stripe oauth link, then stripe redirects to a url of my choosing.
notes:
- this redirect url works fine on my desktop browser
- the page doesnt contain much, but almost all of the page content is generated by Javascript
- when the simulator opens the webview, it does successfully navigate to the url, because the background color of the body is rendered. (iOS)
- javascript is enabled in simulator settings
- a previous version of this redirect url was working. i used fetch which made a request immediately and displayed html markup statically, and it was working without issue. now im using jquery ajax call immediately, and setting html with JS, and its not working
webview:
<WebView
style={{ height: height, width: width }}
ref={(ref) => (this.webview = ref)}
source={{ uri: this.props.stripe }}
renderError={(error) => <View style={{ flex: 1 }}><Text>{error}</Text></View>}
onError={syntheticEvent => {
const { nativeEvent } = syntheticEvent;
console.warn('WebView error: ', nativeEvent);
}}
onNavigatorStateChange={(event) => {
if (event.url !== this.props.stripeUri) {
this.webview.stopLoading();
Linking.openURL(event.url);
}
}}
javaScriptEnabled={true} //even though this is true by default
/>
Redirect Url html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body {
background-color: #454C66;
}
.container {
display: grid;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
}
.wrapper {
display:flex;
flex-direction: column;
align-items: center;
}
#status {
color: #FFFFFF;
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<h1 id="status"></h1>
<!-- Used to display progress -->
<div id="spinner" class="spinner-grow text-light"></div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
let status = document.getElementById("status");
let spinner = document.getElementById("spinner");
status.innerHTML = 'Connecting...';
const SERVER_URL = "http://localhost:5000/connect";
var STRIPE_USER_ID;
const url = new URL(document.URL)
const urlParams= new URLSearchParams(url.search)
const stripe_code = urlParams.get("code")
if( stripe_code == null ) {
status.innerHTML = "Stripe is not authorized."
spinner.style.display = "none";
} else {
$j.ajax({
url: ERVER_URL + "/complete?code=" + stripe_code,
type: 'GET',
success: function(res) {
console.log("success")
console.log(res)
spinner.style.display = 'none'
status.innerHTML = res.message
},
error: function(jqXHR, textStatus, error) {
console.log("error")
console.log(error)
spinner.style.display = 'none'
status.innerHTML = error
}
})
}
function createForm(msg) {
$("#status").html(msg);
// create form
$("h1").append("<form style='padding-left: 20%; padding-right:20%' id='form' onSubmit='return submitId()'> <div style='margin-top: 30px' class='form-group align-items-center'> <label>Paste the Id from the earlier step:</label> <input name='aflareId' class='form-control' id='some-id' type='text'> </div> <button form='form' onclick='submitId()' formmethod='post' type='button' class='btn btn-danger'>Submit</button> </form> <h5 style='text-align: center; margin-top:10px' id='progress-label'></h5>")
}
function submitId() {
spinner.style.display = "block";
$j.ajax({
url: SERVER_URL + '/link',
type: 'POST',
data: {
docId: $('#some-id').val(),
stripeId: STRIPE_USER_ID
},
success: function(res) {
console.log("success")
console.log(res)
spinner.style.display = 'none'
status.innerHTML = res.message
},
error: function(jqXHR, textStatus, error) {
console.log("error")
console.log(error)
spinner.style.display = 'none'
status.innerHTML = error
}
})
}
</script>
</body>
</html>
Webview is working but there is clearly an issue on the JS side of things, considering the first things to happen in JS are the rendering of the two html pieces. Anyone deal with this before?
As I was working in development, I was using localhost to host the server endpoint (this is the url used in the GET request on the page Stripe redirected to.
I found that for some reason, the simulator will not cooperate with the javascript on the Redirect page, even though the redirect page itself was not being hosted locally.
I changed to my production API endpoint, and all of a sudden the WebView decided it was ok with executing the JS. Really have no idea why, if someone wants to comment I can add to the answer.