☰

React-native ブラウザでリンクを開いてアプリに戻る 質問する

tag-icon • tag-icon javascript reactjs react-native
React-native ブラウザでリンクを開いてアプリに戻る 質問する

私はReact-Nativeで支払いのためのゲートウェイと通信するアプリを開発しています。支払いプロセス（成功または失敗）が完了したら、ユーザーにアラートを表示する必要があります。この目的のために、WebViewそしてその後、戻りのURLを取得しますonNavigationStateChange成功または失敗のメッセージが表示されます。

しかし、この流れは安全問題はデフォルトのデバイスブラウザ。

現在のコード:

const BASEURL = 'https://gatewayURL/?ID=';
let Token = null;
let paymentAccepted = null;
let paymentFactorId = null;

class Gateway extends PureComponent {
  static propTypes = {
    dispatch: PropTypes.func,
    navigation: PropTypes.any,
  }

  componentWillMount() {
    this.props.dispatch(getPaymentStatus());
  }


  _onLoad(webViewState) {
    let url = webViewState.url.toString();
    let isResponseValid = url.includes('backFromGateway');
    if(isResponseValid){
      if(this.props.checkedPaymentStatus != 'checked' ){
        setTimeout(() => {
          this.props.dispatch(setPaymentStatus('checked'));

          let splitedURL = url.split("/");
          paymentFactorId = splitedURL[splitedURL.length -2];
          if(splitedURL[splitedURL.length - 1] === '0'){
            paymentAccepted = true;
            this.props.dispatch(setGatewayResponse('done', paymentFactorId));
          }
          else {
            paymentAccepted = false;
            this.props.dispatch(setGatewayResponse('rejected', paymentFactorId));
          }


          this.props.navigation.navigate('BackFromGateway', { title: '' })
        }, 1000);
      }
    }
  }


  render() {
    const { addNewOrderGatewayToken, checkedPaymentStatus } = this.props;
    token = addNewOrderGatewayToken;
    let view = null;
    if(checkedPaymentStatus !== 'checked'){
      view =  <WebView onNavigationStateChange={this._onLoad.bind(this)} style={styles.container} source={{ uri: `${BASEURL}${token}`  }}/>
    }
    else{
      view = <View></View>
    }

    return (
      <View style={styles.container}>
        {view}
      </View>      
    );
  }
}

何かアイデアはありますか？
ありがとう

ベストアンサー1

ゲートウェイ Web サイトからコールバックを行える場合は、ディープ リンクを使用してアプリとブラウザー間のフローを処理することをお勧めします。基本的に、アプリは支払いのためにゲートウェイ Web サイトを開き、支払い結果に応じて、Web サイトはディープ リンクを使用してアプリにコールバックを行います。その後、アプリはリンクをリッスンし、必要な情報を取り出して続行します。

必要なことは次のとおりです。

アプリにディープリンクを設定します。公式ウェブサイトのガイドに従ってください（ここ）を有効にします。ここでリンク用のURLをランダムに選択します。例：gatewaylistener

ゲートウェイからアプリへの必要なコールバックを設定します。あなたの場合、成功した支払いと失敗した支払いを処理する必要があるため、2つのコールバックを追加できますgatewaylistener://success?id={paymentId}。gatewaylistener://error?id={paymentId}

最後に、アプリから Web ブラウザーをリッスンする必要があります。これを行う 1 つの方法は、ゲートウェイを開くコンポーネント内にリスナーを追加することです。

// setup
componentDidMount() {
  Linking.getInitialURL().then((url) => {
    if (url) {
      this.handleOpenURL(url)
    }
  }).catch(err => {})
  Linking.addEventListener('url', this.handleOpenURL)
}

componentWillUnmount() {
  Linking.removeEventListener('url', this.handleOpenURL)
}

// open your gateway
async openGateWay = () => {
  const { addNewOrderGatewayToken } = this.props
  const url = `${BASEURL}${addNewOrderGatewayToken}`
  const canOpen = await Linking.canOpenURL(url)
  if (canOpen) {
    this.props.dispatch(setPaymentStatus('checked'))
    Linking.openURL(url)
  }
}

// handle gateway callbacks
handleOpenURL = (url) => {
  if (isSucceedPayment(url)) { // your condition
    // handle success payment
  } else {
    // handle failure
  }
}

おすすめ記事