Opening I frame in react-native - reactjs

Question

I'm integrating stripe payment in react-native and wants to open an iframe with specific url from after buttton click.
Scenario : user will enter the card details, details will be given to api end point and it will return an url that will contain the authentication part like OTP. So I want that url to be opened how to do so ? Let me if is there any better way to open that authentication middleware.
Adding code below
Payment.js
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import stripe from 'tipsi-stripe';
import { doPayment } from '../api/api';
import { Auth } from './Auth';
stripe.setOptions({
publishableKey: 'pk_test_********',
});
export default class Payment extends Component {
state = {
isPaymentPending: false
}
requestPayment = () => {
this.setState({ isPaymentPending: true });
return stripe
.paymentRequestWithCardForm()
.then(stripeTokenInfo => {
return doPayment(10330, stripeTokenInfo.tokenId);
})
.then((res) => {
let url = "<iFrame src='" + res.intent_url + "' />"
console.log(res, url);
openAuthentication(url); --->>>> here i'm calling a function with url
})
.catch(error => {
console.warn('Payment failed', { error });
})
.finally(() => {
this.setState({ isPaymentPending: false });
});
};
render() {
return (
<View style={styles.container}>
<Button
title="Make a payment"
onPress={this.requestPayment}
disabled={this.state.isPaymentPending}
/>
</View>
);
}
}
openAuthentication = (url) => {
console.log("Here with props :::::::", url);
// here I want to open an iframe, i'm getting correct url, I've checked it in a static html page and it is working
<Auth url={url} />
}
const styles = {
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
};
Auth.js
import React, { Component } from 'react'
import {
View, StyleSheet
} from 'react-native'
import { WebView } from 'react-native-webview'
export default class Auth extends Component {
constructor(props) {
super(props)
console.log(props, ">>>>>>>>>>>")
}
render() {
console.log("In Auth -----------");
return (
<View style={styles.container}>
<WebView
source={{ uri: 'myUrl' }}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
})
Error:
React.createElement type is invalid, expected a string or a class/function.

Answer 1

Auth needs to be returned by a render function, otherwise nothing will show up.
So, you'll want something similar to this:
render() {
return (
<View style={styles.container}>
<Button
title="Make a payment"
onPress={this.requestPayment}
disabled={this.state.isPaymentPending}
/>
{this.state.url && (
<Auth url={this.state.url} />
)}
</View>
);
}
You only want to render auth when you have the url.
For this, you want to update your state to look something like this:
state = {
isPaymentPending: false,
url: undefined
}
And
.then((res) => {
let url = "<iFrame src='" + res.intent_url + "' />";
this.setState({ url });
})
In order to update you state with the received url when the promise resolves. This will update your state, set the url, and re-render. Because you have an url, Auth should be rendered as well.
LE:
Your Auth.js should look something like this in order to be able to display static HTML. this.props.url should be valid HTML.
render() {
console.log("In Auth -----------");
return (
<View style={styles.container}>
<WebView
source={{ html: this.props.url }}
originWhitelist={['*']}
/>
</View>
);
}