Открытие я кадр в Реактив-родной - PullRequest
Новая
       19

Открытие я кадр в Реактив-родной

0 голосов
/ 24 марта 2020

Я интегрирую полосовой платеж в реагирующий на родину и хочу открыть iframe с указанием c URL-адреса после нажатия кнопки.

Сценарий: пользователь введет данные карты, детали будут переданы Конечная точка API, и он вернет URL, который будет содержать часть аутентификации, такую ​​как 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, ожидается строка или класс / функция.

1 Ответ

1 голос
/ 24 марта 2020

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

Вы только для рендеринга auth, когда у вас есть URL.

Для этого вы хотите обновить свое состояние, чтобы оно выглядело примерно так: 

state = {
    isPaymentPending: false,
    url: undefined
}

И 

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

Чтобы обновить ваше состояние с полученным URL, когда обещание разрешается. Это обновит ваше состояние, установит URL и выполнит повторную визуализацию. Поскольку у вас есть URL-адрес, Auth также должен отображаться.

LE:

Ваш Auth.js должен выглядеть примерно так, чтобы иметь возможность отображать stati c HTML. this.props.url должно быть действительным HTML. 

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