在React Native Webview中提交表单

时间:2020-08-11 12:59:48

标签: javascript forms react-native webview

我要在React Native Webview中呈现PayZen提供的付款表格。

以下是该组件的代码:

const PaymentForm = ({ navigation }): ReactElement => {
  const amount = navigation.getParam('amount');
  const [formHtml, setFormHtml] = useState('');

  const [retrievePayZenData] = useMutation(RETRIEVE_PAYZEN_DATA_MUTATION);

  return (
    <View style={{ flex: 1 }}>
      {!!formHtml && (
        <WebView
          scalesPageToFit={true}
          source={{
            html: formHtml,
          }}
          originWhitelist={['*']}
          javaScriptEnabled
        />
      )}
      <Button
        title="Submit"
        onPress={async (): Promise<void> => {
          const { data } = await retrievePayZenData({
            variables: { amount: parseInt(amount, 10) },
          });
          const payZenUrl = data?.payZenData.url;
          const payZenData = data?.payZenData.data;

          const payZenResponse = await axios.post(
            payZenUrl,
            qs.stringify(payZenData),
          );

          setFormHtml(payZenResponse.data);
        }}
      />
    </View>
  );
};

单击提交后,我在发布请求的响应的数据字段中接收html,并将其显示在WebView中。这部分正常工作。

不起作用的是,当我输入付款信息并在WebView中显示的表单中单击Submit(提交)时。我看到一种加载方式,它永远不会消失,而且由于付款提供商的后台没有交易记录,因此请求似乎也没有得到处理。

Screenshot of loading modal

任何有关如何使付款表格在WebView中工作的想法都会受到赞赏。

0 个答案:

没有答案