在 react-native 中打开 I 框架

Question

我正在 react-native 中集成条带支付，并希望在单击按钮后打开一个具有特定 url 的 iframe。

场景：用户将输入卡的详细信息，详细信息将提供给 api 端点，它会返回一个包含 OTP 等身份验证部分的 url。所以我想打开那个网址怎么做？让我看看是否有更好的方法来打开该身份验证中间件。

在下面添加代码

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,
  }
})

错误：

React.createElement 类型无效，应为字符串或类/函数。

Answer 1

Auth 需要由render 函数返回，否则什么都不会显示。

所以，你会想要类似这样的东西：

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>
    );
}

您只想在拥有 url 时呈现身份验证。

为此，您希望将状态更新为如下所示：

state = {
    isPaymentPending: false,
    url: undefined
}

和

.then((res) => {
    let url = "<iFrame src='" + res.intent_url + "' />";
    this.setState({ url });
})

为了在承诺解决时使用收到的 url 更新您的状态。这将更新您的状态、设置 url 并重新渲染。因为你有一个 url，Auth 也应该被渲染。

乐：

您的Auth.js 应该看起来像这样，以便能够显示静态 HTML。 this.props.url 应该是有效的 HTML。

render() {
    console.log("In Auth -----------");
    return (
        <View style={styles.container}>
            <WebView
                source={{ html: this.props.url }}
                originWhitelist={['*']}
            />
        </View>
    );
}